jQuery选择器

最新推荐文章于 2022-01-25 07:00:00 发布

杏仁璐

最新推荐文章于 2022-01-25 07:00:00 发布

阅读量208

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_41218152/article/details/82729260

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery选择器

一、jQuery选择器是什么

(一).CSS选择器

CSS是一项出色的技术，它使得网页的结构和表现层样式完全分离
利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构，只需要通过添加不同的CSS规则，就可以得到各种不同样式的网页
要使用某个样式应用于特定的HTML元素，首先需要找到该元素。在CSS中，执行这一任务的表现规则称为CSS选择器

(二).jQuery选择器

jQuery中的选择器完全继承了CSS的风格
利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心是否支持这一选择器
学会使用选择器是学习jQuery的基础，jQuery的行为规则都必须在获取到元素之后才能进行
jQuery选择器的写法与CSS选择器的写法十分相似，两者的作用效果不同，CSS选择器找到元素后是添加样式，而jQuery选择器找到元素后是添加行为
jQuery中涉及操作CSS样式的部分比单纯的CSS功能更为强大，并且具有跨浏览器的兼容性

二、jQuery选择器的优势

(一).简介的写法

$()函数在很多JavaScript类库中都被作为一个选择器来使用，在jQuery中也不例外
其中，$("#ID")用来代替document.getElementById()函数，即通过ID获取元素；$("tagName")用来代替document.getElementByTagName()函数，即通过标签名获取HTML元素

(二).支持CSS1到CSS3选择器

jQuery选择器支持CSS 1、CSS 2的全部和CSS 3的部分选择器，同时它也有少量独有的选择器
使用CSS选择器时，需要考虑主流浏览器是否支持某些选择器。而在jQuery中，可以放心的使用jQuery选择器而无需考虑浏览器是否支持这些选择器

(三).完善的处理机制

使用jQuery选择器不仅比getElementById()和getElementByTagName()函数简介，而且还能避免某些错误
用jQuery获取网页中不存在额元素也不会报错
$()获取的永远是对象，即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在时

//不能使用以下代码
if($("#tt")){
	//do something
}

//而应该根据获取到元素的长度来判断
if($("#tt").length>0){
	//do something
}

//或者转化成DOM对象来判断
if($("#tt")[0]){
	//do something
}

三、jQuery选择器

(一).基本选择器

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素
在网页中，每个id名称只能使用一次，class允许重复使用

选择器	描述	返回	示例
`#id`	根据给定的`id`匹配一个元素	单个元素	`$("#test")`选取`id`为`test`的元素
`.class`	根据给定的类名匹配元素	集合元素	`$(".test")`选取所有`class`为`test`的元素
`element`	根据给定的元素名匹配元素	集合元素	`$("p")`选取所有的`<p>`元素

`*`	匹配所有元素	集合元素	`$("*")`选取所有元素
`selector1,···,selectorN`	将每一个选择器匹配到的元素合并后一起返回	集合元素	`$("div,span,p.myClass")`选取所有`<div>`,`<span>`和拥有`class`为`myClass`的`<p>`标签的一组元素

(二).层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择
可以使用next()方法来代替$("prev+next")选择器
可以使用nextAll()方法来代替$("prev+siblings")选择器
$("prev+siblings")选择器只能选择"prev"元素后面的同辈<div>元素。而sibling()方法与前后位置无关，只要是同辈节点都能匹配

选择器	描述	返回	示例
`$("ancestor descendant")`	选取`ancestor`元素里的所有`descendant`（后代）元素	集合元素	`$("div span")`选取`<div>`里所有的`<span>`元素
`$("parent>child")`	选取 `parent`元素下的`child`(子)元素，与`$("ancestor descendant")`有区别，`$("ancestor descendant")`选择的是后代元素	集合元素	`$("div>span")`选取的是`<div>`元素下的元素名是`<span>`的子元素
`$("prev+next")`	选取连接在`prev`元素后的next元素	集合元素	`$(".one+div")`选取`class`为`one`的下一个`<div>`同辈元素
`$("prev~siblings")`	选取`prev`元素之后的所有`siblings`元素	集合元素	`$("#two~div")`选取`id`为`two`的元素后面的所有`<div>`同辈元素

(三).过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头
按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器

1.基本过滤选择器

