JQuery中位置选择器：nth-child(N)与：eq(N)的差别

来源：互联网发布：nginx代理静态文件夹编辑：程序博客网时间：2024/05/16 01:06

JQuery中位置选择器：nth-child(N)与：eq(N)的区别

　　1、nth-child(N)：下标从1开始；eq(N)：下标从0开始

　　2、nth-child(N)：选择多个元素；eq(N)：选择一个元素

　　3、nth-child(N)：在一个文档树种中，选择各层排行第N的所有元素。
例：nth-child(2)：包括父辈的老二，兄弟的老二，子孙的老二，下图的绿色部分
514x302
eq(N)：在一个文档树种中，前序排列后，选择第N个元素及其所有子元素。
例：在下面的HTML代码里，查看$("div:eq(3)").html()的结果。（编号就是前序排列的编号）

＜textarea readonly name="code"class="html" ><div>0 <div>1 <div>div_a_2</div> <div>3 <div>div_b_4</div> <div>div_c_5</div> </div> <div>div_d_6</div> </div> <div>7 <div>div_e_8</div> </div> <div>9 <div>10 <div>div_f_11</div> </div> <div>div_g_12</div> </div> </div>＜/textarea>

　　$("div:eq(3)").html()的选择结果
183x133

　　最后思考个问题：

＜textarea readonly name="code"class="html" >$('div:nth-child(odd)').css("color","red"); $('div:nth-child(even)').css("color","blue"); ＜/textarea>

　　用了上面两句，所有div的字体颜色会以红蓝间隔的出现吗？答案当然是：不会
测试如下，代码部分：

＜textarea readonly name="code"class="html" ><html> <head> <title$amp;>amp;$lt;/title> <script language="JavaScript" src="js/ext/jquery-1.6.2.js"$amp;>amp;$lt;/script> <script type="text/javascript"> $(document).ready(function(){ $("div:nth-child(odd)").css("color","red"); $("div:nth-child(even)").css("color","blue"); }); </script> </head> <body> <div>0 <div>1 <div>div_a_2</div> <div>3 <div>div_b_4</div> <div>div_c_5</div> </div> <div>div_d_6</div> </div> <div>7 <div>div_e_8</div> </div> <div>9 <div>10 <div>div_f_11</div> </div> <div>div_g_12</div> </div> </div> </body> </html>＜/textarea>

　　运行结果：

　　 504x421

0条回答

0 0