jQuery层级选择器_动力节点节点Java学院整理

2024-02-17 11:54:03 198

因为DOM的结构就是层级结构，所以我们经常要根据层级关系进行选择。

层级选择器（DescendantSelector）

如果两个DOM元素具有层级关系，就可以用$('ancestordescendant')来选择，层级之间用空格隔开。例如：




JavaScript
Python
Lua

要选出JavaScript，可以用层级选择器：

$('ul.langli.lang-javascript');//[JavaScript]
$('div.testingli.lang-javascript');//[JavaScript]

因为

和

的祖先节点，所以上面两种方式都可以选出相应的
节点。
要选择所有的
节点，用：
```
$('ul.langli');
```
这种层级选择器相比单个的选择器好处在于，它缩小了选择范围，因为首先要定位父节点，才能选择相应的子节点，这样避免了页面其他不相关的元素。

例如：
```
$('form[name=upload]input');
```
就把选择范围限定在name属性为upload的表单里。如果页面有很多表单，其他表单的不会被选择。
多层选择也是允许的：
```
$('form.testpinput');//在form表单选择被包含的
```
子选择器（ChildSelector）

子选择器$('parent>child')类似层级选择器，但是限定了层级关系必须是父子关系，就是节点必须是节点的直属子节点。还是以上面的例子：
```
$('ul.lang>li.lang-javascript');//可以选出[JavaScript
```

和

不构成父子关系

过滤器（Filter）

过滤器一般不单独使用，它通常附加在选择器上，帮助我们更精确地定位元素。观察过滤器的效果：

$('ul.langli');//选出JavaScript、Python和Lua3个节点

$('ul.langli:first-child');//仅选出JavaScript
$('ul.langli:last-child');//仅选出Lua
$('ul.langli:nth-child(2)');//选出第N个元素，N从1开始
$('ul.langli:nth-child(even)');//选出序号为偶数的元素
$('ul.langli:nth-child(odd)');//选出序号为奇数的元素

表单相关

针对表单元素，jQuery还有一组特殊的选择器：

