Home > Developer > JavaScript
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"/>
<Script src = "js/jquery-1.3.2.js"> </script>
<Script type = "text/javascript"> <! --
$ (Function (){
$ ("# ANth1"). click (function (){
$ ("# Ul1 li: nth-child (even)"). each (function (){
Certificate (this).css ("background", "#773300 ");
})
})
$ ("# Anth1"). click (function (){
$ ("# Ul1 li: nth-child (2n + 1)"). each (function (){
Certificate (this).css ("background", "# ff3434 ");
})
})
$ ("# AFirst"). click (function (){
$ ("# Ul1 li: first-child"). each (function (){
Certificate (this).css ("background", "#223344 ");
})
})
$ ("# ALast"). click (function (){
$ ("# Ul1 li: last-child"). each (function (){
((This).css ("background", "#99ff88 ");
})
})
$ ("# AOnly"). click (function (){
$ ("Ul li: only-child"). each (function (){
((This).css ("background", "#99ff88 ");
})
})
})
// --> </Script>
<Title> untitled document </title>
</Head>
<Body>
<A href = "#" onclick = "javascript: location. reload ();"> Reset </a>
<Ul id = "ul1">
<Li> li1 </li>
<Li> li2 </li>
<Li> li3 </li>
<Li> li4 </li>
<Li> li5 </li>
<Li> li6 </li>
</Ul>
<Ul>
<Li> li7 </li>
</Ul>
<A href = "#" id = "aNth1"> set the background color of the even index sub-element of ul1 </a> |
<A href = "#" id = "an2"> set the background color of the qisuo index sub-element of ul1 </a> |
<A href = "#" id = "aFirst"> set the background color of the head element of ul1 </a> |
<A href = "#" id = "aLast"> set the background color of the tail child element of ul1 </a> |
<A href = "#" id = "aOnly"> set the background color of all unique sub-elements in ul. </a>
</Body>
</Html>
1. $ ("ParentSelector ChildTagName: nth-child (...)") Note: nth-child
Description: used to obtain the sub-element set of the element set selected by ParentSelector for index filtering. In this example, click aNth1 to perform even index (even) on the li sub-element of the element whose ID is ul1) select ($ ("# ul1 li: nth-child (even)"). You should be familiar with the keyword even, which is described in Chapter 3, if you are not clear about it, you can go to chapter 3 and then continue ^. Of course, you can also use odd here, but it is a little different from Chapter 3, that is, in Chapter 3, the index starts from 0, but here the index starts from 1. I feel that this design is not very good --!, There is no specification, and I don't know if it was designed with negligence. This method also has a very flexible usage, just like in the example of an2's click event, with $ ("# ul1 li: nth-child (2n + 1 )") the method is similar to $ ("# ul1 li: nth-child (odd)"). As for 2n + 1, I don't need to explain it, junior high school mathematics is often used. If you really don't understand it, post it --!. This method can also keep up with the specific index such as "2", but remember that the index here is from 1 !!
Returned value: Array (Element );
2.: first-child
Description: gets the Header element of the selected element set. It is easy to write here. You should understand it. If you can't understand it with examples, paste it --!.
Returned value: Array (Element );
3.: last-child
Description: gets the tail element of the selected element set.
Returned value: Array (Element );
4.: only-child
Description: gets the element of a sibling node. In this example, the second ul element has only one li sub-element, so $ ("ul li: only-child ") only li7 is obtained.
Returned value: Array (Element );
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
