jQuery Selectors(选择器)的使用(二、层次篇)

网络编程 2024/9/28 佚名

3 2 1

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

本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com
由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！

在线地址 http://demo.jb51.net/html/jquery/jQuery-Selectors-2-bynet.htm

<!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-2-bynet</title>  <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;} .nei_div{border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px;} </style> </head> <body>  jQuery-Selectors(选择器)的使 用(二、层次篇) 本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉 及很深，我的学习方法：先入门，后进阶！<br> 本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章 。<br> 您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com <br> 由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！<br> 您可以到jQuery官网来学习更多的有关jQuery知识。<br> <strong>版权所有：code-cat 博客 转载请保留出处和版权信息！</strong>   由于这篇文章中讲到的四种选择器作用范围很容易混淆，且不容易理解。我给出的四个例子还是能说明其作用范围的，并且很 清晰，请读者一定仔细研究这四个实例，并作比较！把源码下载下来，试着改其中的条件，并看效果！<br> jQuery选择器的使用灵活度非常高，至此，您可以利用本文中的四种选择器和上一篇中所讲的选择器组合并 看效果，相信你会看到足以令你震撼的结果！   1. ancestor descendant用法<br> 定义：在给定的祖先元素下匹配所有的符合条件后代元素<br> 返回值：Array&lt;Element><br> 参数：ancestor (Selector):任何有效选择器 descendant (Selector):用以匹配元素的选择器，并且它是第一个选择器的后 代元素<br> 实例：将ID为"div_1"的DIV中所有的Input元素的背景色改为红色<br> 代码： $("div_1 input").css("background-color","red"); //点击按钮一将执行这句代码  form ID="div_1"<br> <input type="text" value="input" />&nbsp;<input type="text" />  DIV ID="div_2"<br> <input type="text" />   DIV ID="div_3"<br> <input type="text" value="input" />   DIV ID="div_4"<br> <input type="text" />   DIV ID="div_5"  DIV ID="div_5_1" <input type="text" /> <input type="button" id="btn_1" value="按钮一" class="button" />     <strong>注意：本实例请与第2个用法的实例作对比，看其控制范围！</strong>   2. parent > child用法<br> 定义：在给定的父元素下匹配所有的子元素<br> 返回值：Array&lt;Element><br> 参数：parent (Selector):任何有效选择器 child (Selector): 用以匹配元素的选择器，并且它是第一个选择器的子元素 <br> 实例：将ID为"div_a1"的DIV中所有的Input元素的背景色改为红色<br> 代码： $("#div_a1 > input").css("background-color","red"); //点击按钮二将执行这句代码  DIV ID="div_a1"<br> <input type="text" value="input" />&nbsp;<input type="text" />  DIV ID="div_a2"<br> <input type="text" />   DIV ID="div_a3"<br> <input type="text" value="input" />   DIV ID="div_a4"<br> <input type="text" />   DIV ID="div_a5"  DIV ID="div_a5_1" <input type="text" /> <input type="button" id="btn_2" value="按钮二" class="button" />       3. prev + next用法<br> 定义：匹配所有紧接在 prev 元素后的 next 元素<br> 返回值：Array&lt;Element><br> 参数：prev (Selector):任何有效选择器 next (Selector):一个有效选择器并且紧接着第一个选择器<br> 实例：将ID为"div_b1"的DIV中所有span元素后紧跟的input元素的背景色改为红色<br> 代码：$("#div_b1 span + input").css("background-color","red"); //点击按钮三将执行这句代码  DIV ID="div_b1"<br> <input type="text" value="input" />&nbsp; span <input type="text" value="input" style="width:50px;" /> <input type="text" value="input" style="width:50px;" />  DIV ID="div_b2"<br> span <input type="text" value="input" style="width:50px;" /> <input type="text" value="input" style="width:50px;" />   DIV ID="div_b3"<br> span <input type="text" value="input" style="width:50px;" /> <input type="text" value="input" style="width:50px;" />   DIV ID="div_b4"<br> <input type="text" value="input" style="width:50px;" /> span <input type="text" value="input" style="width:50px;" />   DIV ID="div_b5"  DIV ID="div_b5_1" span <input type="text" /> <input type="button" id="btn_3" value="按钮三" class="button" />     <strong>注意：第一个选择器我用了ancestor descendant用法，您也可以尝试其它用法。本例请 与下面第4点的实例作对比并看效果！</strong>   4. prev ~ siblings用法<br> 定义：匹配 prev 元素之后的所有 siblings 元素<br> 返回值：Array&lt;Element><br> 参数：prev (Selector):任何有效选择器 siblings (Selector):一个选择器，并且它作为第一个选择器的同辈<br> 实例：将ID为"div_c1"的DIV中所有与span元素之后平级的input元素的背景色改为红色<br> 代码：$("#div_c1 span ~ input").css("background-color","red"); //点击按钮四将执行这句代码  DIV ID="div_c1"<br> <input type="text" value="input" />&nbsp;span<input type="text" />  DIV ID="div_c2"<br> span <input type="text" value="input" style="width:50px;" /> <input type="text" value="input" style="width:50px;" />   DIV ID="div_c3"<br> span <input type="text" value="input" style="width:50px;" /> <input type="text" value="input" style="width:50px;" />   DIV ID="div_c4"<br> <input type="text" value="input" style="width:50px;" /> span <input type="text" value="input" style="width:50px;" />   DIV ID="div_c5"  DIV ID="div_c5_1" span <input type="text" value="input" style="width:50px;" /> <input type="text" value="input" style="width:50px;" /> <input type="button" id="btn_4" value="按钮四" class="button" />     <strong>注意：DIV ID="div_c1" 和 ID="div_c4"中的span元素前的input并未改变背景色，因为 第二个选择器查找第一个选择器之后的元素</strong>  </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 跨域访问问题解决方法

jQuery Selectors(选择器)的使用(一、基本篇)

评论“jQuery Selectors(选择器)的使用(二、层次篇)”

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

更新日志

友情链接

jQuery Selectors(选择器)的使用(二、层次篇)

jQuery,Selectors

jQuery 跨域访问问题解决方法

jQuery Selectors(选择器)的使用(一、基本篇)

评论“jQuery Selectors(选择器)的使用(二、层次篇)”

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

更新日志

友情链接

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