jquery选择器之层级过滤选择器详解
更新时间：2014年01月27日 09:58:18 作者：
本篇文章主要是对jquery选择器之层级过滤选择器进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
复制代码 代码如下:
$("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
复制代码 代码如下:
var s = $("div > p").addClass("highlight"); //选取div后 所有第一级p元素 结果为：p1,p3。p4不会选取,因为p4不是div的直属元素
复制代码 代码如下:
var s = $("div + p").addClass("highlight"); //选取div后面紧邻的p元素 结果为：p2。p5不会选取,因为p5不紧邻div
复制代码 代码如下:
var s = $("div ~ p").addClass("highlight"); //选取div后面所有紧邻的p元素 结果为：p2,p5
相关文章
这篇文章主要介绍了jQuery判断对象是否存在的方法,对比分析了纯javascript与jQuery实现判断对象是否存在的功能区别,是非常实用的技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了jQuery访问json文件中数据的方法,结合实力形式分析了jQuery事件响应及json文件的加载、读取、遍历等相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了jQuery常见事件的监听方式，页面经常会有各种事件发生，事件发生后需要进行一些特定处理，即执行特定的函数或者语句。这就需要对事件进行监听，下面关于监听事件的介绍，需要的小伙伴可以参考一下2022-03-03
这篇文章主要给大家分享了js实现碰撞检测特效代码，主要就是使用JavaScript实现网页版的碰撞检测，有需要的小伙伴可以参考下2016-10-10
这篇文章主要为大家介绍了jQuery的操作属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。2011-08-08
从软件到网站，菜单可以说是无处不在。在传统应用软件开发中，一般都有现成的控件可以使用；但是在网页开发时，基本上要靠开发人员自己动手设计2012-05-05
这篇文章主要介绍了jQuery中:image选择器用法,实例分析了:image选择器的功能、定义及匹配类型为image的<input>元素时的使用技巧,需要的朋友可以参考下2015-01-01
Jquery下EasyUI组件中的DataGrid结果集清空方法
要求选择“地区”及“代维公司”后，刷新第一个DataGrid框体，下面为大家介绍下如何清空Jquery下EasyUI组件中的DataGrid结果集2014-01-01
本文仅供参考，如有不足或错误，请不吝赐教，这里以一个弹出层的jQuery插件制作实例为基础，进行插件制作的说明。2010-04-04
最新评论