在Web应用程序中，大部分的客户端操作都是基于对象的操作，要操作对象就必须先获取对象，jQuery(v1.3.2)提供了强大的选择器让我们获取对象。在这边，我人为地将jQuery选择器分为两大部分：选择对象和筛选条件。选择对象表示要获取什么对象，筛选条件是对获取的对象进行筛选，最终留下符合某些特征的对象。 1.选择对象 1).基本 ·#id 根据给定的ID匹配一个元素。例如：$("#id") ·element 根据给定的元素名匹配所有元素。例如：$("div") ·.class 根据给定的类匹配元素。例如：$(".style1"); ·* 匹配所有元素。例如：$("*") ·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。例如：$("#id,div,.style1") 2).表单 ·:button 匹配所有按钮。例如：$(":button") ·:checkbox 匹配所有复选框。例如：$(":checkbox") ·:file 匹配所有文件域。例如：$(":file") ·:hidden 匹配所有不可见元素，或者type为hidden的元素。例如：$("input:hidden") ·:image 匹配所有图像域。例如：$(":image") ·:input 匹配所有 input, textarea, select 和 button 元素。例如：$(":input") ·:password 匹配所有密码框。例如：$(":password") ·:radio 匹配所有单选按钮。例如：$(":radio") ·:reset 匹配所有重置按钮。例如：$(":reset") ·:submit 匹配所有提交按钮。例如：$(":submit") ·:text 匹配所有的单行文本框。例如：$(":text") ·:header 匹配如 h1, h2, h3之类的标题元素。例如：$(":header").css("background", "#EEE"); 2.筛选条件 1).属性筛选 ·[attribute*=value] 匹配给定的属性是以包含某些值的元素。例如：$("input[name*='man'") ·[attribute!=value] 匹配所有含有指定的属性，但属性不等于特定值的元素。例如：$(input[name!='man'); ·[attribute$=value] 匹配给定的属性是以某些值结尾的元素。例如：$("input[name$='man']") ·[attribute=value] 匹配给定的属性是某个特定值的元素。例如：$("input[name='man']"); ·[attribute] 匹配包含给定属性的元素。例如：$("div[id]") ·[attribute^=value] 匹配给定的属性是以某些值开始的元素。例如：$("input[name^='man']") ·[selector1][selector2][selectorN] 同时满足多个条件。例如：$("input[id][name$='man']") ·:hidden 匹配所有的不可见元素。例如：$("tr:hidden") ·:visible 匹配所有的可见元素。例如：$("tr:visible") ·:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。例如：$("input:checked") ·:disabled 匹配所有不可用元素。例如：$("input:disabled") ·:enabled 匹配所有可用元素。例如：$("input:enabled") ·:selected 匹配所有选中的option元素。例如：$("select option:selected") 2).内容筛选 ·:contains(text) 匹配包含给定文本的元素。例如：$("div:contains('John')") ·:empty 匹配所有不包含子元素或者文本的空元素。例如：$("td:empty") ·:has(selector) 匹配含有选择器所匹配的元素的元素。例如：$("div:has(p)"); ·:parent 匹配含有子元素或者文本的元素。例如：$("td:parent") 3).层级筛选 ·ancestor descendant 在给定的祖先元素下匹配所有的后代元素。例如：$("form input") ·parent > child 在给定的父元素下匹配所有的子元素。例如：$("form > input") ·prev + next 匹配所有紧接在 prev 元素后的 next 元素。例如：$("label + input") ·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如：$("form ~ input") ·:first-child 匹配第一个子元素。例如：$("ul li:first-child") ·:last-child 匹配最后一个子元素。例如：$("ul li:last-child") ·:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素。例如：$("ul li:nth-child(2)") ·:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配。例如：$("ul li:only-child") 4).方法筛选 ·:animated 匹配所有正在执行动画效果的元素。例如：$("div:animated"); ·:eq(index) 匹配一个给定索引值的元素。例如：$("tr:eq(1)") ·:even 匹配所有索引值为偶数的元素，从 0 开始计数。例如：$("tr:even") ·:first 匹配找到的第一个元素。例如：$("tr:first") ·:gt(index) 匹配所有大于给定索引值的元素，从 0 开始计数。例如：$("tr:gt(0)") ·:last 匹配找到的最后一个元素。例如：$("tr:last") ·:lt(index) 匹配所有小于给定索引值的元素。例如：$("tr:lt(2)") ·:not(selector) 去除所有与给定选择器匹配的元素。例如：$("input:not(:checked)") ·:odd 匹配所有索引值为奇数的元素，从 0 开始计数。例如：$("tr:odd")
笔记分为两个部分，今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定。
序号 选择器 含义 1. * 通用元素选择器，匹配任何元素 2. E 标签选择器，匹配所有使用E标签的元素 3. .info class选择器，匹配所有class属性中包含info的元素 4. #footer id选择器，匹配所有id属性等于footer的元素实例：
复制代码代码如下: * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } p.info { background:#ff0; } p.info.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; }
二、多元素的组合选择器
序号 选择器 含义 5. E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 6. E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 7. E > F 子元素选择器，匹配所有E元素的子元素F 8. E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F实例：
复制代码代码如下: div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } p + p { color:#f00; }
三、CSS 2.1 属性选择器
序号 选择器 含义 9. E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） 10. E[att=val] 匹配所有att属性等于“val”的E元素 11. E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 12. E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，比如“en”、“en-us”、“en-gb”等等实例：
复制代码代码如下: p[title] { color:#f00; } div[class=error] { color:#f00; } td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; }
四、CSS 2.1中的伪类
序号 选择器 含义 13. E:first-child 匹配父元素的第一个子元素 14. E:link 匹配所有未被点击的链接 15. E:visited 匹配所有已被点击的链接 16. E:active 匹配鼠标已经其上按下、还没有释放的E元素 17. E:hover 匹配鼠标悬停其上的E元素 18. E:focus 匹配获得当前焦点的E元素 19. E:lang(c) 匹配lang属性等于c的E元素实例：
复制代码代码如下: p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: "/201D" "/201D" "/2019" "/2019"; }
五、 CSS 2.1中的伪元素
序号 选择器 含义 20. E:first-line 匹配E元素的第一行 21. E:first-letter 匹配E元素的第一个字母 22. E:before 在E元素之前插入生成的内容 23. E:after 在E元素之后插入生成的内容实例：
复制代码代码如下: p:first-line { font-weight:bold; color;#600; } .preamble:first-letter { font-size:1.5em; font-weight:bold; } .cbb:before { content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; } a:link:after { content: " (" attr(href) ") "; }
六、CSS 3的同级元素通用选择器
序号 选择器 含义 24. E ~ F 匹配任何在E元素之后的同级F元素实例：
复制代码代码如下: p ~ ul { background:#ff0; }
七、CSS 3 属性选择器
序号 选择器 含义 25. E[att^=”val”] 属性att的值以"val"开头的元素 26. E[att$=”val”] 属性att的值以"val"结尾的元素 27. E[att*=”val”] 属性att的值包含"val"字符串的元素实例：
复制代码代码如下: div[id^="nav"] { background:#ff0; }
八、CSS 3中与用户界面有关的伪类
序号 选择器 含义 28. E:enabled 匹配表单中激活的元素 29. E:disabled 匹配表单中禁用的元素 30. E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素 31. E::selection 匹配用户当前选中的元素实例：
复制代码代码如下: input[type="text"]:disabled { background:#ddd; }
九、CSS 3中的结构性伪类
序号 选择器 含义 32. E:root 匹配文档的根元素，对于HTML文档，就是HTML元素 33. E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1 34. E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1 35. E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 36. E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 37. E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1) 38. E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) 39. E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) 40. E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) 41. E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) 42. E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素实例：
复制代码代码如下: p:nth-child(3) { color:#f00; } p:nth-child(odd) { color:#f00; } p:nth-child(even) { color:#f00; } p:nth-child(3n+0) { color:#f00; } p:nth-child(3n) { color:#f00; } tr:nth-child(2n+11) { background:#ff0; } tr:nth-last-child(2) { background:#ff0; } p:last-child { background:#ff0; } p:only-child { background:#ff0; } p:empty { background:#ff0; }
十、CSS 3的反选伪类
序号 选择器 含义 43. E:not(s) 匹配不符合当前选择器的任何元素实例：
复制代码代码如下: :not(p) { border:1px solid #ccc; }
十一、CSS 3中的 :target 伪类
序号 选择器 含义 44. E:target 匹配文档中特定"id"点击后的效果请参看HTML DOG上关于该选择器的详细解释和实例。
通俗的讲, Selector选择器就是"一个表示特殊语意的字符串". 只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回.
但是如何将jQuery选择器分类让我犯难. 因为书上的分类和jQuery官方的分类截然不同. 最后我决定以实用为主, 暂时不去了解CSS3选择器标准, 而按照jQuery官方的分类进行讲解.
jQuery的选择器支持CSS3选择器标准. 下面是W3C最新的CSS3选择器标准:
http://www.w3.org/TR/css3-selectors/
标准中的选择器都可以在jQuery中使用.
jQuery选择器按照功能主要分为"选择"和"过滤". 并且是配合使用的. 可以同时使用组合成一个选择器字符串. 主要的区别是"过滤"作用的选择器是指定条件从前面匹配的内容中筛选, "过滤"选择器也可以单独使用, 表示从全部"*"中筛选. 比如:
$(":[title]")
等同于:
$("*:[title]")
而"选择"功能的选择器则不会有默认的范围, 因为作用是"选择"而不是"过滤".
下面的选择器分类中, 带有"过滤器"的分类表示是"过滤"选择器, 否则就是"选择"功能的选择器.
jQuery选择器分为如下几类:
[说明] 1.点击"名称"会跳转到此方法的jQuery官方说明文档. 2.可以在下节中的jQuery选择器实验室测试各种选择器
[学习建议]: 大家暂时记住基础选择器即可, 可以直接跳到下一节"jQuery选择器实验室"进行动手练习, 以后再回来慢慢学习全部的选择器, 或者用到的时候再回来查询.
$("#run").click(function(){ $("div:not(:animated)").animate({ left: "+=20" }, 1000); });
:hidden
匹配所有的不可见元素
注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden.
查找所有不可见的 tr 元素:$("tr:hidden"):visible匹配所有的可见元素查找所有可见的 tr 元素:$("tr:visible")匹配给定的属性是以包含某些值的元素
查找所有 name 包含 'man' 的 input 元素: $("input[name*='man']")
[attributeFilter1][attributeFilter2][attributeFilterN]复合属性选择器，需要同时满足多个条件时使用。找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的: $("input[id][name$='man']")匹配其父元素下的第N个子或奇偶元素
':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！
可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)
在每个 ul 查找第 2 个li: $("ul li:nth-child(2)"):first-child匹配第一个子元素
':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
在每个 ul 中查找第一个 li: $("ul li:first-child"):last-child匹配最后一个子元素
':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
在每个 ul 中查找最后一个 li: $("ul li:last-child"):only-child如果某个元素是父元素中唯一的子元素，那将会被匹配
如果父元素中含有其他元素，那将不会被匹配。
在 ul 中查找是唯一子元素的 li: $("ul li:only-child")匹配所有图像域
匹配所有图像域: $(":image"):reset匹配所有重置按钮查找所有重置按钮: $(":reset"):button匹配所有按钮查找所有按钮: $(":button"):file匹配所有文件域查找所有文件域: $(":file")匹配所有可用元素
查找所有可用的input元素: $("input:enabled"):disabled匹配所有不可用元素查找所有不可用的input元素: $("input:disabled"):checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)查找所有选中的复选框元素: $("input:checked"):selected匹配所有选中的option元素查找所有选中的选项元素: $("select option:selected")
