$("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. MAC使用小技巧（二）

    一.Safari-->广告数量不足 --原因:DNS被拦截,被恶意推送广告. ----------------------------- [ 思路 ] 修改hosts文件 $ cd /etc $ ...

  2. PHP移动互联网的发展票据（6）——MySQL召回数据库基础架构[1]

    原文地址 :http://www.php100.com/html/php/api/2014/0326/6707.html 一.数据类型 1.整型 数据类型 存储空间 说明 取值范围 TINYINT 1 ...

  3. 如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库

    原文:如何利用[百度地图API],制作房产酒店地图?(下)--结合自己的数据库 摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章…… -------------------------- ...

  4. Linux中加入用户、删除用户时新手可能遇到的问题

    Linux中加入用户.删除用户时新手可能遇到的问题  1.创建新用户后切换到新用户:No directory, logging in with HOME=/     加入用户     #sudo us ...

  5. 拥抱大家庭，nodejs走thrift

    拥抱大家庭,nodejs走thrift.最贱的例子,nodejs与nodejs之间走thrift对传. 1,官网下载 http://mirrors.cnnic.cn/apache/thrift/0.9 ...

  6. IOS科研IOS开发笔记学习基础知识

    这篇文章是我的IOS学习笔记,他们是知识的基础,在这里,根据记录的查询后的条款. 1,UIScrollView能完毕滚动的功能. 示比例如以下: UIScrollView *tableScrollVi ...

  7. Yii中CDbCriteria常用总结

    Yii的Active Recorder包装了很多. 特别是把SQL中 把where,order,limit,IN/not IN,like等常用短句都包含进CDbCriteria这个类中去,这样整个代码 ...

  8. PHP 4:从Login进一步看到的

    原文:PHP 4:从Login进一步看到的 我们已经在PHP 3:从Login界面谈PHP标记谈到了PHP标记,不过其页面代码有一句 require_once('bookmark_fns.php'); ...

  9. jekyll bootstrap搭建github blog

    前提你必须有一个GitHub账号且本机安装有Git 一.创建一个新的仓库 去你的https://github.com主页新建一个仓库 名字为USERNAME.github.com USERNAME为你 ...

  10. 使用MySQL Migration Toolkit快速将Oracle数据导入MySQL

    MySQL GUI Tools中的MySQL Migration Toolkit可以非常方便快捷的将Oracle数据导到MySQL中,该软件可以在http://dev.mysql.com/downlo ...