脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery-Selectors框架选择器中子元素的使用,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
定义:匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!
可以使用如下语法:
:nth-child(2)//索引为2的元素
:nth-child(even)//索引为偶数元素
:nth-child(odd)//索引为奇数元素
:nth-child(3n)//索引为3 * n的元素,n=0,1,2,3,4...,呃...3不是死的,你可以换成如1,2,4,5,6...之类的,下同
:nth-child(3n+1)//索引为3 * n + 1的元素,n=0,1,2,3,4...
:nth-child(3n+2)//索引为3 * n + 2的元素,n=0,1,2,3,4...
返回值:Array<Element>
参数:index (Number) : 要匹配元素的序号,从1开始
实例:将ID为"p_a1"的p中每个ul元素的第2个Li元素的背景色改为红色
代码: $("#p_a1 ul li:nth-child(2)").css("background-color","red");//点击按钮一将执行这句代码 p ID="p_a1"
ul id="ul_a1"
LI:C
LI:C++
LI:C#
LI:Java
LI:JavaScript
ul id="ul_a2"
LI:GOOGLE
LI:Microsoft
LI:Apple
LI:Sun
LI:Intel
ul id="ul_a3"
Li:onle one p ID="p_a5"<input class="button" id="BTn_1" tyPE="button" value="按钮一"> 注意:其它语法用法简单,我不在此一一列出,读者可下载源文件后,自行修改看效果,在此注意索引从1开始即可。 2. :First-child用法
定义:匹配第一个子元素 ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
返回值:Array<Element>
实例:将ID为"p_b1"的p中每个ul元素的第1个Li元素的背景色改为红色
代码: $("#p_b1 ul li:first-child") .css("background-color","red");//点击按钮二将执行这句代码 p ID="p_b1"
ul id="ul_b1"
LI:C
LI:C++
LI:C#
LI:Java
LI:JavaScript
ul id="ul_b2"
LI:Google
LI:Microsoft
LI:Apple
LI:Sun
LI:Intel
ul id="ul_b3"
Li:onle one p ID="p_b5"<input class="button" id="btn_2" type="button" value="按钮二"> 注意:当然,这个效果你也可以用$("#p_b1 ul li:nth-child(1)") .css("background-color","red");来实现。 3. :last-child用法
定义:匹配最后一个子元素 ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
返回值:Array<Element>
实例:将ID为"p_c1"的p中每个ul元素的最后1个Li元素的背景色改为红色
代码: $("#p_c1 ul li:last-child") .css("background-color","red");//点击按钮三"将执行这句代码 p ID="p_c1"
ul id="ul_c1"
LI:C
LI:C++
LI:C#
LI:Java
LI:JavaScript
ul id="ul_c2"
LI:Google
LI:Microsoft
LI:Apple
LI:Sun
LI:Intel
ul id="ul_c3"
Li:onle one p ID="p_c5"<input class="button" id="btn_3" type="button" value="按钮三"> 4. :only-child用法
定义:如果某个元素是父元素中唯一的子元素,那将会被匹配 如果父元素中含有其他元素,那将不会被匹配。
返回值:Array<Element>
实例:将ID为"p_c1"的p中每个ul元素中唯一1个Li元素的背景色改为红色
代码: $("#p_d1 ul li:only-child") .css("background-color","red");//点击按钮四"将执行这句代码 p ID="p_d1"
ul id="ul_d1"
LI:C
LI:C++
LI:C#
LI:Java
LI:JavaScript
ul id="ul_d2"
LI:Google
LI:Microsoft
LI:Apple
LI:Sun
LI:Intel
ul id="ul_d3"
Li:onle one p ID="p_d5"<input class="button" id="btn_4" type="button" value="按钮四">
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery-Selectors框架选择器中子元素的使用全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery-Selectors框架选择器中子元素的使用所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。