jQuery中的选择器

一、jQuery中选择器的作用

jQuery的选择器是为了选中DOM对象中的元素

二、基本选择器

基本选择器是jQuery中最常用的选择器，直接通过元素的id、class和标签名来查找DOM元素。

1.#id
用法：$("#myEle"); 
返回值：单个元素组成的集合
说明：直接选择html中的id="myEle"标签对象;

2.Element
用法：$("div"); 
返回值：集合元素
说明：element就是html已经定义的标签元素，如div span a input;

3.class
用法：$(".myClass"); 
返回值：集合元素
说明：可以选择到html标签中class="myClass" 的一个或者多个元素;

4.*
用法：$("*"); 
返回值：集合元素
说明：匹配所有的元素;

5.selector1,selector2,div,selector3
用法：$(".class,div,span,a,input"); 
返回值：集合元素
说明：可以将多个匹配到的元素合并在一起返回,可以指定多个选择器，并将匹配到的元素合并到一个结果内;

三、层级选择器

这个方法返回的是jQuery对象才能惊醒的链式操作，如果需要通过DOM元素间的层次关系来获取特定的元素，如后代元素，子元素，相邻元素，兄弟元素等。

1.属性选择器

1.[attr]
用法：$("[type]");
返回值：元素集合
说明：选择html中的标签上带有type的一个或多个元素;

2.[attr=val]
用法：$("[type=text]");
返回值：元素集合
说明：选择html中的标签上带有type=text的一个或多个元素;

3.[attr!=val]
用法：$("[type!=text]");
返回值：元素集合
说明：选择html中的除了标签上带有type=text的一个或多个元素;

4.[attr^=t]
用法：$("[type^=text]");
返回值：元素集合
说明：选择html中的标签上带有type值为 t 开头的一个或多个元素;

5.[attr$=t]
用法：$("[type$=text]");
返回值：元素集合
说明：选择html中的标签上带有type值为 t 结尾的一个或多个元素;

6.[attr*=te]
用法：$("[type*=te]");
返回值：元素集合
说明：选择html中的标签上带有type值含有 te 单词的一个或多个元素;

6.[attr|=te]或[attr|=text]
用法：$("[type|=te]")   $("[type|=text]");
返回值：元素集合
说明：选择html中的标签上type=text或带有type值含有以 te 单词开头的一个或多个元素;

7.[attr~=val]
用法：$("[type~=ex]");
返回值：元素集合
说明：选择html中的标签上带有type值含有 ex 的一个或多个元素;

8[...][...]
说明：两个选择器必须同时满足条件才可选择DOM中的元素

2.后代选择器，子选择器，同胞选择器，分组选择器

1.ancestor descendant
用法：${"form input"}
返回值：集合元素
说明：在给定的祖先元素form下匹配所有后代元素，包含子元素和子元素的子元素;

2.parent > child
用法：${"form > input"}
返回值：集合元素
说明：在给定的祖先元素form下匹配所有的直接子元素，包含子元素但不会包含子元素的子元素;

3.prev + next
用法：${"label + input"}
返回值：集合元素
说明：匹配所有紧接在prev元素后的所有next兄弟元素;

4.prev ~ siblings
用法：${"form ~ input"}
返回值：集合元素
说明：以~分割 选中后买你所有的兄弟元素;

5.ancestors ancestors
用法：${"div,input,button"}
返回值：集合元素
说明：以 , 进行分割 可以同时选中多个元素;

3.子元素选择器

1.:first-child
用法：${"div:first-child"}
返回值：集合元素
说明：选中父级元素div下的第一个子元素;

2.:last-child
用法：${"div:last-child"}
返回值：集合元素
说明：选中父级元素div下的最后一个子元素;

3.:first-of-type
用法：${"div:first-of-type"}
返回值：集合元素
说明：选中父级元素div下同类型的第一个子元素;

4.:last-of-type
用法：${"div:last-of-type"}
返回值：集合元素
说明：选中父级元素div下同类型的最后一个子元素;

5.:nth-child()
用法：${"div:nth-child(n)"}
返回值：集合元素
说明：选中父级元素div下的第n个子元素;

6.:nth-last-child()
用法：${"div:nth-last-child(n)"}
返回值：集合元素
说明：选中父级元素div下从最后一个子元素起的第n个子元素;

7.nth-of-type()
用法：${"div:nth-of-type(n)"}
返回值：集合元素
说明：选中父级元素div下同类型的第n个子元素;

