本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com 由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！ 在线地址 http://demo.jb51.net/html/jquery/jQuery-Selectors-2-bynet.htm</p><p><b><br /><b><br /><title>jQuery-Selectors-2-bynet</title> </p><p>.div<br />{<br /> width:95%;<br /> margin-left:15px;<br /> margin-top:15px;<br /> margin-right:15px;<br /> padding-left:5px;<br /> padding-top:5px;<br /> padding-bottom:5px;<br /> background-color:#ccc;<br /> border:#999 1px solid;<br /> line-height:30px;<br /> font-size:13px;<br /> font-family:微软雅黑;<br />}<br />.blue{color:Blue;}<br />.green{color:Green;}<br />.button{border:green 1px solid;width:100px;}<br />.xiaobiao{ font-weight:bold;}<br />.red_test{background-color:red; color:White; width:300px; height:30px;}<br />.li_test{border:#000 1px solid;}<br />.nei_div{border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px;} </p><p></b> </p><p>jQuery-Selectors(选择器)的使<br />用(二、层次篇)<br />本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉<br />及很深，我的学习方法：先入门，后进阶！<br /> <br />本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章<br />。<br /> <br />您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com <br /> <br />由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！<br /> <br />您可以到jQuery官网来学习更多的有关jQuery知识。<br /> <br /><strong>版权所有：code-cat 博客 转载请保留出处和版权信息！</strong> </p><p>由于这篇文章中讲到的四种选择器作用范围很容易混淆，且不容易理解。我给出的四个例子还是能说明其作用范围的，并且很<br />清晰，请读者一定仔细研究这四个实例，并作比较！把源码下载下来，试着改其中的条件，并看效果！<br /> <br />jQuery选择器的使用灵活度非常高，至此，您可以利用本文中的四种选择器和上一篇中所讲的选择器组合并<br />看效果，相信你会看到足以令你震撼的结果！ </p><p>1. ancestor descendant用法<br /> <br />定义：在给定的祖先元素下匹配所有的符合条件后代元素<br /> <br />返回值：Array<Element><br /> <br />参数：ancestor (Selector):任何有效选择器 descendant (Selector):用以匹配元素的选择器，并且它是第一个选择器的后<br />代元素<br /> <br />实例：将ID为”div_1″的DIV中所有的Input元素的背景色改为红色 <div class="pagination"><a title="Page"> <b>1</b>/<b>3</b> </a> <b>1</b> <a href="/cos/2020/0522/511409_2.shtml">2</a> <a href="/cos/2020/0522/511409_3.shtml">3</a> <a href="/cos/2020/0522/511409_2.shtml">下一页</a> <a href="/cos/2020/0522/511409_3.shtml">尾页</a></div> </div> </div> </div> <div class="postMore"> <div class="tab" id="tab"> <span class="active">相关文章</span> <span>大家在看</span> </div> <div class="tabdiv"> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0310/1096524.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/58/08/1096524.jpg" src="https://www.easck.com/d/file/ap/58/08/1096524.jpg"></div> <div class="txtInfo"><h3>Office升级后，如何继续使用Outlook 2003</h3><div class="extr clearfix"><p><span class="time fl">2023-03-10</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094418.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg"></div> <div class="txtInfo"><h3>USB调试在哪里打开 手机USB调试模式设置大全</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0223/1093232.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg" src="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg"></div> <div class="txtInfo"><h3>一步一步学Nero Burning ROM</h3><div class="extr clearfix"><p><span class="time fl">2023-02-23</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0222/1093019.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg" src="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg"></div> <div class="txtInfo"><h3>DVD刻录势如破竹，品牌盘片大刀阔斧</h3><div class="extr clearfix"><p><span class="time fl">2023-02-22</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090649.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg"></div> <div class="txtInfo"><h3>蚂蚁Chrome中国版抢票攻略</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090603.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg" src="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg"></div> <div class="txtInfo"><h3>千牛云盘怎么免费扩容 千牛云盘免费扩容教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0119/1087414.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg" src="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg"></div> <div class="txtInfo"><h3>gzip是什么文件?gzip文件怎么打开?</h3><div class="extr clearfix"><p><span class="time fl">2023-01-19</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086996.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg"></div> <div class="txtInfo"><h3>美图秀秀营造光晕朦胧意境</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086991.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg"></div> <div class="txtInfo"><h3>美图秀秀教程之点亮绚丽夜景倒影</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086793.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg" src="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg"></div> <div class="txtInfo"><h3>美图淘淘教程之快速美化百张宝贝图片</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">2万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0310/1096524.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/58/08/1096524.jpg" src="https://www.easck.com/d/file/ap/58/08/1096524.jpg"></div> <div class="txtInfo"><h3>Office升级后，如何继续使用Outlook 2003</h3><div class="extr clearfix"><p><span class="time fl">2023-03-10</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094418.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg"></div> <div class="txtInfo"><h3>USB调试在哪里打开 手机USB调试模式设置大全</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0223/1093232.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg" src="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg"></div> <div class="txtInfo"><h3>一步一步学Nero Burning ROM</h3><div class="extr clearfix"><p><span class="time fl">2023-02-23</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0222/1093019.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg" src="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg"></div> <div class="txtInfo"><h3>DVD刻录势如破竹，品牌盘片大刀阔斧</h3><div class="extr clearfix"><p><span class="time fl">2023-02-22</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090649.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg"></div> <div class="txtInfo"><h3>蚂蚁Chrome中国版抢票攻略</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090603.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg" src="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg"></div> <div class="txtInfo"><h3>千牛云盘怎么免费扩容 千牛云盘免费扩容教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0119/1087414.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg" src="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg"></div> <div class="txtInfo"><h3>gzip是什么文件?gzip文件怎么打开?</h3><div class="extr clearfix"><p><span class="time fl">2023-01-19</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086996.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg"></div> <div class="txtInfo"><h3>美图秀秀营造光晕朦胧意境</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086991.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg"></div> <div class="txtInfo"><h3>美图秀秀教程之点亮绚丽夜景倒影</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086793.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg" src="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg"></div> <div class="txtInfo"><h3>美图淘淘教程之快速美化百张宝贝图片</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">2万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <footer> <p><a href="https://www.easck.com">电脑版</a> - <a href="https://wap.easck.com">移动首页</a></p> <div style="display:none"><script type="text/javascript" src="/skin/wap/tongji.js"></script></div> </footer> <script type="application/ld+json"> { "@context": "https://zhanzhang.baidu.com/contexts/cambrian.jsonld", "@id": "https://wap.easck.com/cos/2020/0522/511409.shtml", "title": "jQuery Selectors(选择器)的使用(二、层次篇)-易采站长站", "description": "本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.", "pubDate": "2020-05-22 T 16:20:35+08:00", "upDate": "2020-05-22 T 16:20:35+08:00", "data":{ "WebPage":{ "pcUrl":"https://www.easck.com/cos/2020/0522/511409.shtml", "wapUrl":"https://www.easck.com/cos/2020/0522/511409.shtml", "fromSrc":"易采站长站" } } } </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>
