javascript代码实例教程-jQuery-Selectors框架选择器中子元素的使用

发布时间:2019-01-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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="按钮四">

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦!&nbsp;js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery-Selectors框架选择器中子元素的使用全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery-Selectors框架选择器中子元素的使用所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。