Dom:
属性:
$("p").addClass(css で定義されたスタイル タイプ); 要素にスタイルを追加します
$("img").attr({src :" test.jpg",alt:"test Image"}); 要素に属性/値を追加します。パラメータはmap
$("img").attr("src","test.jpg")です。 ; 要素に属性/値を追加
$("img").attr("title", function() { return this.src }); 要素に属性/値を追加
$ (" 要素名").html(); 要素
$("要素名").html("新しいもの") 内のコンテンツ (要素、テキストなど) を取得します。要素の設定を行う Content
$("要素名").removeAttr("属性名") 指定された属性と属性の値を要素から削除する
$("要素名").removeClass( "class") 要素に与えます 要素は指定されたスタイルを削除します
$("要素名").text(); 要素のテキストを取得します
$("要素名").text(value ); 要素のテキスト値を値
$("要素名").toggleClass(class) に設定します。要素がパラメータのスタイルに存在する場合は、このスタイルを設定します。
$("入力要素名").val(); 入力の取得 要素
$("入力要素名").val(value) の値は、入力要素の値を
操作に設定します。 :
$("要素名").after(content); 要素の後にコンテンツを追加
$("要素名").append(content); element
$("要素名").appendTo(content); コンテンツ内 続いて要素
$("要素名").before(content); Name").clone(ブール式) ブール式がtrueの場合、要素を複製します(パラメータが無い場合はtrueとして扱われます)
$("要素名").empty() 内容を設定します要素の内容を空にします
$("要素名").insertAfter(content); 要素の内容を空に設定します 要素を内容の後に挿入します
$("要素名").insertBefore(content);コンテンツの前に要素を挿入します
$("element").prepend(content); コンテンツを要素の一部にし、要素の前に置きます
$("element").prependTo(content) ; この要素をコンテンツの一部として扱い、コンテンツの先頭に置きます
$("element").remove(); 指定された要素をすべて削除します
$("element").remove("exp "); exp を含む要素をすべて削除
$("element").wrap("html"); 要素を html で囲む Element
$("Element").wrap(element); 要素を使って囲みます要素
のトラバース:
add(expr)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next (expr)
not(el)
not(expr)
not(elems)
parent(expr)
parents(expr)
prev(expr)
siblings( expr)
コア:
$(html).appendTo( "body") は、body
$(elems) に HTML コードを記述して、DOM
$(function(){……..}); 関数を実行するのと同じです。 🎜>$("div > p").css("border", "1px ソリッド グレー"); すべての div の子ノード p を検索し、スタイルを追加します
$("input:radio", document.forms[ 0]) 現在のページの最初のフォームにあるラジオ ボタンをすべて検索します。
$.extend(prop) prop は jQuery オブジェクトです。
例:
jQuery.extend({
min: function( a, b) { return a max: function(a, b) { return a > b ? : b;
}); , [context] ) ---$(expression, [context]); デフォルトでは、$() はドキュメント内の現在の HTML DOM 要素をクエリします。
each( callback ) は、一致した各要素をコンテキストとして使用して関数を実行します。
例: 1
$("span").click(function){
$("li " ).each(function(){
$(this).toggleClass("example");
})
});
例: 2
$("ボタン" ) .click(function () {
$("div").each(function (index, domEle) {
// domEle == これ
$(domEle).css("backgroundColor", " yellow");
if ($(this).is("#stop")) {
$("span").text("div インデックス #" インデックスで停止しました);
return false ;
}
});
jQuery イベント:
$(document).ready();本体に onload イベントがない場合、関数は実行できません。各ページでは
多くの関数をロードして実行でき、fn の順序で実行されます。
bind( type, [data], fn ) は、1 つ以上のイベント ハンドラー関数を、一致する各要素の特定のイベント (クリックなど) にバインドします。可能なイベント属性は次のとおりです:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、
mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、
keyup, error
one( type, [data], fn ) 1 つ以上のイベント ハンドラー関数を、一致する各要素の特定のイベント (クリックなど) にバインドします。このイベント ハンドラーは、各
オブジェクトで 1 回だけ実行されます。その他のルールはbind()関数と同じです。
trigger( type, [data] ) は、一致する各要素で特定のタイプのイベントをトリガーします。
triggerHandler( type, [data] ) この特定のメソッドは、要素で特定のイベントをトリガーし (イベント タイプを指定)、このイベントに対するブラウザのデフォルト アクションをキャンセルします。
unbind( [type], [ data] ) バインドを解除し、一致する各要素からバインドされたイベントを削除します。
$("p").unbind() はすべての段落のすべてのバインドされたイベントを削除します
$("p").unbind( "click" ) はすべての段落のクリック イベントを削除します
hover(over, out ) Over と out はどちらのメソッドでも、マウスが一致する要素上に移動すると、最初に指定された関数がトリガーされます。マウスがこの要素の外に出ると、指定された 2 番目の関数がトリガーされます。
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this) .addClass("out");
}
);
toggle( fn, fn ) 同じ要素が再度クリックされると、指定された最初の関数がトリガーされます。要素を指定すると、指定された 2 番目の関数がトリガーされます。
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this) .removeClass("selected");
}
);
要素イベント リストの説明
注: パラメーターのない関数、そのパラメーターはオプションですfn. jQuery は form 要素のリセット イベントをサポートしていません。
イベントの説明は要素またはオブジェクトをサポートします。
blur( ) 要素はフォーカスを失います。 a、input、textarea、button、select、label、map、area
change( ) ユーザーはフィールドの内容を変更します。 textarea, select
click( ) オブジェクトのほぼすべての要素をマウスでクリック
dblclick( ) オブジェクトのほぼすべての要素をマウスでダブルクリック
error( ) document または image window, img
focus ( ) 要素がフォーカスを取得します a、input、textarea、button、select、label、map、area
keydown( ) 特定のキーボードのキーが押されました ほぼすべての要素
keypress ( ) 特定のキーボードのキーが押された ほぼすべての要素
keyup( ) 特定のキーボードのキーが放された ほぼすべての要素
load( fn ) 特定のページまたは画像が読み込まれました window、img
Mousedown( fn ) Some ほぼすべての要素上でマウス ボタンが押されました
mousemove( fn ) ほぼすべての要素上でマウスが移動されました
mouseout( fn ) ほぼすべての要素上の要素からマウスが移動されました
Mouseover( fn ) マウスが要素上で移動されます。 要素の上にあるほとんどすべての要素
mouseup( fn ) マウス ボタンが離されます。 ほぼすべての要素
resize( fn ) ウィンドウまたはフレームのサイズが変更されます window、iframe、frame
scroll( fn ) ドキュメントをスクロールします 表示されている部分がウィンドウの場合
select( ) テキストが選択されています document、input、textarea
submit( ) 送信ボタンがクリックされたフォーム
unload( fn )ユーザーがページ ウィンドウを終了します
JQuery Ajax メソッドの説明:
load( url, [data], [callback] ) リモート HTML コンテンツを DOM ノードにロードします。
$("#feeds").load("feeds.html"); feeds.html ファイルをフィードの ID を持つ div にロードします。
$("#feeds").load("feeds. php", {limit: 25}, function(){
alert("フィードの最後の 25 エントリがロードされました");
});
jQuery.get( url, [data]、[callback] ) GET を使用してページをリクエストします。
$.get("test.cgi", { 名前: "ジョン", 時刻: "午後 2 時" }, function(data){
alert("ロードされたデータ: " data);
}) ;
jQuery.getJSON( url, [data], [callback] ) GET を使用して JSON データをリクエストします。
$.getJSON("test.js", { 名前: "ジョン", 時刻: "午後 2 時" }, function(json){
alert("JSON データ: " json.users[3].name );
});
jQuery.getScript( url, [callback] ) GET を使用して JavaScript ファイルをリクエストし、実行します。
$.getScript("test.js", function(){
alert("スクリプトがロードされ、実行されました。");
});
jQuery.post( url, [data], [callback]、[type] ) POST を使用してページをリクエストします。
ajaxComplete( callback ) AJAX リクエストの終了時に関数を実行します。これは Ajax イベントです
$("#msg").ajaxComplete(function(request, settings){
$(this).append("
Request Complete.");
});
ajaxError( callback ) AJAX リクエストが失敗した場合、関数を実行します。これは Ajax イベントです
$("#msg").ajaxError(function(request, settings){
$(this).append("
ページ " settings.url " のリクエスト中にエラーが発生しました");
});
ajaxSend( callback ) AJAX リクエスト送信時に関数を実行します。これは Ajax イベントです
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("
"});
ajaxStart( callback ) AJAX リクエストが開始されてもまだアクティブになっていないときに関数を実行します。これは Ajax イベントです
AJAX リクエストが開始されたとき (まだアクティブ化されていないとき)、読み込み情報を表示します
$("#loading").ajaxStart(function(){
$(this).show( ) ;
});
ajaxStop( callback ) すべての AJAX が停止したときに関数を実行します。これは Ajax イベントです
すべての AJAX リクエストが停止したときに読み込み情報を非表示にします。
$("#loading").ajaxStop(function(){
$(this).hide();
});
ajaxSuccess( callback ) AJAX リクエストが成功しました 完了したら、関数を実行します。これは Ajax イベントです
AJAX リクエストが正常に完了したときに情報を表示します。
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("
リクエストが成功しました!");
}) ;
jQuery.ajaxSetup( options ) すべての AJAX リクエストのグローバル設定を行います。すべてのオプション情報を取得するには、$.ajax 関数を参照してください。
デフォルトのグローバル AJAX リクエスト オプションを設定します。
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
}); myData });
serialize() は、入力要素のセットを名前と値で連結します。フォーム要素の正しいシーケンスを実装しました。
function showValues() {
var str = $("form").serialize();
$("#results").text(str); > }
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
serializeArray ( ) はすべてのフォームとフォーム要素を連結します (.serialize() メソッドと同様) が、JSON データ形式を返します。
フォームから一連の値を取得して表示します。
function showValues() {
var field = $(":input").serializeArray();
alert(fields);
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value " ") ;
});
$(":checkbox, :radio").click(showValues);
$("select").change(showValues); );
JQuery Effects メソッドの説明
show() 非表示の一致要素を表示します。
show(speed, [callback]) は、一致するすべての要素をエレガントなアニメーションで表示し、表示が完了したときにオプションでコールバック関数をトリガーします。
hide( ) は、一致する要素をすべて非表示にします。
hide(speed, [callback] ) エレガントなアニメーションで一致する要素をすべて非表示にし、表示が完了した後にオプションでコールバック関数をトリガーします。
toggle( ) 要素の表示状態を切り替えます。要素が表示されている場合は非表示に切り替えられ、要素が非表示になっている場合は
によって表示に切り替えられます。
slideDown(speed, [callback] ) は、高さの変更 (下方向に増加) を通じて、一致するすべての要素を動的に表示し、表示の完了後にオプションでコールバック関数
をトリガーします。このアニメーション効果は要素の高さのみを調整し、一致する要素を
「スライド」方式で表示できるようにします。
slideUp(speed, [callback] ) は、高さを変更 (上向きに減少) することで、一致するすべての要素を動的に非表示にし、オプションで
非表示の完了後にコールバック関数をトリガーします。このアニメーション効果は要素の高さを調整するだけで、一致する要素を「スライド」
方式で非表示にすることができます。
slideToggle(speed, [callback] ) は、高さの変更によって一致するすべての要素の表示を切り替え、オプションで切り替えが完了したときにコールバック関数をトリガーします。 このアニメーション効果は要素の高さを調整するだけで、一致する要素を「スライド」方式で非表示にしたり表示したりできます。
fadeIn(speed, [callback] ) は、不透明度を変更することで一致するすべての要素をフェードインし、オプションでアニメーションの完了後にコールバック関数をトリガーします。 このアニメーションは要素の不透明度のみを調整します。つまり、一致するすべての要素の
高さと幅は変更されません。
fadeOut(speed, [callback] ) は、不透明度を変更することで一致するすべての要素をフェードアウトし、オプションでアニメーションの完了後にコールバック関数をトリガーします。 このアニメーションは要素の不透明度のみを調整します。つまり、一致するすべての要素の
高さと幅は変更されません。
fadeTo(speed, opacity, [callback] ) は、一致するすべての要素の不透明度を指定された不透明度に段階的に調整し、オプションでアニメーションの完了後にコールバック関数をトリガーします
。 このアニメーションは要素の不透明度のみを調整します。つまり、一致するすべての
要素の高さと幅は変更されません。
stop( ) は、一致するすべての要素の現在実行中のアニメーションを停止します。キューにアニメーションがある場合は、すぐに開始されます。
queue() 最初に一致した要素のアニメーション シーケンスへの参照を取得します (内容が関数である配列を返します)
queue(callback) 一致した各要素のイベント シーケンスの最後に実行可能関数を追加しますこの要素のイベント関数
queue( queue ) は、一致するすべての要素の元のアニメーション シーケンスを新しいアニメーション シーケンスに置き換えます
dequeue( ) が実行され、アニメーション シーケンスの先頭にあるアニメーションが削除されます
animate( params, [duration ], [easing], [callback] ) カスタム アニメーションを作成するための関数。
animate( params, options ) カスタム アニメーションを作成する別の方法。機能は上記と同じです。
JQuery Traversing メソッドの説明
eq(index) 一致した要素コレクションから指定された位置にある要素を取得します。インデックスは 0 から始まります
filter(expr) 指定された値を返します式に一致する要素のセットは、「,」で区切って複数の expr を区切ることができます。これは、複数の条件フィルタリングを実装するために使用されます。
filter(fn) は、特殊な関数をフィルタリング条件として使用して、一致しない要素を削除します。セット。
is(expr) は、式を使用して現在選択されている要素のセットを確認し、少なくとも 1 つの要素が指定された
式と一致する場合に true を返します。
map(callback) は、コールバック メソッドを使用して jQuery オブジェクト内の一連の要素をその値に変換し、それらを jQuery 配列に追加します。
not(expr) 指定された式に一致する要素を、一致した要素のセットから削除します。
slice(start, [end]) 配列の組み込みスライス メソッドと同じように、一致する要素のセットからサブセットを取得します。
add(expr) は、式に一致する要素を jQuery オブジェクトに追加します。
children( [expr] ) 一致した要素セット内の各要素のすべての子要素を含む要素セットを取得します。オプションのフィルター
を使用すると、このメソッドは一致する要素 (テキスト ノードではなく要素ノードのみ) のみと一致します。
contents() は、一致する要素セット内の各要素のすべての子孫ノードを含むセットを取得します (
テキスト ノードを除く要素ノードのみが含まれます)。要素が iframe の場合は、ドキュメント要素
を取得します。 find(expr) は、指定された式に一致するすべての要素を検索します。
next( [expr] ) 一致した要素セット内の各要素の直後の兄弟要素を含む要素セットを取得します。
nextAll( [expr] ) 一致した要素セット内の各要素の後続の兄弟要素をすべて含む要素セットを取得します。
parent( [expr] ) 一致するすべての要素の一意の親要素を含む要素を取得します。 。
parents( [expr] ) 一致するすべての要素 (ルート要素を除く) の一意の祖先要素を含む要素のセットを取得します。
prev([expr]) 一致した要素セット内の各要素の直前の兄弟要素を含む要素セットを取得します。
prevAll( [expr] ) 一致した要素セット内の各要素の前のすべての兄弟要素を含む要素セットを取得します。
siblings( [expr] ) 一致する要素セット内の各要素のすべての兄弟要素を含む要素セットを取得します。
andSelf() 以前の一致する要素セットを現在のセットに追加します。
すべての div 要素とその中の p 要素を取得し、border クラス属性を追加します。すべての div 要素の p 要素を取得し、
背景クラス属性を追加します
$("div").find("p").andSelf().addClass("border"); div").find("p").addClass("background");
end( ) は現在の操作を終了し、現在の操作
の前の操作に戻り、すべての中からスパン要素のセットを見つけます。次に、p 要素のコレクションを返し、css 属性
$("p").find("span").end().css("border", "2px red Solid"); を追加します。 >
JQuery セレクター メソッドの説明
基本セレクター
$("#myDiv") は、この ID 値を持つ唯一の要素と一致します
$("div") は、指定された名前を持つすべての要素と一致します
$ (".myClass") は、このクラス スタイル値を持つすべての要素に一致します
$("*") はすべての要素に一致します
$("div,span,p.myClass") は、一致するすべてのセレクターを結合します
カスケードセレクター
$("form input") 子孫セレクター、祖先のすべての子孫ノードを選択します
$("#main > *") 子セレクター、親のすべての子ノードを選択します
$ (" label input") 近接セレクター、prev
$ の次の近接ノードを選択します ("#prev ~ div") 兄弟セレクター、prev
のすべての兄弟ノードを選択します
基本フィルター セレクター
$ ("tr:first ") は最初に選択された要素と一致します
$("tr:last") は最後に選択された要素と一致します
$("input:not(:checked) span") (元の要素から) コレクション内のすべての要素をフィルターで除外しますセレクターに一致するもの (ここには一時的なセレクターがあります)
$("tr:even") コレクション内の偶数位置にあるすべての要素に一致します (0 から始まります)
$("tr: odd") はすべてに一致しますセット内の奇数の位置にある要素 (0 から開始)
$("td:eq(2)") は、セット内の指定された位置にある要素 (0 から開始) と一致します
$("td: gt( 4)") セット内の指定された位置より後のすべての要素と一致します (0 から開始します)
$("td:gl(4)") セット内の指定された位置より前のすべての要素と一致します (0 から開始します)
$(":header") はすべてのヘッダーに一致します
$("div:animated") は実行中のアニメーションを持つすべての要素に一致します
コンテンツ フィルター セレクター
$("div:contains('John' )")指定されたテキストを含むすべての要素に一致します
$("td:empty") すべての空の要素に一致します (テキストのみを含む要素は空の要素としてカウントされません)
$("div:has(p)") すべてに一致します元の要素セットからのセレクターを少なくとも 1 つ含む要素を再度設定します
$("td:parent") 空ではないすべての要素に一致します (テキストを含む要素もカウントされます)
$("div:hidden ") が一致します形式の隠しフィールドを含むすべての非表示要素
$("div:visible") はすべての表示要素と一致します
属性フィルター セレクター
$("div[id]") は指定された属性を持つすべての要素と一致します
$("input[name='newsletter']") 指定された属性値を持つすべての要素と一致します。
$("input[name!='newsletter']") 指定された属性値を持たないすべての要素と一致します。指定された属性値
$("input[name^='news']") 値
$("input[name$='letter']") で始まる指定された属性値を持つすべての要素に一致します すべてに一致します指定された属性値が値
$("input[name*='man']") で終わる要素 指定された属性値に値文字
$("input[id][name$ =') が含まれるすべての要素と一致しますman']") は、同時に複数のセレクターに一致するすべての要素に一致します。
子要素フィルター セレクター
$("ul li:nth-child(2)"),
$("ul li: nth-child(odd)")、親要素の n 番目の子要素と一致します
$("ul li:nth-child(3n 1)")
$("div span:first - child") は親要素の最初の子要素と一致します
$("div span:last-child") は親要素の最後の子要素と一致します
$("div button:only-child") は一致します親要素
フォーム要素セレクターの唯一の子要素
$(":input") は、すべてのタイプの入力、テキストエリア、選択、ボタンを含むすべてのフォーム入力要素と一致します
$(":text " ) テキスト型のすべての入力要素と一致します
$(":password") パスワード型のすべての入力要素と一致します
$(":radio") ラジオ型のすべての入力要素と一致します
$( ": checkbox") タイプのすべての入力要素に一致します checkbox
$(":submit") タイプのすべての入力要素に一致します submit
$(":image") タイプのすべての入力要素に一致します image
$(" :reset") はリセット タイプのすべての入力要素に一致します
$(":button") はボタン タイプのすべての入力要素に一致します
$(":file") はファイル タイプのすべての入力要素に一致します 入力要素
$(":hidden") は、非表示タイプのすべての入力要素またはフォームの非表示フィールドに一致します
フォーム要素フィルター セレクター
$(":enabled") は、すべての操作可能なフォームに一致します Element
$(": disabled") は、操作できないすべてのフォーム要素に一致します
$(":checked") は、選択されたすべての要素に一致します
$("select option:selected") は、選択されたすべての要素に一致します 選択された要素
JQuery CSS メソッドの説明
css( name ) 最初に一致した要素のスタイル プロパティにアクセスします。
css(properties ) 「名前と値のペア」オブジェクトを、一致するすべての要素のスタイル プロパティとして設定します。
$("p").hover(function () {
$(this).css({ backgroundColor:" yellow", fontWeight:"bolder" });
}, function () {
var cssObj = {
backgroundColor: "#ddd",
fontWeight: "",
color: "#0028f4"
}
$(this).css(cssObj) ;
});
css( name, value ) 一致するすべての要素にスタイル属性の値を設定します。
offset( ) は、現在のビジュアル ウィンドウを基準とした最初に一致した要素の位置を取得します。返されるオブジェクトには
top と left の 2 つの属性があり、属性値は整数です。この関数は、表示されている要素に対してのみ使用できます。
var p = $("p:last");
var offset = p.offset();
p.html( "left: " offset.left ", top: " offset.top ) ;
width( ) は、現在の最初に一致する要素の幅の値を取得し、
width( val ) は、一致する各要素に指定された幅の値を設定します。
height( ) は、現在最初に一致する要素の高さの値を取得し、
height( val ) は、一致する各要素に指定された高さの値を設定します。
JQuery Utilities メソッドの説明
jQuery.browser
.msie は、つまり、
jQuery.browser.version はユーザーのブラウザのバージョン情報を読み取ります。
jQuery.boxModel はユーザーのブラウザを検出します。現在のページの表示が W3C CSS ボックス モデルに基づいているかどうか
jQuery.isFunction( obj ) は、渡されたパラメーターが関数であるかどうかを確認します
function stub() { }
var objs = [
関数 () { },
{ x:15, y:20 },
null,
スタブ,
"関数"
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$("span:eq( " i ")").text(isFunc);
jQuery.trim ( str ) 文字列の両端から空白を削除します。正規表現を使用して、指定された文字の両端から空白を削除します。
jQuery.each( object, callback ) 使用できる汎用イテレータです。オブジェクトと配列をシームレスに反復するための
jQuery.extend( target, object1, [objectN] ) は、オブジェクトを拡張し、元のオブジェクトを変更して返します。これは、継承を実装するための強力な
ツールです。 JavaScript の
プロトタイプ チェーン メソッドの代わりに値を渡します。
設定オブジェクトとオプション オブジェクトをマージし、変更された設定オブジェクトを返します。
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
デフォルト オブジェクトとオプション オブジェクトをマージします。デフォルト オブジェクトは変更されていません。 options オブジェクトの値
は、defaults オブジェクトの値の代わりに空に渡されます。
var 空 = {}
var デフォルト = { 検証: false、制限: 5、名前: "foo" };
var オプション = { 検証: true、名前: "bar" } ;
var settings = $.extend(empty,defaults,options);
jQuery.grep(array, callback, [invert] ) フィルター関数を使用して配列内の項目を削除します
$.grep( [0,1,2], function(n,i){
return n > 0;
});
jQuery.makeArray( obj) 配列のようなオブジェクトを実数の配列に変換します。 >選択した div 要素のセットを配列に変換します
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // dom のリストに対して Array メソッドを使用します。 elements
$(arr).appendTo(document.body);
jQuery.map( array, callback ) メソッドを使用して配列内の項目を変更し、新しい配列を返します
jQuery .inArray( value, array) 配列内の value の位置を返します。見つからない場合は、-1 を返します。
jQuery.unique(array) 配列内のすべての重複要素を削除し、ソートされた配列を返します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
