jQuery要素の操作とイベントバインディング

1. 要素の属性を操作します:

①attr reads: ("selector").attr("attribute name"); =>getAttribute("attribute name"); name") "); =>getAttribute("属性名"); 変更: ("セレクター").attr("属性名", 値); =>setAttribute("属性名", 値);開始タグに存在する prop 属性。例: selected、selected、disabled)

② prop は次のようになります: ("selector").prop ("property name");変更: ("セレクター") .prop("プロパティ名"); =>elem.プロパティ名; 変更: ("セレクター").prop("プロパティ名", 値); ③属性を削除: $("セレクター").removeAttr( "属性名"); =>removeAttribute("属性名");

2.操作要素の内容：

①html原文：read:("selector").html(); =>elem.innerHTML; 変更: ("セレクター").html(); =>elem.innerHTML; 変更: ("セレクター").html("html フラグメント"); ; 要素のクリア: $("selector ").empty(); =>elem.innerHTML="";

②プレーンテキスト: read: ("selector").text(); =>elem.textContent/innerText; : ("selector").text(); =>elem.textContent/innerText;

③フォーム要素の値: ("selector") .val(); change: ( "selector").val();

3. 操作要素のスタイル: ("selector ").css("CSS 属性名"); =>getComputedStyle(); ("セレクター").css("CSS プロパティ名"); =>getComputedStyle(); ("セレクター").css("CSS プロパティname", value); => elem.style.CSS 属性名 = 値; 複数の属性値を同時に変更: $("selector").css({属性名 1: 値 1, 属性名 2: value 2,...}); * (css ( ) はすべての属性を読み取ることができますが、変更できるのはインライン スタイルだけであり、属性名はハッシュ化されていなければなりません); ② クラス属性を変更します。 : ("セレクター").attr("クラス"," クラス名"); b. 追加: ("セレクター").attr("クラス"); .addClass("クラス名"); c. 削除: ("セレクター").removeClass("クラス名"); "selector").attr("class","" ); または ("selector").removeClass(); e. 以下が含まれているかどうかを確認します。 ("selector").hasClass("class name"); f 、指定されたクラス名の有無を切り替えます: $("selector").toggleClass("class name");

4. ①親要素の取得：$("selector").parent( ); =>elem.parentNode;

②兄弟要素の取得：next Brother ("selector").next([selector]); elem.nextElementSibling; 前の兄弟: ("selector" ).next([selector]); =>elem.nextElementSibling; 前の兄弟: ("selector").prev([selector]); : $("selector").siblings( [selector]);

③子要素: 直接の子要素: ("selector").children([selector]); すべての子要素: ("selector").children([ selector]); すべての子要素 ​​("selector").find(selector); * (find() はセレクターを追加する必要があります); ①ノードを作成します: var elem=elem= ("HTML 要素のコードを完成させます)セグメント");

②追加: 親の下にあるすべての子ノードの末尾に追加: (親).append((親).append(elem); 親の最初の子ノードとして挿入: (親).prepend(( parent).prepend(elem); 子の後に挿入: (child).after((child).after(elem); 子の前に挿入: (child).before((child).before(elem);

6.その他の操作:​​

①削除: $(削除する要素).remove();

②置換: (old).replaceWith(new element) or (new element); replaceAll (old);

③コピー: var clone=clone=(“selector”).clone([true]);* (true: ディープクローン作成用のイベント処理機能を含む);

7. イベントバインディングバインド:

7. ①$(...).bind("イベント名", fn)=>addEventListener; 複数の関数オブジェクトを同じ要素のイベント処理関数にバインドする

②$(...).unbind("イベント名", fn) =>removeEventListener; イベント ハンドラー関数を削除できる場合は、バインドするときに実名関数を使用する必要があり、匿名関数は使用できません。オーバーロード: a、パラメーターなし: すべてのイベント ハンドラーを削除します。 b. 要素上の関数バインディング b. イベント名パラメータが 1 つだけの場合: 要素上の指定されたイベント名にバインドされているすべての関数オブジェクトを削除します。イベント要素;

8. イベントバインディングデリゲート:

①イベントプロキシ: 指定された親要素の下にあるすべての修飾された子要素にイベント処理関数の使用を許可します (生成を含む)。 b. ターゲット要素を取得します。 c. 条件を満たす要素のイベントのみに応答します。

②イベントプロキシの使用：イベントを親にバインド（バブリングを使用）、セレクターの条件を満たす要素のみがイベントに応答できます; (parent).delegate("selector", "イベント名", function(e)e .target); バインディングを削除します: (親).delegate("セレクター", "イベント名", function(e)e.target); バインディングを削除します: (親).undelegate("セレクター", "イベント名" ", function(e){e.target});

9. その他のバインディング:

① ワンタイムイベント: $(...).one("イベント名", fn);一度実行され、実行後に自動的に解放されます

② 要素のすべてのイベントをドキュメントにバインドします: (...).live("イベント名", fn); ); (...). die("イベント名", fn);

③イベント処理関数を$("target").on("イベント名", fn);

④使用します。バブリング: $(" 親").on("イベント名", "セレクター", fn); バインド解除