总结JQuery中的选择器

选择器是jquery的根基,在jquery中,对事件处理,遍历DOM都需要选择器,如果能熟练掌握选择器,不仅能简化代码,还可以达到事半功倍的效果,下面就总结一下jquery中常用的选择器。在说jquery的选择器之前,先总结一下css选择器。

css选择器

选择器

语法

描述

示例

标签选择器

E{css规则}

以文档标签作为选择符

div{width:100px;}

ID选择符

#id {css规则}

以文档元素的唯一标识id号作为选择符

#box{width:100px;height:100px;}

类选择符

E.className{css规则}

以文档元素的类名作为选择符

div.box{color:#fff;}

.box{background:red;}

群组选择器

E1,E2,E3{css规则}

多个元素应用同样的样式

div,p,h1{padding:0;margin:0}

后代选择器

E F{css规则}

以元素E的后代元素F作为选择符

.box a{color:green;}

通配符选择器

*{css规则}

以文档的所有元素作为选择符

*{font-size:14px;}

伪类选择器

请见链接:

jquery选择器

jquery中的选择器完全继承了css中的风格,利用jquery选择器,可以迅速便捷的找到文档中的DOM元素,然后给他们添加相应的行为。下面总结一下jquery中的选择器。

1. 基本选择器

基本选择器是jquery中常用的选择器,也是最简单的选择器,他通过元素和标签来查找DOM中的元素,注意:在网页中,id名称只能使用一次,class允许多次使用。

选择器

描述

返回

示例

#id

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

单个元素

$("#test")选取id为test的元素

.class

根据给定的类名匹配元素

集合元素

$(".test")选取class为test的元素

element

根据给定的元素名称

集合元素

$("p")选取所有的p元素

*

匹配所有的元素

集合元素

$("*")选取所有的元素

Selector1,Selector2,Selector3...

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

集合元素

$("div,span,.p.box")选取所有div,所有span,和class名为box的p元素

 

2. 层次选择器

 

如果想通过DOM元素之间的层次关系来获取特定的元素,譬如:后台元素,兄弟元素,子元素,那么层次选择器是一个非常好的选择,下面就总结一下层次选择器。

                                                                

选择器

描述

返回

示例

$("ancestor descendant")

选取ancestor元素里的所有descendant元素

集合元素

$("div span")选取div里的所有span元素

$("parent>child")

选取parent下的所有子元素child

集合元素

$("div>span")选取div下的所有名为span的子元素

$(" prev+next ")

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

集合元素

$(".one+div")选取class名为one的下一个div元素

$("prev~siblings")

选取元素prev元素之后的所有兄弟siblings元素

集合元素

$(".one~p")选取class名为one后面的所有子元素为siblings的元素

注意:

$("prev+next")可以用$("prev").next("next元素")替换。

$("prev~siblings")可以用$("prev").nextAll("next元素")替换

例子:

$(".box+div")  等价  $(".box").next("div");

$(".box~div") 等价 $(".box").nextAll("div");

3. 过滤选择器

过滤选择器是根据特定的规则来筛选特定的DOM元素,过滤规则与css中的伪类选择器语法相同。过滤选择器以“:”开头,过滤选择器根据过滤烦人内容不同,可以分为基本过滤选择器,属性过滤,内容过滤,表单过滤子元素过滤,可见性过滤

 (1) 基本过滤选择器

选择器

描述

返回

示例

:first

选取第一个元素

单个元素

$("div:first")选取所有div的第一个div元素

:last

选取最后一个元素

单个元素

$("div:last")选取所有div第最后一个div元素

:not(selector)

选取除了selector元素之外的元素

集合元素

$("div:not('.box')")选取除了class名为box元素的其他div元素

:even

选取所有索引号为偶数的元素,索引号从0开始

集合元素

$("div:even")选取所有索引号为偶数的div元素

:odd

选取所有索引号为奇数的元素,索引号从0开始

集合元素

$("div:odd")选取所有索引号为奇数的 div元素

:eq(index)

选取索引号为index的元素

单个元素

$("div:eq(0)")选取索引号为0的div元素,也就是第一个div元素

:gt(index)

选过索引号大于index的元素

集合元素

$("div:gt(2)")选取索引号大于2的div元素

:lt(index)

选取索引号小于index的 元素

集合元素

$("div:lt(3)")选取索引号 小于3的 div元素

:header

选取网页中所有的标题元素(h1,h2,h3,h4,h5,h6)

集合元素

$(":header")选取网页中所有 的标题元素

H1,h2...

:animated

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

集合元素

$("div:animated")选取当前正在执行动画的 div

  (2) 内容选择器

选择器

描述

返回

示例

:conntains("text")

筛选文本中包含"text"的元素

集合元素

$("p:contains('你好')")选取文本包含“你好”的元素

:empty

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

集合元素

$("div:empty")选取不包含子元素或文本的div元素

:has(selector)

选取含有selector元素的元素

集合元素

$("div:has('p')")选取含有p元素的div元素

:parent

选择含有子元素或文本的元素

集合元素

$("div:parent")选取含有子元素或文本的div元素

  (3) 选择可见性选择器

选择器

描述

返回

示例

:hidden

选取所有不可见的元素

集合元素

$(":hidden")选取所有不可见的元素,包括display:none;type="hidden";visiblity:hidden

:visible

选取所有可见元素

集合元素

$(":visible")选取所有可见元素

 (4) 属性过滤选择器

选择器

描述

返回

示例

[attribute]

选择拥有此属性的元素

集合元素

$("div[id]")选取拥有id属性的 div元素

[attribute=value]

选择属性值为value的元素

集合元素

$("div[title='box']")选取title为box的 div元素

[attribute!=value]

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

集合元素

$("div[title!='box']")选取title不为box的 div元素,其中没有title属性的元素也会被选择

[attribut^=value]

选择属性值以value开头的元素

集合元素

$("div[title^=''b"])选取title以b开头的 div元素

