锋利的jQuery学习笔记之jQuery选择器

Posted 2020-10-05 HelloWhy

在介绍jQuery选择器之前，先简单介绍一下CSS选择器--->

一、CSS选择器

常见的CSS选择器有以下几种：

选择器	语法	描述	示例
标签选择器	E{CSS规则}	以文档元素为选择符	td{font-size:10px;} a{tetx-decoration:none;}
ID选择器	#ID{CSS规则}	以文档元素的唯一标示ID为选择符	#node{corlor:red;}
类选择器	.className{CSS规则}	以文档元素的class作为选择符	div.node{background-color:yellow;}
群组选择器	E1,E2,E3{CSS规则}	以多个文档元素作为选择符	p,div,a,span{font-size:10px;}
后代选择器	E F{CSS规则}	以元素E的任意后代元素F作为选择器	div input{font:10px black;}
通配选择器	*{CSS规则}	以文档所有元素作为选择器	*{font-size:10px;}

 

 

 

 

 

 

 

 

 

 

 

二、jQuery选择器

jQuery选择器完全继承CSS选择器，可以快速找到DOM元素并添加对应的行为。

jQuery共有基本选择器、层次选择器、过滤选择器和表单选择器。下面对这几类选择器一一介绍

1、基本选择器

基本选择器

选择器	描述	返回	示例
element	根据给定的元素名称匹配元素	集合元素	$("p")选取所有的p元素
#id	根据给定的id匹配指定的元素	一个元素	$("#nodeName")选取id为nodeName的元素
#className	根据给定的class名称匹配元素	集合元素	$("div.span")选择class为span的所有div
*	匹配所有的元素	集合元素	$("*")选择所有的元素
selecter1,selecter,...,selecterN	将每一个选择器匹配的元素合并后返回	集合元素	$("div,span,p.info")选择所有的div\span和class为info的p元素

 

 

 

 

 

 

 

 

2、层次选择器

层次选择器

