$("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. javascript中类的属性研究

    原文:javascript中类的属性研究 本篇文章主要针对javascript的属性进行分析,由于javascript是一种基于对象的语言,本身没有类的概念,所以对于javascript的类的定义有很 ...

  2. oracle删除重复记录，只保留rowid最小的记录

    初探oracle删除重复记录,只保留rowid最小的记录   如题,初探oracle删除重复记录,只保留rowid最小的记录(rowid可以反映数据插入到数据库中的顺序) 一.删除重复记录可以使用多种 ...

  3. php正则函数学习

    原文:php正则函数学习 <?php /** * php正则函数学习 * * 原来的ereg 和eregi 函数已经废弃掉了,目前版本用preg_match代替 * * preg_match 在 ...

  4. poj 3026 Borg Maze (bfs + 最小生成树)

    链接:poj 3026 题意:y行x列的迷宫中,#代表阻隔墙(不可走).空格代表空位(可走).S代表搜索起点(可走),A代表目的地(可走),如今要从S出发,每次可上下左右移动一格到可走的地方.求到达全 ...

  5. C语言利用va_list、va_start、va_end、va_arg宏定义可变參数的函数

    在定义可变參数的函数之前,先来理解一下函数參数的传递原理: 1.函数參数是以栈这样的数据结构来存取的,在函数參数列表中,从右至左依次入栈. 2.參数的内存存放格式:參数的内存地址存放在内存的堆栈段中, ...

  6. 错 &#39;Cannot run program &quot;/home/uv/IDE/adt/sdk/platform-tools/adb&quot;: error=2, No such file or directory

    为linux平台搭建android开发环境的人,您可能会遇到问题,如下面有: 64位置linux安装64位置eclipse和64位置jdk开场后eclipse错误后 ""Canno ...

  7. javascript7

    语句:条件,循环,跳转, 表达式语句,复合语句和空语句,声明语句,var,function,条件语句,switch,循环,标签语句,break语句,continue语句,return语句,throw语 ...

  8. Oracle查字符集查版本号

    原文:Oracle查字符集查版本号 ---查字符集 select * from nls_database_parameters ---查版本 查看oracle的版本信息 (1)用客户端连接到数据库,执 ...

  9. 关于ligerform中select与text的赋值与取值

    如有下ligerform表单: var formData = [ { display: "区域", name: "QYYJ", newline: true, l ...

  10. HBuilder HTML 自定义代码块

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