jquery学习（一）-选择器
参考锋利的jquery第二版
1、基本的选择器
|
Id选择器 |
$(“#Id”) |
|
class类选择器 |
$(“.class”) |
|
Element元素选择器 |
$(“element”) |
|
*匹配所有元素 |
$(“*”) |
|
Selector1....n 组合选择器 |
$(“selector1 selector2 ..n”) |
2、层次选择题
|
$(“ancester descendant ”) |
选取ancestor元素里面的所有descendant（后代）元素 |
|
$(“parent>child”) |
选取parent元素下面的child(子)元素，与$(“ancester descendant ”)有区别，$(“ancester descendant ”)选取的是后代元素 |
|
$(“prev+next”)==$(“prev”).next(“next”) |
选取紧跟在prev元素后面的next元素。如$(“.one div”)选取class为one的下一个div元素 |
|
$(“prev ~siblings”)==$(“prev”).nextAll(“siblings”) |
$(“#two~div”)选取id为two元素后面的所有兄弟div元素 |
3、过滤选择器
|
基本过滤选择器 |
||
|
:fist |
选取第一个元素 |
$(“div:fist”)选取所有div中第一个div元素 |
|
:last |
选取最后一个元素 |
$(“div:last”)选取所有div元素中的最后一个div元素 |
|
:not(selector) |
去除所有与给定选择器（selector）匹配的元素 |
$(“input:not(.myclass)”)选取class不是myclass的input元素 |
|
:even |
选取索引是偶数的所有元素，索引值从0开始 |
$(“tbody tr:even”)选取tbody表格里偶数行 |
|
:odd |
选取索引是奇数的所有元素，索引值从0开始 |
$(“tbody tr:odd”)选取tbody表格里奇数行 |
|
:eq(index) |
选取索引值等于index的元素，索引值从0开始 |
$(“input:eq(1)”)选取索引值为1的input元素 |
|
:gt(index) |
选取索引值大于index的元素，索引值从0开始 |
$(“input:gt(1)”)选取索引值大于1的input元素 |
|
:lt(index) |
选取索引值小于index的元素，索引值从0开始 |
$(“input:lt(1)”)选取索引值小于1的input元素 |
|
:header |
选取所有标题元素，如h1、h2、h3、h4等等 |
$(“:header”)选取网页中所有的h1、h2、h3等元素 |
|
:animated |
选取当前正在执行动画的所有元素 |
$(“div:animated”)选取所有现在正在执行动画的div元素 |
|
:focus |
选取当前获取焦点的元素 |
$(“:focus”)选取当前获取焦点的元素 |
|
内容过滤选择器 |
||
|
:contains(text) |
选取含有文本内容text的元素 |
$(“p:contains(my)”)选取含有”my”内容的p元素 |
|
:empty |
选择内容为空（不包含子元素或者文本）的元素 |
$(“div:empty”)内容为空的div元素。如<div></div> |
|
:has(selector) |
选取含有选择器所匹配的元素的元素 |
$(“div:has(p)”)选取含有p元素的div元素 |
|
:parent |
选择含有子元素或文本的元素 |
$(“div:parent”)选取含有子元素或文本元素的div元素。如<div>hello word</div> |
|
可见性过滤选择器 |
||
|
:hidden |
选取所有不可见的元素 |
$(“:hidden”)选取所有不显示的元素 |
|
:visible |
选取所有可见元素 |
$(“:visible”)选取所有显示的元素 |
|
属性过滤选择器 |
||
|
[attribute] |
选取所有含有此属性attribute的元素 |
$(“div[id]”]选取所有拥有属性id的div元素 |
|
[attribute=value] |
选取属性的值为value的元素 |
$(“div[title=myTitle]”]选取所有属性title=mytitle的div元素 |
|
[attribute!=value] |
选取属性的值不等于value的元素 |
$(‘div[title!=”myTitle”]’]选取所有属性title!=mytitle的div元素 |
|
[attribute^=value] |
选取属性值以value开头的元素
|
$(‘div:[class^=”my”]’)选取class的值是以my开头的div元素 |
|
[attribute$=value] |
选取属性值以value结尾的元素
|
$(‘div:[class$=”color”]’)选取class的值是以color结尾的div元素 |
|
[attribute*=value] |
选取属性值包含value的元素 |
$(‘div:[class*=”style”]’)选取class的值含有style的div属性 |
|
[attribute|=value] |
选取属性值等于给定字符串或以该字符串为前缀(后面跟着连字符”-”)的元素 |
$(‘div:[class*=”style”]’)选取class等于style或使用style为前缀（后面跟着连字符”-”）的div元素 |
|
[attribute~=value] |
选取属性用空格分隔的值中包含有给定值value的元素 |
$(‘div:[class*=”style”]’)选取class用空格隔开的之中包含有style的元素。（这里对于class来说，是选取含有多个类元素中，其中有一个类名为style的div元素） |
|
[attribute1][attribute2][attributeN] |
用属性选择器合并成一个复合性选择器，满足多个要求，每选择一次，缩小一次范围 |
$(‘div[id][class=”myClass”]’)选取含有id属性，并且class值为myClass的div元素 |
|
子元素过滤选择器 |
||
|
:nth-child(index/ even/odd) |
选取每个幅元素下的第index个子元素或者奇偶元素（index从1算起） |
$(“#myId:nth-child(1)”)选取id=myId为父元素下面的第一个子元素 |
|
:fist-child |
选取每个父元素的第一个子元素 |
$(‘#myId:fist-child’)选取id=myId为父元素下面的第一个子元素 |
|
:last-child |
选取每个父元素的最后一个子元素 |
$(‘#myId:last-child’)选取id=myId为父元素下面的最后一个子元素 |
|
:only-child |
如果每个元素是它父元素中唯一的子元素，那么就会被匹配。 |
$(‘ul li:only-child’)在ul中选取唯一子元素的li元素。（注意：这样选中的是li元素） |
|
表单对象属性过滤选择器 |
||
|
:enable |
选取所有可用元素 |
$(‘#myFrom:enable’)选取id为myFrom表单内的所有可用元素 |
|
:disabled |
选取所有不可以元素 |
$(‘#myFrom:enable’)选取id为myFrom表单内的所有不可用元素 |
|
:checked |
选取所有被选中的元素（单选，多选） |
$(‘input:checked’)选取所有被选中的input元素 |
|
:selected |
选取所有被选中项的元素（下拉列表） |
$(‘select option:selected’)选取select列表中被选中项的元素 |