:input：可以选择，，<select>和<button>；<br/> :file：可以选择<inputtype="file">，和input[type=file]一样；<br/> :checkbox：可以选择复选框，和input[type=checkbox]一样；<br/> :radio：可以选择单选框，和input[type=radio]一样；<br/> :focus：可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$('input:focus')就可以选出；<br/> :checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked')；<br/> :enabled：可以选择可以正常输入的<input>、<select>等，也就是没有灰掉的输入；<br/> :disabled：和:enabled正好相反，选择那些不能输入的。<br/> </p> <p>此外，jQuery还有很多有用的选择器，例如，选出可见的或隐藏的元素：<br/> </p> <pre> $('div:visible');//所有可见的div $('div:hidden');//所有隐藏的div</pre> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。</p></section> </div> </div>  <nav> <span class="meta-nav"><a href="/article/232648.html" title="jQuery简介_动力节点Java学院整理" se_prerender_url="complete">上一篇<br>jQuery简介_动力节点Java学院整理</a></span> <span class="meta-nav"><a href="/article/232646.html" title="jQuery动画_动力节点节点Java学院整理" se_prerender_url="complete">下一篇<br>jQuery动画_动力节点节点Java学院整理</a></span> <div class="clear"></div> </nav>  <div class="article-recommend"> <h3>热门推荐</h3> <div class="title"><span class="s-1">1</span> <a href="/article/10835.html" title="毛坯房验收经验和常识看了之后再验房心里有底">毛坯房验收经验和常识看了之后再验房心里有底</a></div> <div class="title"><span class="s-2">2</span> <a href="/article/10697.html" title="二手房收房如何交接二手房收房注意问题">二手房收房如何交接二手房收房注意问题</a></div> <div class="title"><span class="s-3">3</span> <a href="/article/10605.html" title="专业验收毛坯房的价格商品房验收合格的标准">专业验收毛坯房的价格商品房验收合格的标准</a></div> <div class="title"><span class="s-4">4</span> <a href="/article/10568.html" title="精装房怎么验收精装房请验房师有用吗">精装房怎么验收精装房请验房师有用吗</a></div> <div class="title"><span class="s-5">5</span> <a href="/article/10567.html" title="一般要到哪里找验房师验房师有哪些作用呢">一般要到哪里找验房师验房师有哪些作用呢</a></div> <div class="title"><span class="s-6">6</span> <a href="/article/10566.html" title="请人验房一般是多少钱验房师费用是多少">请人验房一般是多少钱验房师费用是多少</a></div> <div class="title"><span class="s-7">7</span> <a href="/article/10553.html" title="怎样测量房子面积建筑面积和使用面积怎么算">怎样测量房子面积建筑面积和使用面积怎么算</a></div> <div class="title"><span class="s-8">8</span> <a href="/article/10550.html" title="收房需要注意什么仔细检查不松懈">收房需要注意什么仔细检查不松懈</a></div> <div class="title"><span class="s-9">9</span> <a href="/article/10548.html" title="收房时三书一证一表是什么主要作用介绍">收房时三书一证一表是什么主要作用介绍</a></div> <div class="title"><span class="s-10">10</span> <a href="/article/10547.html" title="交房时交房税费有哪些本文为你一一讲解">交房时交房税费有哪些本文为你一一讲解</a></div> <div class="title"><span class="s-11">11</span> <a href="/article/10526.html" title="验房都需要验什么要做哪些准备呢">验房都需要验什么要做哪些准备呢</a></div> <div class="title"><span class="s-12">12</span> <a href="/article/10525.html" title="毛坯房验房师有必要请吗毛坯房装修完如何验收">毛坯房验房师有必要请吗毛坯房装修完如何验收</a></div> <div class="title"><span class="s-13">13</span> <a href="/article/7820.html" title="地下室防水工程质量验收规范详解">地下室防水工程质量验收规范详解</a></div> <div class="title"><span class="s-14">14</span> <a href="/article/4947.html" title="水性涂料、油性涂料区别介绍">水性涂料、油性涂料区别介绍</a></div> <div class="title"><span class="s-15">15</span> <a href="/article/4517.html" title="零基础布艺DIY工坊教你做超萌猫头鹰钥匙包">零基础布艺DIY工坊教你做超萌猫头鹰钥匙包</a></div> <div class="title"><span class="s-16">16</span> <a href="/article/4438.html" title="三棵树漆怎么样？三棵树漆官方网站">三棵树漆怎么样？三棵树漆官方网站</a></div> <div class="title"><span class="s-17">17</span> <a href="/article/4258.html" title="家庭“装修套餐”中猫腻你知道吗？">家庭“装修套餐”中猫腻你知道吗？</a></div> <div class="title"><span class="s-18">18</span> <a href="/article/4051.html" title="小空间大浴望卫浴间装修巧支招">小空间大浴望卫浴间装修巧支招</a></div> </div> <div class="add-gg">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4387516810452807" data-ad-slot="9131157744" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>  <div id="sidebar"> <li class="sidebar-box"> <h3 class="widget-title">随机推荐</h3> <ul> <li> <a href="/article/365290.html" title="祝长辈中秋祝福语简短">祝长辈中秋祝福语简短</a> </li> <li> <a href="/article/365289.html" title="老板离职了简短祝福语">老板离职了简短祝福语</a> </li> <li> <a href="/article/365287.html" title="酸奶店开业祝福语简短">酸奶店开业祝福语简短</a> </li> <li> <a href="/article/365286.html" title="天冷祝福语简短暖心">天冷祝福语简短暖心</a> </li> <li> <a href="/article/365285.html" title="蛋糕祝福语简短给老公">蛋糕祝福语简短给老公</a> </li> <li> <a href="/article/365284.html" title="初中老师结婚祝福语简短">初中老师结婚祝福语简短</a> </li> <li> <a href="/article/365283.html" title="历史老师结婚祝福语简短">历史老师结婚祝福语简短</a> </li> <li> <a href="/article/365282.html" title="不同的生日祝福语简短">不同的生日祝福语简短</a> </li> <li> <a href="/article/365281.html" title="医师节晚宴祝福语简短">医师节晚宴祝福语简短</a> </li> <li> <a href="/article/365279.html" title="祝别人99祝福语简短">祝别人99祝福语简短</a> </li> <li> <a href="/article/365277.html" title="装修开工祝福语简短霸气">装修开工祝福语简短霸气</a> </li> <li> <a href="/article/365275.html" title="过年祝福语简短走心">过年祝福语简短走心</a> </li> <li> <a href="/article/365272.html" title="去读大学祝福语简短">去读大学祝福语简短</a> </li> <li> <a href="/article/365271.html" title="砸墙祝福语简短霸气">砸墙祝福语简短霸气</a> </li> <li> <a href="/article/365270.html" title="生日恩爱祝福语简短精辟">生日恩爱祝福语简短精辟</a> </li> <li> <a href="/article/365266.html" title="好的结婚祝福语简短">好的结婚祝福语简短</a> </li> </ul> </li> <li class="sidebar-box">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4387516810452807" data-ad-slot="8604338277" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </li> </div> </div> </div> <ul class="suspend"> <li class="back-top" onclick="backTop()"> <i class="fa fa-chevron-up"></i> <span class="more">返回顶部</span> </li> <li> <a href="http://wpa.qq.com/msgrd?v=3&uin=3162201930&site=qq&menu=yes"> <i class="fa fa-qq"></i> <span class="more">3162201930</span> </a> </li> <li> <a href="mailto:czq8825@qq.com"> <i class="fa fa-envelope"></i> <span class="more">czq8825@qq.com</span> </a> </li>  </ul> <footer class="footer clearfix"> <p>免责声明：网站资源来源于网络，如有侵权，请及时联系删除。</p> <p>Copyright © 2024 <a href="/">微客导航网</a>. All Rights Reserved.</p> <p> <a href="https://beian.miit.gov.cn">蜀ICP备2021004611号-4</a> <a href="/sitemap.html">网站地图</a> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?78e2f1027b3a17750580941ea594d61e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </p> </footer> <script src="/Public/Home/js/main.js"></script> <script type="text/javascript" src="/Public/Home/js/z_stat.js"></script> </body> </html>