JQuery learning note selector 2

Last Update:2013-10-16 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Script src = "js/jquery-1.3.2.js"> </script>
<Script type = "text/javascript"> <! --
$ (Function (){
$ ("# ADescendant"). click (function (){
$ ("# Result" example .html ("");
$ ("# Div1 ul"). each (function (){
$ ("# Result" ).html ($ ("# Result" ).html () + ((this).html () + ",");
})
})
$ ("# AChild"). click (function (){
$ ("# Result" example .html ("");
$ ("# Div1> li"). each (function (){
$ ("# Result" example .html ($ ("# Result" example .html () + $ (this). attr ("id") + ",");
})
})
$ ("# ANext"). click (function (){
$ ("# Result" example .html ("");
$ ("Label + input"). each (function (){
$ ("# Result" example .html ($ ("# Result" example .html () + $ (this). attr ("value") + ",");
})
})
$ ("# ASibling"). click (function (){
$ ("# Result" example .html ("");
$ ("# Input1 ~ Label "). each (function (){
$ ("# Result" ).html ($ ("# Result" ).html () + ((this).html () + ",");
})
})
})
// --> </Script>
</Head>

<Body>
<Div id = "div1">
<Li id = "l1">
<Ul> 1 </ul>
<Ul> 2 </ul>
<Ul> 3 </ul>
<Ul> 4 </ul>
</Li>
<Li id = "l2">
<Ul> 1 </ul>
<Ul> 2 </ul>
<Ul> 3 </ul>
<Ul> 4 </ul>
</Li>
<Label> Label1 </label>
<Input id = "input1" value = "input1"/>
<Input/>
<Label> Label2 </label>
<Label> Label4 </label>
</Div>
<Div>
<Label> Label3 </label>
<Div style = "border: 1px solid #000"> </div>
<Input id = "input2" value = "input2"/>
</Div>
<Label> Label4 </label> <br/>
<A href = "#" id = "aDescendant"> display the ID of the last node in the DIV </a>
<A href = "#" id = "aChild"> display the sub-LI node of a DIV </a>
<A href = "#" id = "aNext"> display the value of the input element located next to the Label </a>
<A href = "#" id = "aSibling"> displays the content of the label element at the same level as the input1 element </a>
<Br/>
Result:
<Br/>
<Div id = "Result">
</Div>
</Body>
</Html>

First, explain the extra-curricular knowledge points in the above Code
1. element. attr ("attributeName ")
Description: This method is used to obtain an attribute value of an element. In this example
$ ("# Div1> li"). each (function (){
$ ("# Result" example .html ($ ("# Result" example .html () + $ (this). attr ("id") + ",");
})
This function is used to obtain the id value of the element object Currently traversed;
Now, let's start to introduce the content of this chapter. In this chapter, we will focus on choosing child nodes and sibling nodes of a node in JQuery, which will not waste time.
1. $ ("Selector descendant ")
Description: This method is mainly used to obtain the selected Element object or the child node of the set of the "Selector" Selector (Note: This Selector is any of the several types described in the previous chapter, just like in the example
$ ("# ADescendant"). click (function (){
$ ("# Result" example .html ("");
$ ("# Div1 ul"). each (function (){
$ ("# Result" ).html ($ ("# Result" ).html () + ((this).html () + ",");
})
})
The function is to obtain the HTMl content of the "ul" node in the child node with the id div1. If the "Selector" Selector returns a set, the child node obtained is in this set, set of child nodes matching each element
Returned 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 child nodes, this method can only obtain sub-nodes directly under the odd state (multiple ">" numbers represent directly subordinate ones ^). I will not talk about them here. Ha, the others are the same.
Returned value: Array (Element );
3. $ ("Selector + next ")
Description: used to obtain all the next elements behind the Selector, as shown in the example.
$ ("# ANext"). click (function (){
$ ("# Result" example .html ("");
$ ("Label + input"). each (function (){
$ ("# Result" example .html ($ ("# Result" example .html () + $ (this). attr ("value") + ",");
})
})
Obtain all the input elements behind the label element. In this example, only input1 is located in the next node of Label1, and input2 and Label3 are separated by div nodes, so they do not work with each other.
Returned value: Array (Element );
4. $ ("Selector ~ Sibling ")
Description: similar to the previous method, the main difference is that this method matches all the Sibling nodes at the same level after the Selector, regardless of whether there are other nodes in the middle, it's not clear here, huh
Returned value: Array (Element );

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JQuery learning note selector 2

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support