选择器	描述	返回	示例
$("ancestor descendant")	选择ancestor里的所有descendant(后代)元素	集合元素	$("div span")选取div里的所有span元素
$("parent > child")	选择parent的child(子)元素 PS:$("ancestor descendant")是选择后代（包括孙辈元素）      $("parent > child")只选择子元素	集合元素	$("div > span")选择div元素下名为span的子元素
$("pre + next‘)	选择紧接在pre元素后的下一个同辈元素	集合元素	$(".one + div")选择class为one后面的第一个div同辈元素
$("pre ~ siblings")	选择pre元素后面的所有同辈元素	集合元素	$("#two ~ div")选择id为two后面的所有div同辈元素

 

 

 

 

 

 

 

 

 

 

 

 

 

 

jQuery中的方法可以代替上面的某些选择器：

• next()方法等价于$("pre + next")。所以$(".one + div")就等价于$(".one").next();
• nextAll()方法等价于$("pre ~ siblings")。所以$("#two ~ div")就等价于$("#two").nextAll();
• siblings()方法是获取当前元素的所有同辈元素，不分前后；

3、过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS的伪类选择器语法相同，即选择器都是以一个冒号（:）开头，按照不同的过滤规则，过滤选择器可以分为：

基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤

 

基本过滤选择器

选择器	描述	返回	示例
:first	选择第一个元素	单个元素	$("div:first")选择所有div中的第一个元素
:last	选择最后一个元素	单个元素	$("div:last")选择所有div中的最后一个元素
:not(selector)	去所有与给定选择器匹配的元素	集合元素	$("div:not(‘.div1‘)")选择class不是div1所有div元素
:even	选择索引值为偶数的元素	集合元素	$("tr:even")选择索引值为偶数的tr元素
:odd	选择索引值为奇数的元素	集合元素	$("tr:odd")选择索引值为奇数的tr元素
:eq(index)	选择索引值等于index的元素	单个元素	$("input:eq(2)")选择索引值为2的元素，即第三个input元素（索引从0开始）
:gt(index)	选择索引值大于index的元素	集合元素	$("inputgt(2)")选择索引值大于2的元素，即第三个input后面的元素（索引从0开始）
:lt(index)	选择索引值小于index的元素	集合元素	$("input:lt(2)")选择索引值小于2的元素，即第三个input前面的元素（索引从0开始）
:header	选择所有的标题元素，例如h1，h2等	集合元素	$("header")选择网页中所有的标题元素h1到h6
:animated	选择当前正在执行动画的元素	集合元素	$("div:animated")选择正在执行动画的div元素
:focus	选择所有获取焦点的元素	集合元素	$(":focus")选择网页中所有获取焦点的元素

 

 

 

 

 

 

 

 

 

 

 

 

 

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

内容过滤选择器

选择器	描述	返回	示例
:contains(text)	选择文本内容包含text的元素	集合元素	$("div:contains(‘学生‘)")选择文本内容包含“学生”的所有div元素
:empty	选择不包含子元素或内容为空的元素	集合元素	$("div:empty")选择不包含子元素或者内容为空的div元素
:has(selector)	选择包含匹配选择器元素的元素	集合元素	$("div:has(p)")选择包含p元素的div元素
:parent	选择含有子元素或者文本的元素	集合元素	$("div:parent")选择含有子元素或者文本内容不为空的div元素

 

 

 

 

 

 

可见性过滤选择器根据元素的可见和不可见性来选择元素。

可见性过滤选择器

选择器	描述	返回	示例
:hidden	选择所有的隐藏元素	集合元素	$(":hidden")选择页面所有的隐藏元素 PS:隐藏元素包括样式属性display为none，visibility为hidden及隐藏的表单域
:visible	选择所有的可见元素	集合元素	$("div:visible")选择所有可见的div元素

 

 

 

 

 

属性过滤选择器是根据元素属性选择相应的元素

属性过滤选择器

过滤器	描述	返回	示例
[attribute]	选择包含该属性的元素	集合元素	$("div[id]")选择含有id属性的div元素
[attribute=value]	选择属性值等于value的元素	集合元素	$("div[id=‘div1‘]")选择id属性值等于div1的div元素
[attribute!=value]	选择属性值不等于value的元素	集合元素	$("div[id!=‘div1‘]选择id属性值不等于div1的div元素
[attribute^=value]	选择属性值以value开头的元素	集合元素	$("div[id^=‘div1‘]选择id属性值以div1开头的div元素
[attribute$=value]	选择属性值以value结尾的元素	集合元素	$("div[id$=‘div1‘]选择id属性值以duv1结尾的div元素
[attribute*=value]	选择属性值包含value的元素	集合元素	$("div[id*=‘div1‘]选择id属性值包含div1的div元素
[attribute|=value]	选择属性值为value或以value为前缀（该字符串后面跟一个连字符’-‘）的元素	集合元素	$("div[id|=‘div1‘]选择id属性值为div1或者以div1为前缀的div元素
[attribute~=value]	选择属性用空格分隔的值中包含一个给定值的元素	集合元素	$("div[id~=‘div1‘]选择id属性用空格分隔的值中等于div1的div元素
[attribute1][attribute2][attribute3]	用属性选择器合并成一个复合属性选择器，满足多个条件，没选择依一次，缩小一次选择	集合元素	$("div[id][title=‘hello‘])选择含有id属性并且title的属性值为hello的div元素

 

子元素过滤选择器是针所有父元素进行过滤，而不只是某一个指定的父元素

子元素过滤选择器

选择器	描述	返回	示例
:nth-child(index/even/odd/equation)	选择每个父元素下第index的子元素或者奇偶于元素（index从1开始）	集合元素	:eq(index)只匹配一个元素，而:nth-child(index)将匹配每一个父元素中索引值为index的子元素，且前者的索引从0开始，后者索引从1开始。
:first-child	选择每个父元素的第一个子元素	集合元素	:first只返回单个元素，而:first-child将返回每一个父元素中的第一个元素 $("ul li:last-child")选择每个ul中的第一个元素
:last-child	选择每一个父元素的最后一个子元素	集合元素	:last只返回打个元素，而:last-child将返回每一个父元素中的最后一个元素 $("ul li:first-child")选择每个ul中的最后一个元素
:only-child	如果某个元素是它父元素中的唯一子元素，那么它将被匹配，否则不会被匹配	集合元素	$("ul li:only-child")获取的是ul中的唯一子元素li

 

表单元素属性过滤器，主要是对所选择的的表单元素进行过滤。

表单对象属性过滤器

选择器	描述	返回	示例
:enabled	选择所有可用的表单元素	集合元素	$("#form1 :enabled")选择id=form1的表单内所有可用元素
:disabled	选择所有不可用的表单元素	集合元素	$("#form1 :disabled")选择id=form1的表单内所有不可用元素
:checked	选择所有被选中的元素（包括单选框、复选框）	集合元素	$("#input:checked")选择所有被选中的input元素
:selected	选择所有被选中的选项元素（下拉列表）	集合元素	$("select option:selected")选择i所有被选中的选项元素

 至此，所有的过滤选择器就介绍完了，下面介绍最后一种选择器-----表单选择器

3、表单选择器

利用表单选择器可以方便地获取到某个或某种类型的元素

表单选择器

选择器	描述	返回	示例
:input	选择所有的input、textarea、button、select元素	集合元素	$(":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中所有的选择器及使用方法，这么多的选择器，要想每一个都能理解，关键还在实践。