$("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选择器之层级过滤选择器的更多相关文章

  1. jQuery选择器之内容过滤选择器Demo

    测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  2. jQuery选择器之基本过滤选择器Demo

    测试代码: 03-基本过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  3. jQuery选择器之可见性过滤选择器Demo

    测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  4. jquery选择器之属性过滤选择器

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

  5. jquery选择器之内容过滤选择器

    先写出DOM元素的HTML结构: <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray ...

  6. jquery选择器之属性过滤选择器详解

    代码如下: <style type="text/css">  /*高亮显示*/  .highlight{       } </style> 复制代码代码如下 ...

  7. jquery选择器之基本过滤选择器

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

  8. jquery选择器之层级选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. 繁星——JQuery选择器之层级

    [ancestor descendant] 在给定元素下匹配所有后代元素.这个选择器的使用概率相当之高,使用示例如下: //HTML代码: <div id='div01'> <inp ...

随机推荐

  1. 如何利用百度音乐播放器的API接口来获取高音质歌曲

    第一步:在网页中打开以下网址: http://box.zhangmen.baidu.com/x?op=12&count=1&title=时间都去哪儿了$$王铮亮$$$$ 其中红色地方可 ...

  2. Sicily 1732 Alice and Bob （二进制最大公约数）

    联系: http://soj.me/1732 Constraints Time Limit: 1 secs, Memory Limit: 32 MB Description: Alice is a b ...

  3. POJ 3299 Humidex（简单的问题）

    [简要题意]:什么是温度,湿度--,之间的转换.. [分析]:式已被赋予. // 252k 0Ms /* 当中exp表示的是求e的x次幂 解法就直接依据题目中的公式解决就好!! */ #include ...

  4. Fluent Validation + NInject3 + MVC5

    Fluent Validation + NInject + MVC - Why & How : Part 1 http://fluentvalidation.codeplex.com/ htt ...

  5. A generic error occurred in GDI+. 上传图片报错

    代码就不说了,因为本地测试 ok, 服务端 就不行 ,服务器 环境 阿里云 win2008 r2  64 位 原因 是我没有这是 文件加权限 : 左边 的 少了 权限~ 代码 :含义是 网络图片 裁剪 ...

  6. Hadoop群集设置

    Hadoop群集设置 近期特别看了Hadoop的资料.感觉特别好,整理一下发在自己的博客上,希望对想了解集群的网友有所帮助. 參考资料:http://hadoop.apache.org/docs/r1 ...

  7. Linux 经常使用 性能 检测 命令 说明

    1.uptime [root@smgsim02 ~]# uptime  15:08:15 up 98 days,  4:19,  2 users,  load average: 0.07, 0.29, ...

  8. 日积月累系列之国籍控件（js源码）

    一直苦于没有好的国籍控件可以用,于是抽空写了一个国籍控件,现分享给大家. 主要功能和界面介绍 国籍控件主要支持中文.英文过滤以及键盘上下事件. 源码介绍 国籍控件核心是两个文件,navtionalit ...

  9. VMware Linux 下 Nginx

    负载   VMware Linux 下 Nginx 安装配置 - nginx.conf 配置 [负载两个 Tomcat] (三) Weiseditor 2014-11-26 23:42 阅读:1 评论 ...

  10. HBuilder HTML 自定义代码块

    =begin 本文档是HTML代码块的编辑文件.注意不要把其他语言的设置放到html里来. HBuilder可使用ruby脚本来编辑代码块和增强操作命令. 1.编辑代码块 如果要新增一个代码块,复制如 ...