8.nth-last-of-type()
用法：${"div:nth-last-of-type(n)"}
返回值：集合元素
说明：选中父级元素div下同类型且从最后一个子元素起的第n个子元素;

9.only-child
用法：${"div:only-child"}
返回值：集合元素
说明：选中父级元素div下唯一的一个子元素;

四、过滤选择器

找到很多页面元素，对这些元素添加过滤条件，通过过滤筛选出所需要的DOM元素 该选择器都以 " : "开头

1.基础过滤选择器

1.:first
用法: $("tr:first") ;   
返回值：单个元素的组成的集合
说明: 匹配找到的第一个元素

2.:last
用法: $("tr:last")   
返回值:集合元素
说明: 匹配找到的最后一个元素.与 :first 相对应

3.:not(selector)
用法: $("input:not(:checked)")   
返回值：集合元素
说明: 去除所有被选中的input type=”checkbox” 后的元素

4.:even
用法: $("tr:even")   
返回值：集合元素
说明: 匹配所有索引值为偶数的元素，从0开始计数

5.:odd
用法: $("tr:odd")   
返回值：集合元素
说明: 匹配所有索引值为单数的元素，从0开始计数

6.:eq(index)
用法: $("tr:eq(n)")   
返回值：集合元素
说明: 匹配一个给定了索引值n的元素，eq(n)就是获取第n个tr元素   n代表索引值

7.:gt(index)
用法: $("tr:gt(n)")   
返回值：集合元素
说明: 匹配所有大于给定索引值n的元素  不包含第n个元素

8.:lt(index)
用法: $("tr:lt(n)")   
返回值：集合元素
说明: 匹配所有小于给定索引值n的元素  不包含第n个元素

9.:focus
用法: $(":focus")   
返回值：元素
说明: 匹配所有大于给定索引值n的元素  不包含第n个元素


10.:target
说明:获取URL对应的锚点的元素

2.内容过滤选择器

1.：contains(text)
用法: $("div:contains('text')")   
返回值：集合元素
说明: 匹配包含给定文本的元素，它的作用是查找被标签”围”起来的文本内容是否符合指定的内容

2.:empty
用法: $("td:empty")   
返回值：集合元素
说明: 获取标签体中内容为空的元素，单标签会直接被选中

3.：has(selector)
用法: $("div:has('.class')")   
返回值：集合元素
说明: 查找元素中是否包含指定选择器元素

4.parent
用法: $("td:parent")   
返回值：集合元素
说明: 获取标签体中内容不为空的元素，与2相反

3.可见度过滤选择器

1.hidden
用法: $("tr:hidden")   
返回值：集合元素
说明: 匹配所有不可见元素，input原色的type属性为"hidden" 也会被匹配到

2.visible
用法: $("tr:visible")   
返回值：集合元素
说明: 匹配所有可见的元素

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

1.:enabled
用法：$("input:enabled")
返回值：集合元素
说明：匹配所有可用元素，即查找input属性中不带有disabled="disabled"的input

2.:disabled
用法：$("input:disabled")
返回值：集合元素
说明：匹配所有不可用元素，与 1 对应

3.:checked
用法：$("input:enabled")
返回值：集合元素
说明：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

4.selected
用法：$("select option:selected")
返回值：集合元素
说明：匹配所有选中的option元素.

5.表单选择器

1.:input
用法: $(":input") ;   
返回值:集合元素
说明:匹配所有 input, textarea, select 和 button 元素

2.:text
用法: $(":text") ;  
返回值:集合元素
说明: 匹配所有的单行文本框

3.:password
用法: $(":password") ; 
返回值:集合元素
说明: 匹配所有密码框

4.radio
用法: $(":radio") ; 
返回值:集合元素
说明: 匹配所有单选按钮

5.:checkbox
用法: $(":checkbox") ; 
返回值:集合元素
说明: 匹配所有复选框

6.:submit
用法: $(":submit") ; 
返回值:集合元素
说明: 匹配所有提交按钮

7.:image
用法: $(":image")   
返回值:集合元素
说明: 匹配所有图像域

8.reset
用法: $(":reset")   
返回值:集合元素
说明: 匹配所有重置按钮

9.button
用法: $(":button") ;  
返回值：集合元素
说明: 匹配所有按钮.这个包括直接写的元素button

10.:file
用法: $(":file") ;  
返回值：集合元素
说明: 匹配所有文件域

11.:hidden
用法: $("input:hidden") ;  
返回值：集合元素
说明: 匹配所有不可见元素