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


Posted in jQuery onJuly 04, 2017

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

层级选择器(Descendant Selector)

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

<!-- HTML结构 -->
<div class="testing">
  <ul class="lang">
    <li class="lang-javascript">JavaScript</li>
    <li class="lang-python">Python</li>
    <li class="lang-lua">Lua</li>
  </ul>
</div>

要选出JavaScript,可以用层级选择器:

$('ul.lang li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
$('div.testing li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]

因为<div><ul>都是<li>的祖先节点,所以上面两种方式都可以选出相应的<li>节点。
要选择所有的<li>节点,用:

$('ul.lang li');

这种层级选择器相比单个的选择器好处在于,它缩小了选择范围,因为首先要定位父节点,才能选择相应的子节点,这样避免了页面其他不相关的元素。

例如:

$('form[name=upload] input');

就把选择范围限定在name属性为upload的表单里。如果页面有很多表单,其他表单的<input>不会被选择。
多层选择也是允许的:

$('form.test p input'); // 在form表单选择被<p>包含的<input>

子选择器(Child Selector)

子选择器$('parent>child')类似层级选择器,但是限定了层级关系必须是父子关系,就是<child>节点必须是<parent>节点的直属子节点。还是以上面的例子:

$('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
$('div.testing>li.lang-javascript'); // [], 无法选出,因为<div>和<li>不构成父子关系

过滤器(Filter)

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

$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点

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

表单相关

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

:input:可以选择<input>,<textarea>,<select>和<button>;
:file:可以选择<input type="file">,和input[type=file]一样;
:checkbox:可以选择复选框,和input[type=checkbox]一样;
:radio:可以选择单选框,和input[type=radio]一样;
:focus:可以选择当前输入焦点的元素,例如把光标放到一个<input>上,用$('input:focus')就可以选出;
:checked:选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目,如$('input[type=radio]:checked');
:enabled:可以选择可以正常输入的<input>、<select> 等,也就是没有灰掉的输入;
:disabled:和:enabled正好相反,选择那些不能输入的。

此外,jQuery还有很多有用的选择器,例如,选出可见的或隐藏的元素:

$('div:visible'); // 所有可见的div
$('div:hidden'); // 所有隐藏的div

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 #jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery实现点击关注和取消功能
Jul 03 #jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 #jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 #jQuery
jQuery表单设置值的方法
Jun 30 #jQuery
You might like
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
YII路径的用法总结
2014/07/09 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
在Django的视图中使用form对象的方法
2015/07/18 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
EM算法的python实现的方法步骤
2018/01/02 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
澳大利亚商务邀请函
2014/01/17 职场文书
心理健康课教学反思
2014/02/13 职场文书
自主招生教师推荐信
2014/05/10 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书