The use of jQuery Selectors (seven, sub-elements)

This series of articles is divided into nine articles: basic article, hierarchical article, simple article, content article, visibility article, attributes article, sub-element article, form article, and form object properties article.
This article explains: the usage of :nth-child(index/even/odd/equation), :first-child, :last-child, :only-child.
If you have any suggestions or comments about this series of articles, please send them to the email: sjzlgt@qq.com
Since this is the first time to write a technical series of articles, it is inevitable that there will be errors or code bugs. You are welcome to point them out and thank you!
You can go to the jQuery official website to learn more about jQuery.
After running, please refresh, because jquery needs to be loaded, the default is output, and remote js files will not be loaded.

<title>jQuery-Selectors-6</title>

<div style="width:100%; text-align:center; font-size:16px; font-weight:bold;">
</div>The use of jQuery-Selectors (seven, sub-elements)<a href="http://jquery.com/" target="_blank">
This series of articles mainly talks about how to use the selectors of the jQuery framework. I will explain it with examples. It is based on simplicity and comprehensiveness and will not go into depth. My learning method: get started first, then advance!
 
This series of articles is divided into nine articles: basic article, hierarchical article, simple article, content article, visibility article, attributes article, sub-element article, form article, and form object properties article.
 
This article explains: [attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN ] usage.
 
If you have any suggestions or comments about this series of articles, please send them to email: sjzlgt@qq.com
 
Since this is my first time writing a series of technical articles, it is inevitable that there will be mistakes or code bugs. You are welcome to point them out and thank you!
 
You can go to </a>jQuery official website<span style="color:Red;"> to learn more about jQuery.
 
<strong><a href="http://www.cnblogs.com/bynet/" target="_blank">Copyright: code-cat Blog:</a>http://www.cnblogs.com/bynet</strong> Please retain the source and copyright information when reprinting! </span>
</div>
<div class="div">

</div>
It has been tested under IE6, IE7, and Firefox, and the effect is obvious. 
<div class="div">

<span class="xiaobiao">
</span>1. :nth-child(index/even/odd/equation) usage<span class="green">
 
Definition: Match the Nth child or odd-even element under its parent element ':eq(index)' only matches one element, and this will match the child element for each parent element. :nth-child starts from 1, and :eq() starts from 0! 
 
The following syntax can be used:
 
:nth-child(2) </span>//Element with index 2<span class="green">
 
:nth-child(even) </span>//The index is an even element<span class="green">
 
:nth-child(odd) </span>//The index is an odd element<span class="green">
 
:nth-child(3n) </span>//Element with index 3 * n, n=0,1,2,3,4..., uh...3 is not dead, you can replace it with 1 ,2,4,5,6...and the like, the same below <span class="green">
 
:nth-child(3n 1) </span>//Element with index 3 * n 1, n=0,1,2,3,4...<span class="green">
 
:nth-child(3n 2) </span>//Element with index 3 * n 2, n=0,1,2,3,4...<span style="border:blue 1px solid;">
 
Return value: Array<Element>
 
Parameters: index (Number): The sequence number of the element to be matched, starting from 1
 
Example: Change the background color of the second Li element of each ul element in the DIV with ID "div_a1" to red
 
<span style="color:green;">Code: $("#div_a1 ul li:nth-child(2)").css("background-color","red");</span> //Click button 1 to execute this code</span><div id="div_a1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;">
<ul id="ul_a1" style="width:100px; border:#000 1px solid;">
DIV ID="div_a1"
 
<li>
ul id="ul_a1"
</li>LI:C<li>
</li>LI:C <li>
</li>LI:C#<li>
</li>LI:Java<li>
</li>LI:JavaScript</ul>
<ul id="ul_a2" style="width:100px; border:#000 1px solid;">
<li>
ul id="ul_a2"
</li>LI:Google<li>
</li>LI:Microsoft<li>
</li>LI:Apple<li>
</li>LI:Sun<li>
</li>LI:Intel</ul>
<ul id="ul_a3" style="width:100px; border:#000 1px solid;">

<li>
ul id="ul_a3"
</li>Li:onle one</ul>
<div id="div_a5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;">
<input type="button" id="btn_1" value="按钮一" class="button">
DIV ID="div_a5"
</div>
</div>
<script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$("#btn_1").click(function(){ 
$("#div_a1 ul li:nth-child(2)").css("background-color","red"); 
}); 
</script> 
<span style="color:Red;"><strong>注意：其它语法用法简单，我不在此一一列出，读者可下载源文件后，自行修改看效果，在此注意索引从1开始即可。</strong></span> 
</div>

<div class="div"> 
<span class="xiaobiao">2. :first-child用法</span>
 
定义：匹配第一个子元素 ':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 
 
返回值：Array<Element>
 
