jquery选择器之层级过滤选择器详解
jQuery 详解 过滤 选择器 层级
2023-06-13 09:15:17 时间
$("ancestordescendant"):选取parent元素后所有的child元素
$("parent>child"):选取parent元素后所有的直属child元素,何谓“直属”,也就是第一级的意思了
$("prev+next"):prev和next是两个同级别的元素.选中在prev元素后面的next元素
$("prev~siblings"):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器
后两个用的比较少,一般会有其他选择器替代
$("prev+next")等价于next()
$("prev~siblings")等价于nextAll()
实例:
<styletype="text/css">
/*高亮显示*/
.highlight{
background-color:gray
}
</style>
<body>
<div>
<pid="p1">第一个DIV里面的P元素。</p>
</div>
<pid="p2">第一个单P元素。</p>
<div>
<span>DIV里面的SPAN元素。</span>
<pid="p3">第二个DIV里面的P元素。</p>
<span>
<pid="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>
<pid="p5">第二个单P元素。</p>
<span>单SPAN元素。</span>
</body>
vars=$("divp").addClass("highlight");//选取div后面的所有p元素 结果为:p1,p3,p4
vars=$("div>p").addClass("highlight");//选取div后所有第一级p元素 结果为:p1,p3。p4不会选取,因为p4不是div的直属元素
vars=$("div+p").addClass("highlight"); //选取div后面紧邻的p元素 结果为:p2。p5不会选取,因为p5不紧邻div
vars=$("div~p").addClass("highlight"); //选取div后面所有紧邻的p元素 结果为:p2,p5
相关文章
- jquery grid设置行背景色
- jQuery笔记(3)
- struts2:使用JQuery、JSON和AJAX处理请求详解编程语言
- checkbox 全选和全不选jQuery代码实现详解编程语言
- $.extend()方法和(function($){…})(jQuery)详解编程语言
- JQuery Ajax详解编程语言
- Jquery 验证 validate详解编程语言
- jQuery的ajax async同步和异步介绍详解编程语言
- jQuery获取动态生成的元素详解编程语言
- jQuery特殊符号转义详解编程语言
- jquery选择器之基本过滤选择器详解编程语言
- Jquery中的.post和 .ajax两个方法的区别是什么详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- js jquery 页面加载初始化方法详解编程语言
- jquery停止动画详解编程语言
- jquery换一批的写法详解编程语言
- jquery each循环遍历完再执行的方法详解编程语言
- jQuery判断元素是否显示与隐藏详解编程语言
- jQuery before()和insertBefore()方法
- 基于jquery的图片懒加载js
- jQuery图片播放8款精美插件分享
- Jquery模板数据绑定插件的使用方法详解
- jquery选择器之属性过滤选择器详解
- jquery的ajax同步和异步的理解及示例
- jQuery的ready方法详解