CSS选择器和JQuery选择器对比

CSS选择器和JQuery选择器对比

	CSS选择器	JQuery选择器
基本选择器	√	√
层级选择器	√	√
属性选择器	√
伪类选择器	√
伪元素选择器	√
过滤选择器		√
内容选择器		√
可见性选择器		√
属性过滤器		√
子元素过滤器		√
表单选择器		√
状态过滤选择器		√
混淆选择器		√

jQuery选择器

通过选择器，可以获取到页面元素。jQuery具有强大的选择器，跟CSS3选择器类似 。

1、基础选择器

选择器	名称	描述	示例
#id	id选择器	根据给定的id匹配一个元素	$(“#box”);选取id为box元素
.class	类选择器	根据给定的类名匹配元素	$(“.box”);选取所有类名为box元素
element	元素选择器	根据给定的元素名称匹配元素	$(“p”);选取所有 元素
*	通配符选择器	匹配所有元素	$(“*”);选取所有元素
selector1,selector2,selectorN	并集选择器	将所有选择器匹配到的元素合并后一起返回	$(“div,p,.box”);选取所有 元素,所有 元素和所有类名为box元素

2、层次选择器

选择器	名称	描述	示例
$(“ancestor descendant”)	后代选择器	选取ancestor元素的所有descendant后代标签(不光是儿子,包括孙子/重孙子等)	$(“div span”);选取 元素里所有的 元素
$(“parent > child”)	子元素选择器	找到选取parent 元素中所有直接子元素child(只有儿子,不包括孙子/重孙子等)	$(“div>span”);选取 元素下元素名称是 的子元素
$(“prev + next”)	相邻兄弟选择器	选取prev元素后面紧跟的那个next元素	$(“.one+div”);选取类名为one的下一个同级的 元素
$(“prev ~ siblings”)	通用兄弟选择器	选取prev元素后面的所有next元素	$(“#two~div”);选取id名为two元素后面所有同级的 元素

3、过滤选择器

写法	描述
$(‘p:first’)	选取页面元素内的第一个p元素
$(‘p:last’)	选取页面元素内的最后一个p元素
$(‘p:not(.select)’)	选取选择器不是select的p元素
$(‘p:even’)	选取索引是偶数的P元素(索引从0开始)
$(‘p:odd’)	选取索引是奇数的p元素(索引从0开始)
$(‘p:eq(index)’)	选取索引等于index的p元素(索引从0开始,索引支持负数)
$(‘p:gt(index)’)	选取索引>index的p元素(索引从0开始)
$(‘p:lt(index)’)	选取索引<index的p元素(索引从0开始)
$(‘:header’)	选取标题元素h1~h6
$(‘:animated’)	选取正在执行动画的元素
$(‘input:focus’)	选取当前被焦点的元素
	jQuery为常用的过滤器提供了丰富的方法
eq(index)	获取是index索引值的元素(索引从0开始,负值从后开始)
first()	选取第一个元素
last()	选取最后一个元素
not(select)	选取不是该选择器的元素

4、内容选择器

写法	描述
$(‘:contains(“尚硅谷”)’)	选取含有”尚硅谷”文本的元素
$(‘:empty’)	选取不包含子元素或空文本的元素
$(‘:has(select)’)	选取含有该select选择器的元素(必须是父元素上调用,返回的是父元素)
$(‘:parent’)	选取含有子元素或文本的元素
has()	jQuery提供了一个has()方法作用等同has过滤器
	jQuery提供了parent相关方法,但与过滤器含义不等同
parent()	选择当前元素的父元素
parents()	选择当前元素的祖先元素(包括父元素)
parentsUntil()	选择当前元素的祖先元素,遇到指定元素则停止

5、 可见性过滤器

写法	描述
$(‘:hidden’)	选取所有不可见元素
$(‘:visible’)	选取所有可见元素

hidden过滤器一般是包含样式为display:none。input表单类型为hidden

设置了visibility:hidden的元素,虽然其在物理上是不可见的,但却保留了物理空间,因此该算是可见元素

6、属性过滤器

写法	描述
$(‘a[name]’)	获取具有这个属性的DOM对象
$(‘a[name =num]’)	获取具有这个属性且属性值=num的DOM对象
$(‘a[name ^=num]’)	获取具有这个属性且属性值是以num开头的DOM对象
$(‘a[name $=num]’)	获取具有这个属性且属性值是以num为结尾的DOM对象
$(‘a[name!=num]’)	获取具有这个属性且属性值不等于num的DOM对象
$(‘a[name|=num]’)	获取有这个属性且等于属性值或属性值开头匹配后带‘—’符号的DOM对象
$(‘a[name ~=num]’)	获取具有这个属性且属性值是以一个空格隔开,其中包含属性值的DOM对象
$(‘a[name *=num]’)	获取具有这个属性值且属性值含有指定字符串的DOM对象
$(‘a[xm] [ name =num]’)	获取具有这个属性且属性值匹配的DOM对象

7、子元素过滤器

写法	描述
$(‘li:first-child’)	查找li作为第一个孩子的元素
$(‘li:last-child’)	获取li的父元素的最后一个子元素
$(‘li:only-child’)	获取只有一个子元素的元素
$(‘li:nth-child(even/odd/index)’)	获取li是偶数/奇数/索引的子元素(索引从1开始)

8、表单选择器

写法	描述
$(“:input”)	匹配所有 input, textarea, select 和 button 元素
$(“:text”)	所有的单行文本框，$(":text")等价于$(“[type=text]”)，推荐使用$(“input:text”)效率更高，下同
$(“:password”)	所有密码框
$(“:radio”)	所有单选按钮
$(“:checkbox”)	所有复选框
$(“:submit”）	所有提交按钮
$(“:reset”)	所有重置按钮
$(“:button”)	所有button按钮
$(“:file”)	所有文件域

9、状态过滤选择器

写法	描述
$(“input:enabled”)	匹配可用的 input
$(“input:disabled”)	匹配不可用的 input
$(“input:checked”)	匹配选中的 input
$(“option:selected”)	匹配选中的 option

10、混淆选择器

写法	描述
$.escapeSelector(selector)	className或IDName是有特殊符号

CSS3 选择器

1 基本选择器（6个）

标签名选择器：

标签名 {
    
}

类名选择器：

.类名 {
    
}

ID选择器：

#ID名 {
    
}

全局选择器：

* {
    
}

并集选择器（多选择器）

选择器1,选择器2,选择器3 {
    
}

交集选择器：

p.item {
    
}
.item.current {
    
}

2 层级选择器（4个）

后代元素选择器：

选择器1 选择器2 {
}

子元素选择器：

选择器1>选择器2 {
    
}
选择器1 > 选择器2 {
    
}

选择后面相邻的一个兄弟元素：

选择器1+选择器2 {
	
}

选择后面所有的兄弟元素：

选择器1~选择器2 {
    
}

/* .nav 下除了第一 a，其他都被选择到了 */
.nav a+a {
    border-left: 1px solid #ccc;
} 

3 属性选择器（5个）

[attrName] 选择拥有attrName 属性的元素。

[attrName="value"] 选择 attrName 属性的值是 value 的元素。

[attrName^="value"] 选择 attrName 属性的值以 value 开头的元素。

[attrName$="value"] 选择 attrName 属性的值以 value 结尾的元素。

[attrName*="value"] 选择 attrName 属性的值中包含 value 的元素。

4 伪类选择器

① 动态伪类选择器（5个）

:link		选择地址没有被访问过的超链接元素
:visited	选择地址被访问过的超链接元素
:hover		选择鼠标悬停在上面的元素。
:active		选择鼠标在上面并且按键按下不松手的元素
:focus		选择获取焦点的元素。

② 目标伪类选择器（1个）

:target		选择当前锚点指向的元素。

③ 语言伪类选择器 (1个，了解)

lang()		根据语言选择元素（lang 属性的值）

④ UI元素伪类选择器（3个）

:enabled	选择可以使用的表单控件（没有设置disabled 属性）
:disabled	选择不可以使用的表单控件（设置了disabled属性）
:checked	选择到被选中的单选按钮、复选框、下拉选项（option）

⑤ 结构伪类选择器（12个）

:root	选择到根元素
:empty	选择到既不能有文本内容也没有后代元素的元素

:first-child			所有兄弟元素中的第一个
:last-child				所有兄弟元素中的最后一个
:nth-child(n)			所有兄弟元素中的第n个，n是个数字
:nth-last-child(n)		所有兄弟元素中的倒数第n个，n是个数字
:only-child				没有兄弟元素的元素

:first-of-type			所有兄弟元素中同类型的第一个
:last-of-type			所有兄弟元素中同类型的最后一个
:nth-of-type(n)			所有兄弟元素中同类型的第n个,n是个数字
:nth-last-of-type(n)	所有兄弟元素中同类型的倒数第n个，n是数字
:only-of-type			没有同类型兄弟元素

⑥ 否定伪类选择器（1个）

:not(选择器)			  排除满足小括号中选择器的元素

5 伪元素选择器（6个）

::first-letter		选择元素中第一字母
::first-line		选择元素中第一行
::after				给元素动态创建最后一个子元素
::before			给元素动态创建第一个子元素
::placeholder		用于设置输入框或文本域中placeholder属性设置的文字的样式
::selection			用于设置被鼠标选中的文字的样式

6 选择器的优先级（权重）

ID选择器 > 类名选择器、伪类选择器、属性选择器  > 标签名选择器、伪元素选择器  > 全局选择器