实例：将ID为"div_b1"的DIV中每个ul元素的第1个Li元素的背景色改为红色 
 
<span style="border:blue 1px solid;">代码： $("#div_b1 ul li:first-child") .css("background-color","red");<span style="color:green;"> //点击按钮二将执行这句代码</span></span> 
<div id="div_b1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_b1"
 
<ul id="ul_b1" style="width:100px; border:#000 1px solid;"> 
ul id="ul_b1" 
<li>LI:C</li> 
<li>LI:C++</li> 
<li>LI:C#</li> 
<li>LI:Java</li> 
<li>LI:JavaScript</li> 
</ul> 
<ul id="ul_b2" style="width:100px; border:#000 1px solid;"> 
ul id="ul_b2" 
<li>LI:Google</li> 
<li>LI:Microsoft</li> 
<li>LI:Apple</li> 
<li>LI:Sun</li> 
<li>LI:Intel</li> 
</ul>

<ul id="ul_b3" style="width:100px; border:#000 1px solid;"> 
ul id="ul_b3" 
<li>Li:onle one</li> 
</ul> 
<div id="div_b5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_b5" 
<input type="button" id="btn_2" value="按钮二" class="button"> 
<script type="text/javascript"> 
$("#btn_2").click(function(){ 
$("#div_b1 ul li:first-child") .css("background-color","red"); 
}); 
</script> 
</div> 
</div> 
<span style="color:Red;"><strong>注意：当然，这个效果你也可以用$("#div_b1 ul li:nth-child(1)") .css("background-color","red");来实现。</strong></span> 
</div>

<div class="div"> 
<span class="xiaobiao">3. :last-child用法</span>
 
定义：匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 
 
返回值：Array<Element>
 
实例：将ID为"div_c1"的DIV中每个ul元素的最后1个Li元素的背景色改为红色 
 
<span style="border:blue 1px solid;">代码： $("#div_c1 ul li:last-child") .css("background-color","red");<span style="color:green;"> //点击按钮三"将执行这句代码</span></span> 
<div id="div_c1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_c1"
 
<ul id="ul_c1" style="width:100px; border:#000 1px solid;"> 
ul id="ul_c1" 
<li>LI:C</li> 
<li>LI:C++</li> 
<li>LI:C#</li> 
<li>LI:Java</li> 
<li>LI:JavaScript</li> 
</ul> 
<ul id="ul_c2" style="width:100px; border:#000 1px solid;"> 
ul id="ul_c2" 
<li>LI:Google</li> 
<li>LI:Microsoft</li> 
<li>LI:Apple</li> 
<li>LI:Sun</li> 
<li>LI:Intel</li> 
</ul>

<ul id="ul_c3" style="width:100px; border:#000 1px solid;"> 
ul id="ul_c3" 
<li>Li:onle one</li> 
</ul> 
<div id="div_c5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_c5" 
<input type="button" id="btn_3" value="按钮三" class="button"> 
<script type="text/javascript"> 
$("#btn_3").click(function(){ 
$("#div_c1 ul li:last-child") .css("background-color","red"); 
}); 
</script> 
</div> 
</div> 
</div>

<div class="div"> 
<span class="xiaobiao">4. :only-child用法</span>
 
定义：如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配。 
 
返回值：Array<Element>
 
实例：将ID为"div_c1"的DIV中每个ul元素中唯一1个Li元素的背景色改为红色 
 
<span style="border:blue 1px solid;">代码： $("#div_d1 ul li:only-child") .css("background-color","red");<span style="color:green;"> //点击按钮四"将执行这句代码</span></span> 
<div id="div_d1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_d1"
 
<ul id="ul_d1" style="width:100px; border:#000 1px solid;"> 
ul id="ul_d1" 
<li>LI:C</li> 
<li>LI:C++</li> 
<li>LI:C#</li> 
<li>LI:Java</li> 
<li>LI:JavaScript</li> 
</ul> 
<ul id="ul_d2" style="width:100px; border:#000 1px solid;"> 
ul id="ul_d2" 
<li>LI:Google</li> 
<li>LI:Microsoft</li> 
<li>LI:Apple</li> 
<li>LI:Sun</li> 
<li>LI:Intel</li> 
</ul>

<ul id="ul_d3" style="width:100px; border:#000 1px solid;"> 
ul id="ul_d3" 
<li>Li:onle one</li> 
</ul> 
<div id="div_d5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_d5" 
<input type="button" id="btn_4" value="按钮四" class="button"> 
<script type="text/javascript"> 
$("#btn_4").click(function(){ 
$("#div_d1 ul li:only-child") .css("background-color","red"); 
}); 
</script> 
</div> 
</div> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

The use of jQuery Selectors (seven, sub-elements)_jquery