jQuery选择器之id选择器

$( "#id" )

jQuery选择器之类选择器

$( ".class" )

jQuery选择器之元素选择器

$( "element" ) 例：$("p")

jQuery选择器之全选择器（*选择器）

$( "*" ) 选中全部元素

jQuery选择器之层级选择器

$( "parent > child" )子选择器 如$("div > p")表示选择div下的第一层所有的p元素。

$("prev + next")相邻兄弟选择器 如$("div + p")表示选择div同层的左右相邻的p节点

$("ancestor descendant")后代选择器 如$("div p")表示选择div下的p节点（不管中间隔多少层）

$("prev ~ siblings")一般兄弟选择器 如$("div ~ p")表示选择div同层的p节点

jQuery基本选择器

$(":first") 匹配第一个元素 例：$(".div:first").css("color", "#CD00CD");

$(":last") 匹配最后一个元素 例：$(".div:last").css("color", "#CD00CD");

$(":not(selecter)") 过滤选择器 不包含 例：$("input:not(:checked) + p").css("background-color", "#CD00CD")

$(":eq(index)") 匹配索引值为index的元素 例：$(".arron:qt(2)").css("border", "3px groove blue")

$(":gt(index)")匹配大于index的选择器 例：$(".arron:gt(3)")..css("border", "3px groove blue")

$(":even") 选择偶数 从0开始 例：$(".div:even").css("border", "3px groove red");

$(":odd") 选择奇数

$(":lt(index)")选择小于index的元素

$(":header") 选择所有标题元素 H1、H2、H3等

$(":lang(language)")选择指定语言

$(":root") 选择全部根元素

$(":animated") 选择所有正在执行的动画

jQuery内容选择器

$(":contains(text)") 选择所有指定文本的元素

$(":parent") 选择所有含有子元素或者文本元素

$(":empty") 选择所有没有子元素的元素（包含文本节点）

$(":has(selector)")选择元素中至少包含指定选择器的元素

注意：

1、:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

2、如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。

3、:parent与:empty是相反的，两者所涉及的子元素，包括文本节点

例：$(".div:contains(':contains')").css("color", "#CD00CD"); /*查找所有class='div'中DOM元素中包含"contains"的元素节点*/

$(".div:has('span')").css("color", "blue"); /*查找所有class='div'中DOM元素中包含"span"的元素节点*/

$("a:parent").css("border", "3px groove blue"); /*选择所有包含子元素或者文本的a元素*/

jQuery选择器之可见性筛选选择器

$(":visible") 选择所有显示的元素 不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility

$(":hidden") 选择所有隐藏的元素

例：$("#div1:visible").css("border", "3px groove blue");

jQuery选择器之属性筛选选择器

$("[attribute|='value']") 选择指定属性值为指定字符串或者以该字符串开头的（以_链接的）

$("[attribute*='value']") 选择指定的具有包含指定子字符串的元素

$("[attribute~='value']") 选择指定属性用空格分割的属性中包含一个给定元素

$("[attribute='value']") 选择指定属性的元素

$("[attribute!='value']") 选择不存在指定属性 或者指定属性不等于给定的值的元素

$("[attribute^='value']") 选择指定属性是以给定的字符串开头的元素

$("[attribute$='value']") 选择指定属性是以给定的字符串结尾的元素

$("[attribute]") 选择所有具有指定属性的元素

$("[attributeFilter1][attributeFilterN]") 选择匹配所有指定属性的元素

例：$("div[name=p1]").css("border", "3px groove red");

$("div[p2]").css("border", "3px groove blue"); /*查找所有div中，有属性p2的div元素*/

$(".div[name^=toutiao']").css("border", "3px groove red"); //查找所有div中，属性name的值是用toutiao开头的

jQuery选择器之子元素筛选选择器

$(":first-child") 选择所有父级元素下的第一个子元素

$(":last-child") 选择所有父级元素下的最后一个元素

$(":only-child") 选择指定元素为其父元素的唯一元素的

$(":nth-child(n)") 选择他们所有父元素的第n个子元素 （从1开始）

$(":nth-last-child(n)")选择所有他们父元素的第n个子元素，从最后开始

注意：

1、:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

2、:last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素

3、如果子元素只有一个的话，:first-child与:last-child是同一个

4、 :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配

5、jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

6、nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

例： $(".first-div a:first-child").css("color", "#CD00CD"); //查找class="first-div"下的第一个a元素

$(".last-div a:nth-child(2)").css("color", "#CD00CD"); //查找class="last-div"下的第二个a元素

jQuery选择器之表单元素选择器

$(":input") 选择所有input textaera select button

$(":text") 匹配所有文本框

$(":password") 匹配密码框

$(":radio") 匹配单选按钮

$(":checkbox") 匹配复选框

$(":sumbit") 匹配提交按钮

$(":image") 匹配所有图像域

$(":reset") 匹配所有重置按钮

$(":button") 匹配所有按钮

$(":file") 匹配所有文件域

除了input筛选选择器 其他的都可以$(':password') == $('[type=password]')这种

例：$(":input").css("border", "1px groove red"); //查找所有 input, textarea, select 和 button 元素

$("input:text").css("background", "#A2CD5A"); ////匹配所有input元素中类型为text的input元素

注意：$("input")只选择input标签，$(":input")是伪类选择，不单单是input，还包括textarea和select,button.

$("input:checkbox").attr('checked','true') //匹配所有input元素中的复选按钮,并选中

jQuery选择器之表单对象属性筛选选择器

$(":enabled") 选取可用的表单元素

$(":disabled") 选取不可用表单元素

$(":checked") 选取被选中的input

$(":selected") 选取被选中的option

注意：

1、选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器

2、在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素

例： $("input:enabled").css("border", "2px groove red"); //查找所有input所有可用的（未被禁用的元素）input元素

$("input:checked").removeAttr('checked') //查找所有input所有勾选的元素(单选框,复选框)