复制代代码如下: 無标题文档 <!-- <BR>$(function(){ <BR>$("#aDescendant").click(function(){ <BR>$ ("#結果").html(""); <BR>$("#div1 ul").each(function(){ <BR>$("#結果").html($("#結果" ).html() $(this).html() "," ); <BR>}) <BR>}) <BR>$("#aChild").click(function(){ <BR>$( "#Result").html(""); <BR>$("#div1 > li").each(function(){ <br>$("#Result").html($("#Result ").html() $(this).attr("id") "," ); <br>}) <br>}) <br>$("#aNext").click(function(){ <br>$("#Result").html(""); <br>$("ラベル入力").each(function(){ <br>$("#Result").html($("#結果").html() $(this).attr("value") ","); <br>}) <br>}) <br>$("#aSibling").click(function(){ <br>$("#Result").html(""); <br>$("#input1 ~ label").each(function(){ <br>$("#Result").html($ ("#Result").html() $(this).html() ","); <br>}) <br>}) <br>}) <br>// --></スクリプト> <BR></head> <br><br> <br><div id="div1"> <br><li id="l1"> <br><ul>1</ul> <br><ul>2</ul> <br><ul>3</ul> <br><ul>4</ul> <br></li> <br><li id="l2"> <br><ul>一</ul> <br><ul>二</ul> <br><ul>三</ul> <br><ul>四</ul> <br></li> <br><label>Label1</label> <br><input id="input1" value="input1" /> <br> <br><label>Label2</label> <br><label>Label4</label> <br> </div> <br><div> <br><label>Label3</label> <br><div style="border:1px Solid #000" ></div> <br><input id="input2" value="input2"/> <BR></div> <BR><label>Label4</label><br /> <BR><a href="#" id="aDescendant">表示DIVの後序结点ID</a> <br><a href="#" id="aChild">表示DIV の子LI结点</a> <br><a href="#" id="aNext">ラベルの下の入力要素の値を表示</a> <br><a href="#" id="aSibling">input1 要素と同じ階層のラベル要素の内容を表示します</a> <br><br> <br>結果: <br><br /> <br><div id="結果"> <br> </div> <br></body> <br></html> <br><br>まず、上記のコードの課外知識ポイントについて説明します。 <br>1.element.attr("attributeName") <br>説明: このメソッドを使用すると、例のように、ユーザーは element 要素の属性値を取得できます。 <br>$("#div1 > li").each(function(){ <br>$("#Result").html($("#Result").html() $(this).attr (" id") "," ); <br>}) <br>この関数は、現在通過している要素オブジェクトの id 値を取得することです。<br>それでは、この章の内容を紹介しましょう。この章では主に、JQuery でノードの子ノード、兄弟ノードなどを選択する方法について説明します。時間は無駄ではありません。さあ、<br>1.$("Selector子孫") 説明: このメソッドは主に、「セレクター」セレクター (注: このセレクターは前の章で説明したいくつかのセレクターのいずれかです) によって選択されたコレクションの Element オブジェクトまたは子孫ノードを取得するために使用されます。ちょうど <br>$ と同様です。例 ("#aDescendant").click(function(){ <br>$("#Result").html(""); <br>$("#div1 ul").each(function(){ <br>$("#Result").html($("#Result").html() $(this).html() "," ); <br>}) <br>}) <br>関数は、div1 要素の子孫ノードの「ul」ノードの HTM1 コンテンツを取得します。「Selector」セレクターがセットを返す場合、取得された子孫ノードは、このセット内の各要素が一致する子孫ノードのセットです。 🎜 >戻り値: Array(Element); <br>2.$("Selector>child") <br>説明: このメソッドは前のメソッドと似ていますが、主な違いは、前のメソッドがすべての子孫ノードを取得できることです。 、そしてこのメソッドは、奇数の子ノードに直接従属する子ノードのみを取得できます (複数の「>」番号は、それらが直接従属していることを意味します^^)。ここでは詳細には説明しません。はは、他のすべては前の要素 <br>戻り値: Array (Element); <br>3.$("Selector next") <br>説明: 例のように、セレクターの後にある次の要素をすべて取得するために使用されます。 ("#aNext").click(function( ){ <br>$("#Result").html(""); <br>$("ラベル入力").each(function(){ <br> $("#Result").html($ ("#Result").html() $(this).attr("value") ",") <br>}) <br>}) <br> label 要素の後にあるすべての input 要素を取得します。この例では、Label1 の隣のノードには input1 のみがあり、input2 と Label3 は div ノードで区切られているため、一致しません。 <br>戻り値: Array(Element); <br>4.$("Selector ~ Sibling") <br>説明: 前のメソッドと同様、主な違いは、このメソッドは Selector Sibling ノードの後のすべての兄弟と一致することです。間に他のノードがあるかどうかに関係なく、ここでは明確ではありません。 <br>戻り値: Array(Element);
