标签：
jQuery选择器
相对于css中的选择器来讲，javascript中对象的选定要使用的方法显得比较笨拙，使用时有许多不便,而在jQuery中，不仅提供了css中类似的选择器，还提供了许多更为灵活的方式供使用。下面我从一个初学者的角度简单罗列里面比较好用的选择器。
1.与css选择器类似的：
包括 id，class，element，*,都是以$("#id"),$(".class"),$("element"),$("*")的形式呈现，是可以类推的，最基础的选择器。而像是通过关系为桥梁的写法也很容易掌握，主要包括有(直接以举例的方式说明)：
【1】祖辈或父子关系
(1)$("form input") ——>form祖辈下的所有input 子孙
(2)$(" form>input")——>form父辈下的所有input 儿子
(3) $("div:first-of-type")，$("div:last-of-type")——>分别指在每个匹配的div中查找div包含的第一儿子和最后一个儿子（注意与 (4)区别）
(4)$("ul li:first-child"),$(" ul li:last-child "),$("ul li:nth-child(n)")——>分别指ul下的第一个，最后一个和第n个li
(5)$("ul li:only-child")找ul中是唯一子元素的li
【2】兄弟关系
(1)$("label+input")——>label紧挨着的第一个input
(2) $("label~input")——>label同辈的所有input
【3】自身指示
(1)$("li:first "), $("li:last") , ——>分别指第一个和最后一个li元素
(2) $("label~input")——>label同辈的所有input
(3)$("td:parent")——>查找所有含有子元素或文本的td元素，通俗点讲就是找一个有儿子的td
2.特殊新增选择器：
除了用的比较习惯的选择器外，jQury还有一些特殊选择器可以供我们灵活选择。【1】 特殊选择
(1) $("tr:even")——>查找表格的奇数行即1、3、5...行
(2) $("tr:odd")——>查找表格的2、4、6行
(5)$("tr:eq(1)") ——>查找第二行
(6)$("tr:gt(0)") ——>匹配所有大于给定索引值(0)的元素
(7)$("tr:lt(2)") ——>匹配所有小于给定索引值(2)的元素
(8)$(":header").css("background", "#EEE") ——>匹配如 h1, h2, h3之类的标题元素
【2】匹配属性
(1) $("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" },1000);});——>
只有对不在执行动画效果的元素执行一个动画特效
(2)$("input:checked")——>查找所有选中的 input 元素
(3)$(“input:selected”) ——>查找所有选取的 input 元素
(4)$("input:not(:checked)") ——>查找所有未选中的 input 元素
（5）$(“:contains(‘neirong’)”) ——>包含文本为“neirong”的所有元素
（6）$(“:empty”) ——>无子（元素）节点的所有元素
(7)$(“p:hidden”) ——>所有隐藏的<p>元素
（8）$(“table:visible”) ——>所有可见的表
(9) $(":text")——>查找所有文本框, input,password,radio,checkbox,submit,button,reset,file,image也是类似用法
列出这些选择器除了帮助作为初学者熟悉jQury的选择器外，还是在通过整理的方式让自己能更灵活地组合使用的选择器。以上整理资料源自W3CSchool手册。
标签：
原文地址：http://www.cnblogs.com/zwy123/p/4542740.html