[attribut$=value]

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

集合元素

$("div[title$=''b"])选取title以b结尾的 div元素

[attribut*=value]

选择属性值含有value的元素

集合元素

$("div[title*=''b"])选取title属性值含有b的 div元素

[selector1] [selector2] [selectorN]

选择含有多个属性的选择器

集合选择器

$("div[id][class='box']")选取含有id属性和class属性,并且class="box"的div元素

  (5)子元素过滤选择器

选择器

描述

返回

示例

:nth-child(index/even/odd)注意:index从1开始

选取每个父元素下的第index元素或奇偶元素

集合元素

 $("ul li:nth-child(3)")选择ul下的第三个li

:first-child

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

集合元素

 $("ul li: first-child ")选择ul下的第一个li

:last-child

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

集合元素

 $("ul li:last-child ")选择ul下的最后一个li

:only-child

 如果某个元素是它父元素中惟一的子元素,那么将会被匹配。如果父元素中含有其它元素,刚不会匹配

集合元素

 $("ul li:only-child ")在ul中选择是唯一元素的li元素

 (6) 表单对象属性过滤选择器

此选择器主要是选取表单元素进行过滤

选择器

描述

返回

示例

:enabled

选取所有可用元素

集合元素

$("#form1 :enabled")选取form1下所有可用的元素

:disabled

选取所有不可用元素

集合元素

$("#form2:disabled")选取id为form2表单内的所有不可用的元素

:checked

选中所有被选中的元素(单选,复选)

集合元素

$("#form3:checked")选中id为form3表单下所有被选中的元素

:selected

选取所有被选中 的选项元素(下拉列表)

集合元素

$("select:selected")选取所有被选中的选项元素

 4. 表单选择器

jquery中专门加入了表单选择器

选择器

描述

返回

示例

:input

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

集合元素

$(":input")选取所有的<input><textarea><select><button>元素

:text

选取所有的当行文本框

集合元素

$(":text")选取所有的单行文本框

:password

选取所有的密码框

集合元素

$(":password")选取所有的密码框

:radio

选取所有的单选框

集合元素

$(":radio")选取所有的单选框

:checkbox

选取所有的多选框

集合元素

$(":checkbox")选取所有的多选框

:submit

选取所有的提交按钮

集合元素

$(":submit")选取所有的提交按钮

:reset

选取所有的重置按钮

集合元素

$(":reset")选取所有的重置按钮

:image

选取所有的图像按钮

集合元素

$(":image")选取所有的图像按钮

:button

选取所有的按钮

集合元素

$("button")选取所有的按钮

:file

选取所有的上传域

集合元素

$(":file")选取所有的上传域

:hidden

选取所有的不可见元素

集合元素

$(":hidden")选取所有不可见元素

本文转载自:迹忆客(https://www.jiyik.com)

以上是 总结JQuery中的选择器 的全部内容, 来源链接: utcz.com/z/290096.html

回到顶部