jquery中的层次选择器都有哪些选择器

层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。

$(“ancestor

descendant”)：选取parent元素后所有的child元素

ancestor的中文意思是“祖先”，descendant的中文意思是“后代”‍

$(“body div”)选取body元素下所有的div元素。    

$(“ul li”)    选取ul元素下所有的li元素。    

$(“#test div”)    选取id为“test”的元素所包含的所有的div子元素    

$(“div#test div”)    选取id为“test”的div所包含的所有的div子元素    

$(“test div”)    选取class为“test”的元素所包含的所有的div子元素    

$(“divtest span”)    选取class为“test”的div所包含的所有的span子元素    

$(“spantest demo”)    选取class为“test”的span所包含的所有的class为demo的元素    

$(“test demo”)    选取class为“test”的元素所包含的所有的class为demo的元素

2 $(“parent

> child”)：选取parent元素后所有的直属child元素，何谓“直属”，也就是第一级的意思了

$(“body > div”)选取body元素下所有的第一级div元素。    

$(“ul > li”)    选取ul元素下所有的第一级li元素。    

$(“#test > div”)    选取id为“test”的元素所包含的所有的第一级div子元素    

$(“div#test > div”)    选取id为“test”的div所包含的所有的第一级div子元素    

$(“test > div”)    选取class为“test”的元素所包含的所有的第一级div子元素    

$(“divtest > span”)    选取class为“test”的div所包含的所有的第一级span子元素    

$(“spantest > demo”)    选取class为“test”的span所包含的所有的第一级class为demo的元素    

$(“test > demo”)    选取class为“test”的元素所包含的所有的第一级class为demo的元素

3

$(“prev

+ next”)：prev和next是两个同级别的元素 选中在prev元素后面的next元素

$(“#demo+img”)选在id为demo元素后面的img对象如果id为demo元素后面没有同级的img对象，那么这个$(“#demo+img”)length=0

4

$(“prev

~ siblings”):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器

$(“#demo~[title]“)选择id为demo的元素后面所有带有title属性的元素，同样如果id为demo的元素后面没有一个带有title属性的元素，那么$(“#demo~[title]“)length = 0

遍历子元素：

jquery中遍历子元素，可以利用 $("#ul_tags>dl")  这种需要是直接的子节点，或 $("div#ul_tags:dl") 也是可以的，也可以直接使用$("div#ul_tags a")的形式。

jQuery：

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 60+、FF 15+、Safari 20+、Opera 90+等。

语言特点：

1快速获取文档元素

jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

2提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

3创建AJAX无刷新网页

AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。

4提供对JavaScript语言的增强

jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等 *** 作。

5增强的事件处理

jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

6更改网页内容

jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

提供两种方法获取div下第一个或最后一个a标签的内容：

使用选择器 first-child 和 last-child

使用遍历方法 first() 和last()

实例演示如下:

1、HTML结构

<div id="test">

<a href="#">第1个超链接</a>

<a href="#">第2个超链接</a>

<a href="#">第3个超链接</a>

<a href="#">第4个超链接</a>

</div>

<input type="button" id="btn1" value="第一个超链接">

<input type="button" id="btn2" value="最后一个超链接">

2、jquery代码

$(function(){

$("#btn1")click(function() {

var str = $("#test a:first-child")text();

alert(str);

});

$("#btn2")click(function() {

var str = $("#test a")last()text();

alert(str);

});

});

3、效果演示

1

基本选择器

$(#id)

根据给定的id匹配一个元素

$(class)

根据给定的类名匹配元素

$(element)

根据给定的元素名匹配元素

$()

匹配所有元素

$(selector1,selector2,,selectorN)

将每一个选择器匹配到的元素合并后一起返回

2

层次选择器

$("ancestor

descendant")

选取ancestor元素里的所有descendant（后代）元素

$("parent

>

child")

只选取parent元素下的child（子层级）元素，与$("ancestor

descendant")有区别，前者选择所有后代元素（含且不限于子层级）

$('prev

+

next')

选取紧接在prev元素后的next元素

$('prev

~

siblings')

选取prev元素之后的next元素

3

过滤选择器

31

基本过滤选择器

$("selector:first")

选取第一个元素

$("selector:last")

选取最后一个元素

$("selector:not(selector2)")

去除所有与给定选择器匹配的元素

$("selector:even")

选取索引是偶数的所有元素，索引从0开始

$("selector:odd")

选取索引是奇数的所有元素，索引从0开始

$("selector:eq(index)")

选取索引等于index的元素，index从0开始

$("selector:gt(index)")

选取索引大于index的元素，index从0开始

$("selector:lt(index)")

选取索引小于index的元素，index从0开始

$(":header")

选取所有的标题元素，如h1,h2,h3等等

$(":animated")

选取当前正在执行动画的所有元素

32

内容过滤选择器

$(":contains(text)")

选取含有文本内容为"text"的元素

$(":empty")

选取不包含子元素或者文本的空元素

$(":has(selector2)")

选取含有选择器所匹配的元素的元素

$(":parent")

选取含有子元素或者文本的元素

33

可见性过滤选择器

$(":hidden")

选取所有不可见的元素

$(":visible")

选取所有可见的元素

34

属性过滤选择器

$("selector[attribute]")

选取拥有此属性的元素

$("selector[attribute=value]")

选取属性的值为value的元素

$("selector[attribute!=value]")

选取属性的值不等于value的元素

$("selector[attribute^=value]")

选取属性的值以value开始的元素

$("selector[attribute$=value]")

选取属性的值以value结束的元素

$("selector[attribute=value]")

选取属性的值含有value的元素

$("selector[selector2][selectorN]")

用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围，如$("div[id][title$='test']")选取拥有属性id，并且属性title以"test"结束的<div>元素

35

子元素过滤选择器

$(":nth-child(index/even/odd/equation)")

选取每个父元素下的第index个子元素或者奇偶元素，index从1算起

$("selector:first-child")

选取每个父元素的第一个子元素

$("selector:last-child")

选取每个父元素的最后一个子元素

$("selector:only-child")

如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配

36

表单对象属性过滤选择器

$("selector:enabled")

选取所有可用元素

$("selector:disabled")

选取所有不可用元素

$("selector:checked")

选取所有被选中的元素（radio,checkbox）

$("selector:selected")

选取所有被选中的选项元素（select）

4

表单选择器

$(":input")

选取所有的<input>,<textarea>,<select>,<button>元素

$(":text")

选取所有的单行文本框

$(":password")

选取所有的密码框

$(":radio")

选取所有的单选框

$(":checkbox")

选取所有的复选框

$(":submit")

选取所有的提交按钮

$(":image")

选取所有的图像按钮

$(":reset")

选取所有的重置按钮

$(":button")

选取所有的按钮

$(":file")

选取所有的上传域

$(":hidden")

选取所有不可见元素

和现实生活中的概念一样，子就是指儿子，是自己直接生出来的，而后代则是指儿子、孙子、曾孙、重孙……十八代……乃至千秋万代，即辈分低于自己的所有都是后代。

比如下面的：

<div>

<ul>

<li>111</li>

<li>222</li>

<li>333</li>

</ul>

<p>

<span></span>

</p>

</div>

ul是div的子元素，p也是div的子元素，li是ul的子元素，span是p的子元素，li和span不是div的子元素；

而ul、li、p、span都是div的后代元素。

在JQuery中，$("div

ul")

这样选择的其实是后代元素，即ul不管与div隔了多少代都会被选中；只有

$("div>ul")

这样才是真正选择的子元素，即紧挨着div的ul

以上就是关于jquery中的层次选择器都有哪些选择器全部的内容，包括:jquery中的层次选择器都有哪些选择器、【jQuery】$("#ID div").each(function(){ 如何只遍历子元素而非全部元素、用jQuery怎么获取div下第一个或最后一个a标签的内容等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！