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 相关文章推荐
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
Seajs的学习笔记
Mar 04 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
Javascript的比较汇总
Jul 25 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
javascript常用的方法分享
2015/07/01 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
如何获取Python简单for循环索引
2019/11/21 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
大二学期个人自我评价
2014/01/13 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
党支部考察意见范文
2015/06/02 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
再谈python_tkinter弹出对话框创建
2022/03/20 Python