$("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 配置－－Tomcat服务器

    1. 下载tomcat版本(tar.gz) 到 apache官方主页 下载 Mac 版本的完整 tar.gz文件包.(问公司后台,是Tomcat 6.0/7.0/8.0版本?) 解压拷贝到 /Libr ...

  2. 使用jquery实现放大镜效果

    原文:使用jquery实现放大镜效果 实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整 ...

  3. Android注入事件的三种方法比较

    方法1:使用内部APIs 该方法和其他所有内部没有向外正式公布的APIs一样存在它自己的风险.原理是通过获得WindowManager的一个实例来访问injectKeyEvent/injectPoin ...

  4. Objective-C系列

    我的Objective-C系列文章和坚持写博客的感想   做iOS开发有一段时间了,也有自己上线的App产品,也在坚持着发表技术博客总结自己所学的东西.在写博客的时候虽然博文中不免有错别字,但每句话都 ...

  5. [推荐]ORACLE PL/SQL编程之五：异常错误处理(知已知彼、百战不殆)

    原文:[推荐]ORACLE PL/SQL编程之五:异常错误处理(知已知彼.百战不殆) [推荐]ORACLE PL/SQL编程之五: 异常错误处理(知已知彼.百战不殆) 继上三篇:ORACLE PL/S ...

  6. 完整的thinphp+phpexcel实现excel报表的输出(有图有效果)

    准备工作:1.下载phpexcel1.7.6类包:2.解压至TP框架的ThinkPHP\Vendor目录下,改类包文件夹名为PHPExcel176,目录结构如下图:       编写代码(以一个订单汇 ...

  7. jmeter参数化之CSV Data Set Config

    在jmeter中,可以用CSV Data Set Config实现参数化. 1.准备参数化数据

  8. C语言两个libxml2库使用的问题

    最近使用libxml2想做点东西,翻看一些example后还是有些疑问,去segmentfault问了下,感谢@pingjiang的热心解答,问题解决,记录如下 (一)如下是一个XML文件,p为根结点 ...

  9. 小公司免费的ERP软件

    http://www.2bizbox.cn/ https://www.odoo.com/

  10. leetcode[159] Longest Substring with At Most Two Distinct Characters

    找到最多含有两个不同字符的子串的最长长度.例如:eoeabc,最长的是eoe为3,其他都为2. 思路: 用p1,p2表示两种字符串的最后一个出现的下标位置.初始p1为0. p2为-1.start初始化 ...