DOM を走査する JQuery メソッド nodes_jquery-jsチュートリアル-php.cn

DOM を走査する JQuery メソッド nodes_jquery

WBOY

リリース： 2016-05-16 15:55:40

オリジナル

1350 人が閲覧しました

この記事の例では、JQuery が DOM ノードを横断する方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

このセクションの中心は、JQuery の DOM 操作を紹介することであり、作成、削除、置換などの多くのノード操作を紹介しました。ここでは、ノードを移動したり、隣接するノードを選択したりする方法についていくつかの方法を示します。

children() メソッド

このメソッドは、一致する要素の子要素のセットを取得するために使用されます。 DOM ツリーの構造から、各要素とその子ノードの数との関係を知ることができます。

以下では、children() メソッドを使用して、一致する要素のすべての子要素の数を取得します。

var $body = $("body").children(); 
var $p = $("p").children(); 
var $ul = $("ul").children(); 
alert( $body.length ); // <body>元素下有2个子元素 
alert( $p.length );  // <p>元素下有0个子元素 
alert( $ul.length ); // <p>元素下有3个子元素 
for(var i=0;i< $ul.length;i++){ 
  alert( $ul[i].innerHTML ); 
}

ログイン後にコピー

追記: Children() メソッドは子要素のみを考慮し、子孫要素は考慮しません。

next() メソッド

このメソッドは、一致する要素のすぐ後ろにある兄弟要素を取得するために使用されます。 DOM ツリーの構造から、p 要素の次の兄弟ノードは ul であることがわかり、next() メソッドを通じて ul 要素を取得できます。コードは次のとおりです。

var $p1 = $("p").next();
// 紧邻p元素后的同辈元素

ログイン後にコピー

prev() メソッド

このメソッドは、一致する要素の直前の兄弟要素を取得するために使用されます。 DOM ツリーの構造から、ul 要素の前の兄弟ノードが p であることがわかるので、prev() メソッドを通じて p 要素を取得できます。コードは次のとおりです。

var $ul = $("ul").prev();
// 紧邻ul元素前的同辈元素

ログイン後にコピー

siblings() メソッド

このメソッドは、一致する要素の前後にあるすべての兄弟要素を取得するために使用されます。 DOM ツリーの構造を例に挙げます。 ul要素とp要素は兄弟要素であり、その下の3つのli要素も兄弟要素です。

p 要素の兄弟要素を取得したい場合は、次のコードを使用できます:

var $p2 = $("p").siblings();
// 紧邻p元素的唯一同辈元素

ログイン後にコピー

closest() メソッド

最も近い一致する要素を取得するために使用されます。まず現在の要素が一致するかどうかを確認し、一致する場合は要素自体を直接返します。一致するものがない場合は、セレクターに一致する要素が見つかるまで、親要素を段階的に検索します。何も見つからない場合は、空の JQuery オブジェクトが返されます。

たとえば、クリックされたターゲット要素の最も近い li 要素に色を追加するには、次のコードを使用できます:

$(document).bind("click", function (e) { 
 $(e.target).closest("li").css("color","red"); 
})

ログイン後にコピー

さらに、JQuery には、find()、filter()、nextAll()、prevAIl()、parent()、parents() など、ノードをトラバースするメソッドが多数ありますが、これらについては説明しません。ここで、読者は付録の JQuery チートシート文書を参照できます。これらの DOM トラバーサルメソッドには共通点が 1 つあり、要素をフィルターするためのパラメーターとして JQuery 式を使用できるという点に注目してください。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。