$("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. HDU 1080 Human Gene Functions--DP--（变形最长公共子）

    意甲冠军:该基因序列的两端相匹配,四种不同的核苷酸TCGA有不同的分值匹配.例如T-G比分是-2,它也可以被加入到空格,空洞格并且还具有一个相应的核苷酸匹配分值,求最大比分 分析: 在空气中的困难格的 ...

  2. mysql中国的内容php网页乱码问题

    1.更改mysql编码在数据库 character_set_server=utf8 init_connect='SET NAMES utf8' 加入这两行 2.又第一次启动mysql数据库 版权声明: ...

  3. MapReduce的InputFormat学习过程

    昨天,经过几个小时的学习.该MapReduce学习的某一位的方法的第一阶段.即当大多数文件的开头的Data至key-value制图.那是,InputFormat的过程.虽说过程不是非常难,可是也存在非 ...

  4. 为什么使用Hystrix？

    分布式服务弹性框架“Hystrix”实践与源码研究(一)   文章初衷 为了应对将来在线(特别是无线端)业务量的成倍增长,后端服务的分布式化程度需要不断提高,对于服务的延迟和容错管理将面临更大挑战,公 ...

  5. Asp.net MVC + EF + Spring.Net 项目实践（一）

    准备用几篇文章来做一个MVC的例子,为了给新同事做参考,也为自己做个知识储备. 首先,用VS2013创建一个空白解决方案StudentManageSystem,然后添加一个MVC应用程序(可参考ASP ...

  6. Zepto

    移动开发流量省起来之Zepto 事情是这样的:最近开发的一个手机网站客户反应访问起来特别慢,刷了半天才能看到页面,然后问我们是不是网站出问题了.于是我赶紧找了各种手机测试一下,没有问题,首先排除程序错 ...

  7. Touch Punch在移动设备上面增加jQuery UI的触摸支持|Jquery UI 支持移动端 触摸滑动等

    jQuery UI是我们前台开发常用的UI前端类库,但是目前的jQuery UI用户界面类库在互动和widget上并不支持touch事件.这意味着你在桌面上设计的优雅的UI可能在触摸设备,例如,ipa ...

  8. java-list-remove()用法浅析 解决java list remove() 数据不对的问题

    在java中对list进行操作很频繁,特别是进行list启遍历,这些操作我们都会,也很熟悉,但是对java中list进行删除元素,remove list中的元素就不怎么熟悉了吧,可以说很陌生,是实际操 ...

  9. Git基础教程

    Git是一个分布式的版本控制工具,本篇文章从介绍Git开始,重点在于介绍Git的基本命令和使用技巧,让你尝试使用Git的同时,体验到原来一个版 本控制工具可以对开发产生如此之多的影响,文章分为两部分, ...

  10. 客户端Webview重定向

    今天在客户端的网页中写了句alert的代码,发现执行了两次,后来发现网页的地址写的是http://192.168.14.72/app 客户端Webview加载网页,对于不完全路径会重定向到完全路径,导 ...