太长不看,简略表格版

jQuery的选择器

基本选择器

ID选择器 ($(“#id”) )

ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素，并以iQuery包装集的形式返回给对象。

使用公式:(“#id”)

示例：

	//使用id选择器获取到id为'niHao'的元素
	console.log($('#niHao'));
1
2

元素选择器 ($(“#id”) )

元素选择器是根据元素名称匹配相应的元素。元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的。

使用公式：(“element”)

示例：

	//使用元素选择器获取到所有该类元素
	console.dir($('li'));
1
2

类名选择器 $(“.classname”)

        类选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配类的名称就可以被类选择器选取到。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。
1

公式：(“.class”)

示例：

	//使用类名选择器获取到所有类名为'hello'的元素
	console.dir($('.hello'));//当document里面有两个元素的id相同时,输出前面的
1
2

复合选择器_并集 $(“.classname,.classname1,#id1”)

        复合选择器将多个选择器（可以是ID选择器、元素选择器或是类名选择器）组合在一起，两个选择器之间以逗号","分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的jQuery对象。
        注意：多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素，而是将每个匹配的元素合并后一起返回。
        
        >使用公式：("selector1,selector2,......,selectorN")selector1:一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等selector2:另一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等selectorN:（可选择）任意多个选择器，可以是ID选择器、元素选择器或类名选择器等示例：("div,#btn")    //要查询文档中的全部的<div>元素和id属性为btn的元素
1
2
3
4

示例:

	//使用复合选择器_并集获取到类名为'hello'和id为'niHao'的元素
	console.dir($('.hello,#niHao'));
	//当使用并集复合选择器时,document里面有多个同名id时,将所有同名id元素输出,与id选择器不同
1
2
3

当使用并集复合选择器时,document里面有多个同名id时,将所有同名id元素输出,与id选择器不同

复合选择器_交集 $(“.classname#id1”)

当复合选择器不使用’,'逗号分隔时,是交集复合选择器,如$("div.one")表示选取class="one"的<div>，而$(“div,.one”)表示的是选取所有

示例

	//使用复合选择器_交集获取到类名为'hell'和id为'niHao'的元素
	console.dir($('.hello#niHao'));
	//使用复合选择器_交集获取到类名为'hello'的li元素
	console.dir($('li.hello'));
	//注意如果有标签名,要将标签名写在前面
1
2
3
4
5

当复合选择器_交集选取时,有多个同id元素,只有第一个有该id的元素有效

通配符选择器

$(“*”) //取得页面上所有的DOM元素集合的jQuery包装集

示例:

	//使用通配符获取到所有document元素
	console.dir($('*'));
1
2

层级选择器

后代选择器 4(ancestor descendant 选择器)

ancesdor descendant选择器中ancestor代表祖先，descendant代表子孙，用于在给定的祖先元素下匹配所有的后代元素

使用公式：(“ancestordescendant”)ancestor是指任何有效的选择器。descendant是用以匹配元素的选择器，并且它是ancestor所指定元素后代元素示例：(“ul li”) //匹配ul元素下的全部li元素

示例

	//使用后代选择器,获取到ul所有的后代
	console.dir($('ul li'));
1
2

子代选择器 $(parent>child选择器)

parent>child选择器中的parent代表父元素，child代表子元素，用于在给定的父元素下匹配所有的子元素，使用该选择器只能选择父元素的直接子元素

使用公式：(“parent>child”)parent是指任何有效的选择器child是用以匹配元素的选择器，并且它是parent元素的子元素示例：(" form>input ") //匹配表单中所有的子元素input

	//使用子代选择器,获取到div的所有子代li
	console.dir($('div>li'));
1
2

后置相邻选择器 $(prev+next选择器)

pev+next选择器用于匹配所有紧接在prev元素后的next元素，其中，prev和next是两个相同级别的元素

使用公式：(“prev+next”)prev是指任何有效的选择器next是一个有效选择器并紧接着prev选择器示例：(“div+img”) //匹配<div>标签后的<\img>标记

	//使用后置相邻选择器,选取ul后置位元素
	console.dir($('ul+li'));
	console.dir($('ul+div'));
1
2
3

后置相邻选择器只能获取紧跟着的元素

后置同辈选择器 $(prev~siblings选择器)

prev~siblings选择器用于匹配prev元素之后的所有siblings元素，其中prev和siblings是个相同辈元素

使用公式：$(“prev~siblings”)
prev是指任何有效的选择器

示例

	//使用 后置同辈选择器选取所有span元素的后置同辈li元素
	console.dir($('span~'));
1
2

属性选择器

属性选择器就是通过元素的属性作为过滤条件进行筛选对象

纯属性选择器 [attribute]

说明：匹配包含给定属性的元素 如(“div[name]”)//匹配包含有name属性的div元素[attribute=value]说明：匹配属性值为value的元素示例：(“div[name=‘test’]”) //匹配name属性是test的div元素

示例:

	//使用属性选择器筛选出具有id的li元素 注意id也是属性
	console.dir($('li[id]'));
1
2

属性值选择器 [attribute=“value”]

语法 : $(“div[id=‘123’]”) // id属性值为123的div 元素

示例:

	//属性值选择器[attribute = "value"]
	console.dir($('li[id = "hello"]'));
1
2

属性值排除选择器 [attribute!=value]

说明：匹配属性值不等于value的元素.(“div[name!=′test′]”)//匹配name属性不是test的div元素

示例

	//使用属性排除选择器,选择不具有id=deMa的li元素
	console.dir($('li[id!=deMa]'));
1
2

属性值筛选选择器 [attribute*=value]

说明：[attribute∗=value]说明：匹配属性值含有value的元素示例：(“div[name*=“test”]”) //匹配name属性值中含有test值的div元素

	//使用属性筛选选择器,选择属性id=deMd的li元素
	console.dir($('li[id*=d]'));
	console.dir($('li[id*=eMa]'));
	console.dir($('li[id*=a]'));
	console.dir($('li[id*=deMa]'));
	//注意'*'是通配符,也就是说属性筛选选择器具有模糊筛选的功能,比如$('li[id*=d]')是筛选出li元素里id里含有字母d的元素
1
2
3
4
5
6

'*'是通配符,也就是说属性筛选选择器具有模糊筛选的功能,比如$(‘li[id*=d]’)是筛选出li元素里id里含有字母d的元素

属性筛选以属性值开头和结尾[attribute^=value]

说明：匹配属性值以value开始的元素(“div[name^=‘test’]”) //匹配name属性以test开头的div元素 [attribute=value]
匹配属性值以value结束的元素 (“div[name$=‘test’]”) //匹配name属性以test结尾的div元素
示例

	//使用属性选择器筛选属性de开头字母是d的li元素
	console.dir($('li[id^=de]'));
	// //匹配属性id值结尾字母为a的li元素
	console.dir($('li[id$=a]'));
1
2
3
4

多属性过滤器 [selector1][\selector2][selectorN]

复合属性选择器，需要同时满足多个条件时使用

：$(“div[id][\name^=‘test’]”) //匹配具有id属性并且name属性是以test开头的div元素

示例

	//使用多属性过滤器筛选出class为hello name为world的li
	console.dir($('li[class="hello niHao"][name="world"]'));
1
2

过滤伪类选择器

简单过滤器

简单过滤器是指以冒号开头，通常用于实现简单过滤效果的过滤器

:first

说明：匹配找到的第一个元素，它是与选择器结合使用的
示例：(“tr:first”)//匹配表格的第一行:last说明：匹配找到的最后一个元素，它是与选择器结合使用的示例：(“tr:last”) //匹配表格最后一行

:even

说明：匹配所有索引值为偶数的元素，索引值从0开始计数
示例：(“tr:even”)//匹配索引值为偶数的行:odd说明：匹配所有索引值为奇数的元素，索引值从0开始计数示例：(“tr:odd”) //匹配索引值为奇数的行

:eq(index)

说明：匹配一个给定索引值的元素
示例：(“div:eq(1)”)//匹配第二个div元素:gt(index)说明：匹配所有大于给定索引值的元素示例：(“span:gt(0)”) //匹配索引大于0的span元素（注：大于0,而不包括0)

:lt(index)

说明：匹配所有小于给定索引值的元素
示例：(“div:lt(2)”)//匹配索引小于2的div元素（注：小于2,而不包括2):header说明：匹配h1,h2,h3…之类的标题元素示例：(“.cls:header”) //匹配全部类名为cls的标题元素，如果":"前不写则匹配所有的标题元素

:not(selector)

说明：去除所有给定选择器匹配的元素
示例：(“input:not(:checked)”)//匹配没有被选中的input元素animated说明：匹配所有正在执行动画效果的元素示例：(“div:animated”) //匹配正在执行的动画的div元素

内容过滤器

内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选

:contains(text)

说明：匹配包含给定文本的元素
示例：(“li:contains(′word′)”)//匹配含有"word"文本内容的元素:empty说明：匹配所有不包含子元素或者文本的空元素示例：(“td:empty”) //匹配不包含子元素或者文本的单元格

:has(selector)

说明：匹配含有选择器所匹配元素的元素
示例：(“td:has§”)//匹配表格的单元格中还有

标记的单元格:parent说明：匹配含有子元素或者文本的元素示例：(“td:parent”) //匹配不为空的单元格，即在该单元格中还包括子元素或则文本

可见性过滤器

元素的可见状态有两种，分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的

:visible

说明：匹配所有可见元素

:hidden

说明：匹配所有不可见元素
注意：在应用:hidden过滤器时，display属性是none以及input元素的type属性为hidden的元素都会被匹配识别

表单对象的属性过滤器

表单对象的属性过滤器通过表单元素的状态属性（例如：选中、不可用等状态）匹配元素

:checked

说明：匹配所有选中的被选中元素
示例：(“input:checked”)//匹配所有被选中的input元素:disabled说明：匹配所有不可用元素示例：(“input:disenabled”) //匹配所有不可用input元素

:enabled

说明：匹配所有可用的元素
示例：(“input:enabled”)//匹配所有可用的input元素:selected说明：匹配所有选中的option元素示例：(“select option:selected”) //匹配所有被选中的选项元素

子元素过滤器

子元素选择器就是筛选给定某个元素的子元素，具体的过滤条件由选择器的种类而定

:first-child

说明：匹配所有给定元素的第一个子元素
示例：(“ulli:first−child”)//匹配ul元素中的第一个子元素li:last−child说明：匹配所有给定元素的最后一个子元素示例：(“ul li:last-child”) //匹配ul元素中的最后一个子元素li

:only-child

说明：如果某个元素是它父元素中唯一的子元素，那么将会被匹配，如果父元素中含有其他元素，则不会被匹配
示例：(“ulli:only−child”)//匹配只含有一个li元素的ul元素中的li:nth−child(index/even/odd/equation)说明：匹配可每个父元素下的第index个子#### 或奇偶元素，index从1开始，而不是从0开始示例：(“ul li :nth-child(even)”) //匹配ul中索引值为偶数的li元素
$(“ul li:nth-child(3)”) //匹配ul中第3个li元素

表单伪类选择器

表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中

表单元素伪类选择器

:input

说明：匹配所有的input元素
示例：
(“:input”)//匹配所有的input元素(“form :input”) //匹配标记中的所有input元素，需要注意，在form和冒号之间有一个空格

:button

说明：匹配所有的普通按钮，即type=“button"的input元素，也匹配元素为button的元素；button默认的type也是button。
示例：(”.button")//匹配所有普通按钮:submit说明：匹配所有的提交按钮，即type=“submit"的input元素示例：(”:submit") //匹配所有的提交按钮

:reset

说明：匹配所有的重置按钮，即type=“reset"的input元素
示例：$(”:reset") //匹配所有的重置按钮

:text

说明：匹配所有的单行文本框
示例：$(“:text”) //匹配所有的单行文本框

:textarea

说明：匹配所有的多行文本框
示例：$(“:textarea”) //匹配所有的多行文本框

:password

说明：匹配所有的密码域
示例：$(“:password”) //匹配所有的密码域

:radio

说明：匹配所有的单选按钮
示例：$(“:radio”) //匹配所有的单选按钮

:checkbox

说明：匹配所有的复选框
示例：$(“:checkbox”) //匹配所有的复选框

:image

说明：匹配所有的图像域
示例：(“:image”)//匹配所有的图像域:hidden说明：匹配所有的不可见元素，或者type为hidden的元素示例：(“:hidden”) //匹配所有的隐藏域

:file

说明：匹配所有的文件域
示例：$(“:file”) //匹配所有的文件域

表单属性伪类选择器

:enabled 选择所有可用的input元素

说明：匹配所有的input元素

示例：$(“:enabled”) //匹配所有的input元素

:disabled 选择所有禁用的input元素

说明：匹配属性名为disabled的input元素

示例：$(“:disabled”) //匹配属性名为disabled的input元素

:selected 选择所有被选中的option元素

说明：匹配属性名为selected的元素

示例：$(“:selected”) //匹配属性名为selected的元素

:checked 选择所有被选中的表单元素，一般用于radio和checbox

说明：匹配属性名为checked的元素

示例：$(“:checked”) //匹配属性名为checked的元素

选择器中注意事项

1.选择器中含有特殊符号的注意事项
含有".“、”#“、”{“、”}“等特殊字符：根据W3C规定，属性值中是不能包含这些特殊字符的，但在实际的项目中偶尔会遇到这种表达式中含有”#“和”}"等特殊字符的情况。这时，如果按照普通方法去处理的话就会出现错误，解决这类错误的方法是使用转义符号将其转义。

<div id="li#db">liaidb</div>
<div id="lidb(1)">lilovedb</div>
1
2

如果按照普通方式来获取，例如：

("#li#db");("#lilovedb(1)");
1

这样是不能正确获取到元素的，正确的写法如下：

("#li\\#db");("#lilovedb\\(1\\)");
1

2.属性选择器的@符号问题：
在jQuery升级版本过程中，jQuery在1.3.1版本中彻底放弃了1.1.0版本遗留的@符号，假如我们使用1.3.1以上的版本，那么不需要在属性前添加@符号

(“div[@name=“lidb”]”);正确写法是将@符号去掉，即改为如下形式：(“div[name=“lidb”]”);
选择器中空格的注意事项
在实际应用当中，选择器中含有空格也是不容忽视的，多一个空格或则少一个空格也会得到截然不同的结果。

<div class="name">
<div style="display: none;">小林</div>
<div style="display: none;">小微</div>
<div style="display: none;">小德玛</div>
<div style="display: none;" class="name">小卡特</div>
</div>
<div style="display: none;" class="name">小亚索</div>
<div style="display: none;" class="name">小孙策</div>
1
2
3
4
5
6
7
8

使用如下的jQuery选择器分别获取它们

<script type="text/javascript">
var a=(".name :hidden");
var b=(".name:hidden");
console.log(a)console.log(b)
</script>
1
2
3
4
5

以上代码会出现不同的结果，是因为后代选择器和过滤选择器的不同