jquery中几种层级选择器的详细说明

代码如下：

<!DOCTYPE html><html>    <head>        <title>JQUERY选择器测试</title>    </head>    <body>    　　<div>   　　　　 <p>Hello World!</p>   　　　　 <p class="foo">另外一段，但是这段有个class</p>  　　　　  <p><span>另外一段，这段里面有个span</span></p>  　　　　  <p id="bar">       　　　　 <span class="foo">这个span在di为bar的段落内</span>     　　　　   <span id="jiu">这个span也在di为bar的段落内</span>    　　　　</p>    　　　　<span>再来一个span</span>   　　　　 <span class="foo2">再来一个span</span>  　　  </div>

   　　 <span class="foo">再来一个span</span>   　　 <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>    </body></html>

首先是选择后代元素(空格)

比如

>>> $("p span")

[span, span.foo, span#jiu]会选择所有p元素下的span元素

又如

>>> $("body span")

[span, span.foo, span#jiu, span, span.foo2, span#barr.foo]

就会选择body下的所有span元素

然后是选择子代元素(>)

如

>>> $("div>span")

[span, span.foo2]

而如果是$("div span")答案则为

>>> $("div span")

[span, span.foo, span#jiu, span, span.foo2]相信你已经发现了不同之处。、

它只选择它的子代的元素

再就是选择下一个兄弟元素(+)

如

>>> $("span+span")

[span#jiu, span.foo2]

或者

>>> $(".foo+span")

[span#jiu]

只选择下一个的兄弟元素

最后就是选择兄弟元素(~)

如

>>> $("#bar~span")

[span, span.foo2]

又如

>>> $("p~span")

[span, span.foo2]

发现结果一样，结论就是它会选择所有跟在其后的兄弟元素。

如有不懂，可继续追问！转载请说明出处~谢谢！

转载于:https://www.cnblogs.com/jia58960/archive/2012/03/09/2388156.html

jquery中几种层级选择器的详细说明相关推荐

jquery动态追加html,jQuery中几种动态追加元素的方法
几乎所有网站的开发都离不开jQuery,jQuery可以很方便的实现网页中的一些效果,也很轻松的对网页中的一些DIV元素进行添加,修改或删除的操作.今天我们就说一说,如何对网页中某个指定的DIV进行元 ...
JQuery中的九大选择器及其应用（中）
第四种:内容选择器 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
JQuery中的九大选择器及其应用（上）
第一种:基本选择器 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
JQuery中的九大选择器及其应用（下）
第七种:子元素选择器 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
JQuery中的事件和选择器
学习jQuery最应该了解的也就是JQuery中的事件和选择器. 那么常见的事件有哪些: 鼠标事件:mousedown鼠标按下,mouseup鼠标松开,mouseenter鼠标进入某个元素 mouse ...
jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器表 ...
四、jQuery 中的事件和动画(嘎嘎详细)
文章目录前言一.事件 1.1 加载 DOM 1.1.1 执行时机 1.1.2 多次使用 1.1.3 简写方式 1.2 事件绑定 1.2.1简单使用 1.2.2 简写绑定事件 1.3 合成事件 1. ...
JQuery中的基本筛选选择器
很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQuery自己为了开 ...
JQuery中常用的属性选择器
jQuery中使用$()作为选择符极大提高工作效率以及方便快捷;一些常用属性的选择器由以下几种 1) $('#id') id选择器 2) $('.class') css选择器,class类名 3) $ ...

jquery中几种层级选择器的详细说明

jquery中几种层级选择器的详细说明相关推荐

最新文章

热门文章