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

2024-02-17 11:54:03 72

因为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/176595.html" title="Spring5中的WebClient使用方法详解">Spring5中的WebClient使用方法详解</a> </li> <li> <a href="/article/176596.html" title="python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例">python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例</a> </li> <li> <a href="/article/176597.html" title="numpy中三维数组中加入元素后的位置详解">numpy中三维数组中加入元素后的位置详解</a> </li> <li> <a href="/article/176598.html" title="Android双重SurfaceView实现弹幕效果">Android双重SurfaceView实现弹幕效果</a> </li> <li> <a href="/article/176599.html" title="Nginx添加lua模块的实现方法">Nginx添加lua模块的实现方法</a> </li> <li> <a href="/article/176600.html" title="MVC页面之间参数传递实现过程图解">MVC页面之间参数传递实现过程图解</a> </li> <li> <a href="/article/176601.html" title="python返回数组的索引实例">python返回数组的索引实例</a> </li> <li> <a href="/article/176602.html" title="SurfaceView播放视频发送弹幕并实现滚动歌词">SurfaceView播放视频发送弹幕并实现滚动歌词</a> </li> <li> <a href="/article/176603.html" title="浅谈Java并发编程基础知识">浅谈Java并发编程基础知识</a> </li> <li> <a href="/article/176604.html" title="Nginx正反向代理及负载均衡等功能实现配置代码实例">Nginx正反向代理及负载均衡等功能实现配置代码实例</a> </li> <li> <a href="/article/176605.html" title="对python中assert、isinstance的用法详解">对python中assert、isinstance的用法详解</a> </li> <li> <a href="/article/176606.html" title="原生js实现下拉选项卡">原生js实现下拉选项卡</a> </li> <li> <a href="/article/176607.html" title="Linux服务器Java进程消失问题解决">Linux服务器Java进程消失问题解决</a> </li> <li> <a href="/article/176608.html" title="微信小程序wxml列表渲染原理解析">微信小程序wxml列表渲染原理解析</a> </li> <li> <a href="/article/176609.html" title="Python values()与itervalues()的用法详解">Python values()与itervalues()的用法详解</a> </li> <li> <a href="/article/176610.html" title="python3中rank函数的用法">python3中rank函数的用法</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=514930285&site=qq&menu=yes"> <i class="fa fa-qq"></i> <span class="more">514930285</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 charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id:"KRBIHUupjRSBtYXu",ck:"KRBIHUupjRSBtYXu"})</script> <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>