JQuery 学習ノート セレクター 2_jquery

Label4

表示DIVの後序结点ID
表示DIV の子LI结点
ラベルの下の入力要素の値を表示
input1 要素と同じ階層のラベル要素の内容を表示します


結果:






まず、上記のコードの課外知識ポイントについて説明します。
1.element.attr("attributeName")
説明: このメソッドを使用すると、例のように、ユーザーは element 要素の属性値を取得できます。
$("#div1 > li").each(function(){
$("#Result").html($("#Result").html() $(this).attr (" id") "," );
})
この関数は、現在通過している要素オブジェクトの id 値を取得することです。
それでは、この章の内容を紹介しましょう。この章では主に、JQuery でノードの子ノード、兄弟ノードなどを選択する方法について説明します。時間は無駄ではありません。さあ、
1.$("Selector子孫") 説明: このメソッドは主に、「セレクター」セレクター (注: このセレクターは前の章で説明したいくつかのセレクターのいずれかです) によって選択されたコレクションの Element オブジェクトまたは子孫ノードを取得するために使用されます。ちょうど
$ と同様です。例 ("#aDescendant").click(function(){
$("#Result").html("");
$("#div1 ul").each(function(){
$("#Result").html($("#Result").html() $(this).html() "," );
})
})
関数は、div1 要素の子孫ノードの「ul」ノードの HTM1 コンテンツを取得します。「Selector」セレクターがセットを返す場合、取得された子孫ノードは、このセット内の各要素が一致する子孫ノードのセットです。 🎜 >戻り値: Array(Element);
2.$("Selector>child")
説明: このメソッドは前のメソッドと似ていますが、主な違いは、前のメソッドがすべての子孫ノードを取得できることです。 、そしてこのメ​​ソッドは、奇数の子ノードに直接従属する子ノードのみを取得できます (複数の「>」番号は、それらが直接従属していることを意味します^^)。ここでは詳細には説明しません。はは、他のすべては前の要素
戻り値: Array (Element);
3.$("Selector next")
説明: 例のように、セレクターの後にある次の要素をすべて取得するために使用されます。 ("#aNext").click(function( ){
$("#Result").html("");
$("ラベル入力").each(function(){
$("#Result").html($ ("#Result").html() $(this).attr("value") ",")
})
})
label 要素の後にあるすべての input 要素を取得します。この例では、Label1 の隣のノードには input1 のみがあり、input2 と Label3 は div ノードで区切られているため、一致しません。
戻り値: Array(Element);
4.$("Selector ~ Sibling")
説明: 前のメソッドと同様、主な違いは、このメソッドは Selector Sibling ノードの後のすべての兄弟と一致することです。間に他のノードがあるかどうかに関係なく、ここでは明確ではありません。
戻り値: Array(Element);