dom ノードでの jquery の操作 [推奨]_jquery

1. JavaScript スクリプトはどこに配置すればよいですか?

1. 一部の関数を実行前に呼び出す必要がある場合、または一部のイベントを実行前にトリガーする必要がある場合、スクリプトを HTML の先頭部分に配置して、スクリプトが実行される前にロードされるようにすることができます。電話。

2. ページが読み込まれるときに、実行されるスクリプトを HTML の本文部分に配置できます。このタイプのスクリプトは通常、ページのコンテンツを生成するために使用されます。

3. ページが読み込まれた直後に実行する必要があるスクリプトについては、スクリプトを最後に配置し、ドキュメントが読み込まれた後に実行できます。幸いなことに、Jquery にはイベント制御があるため、この部分では head によって参照される外部ファイルをダウンロードできます。

2. jqueryの共通関数

例:children()、parent()、each()、text()、html()、val()、next();

<ul class="level-1"> 

<li class="item-i">I</li> 

<li class="item-ii">II 

<ul class="level-2"> 

<li class="item-a">A</li> 

<li class="item-b">B 

<ul class="level-3"> 

<li class="item-1">1</li> 

<li class="item-2">2</li> 

<li class="item-3">3</li> 

</ul> 

</li> 

<li class="item-c">C</li> 

</ul> 

</li> 

<li class="item-iii">III</li> 

</ul>

あ、子供たち()

DOM ツリーを走査し、指定された要素の直接の子ノードを検索します。このメソッドは DOM ツリーの 1 つ下のレベルのみを走査します。

// jquery 

$('ul.level-2').children().css('background-color', 'red'); 

$('ul.level-2').children('.item-*').css('background-color', 'red');

b、親()

DOM ツリーを上方向にトラバースして、指定された各要素の直接の親要素を検索します。この走査範囲は、1 つのレベルを走査する Children() 関数と同じです。

$('li.item-a').parent().css('background-color', 'red');

c,each()

コレクション内の各要素をループします。

//数组的遍历 

var arr = ["Test1", "Test2", "Test3"]; 

$.each(arr, function (i, item) { 

alert(i); 

alert(item); 

}); //二维数组的遍历 

var arr = [ 

["Test1", "Test2", "Test3"], 

["Test4", "Test5", "Test6"], 

["Test7", "Test8", "Test9"] 

]; 

$.each(arr, function (i, item) { 

alert(i); 

alert(item); 

}); //遍历json数据 

var obj = { "1": "Test1", "2": "Test2", "3": "Test3", "4": "Test4", "5": "Test5", "6": "Test6" }; 

$.each(obj, function (i, item) { 

alert(i); 

alert(item); 

});

4. text() 関数

text() は、指定された要素のテキスト コンテンツにアクセスするために使用される jquery オブジェクトのメソッドです。指定された要素のテキスト コンテンツを結合し、文字列として返します。割り当てに使用できます。

5.html()関数

指定された要素の最初の要素から HTML コンテンツを取得し、文字列として返します。割り当てに使用できます。

違い: text() 関数と html() 関数の違い

違い 1: text() 関数は XML ドキュメントと HTML ドキュメントに使用できますが、html() 関数は HTML ドキュメントにのみ使用できます。

違い 2: html() 関数はテキストを表示するだけでなく、タグのペアとテキストも出力しますが、text() 関数はテキストのみを持ちます。

6. val()関数

選択した要素の値を返すか設定します。要素の値は value 属性を通じて設定されます。このメソッドは主に入力要素に使用されます。このメソッドがパラメータを設定しない場合は、選択した要素の現在の値を返します。

7. next() 関数 一致する要素セット内の各要素の隣接する兄弟要素を取得します。セレクターが指定されている場合は、セレクターに一致する次の兄弟要素を取得します。

3. ドムの操作

例: prepend()、prependTo()、clone()、append()、appendTo()、before()、insertBefore()、after()、insertAfter()、remove()、detach()、 empty () 、 replaceWith() 、 replaceAll() 、wrap() 、wrapAll() 、 warpInner()

上記の dom ノードでの jquery 操作 [推奨] は、エディターによって共有されたすべての内容です。参考にしていただければ幸いです。また、Script Home をサポートしていただければ幸いです。