jquery选择器之层级过滤选择器详解


Posted in Javascript onJanuary 27, 2014
$("ancestor descendant"):选取parent元素后所有的child元素
$("parent > child"):选取parent元素后所有的直属child元素,何谓“直属”,也就是第一级的意思了
$("prev + next"):prev和next是两个同级别的元素. 选中在prev元素后面的next元素
$("prev ~ siblings"):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器

后两个用的比较少,一般会有其他选择器替代
$("prev + next")等价于next()
$("prev ~ siblings")等价于nextAll()

实例:
<style type="text/css">
  /*高亮显示*/
  .highlight{   
   background-color: gray
  }
 </style>

<body>
    <div>
     <p id="p1">第一个DIV里面的P元素。</p>
    </div>
    <p id="p2">第一个单P元素。</p>
    <div>
     <span>DIV里面的SPAN元素。</span>
     <p id="p3">第二个DIV里面的P元素。</p>
     <span>
      <p id="p4">DIV里面的SPAN里面的P元素。</p>
     </span>
    </div>
     <table>
      <tr>
       <th>A</th><th>B</th><th>C</th>
      </tr>
      <tr>
       <td>1</td><td>2</td><td>3</td>
      </tr>
     </table>
     <p id="p5">第二个单P元素。</p>
     <span>单SPAN元素。</span>
  </body>

var s = $("div p").addClass("highlight"); //选取div后面的所有p元素   结果为:p1,p3,p4

jquery选择器之层级过滤选择器详解
var s = $("div > p").addClass("highlight"); //选取div后 所有第一级p元素   结果为:p1,p3。p4不会选取,因为p4不是div的直属元素

jquery选择器之层级过滤选择器详解
var s = $("div + p").addClass("highlight");   //选取div后面紧邻的p元素  结果为:p2。p5不会选取,因为p5不紧邻div

jquery选择器之层级过滤选择器详解
var s = $("div ~ p").addClass("highlight");     //选取div后面所有紧邻的p元素  结果为:p2,p5

jquery选择器之层级过滤选择器详解
Javascript 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
通过DOM脚本去设置样式信息
Sep 19 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
js操作数组函数实例小结
Dec 10 Javascript
谈一谈javascript闭包
Jan 28 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 #Javascript
jquery选择器之属性过滤选择器详解
Jan 27 #Javascript
jQuery自定义事件的简单实现代码
Jan 27 #Javascript
jQuery中bind与live的用法及区别小结
Jan 27 #Javascript
jQuery实现动画效果的简单实例
Jan 27 #Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 #Javascript
js修改原型的属性使用介绍
Jan 26 #Javascript
You might like
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
Python查找相似单词的方法
2015/03/05 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
实验心得体会
2014/09/05 职场文书
学校运动会广播稿
2014/10/11 职场文书
环卫个人总结
2015/03/03 职场文书
感恩节寄语2015
2015/03/24 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python