jQuery Selectors(选择器)的使用(七、子元素篇)

网络编程 2024/9/28 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
本篇讲解：:nth-child(index/even/odd/equation),:first-child,:last-child,:only-child的用法。
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com
由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！
您可以到jQuery官网来学习更多的有关jQuery知识。
运行后，请刷新下，因为需要加载jquery,默认是输出，不会加载远程的js文件的。

<!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> <title>jQuery-Selectors-6</title> </head> <body> <style type="text/css"> .div {     width:95%;     margin-left:15px;     margin-top:15px;     margin-right:15px;     padding-left:5px;     padding-top:5px;     padding-bottom:5px;     background-color:#ccc;     border:#999 1px solid;     line-height:30px;     font-size:13px;     font-family:微软雅黑; } .blue{color:Blue;} .green{color:Green;} .button{border:green 1px solid;width:100px;} .xiaobiao{ font-weight:bold;} .red_test{background-color:red; color:White; width:300px; height:30px;} .li_test{border:#000 1px solid;} </style>   jQuery-Selectors(选择器)的使用(七、子元素篇) 本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！ 本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 本篇讲解：[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法。 您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com  由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！ 您可以到jQuery官网来学习更多的有关jQuery知识。 <strong>版权所有：code-cat 博客:http://www.cnblogs.com/bynet 转载请保留出处和版权信息！</strong>   在IE6、IE7、火狐下测试过了，效果都很明显。   1. :nth-child(index/even/odd/equation)用法 定义：匹配其父元素下的第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&lt;Element> 参数：index (Number) : 要匹配元素的序号，从1开始 实例：将ID为"div_a1"的DIV中每个ul元素的第2个Li元素的背景色改为红色  代码： $("#div_a1 ul li:nth-child(2)").css("background-color","red"); //点击按钮一将执行这句代码  DIV ID="div_a1" <ul id="ul_a1" style="width:100px; border:#000 1px solid;"> ul id="ul_a1" <li>LI:C</li> <li>LI:C++</li> <li>LI:C#</li> <li>LI:Java</li> <li>LI:JavaScript</li> </ul> <ul id="ul_a2" style="width:100px; border:#000 1px solid;"> ul id="ul_a2" <li>LI:Google</li> <li>LI:Microsoft</li> <li>LI:Apple</li> <li>LI:Sun</li> <li>LI:Intel</li> </ul> <ul id="ul_a3" style="width:100px; border:#000 1px solid;"> ul id="ul_a3" <li>Li:onle one</li> </ul>  DIV ID="div_a5" <input type="button" id="btn_1" value="按钮一" class="button" />    <strong>注意：其它语法用法简单，我不在此一一列出，读者可下载源文件后，自行修改看效果，在此注意索引从1开始即可。</strong>   2. :first-child用法 定义：匹配第一个子元素 ':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素  返回值：Array&lt;Element> 实例：将ID为"div_b1"的DIV中每个ul元素的第1个Li元素的背景色改为红色  代码： $("#div_b1 ul li:first-child") .css("background-color","red"); //点击按钮二将执行这句代码  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" <input type="button" id="btn_2" value="按钮二" class="button" />    <strong>注意：当然，这个效果你也可以用$("#div_b1 ul li:nth-child(1)") .css("background-color","red");来实现。</strong>   3. :last-child用法 定义：匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素  返回值：Array&lt;Element> 实例：将ID为"div_c1"的DIV中每个ul元素的最后1个Li元素的背景色改为红色  代码： $("#div_c1 ul li:last-child") .css("background-color","red"); //点击按钮三"将执行这句代码  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" <input type="button" id="btn_3" value="按钮三" class="button" />      4. :only-child用法 定义：如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配。  返回值：Array&lt;Element> 实例：将ID为"div_c1"的DIV中每个ul元素中唯一1个Li元素的背景色改为红色  代码： $("#div_d1 ul li:only-child") .css("background-color","red"); //点击按钮四"将执行这句代码  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" <input type="button" id="btn_4" value="按钮四" class="button" />     </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

jQuery,Selectors,选择器

标签：

jQuery,Selectors,选择器

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

评论“jQuery Selectors(选择器)的使用(七、子元素篇)”

暂无评论...

www.qnjia.com 无为清净楼资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

jQuery Selectors(选择器)的使用(七、子元素篇)

jQuery,Selectors,选择器

jquery 事件执行检测代码

为指定元素增加样式的js代码

评论“jQuery Selectors(选择器)的使用(七、子元素篇)”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

jQuery Selectors(选择器)的使用(七、子元素篇)

jQuery,Selectors,选择器

jquery 事件执行检测代码

为指定元素增加样式的js代码

评论“jQuery Selectors(选择器)的使用(七、子元素篇)”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存