jQuery レッスン 2: パケット要素 Code_jquery の操作

例:

コードをコピー コードは次のとおりです:

$ は、p 要素のラッピング要素を作成します。このラッピング要素は、上記のセレクターを使用して選択された要素と同じです。 jQuery のいくつかのメソッドを呼び出し、最後に appendTo (後述) を使用して要素を div に移動することもできます。最終結果は次のようになります:

以下では、パッケージ化セットで動作する関数を紹介します。

1. html(),html(text)。最初の関数はパッケージング セット

内の最初の

要素内の html を返し、2 番目の関数はパッケージング セット内のすべての

を返します。内部の HTML はテキストに設定されます。 2.size()。ラップされたセットに含まれる要素を返します。 3.get()、get(n)。最初の関数はラップされたコレクション内の HTML 要素を JavaScript 配列として返し、2 番目の関数は n 番目の HTML 要素を返します。

4.index(elem) パッケージングセット内の渡された HTML 要素 elem の位置を返します。パッケージング セットに含まれていない場合は、-1 を返します。

5.add(s)、add(elem)、add(array) 関数はパッケージング セットに要素を追加するために使用されます。セレクターの場合は、選択されたすべての要素が追加されます。HTML フラグメントの場合は、このフラグメントに基づいて HTML 要素が作成され、HTML 要素または HTML 要素の配列の場合は追加されます。直接。

6. not(expression),filter(expression) これらの 2 つの関数は、パッケージング セットの要素をフィルターするために使用されます。式には、文字列 (セレクター)、HTML 要素、または要素の配列を指定できます。 not 関数は、セレクターに一致する要素、または配列に含まれる要素を削除します。一方、フィルターは、配列に含まれるセレクターまたは要素に一致する要素を残します。

7.slice(begin,end) この関数は、新しいパッケージング セットを返します。その内容は、元のパッケージング セットの最初から最後までの要素です。 endを省略した場合は最大長を示します。

最初にいくつかの例を見てみましょう。

コードをコピー

コードは次のとおりです:

$(function() {
var ul = $('ul:first');
$('pスパン').html(ul.children ().size());
var content = ul.contents();
alert(content.size());

children() 返されるラップされたセットの数は 6 であり、最後にネストされた

が 1 つの要素としてのみカウントされることを示します。ただし、contents() によって返されるラッパー セットの数は 13 にもなります。デバッガーを使用してその内容を表示します。

これと子との違いは、単なる空行のテキスト ノードを含む、多数のテキスト ノードが含まれていることです。 next メソッドと nextAll メソッドをもう一度見てください。引き続き上記の HTML コードを使用しています。js の手順は次のとおりです:

コードをコピー コードは次のとおりです: $(function() {

$('span:last').html($('ul').next() .html());

$('p:last').html($('ul').nextAll().size());
}); ul の次の要素は I である必要があります。 am alone p. 以下の要素は全部で4つあります。したがって、結果は次のようになります。

他の関数も同様に使用されるため、例は示しません。 10.find find メソッドと filter メソッドは、パッケージ セット内の要素をフィルタリングするためにセレクターを渡しますので、混同されやすいです。ただし、find はパッケージング セット内の要素の子要素をフィルターし、filter はパッケージング セット内の要素をフィルターします。以下に例を示す。
11 clone
clone メソッドは、パッケージング セットのコピーを返します。
例:

コードをコピー コードは次のとおりです:

" src= "jquery-1.3.2.js">

私は孤独です.

UL には

/p>

こんにちは、jQuery。

>



これは興味深い例です。最初の行は最初の p をフィルターで除外して赤に設定し、それを最後の div に移動します。 2 行目は、パッケージング セットに含まれる p をフィルタリングして緑色に設定し、最後の div に移動します。この時点でこの文によってフィルタリングされた ps が 2 つあり、1 つは Inner P で、もう 1 つは です。最初の文を最後の div に移動します。次に、これら 2 つの要素を最後の div に追加します。InnerP 自体はこの div にあるため、移動しないことと同じになります。最後に、最後の p をコピーして赤に設定し、本文の最後に追加します。したがって、最後のページと色は次のとおりです。

最後に、チェーンの管理が紹介されます。いわゆるチェーンも上記の例に反映されています。つまり、jQuery メソッドが呼び出されるたびに、このパッケージ セットが次のメソッドの呼び出し元として機能し、チェーンを形成します。このプロセス中に、新しいパッケージング セットが生成される場合があります (clone() メソッドの呼び出しなど)。チェーンでは、end メソッドが呼び出されると、前のパッケージ セットが返されます。andSelf メソッドが呼び出されると、現在と前のパッケージ セットが 1 つのパッケージ セットに結合されて返されます。ご想像のとおり、jQuery はこれらの連結されたラッパー セットを内部的にスタックに保存します。次の簡単な例は、上記の原理を示しています。

コードをコピー コードは次のとおりです:

jQuery ラッパー text/javascript" src="jquery-1.3.2.js">