选择器	描述	返回	示例
`:first`	选取第1个元素	单个元素	`$("div:first")`选取所有`<div>`元素中第1个`<div`
`:last`	选取最后一个元素	单个元素	`$("div:last")`选取所有`<div>`元素中最后一个`<div>`元素
`:not(selector)`	去除所有与给定选择器匹配的元素	集合元素	`$("input:not(.myClass)")`选取`class`不是`myClass`的`<input>`元素
`:even`	选取索引是偶数的所有元素，索引从0开始	集合元素	`$("input:even")`选取索引是偶数的`<input>`元素
`:odd`	选取索引是奇数的所有元素，索引从0开始	集合元素	`$("input:odd")`选取索引是奇数的`<input>`元素
`:eq(index)`	选取索引等于`index`的元素(`index`从0开始)	集合元素	`$("input:eq(1)")`选取索引等于1的`<input>`元素
`:gt(index)`	选取索引大于`index`的元素（`index`从0开始）	集合元素	`$("iinput:gt(1)")`选取索引大于1的`<input`元素（注：大于1，而不包括1）
`:lt(index)`	选取索引小于`index`的元素（`index`从0开始）	集合元素	`$("iinput:lt(1)")`选取索引小于1的`<input`元素（注：小于1，而不包括1）
`:header`	选取所有的标题元素，例如`h1,h2,h3`等	集合元素	`$(":header")`选取网页中所有的`<h1>`，`<h2>`,`<h3>`······
`:animated`	选取当前正在执行的动画的所有元素	集合元素	`$("div:animated")`选取正在执行动画的`<div>`元素
`:focus`	选取当前获取焦点的元素	集合元素	`$(":focus")`选取当前获取焦点的元素

2.内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上

选择器	描述	返回	示例
`:contains(text)`	选取含有文本内容为`"text"`的元素	集合元素	`$("div:contanis('我')")`选取含有文本`"我"`的`<div>`元素
`:empty`	选取不包含子元素或者文本的空元素	集合元素	`$("div:empty")`选取不包含子元素（包括文本元素）的`<div>`空元素
`:has(selector)`	选取含有选择器所匹配的元素的元素	集合元素	`$("div:has(p)")`选取含有`<p>`元素的`<div>`元素
`:parent`	选取含有子元素或者文本的元素	集合元素	`$("div:parent")`选取拥有子元素（包括文本元素）的`<div>`元素

3.可见性过滤选择器

可见性过滤选择器第根据元素的可见性和不可见状态来选择相应的元素

选择器	描述	返回	示例
`:hidden`	选取所有不可见元素	集合元素	`$(":hidden")`选取所有不可见的元素
`:visible`	选取所有可见的元素	集合元素	`$("div:visible")`选取所有可见的`<div>`元素

4.属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

选择器	描述	返回	示例
`[attribute]`	选取拥有此属性的元素	集合元素	`$("div[id]")`选取所有拥有id的元素
`[attribute=value]`	选取属性的值为`value`的元素	集合元素	`$("div[title=test]")`选取属性`title`为`"test"`的`<div>`元素
`[attribute!=value]`	选取属性的值不等于`value`的元素	集合元素	`$("div[title!=test]")`选取属性`title`不等于`"test"`的`<div>`元素（注意：没有属性`title`的`<div>`元素也会被选取）
`[attribute^=value]`	选取属性的值以`value`开始的元素	集合元素	`$("div[title^=test]")`选取属性`title`以`"test"`开始的`<div>`元素
`[attribute$=value]`	选取属性的值以`value`结束的元素	集合元素	`$("div[title$=test]")`选取属性`title`以`"test"`结束的`<div>`元素
`[attribute*=value]`	选取属性的值含有`value`的元素	集合元素	`$("div[title*=test]")`选取属性`title`含有`"test"`的`<div>`元素
`[attribute\|=value]`	选取属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符`"-"`）的元素	集合元素	`$("div[title\|='en']")`选取属性`title`等于`en`或以`en`为前缀（该字符后跟一个连字符`"-"`的元素）
`[attribute~=value]`	选取属性用空格分隔的值中包含一个给定值的元素	集合元素	`$("div[title~='uk']")`选取属性`title`用空格分隔的值中包含字符`uk`的`<div>`元素
`[attribute1][attribute2][attributeN]`	用属性选择器和并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围	集合元素	`$("div[id][title$='test']")`选取拥有属性id，并且属性`title`以`"test"`结束的`<div>`元素

