JQuery Study Notes Selector 2_jquery

复制代码 代码如下:

1

2

3

4

一

二

三

四

Label1


Label2
Label4

Label3

Label4

显示DIV的后序结点ID
显示DIV的子LI结点
显示位于Label下一个input元素的value值
显示于input1元素同级的label元素内容


Result:

First explain the extracurricular knowledge points in the above code
1.element.attr("attributeName")
Description: This method allows the user to obtain an attribute value of an element element, as in the example
$("#div1 > li").each(function(){
$("#Result").html($("#Result").html() $(this).attr(" id") "," );
})
The function is to get the id value of the currently traversed element object;
Okay, now let’s introduce the content of this chapter. This chapter mainly talks about how to select the child nodes, sibling nodes, etc. of a node in JQuery. No time is wasted. Ha, now let’s get to the point
1.$("Selector descendant")
Description : This method is mainly used to obtain the Element object or descendant node of the collection selected by the "Selector" selector (note: this selector is any of the several mentioned in the previous chapter), just like
$ in the example ("#aDescendant").click(function(){
$("#Result").html("");
$("#div1 ul").each(function(){
$("#Result").html($("#Result").html() $(this).html() "," );
})
})
The function is Get the HTMl content of the "ul" node in the descendant node of the div1 element. If the "Selector" selector returns a set, the obtained descendant node is the set of descendant nodes that each element matches in this set
Return value: Array(Element);
2.$("Selector>child")
Description: This method is similar to the previous method. The main difference is that the previous method can obtain all descendant nodes, and this The method can only get the child nodes directly subordinate to odd ones (multiple ">" numbers mean they are directly subordinate ^^), I won't go into details here, ha, everything else is the same as the previous one
Return value: Array (Element);
3.$("Selector next")
Description: Used to get all next elements located after the Selector, such as in the example
$("#aNext").click(function( ){
$("#Result").html("");
$("label input").each(function(){
$("#Result").html($ ("#Result").html() $(this).attr("value") ",");
})
})
Get all input elements located after the label element, in In the example, only input1 is located at the node next to Label1, and input2 and Label3 are separated by a div node, so they do not match.
Return value: Array(Element);
4.$("Selector ~ Sibling")
Description: Similar to the previous method, the main difference is that this method matches all siblings after the Selector Sibling nodes, regardless of whether there are other nodes in between, it is not clear here.
Return value: Array(Element);