5.子元素过滤选择器

nth-child()选择器是很常用的子元素过滤选择器，详细功能如下：
* nth-child(even)能选取每个父元素下的索引值是偶数的元素
* nth-child(odd)能选取每个父元素下的索引值是奇数的元素
* nth-child(2)能选取每个父元素下的索引值是等于2的元素
* nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素（n从1开始）
* nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素(n从1开始)
eq(index)只匹配一个元素，而nth-child将为每一个符合条件的父元素匹配子元素。nth-child的index是从1开始的，而:eq(index)是从0开始的

选择器	描述	返回	示例
`:nth-child(index/even/odd/equation)`	选取每个父元素下的第`index`个子元素或者奇偶元素（`index`从1算起）	集合元素	`:eq(index)`只匹配一个子元素，`:nth-child()`将为每个父元素匹配到子元素,并且`:nth-child(index)`的`index`是从1开始的，而`:eq(index)`是从0算起的
`:first-child`	选取每个父元素的第一个子元素	集合元素	`:first`值返回单个元素，而`:first-child`选择符将为每个父元素匹配第一个子元素。例如`$("ul li:first-child");`选择每个`<ul>`中第1个一个`<li>`元素
`:last-child`	选取每个父元素的最后一个子元素	集合元素	`:last`值返回单个元素，而`:last-child`选择符将为每个父元素匹配最后一个子元素。例如`$("ul li:last-child");`选择每个`<ul>`中最后一个`<li>`元素
`:only-child`	如果某个元素是它父元素中唯一的一个子元素，那么它将会被匹配。如果父元素中含有其他元素，则不会被匹配	集合元素	`$("ul li:only-child")`在`<ul>`中选取是唯一子元素的`<li>`元素

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

选择器	描述	返回	示例
`:enabled`	选取所有可用元素	集合元素	`$("#form1:enabled");`选取`id`为`form1`的表单内的所有可用元素
`:disabled`	选取所有不可用元素	集合元素	`$("#form1:disabled");`选取`id`为`form1`的表单内的所有不可用元素
`:checked`	选取所有被选中元素（单选框、复选框）	集合元素	`$("input:checked");`选取所有被选中的`<input>`元素
`:selected`	选取所有被选中的选项元素（下拉列表）	集合元素	`$("slect option:selected");`选取所有被选中的选项元素

(四).表单选择器

选择器	描述	返回	示例
`:input`	选取所有的`<input>`、`<textarea>`、`<select>`和`<button>`元素	集合元素	`$(":input")`选取所有的`<input>`、`<textarea>`、`<select>`和`<button>`元素
`:text`	选取所有的单行文本框	集合元素	`$(":text")`选取所有的单行文本框
`:password`	选取所有的密码框	集合元素	`$(":password")`选取所有的密码框
`:radio`	选取所有的单选框	集合元素	`$(":radio")`选取所有的单选框
`:checkbox`	选取所有的复选框	集合元素	`$(":checkbox")`选取所有的复选框
`:submit`	选取所有的提交按钮	集合元素	`$(":submit")`选取所有的提交按钮
`:image`	选取所有的图像按钮	集合元素	`$(":image")`选取所有的图像按钮
`:reset`	选取所有的重置按钮	集合元素	`$(":reset")`选取所有的重置按钮
`:button`	选取所有的按钮	集合元素	`$(":button")`选取所有的按钮
`:file`	选取所有的上传域	集合元素	`$(":file")`选取所有的上传域
`:hidden`	选取所有不可见元素	集合元素	`$(":hidden")`选取所有不可见元素

在这里插入图片描述 源于整理《锋利的 jQuery》

杏仁璐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器

jQuery选择器一、jQuery选择器是什么(一).CSS选择器CSS是一项出色的技术，它使得网页的结构和表现层样式完全分离利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构，只需要通过添加不同的CSS规则，就可以得到各种不同样式的网页要使用某个样式应用于特定的HTML元素，首先需要找到该元素。在CSS中，执行这一任务的表现规则称为CSS选择器...
复制链接

扫一扫