JQuery选择器总结

一、基本选择器

选择器	示例	描述
id选择器	$("#test")	选取id为test的元素
类选择器	$(".test")	选取所有class为test的元素
标签选择器	$(“div”)	选取所有的div元素
通配选择器	$("*")	通配选择器，匹配页面中所有元素

注意：
#####（1）$("p.intro")选取所有class="intro"的p元素（2）$(“p#demo”) 选取所有 id=“demo” 的 p 元素
#####

二、层次选择器

选择器	示例	描述
后代元素	$(“div span”)	查找div元素下面的所有span子节点，包括非直接子节点
子元素	$(“div>span”)	选取div下的span直接子节点，不包括非直接子节点
相邻元素	$(".one+div")	选取class为one的下一个div元素（相邻元素）,包括非直接子节点
兄弟元素	$("#two~div")	选取id为two的元素后面所有div兄弟元素,不包括非直接子节点

三、表单选择器

1.表单元素选择器

选择器	描述
$(":input")	选择所有的表单输入元素，包括input, textarea, select 和 button
$(":text")	选择所有的text input元素
$(":password")	选择所有的password input元素
$(":radio")	选择所有的radio input元素
$(":checkbox")	选择所有的checkbox input元素
$(":sumbit")	选择所有的submit input元素
$(":image")	选择所有的image input元素
$(":button")	选择所有的button input元素
$(":file")	选择所有的file input元素
$(“hidden”)	选择所有类型为hidden的input元素或表单的隐藏域

2.表单元素过滤选择器

选择器	描述
$(":enabled")	选择所有的可操作的表单元素
$(":disabled")	选择所有的不可操作的表单元素
$(":checked")	选择所有的被checked的表单元素
$(“select option:selected”)	选择所有的select 的子元素中被selected的元素

四、过滤选择器

1.基本过滤选择器

选择器	描述
$(“tr:first”)	选择所有tr元素的第一个
$(“tr:last”)	选择所有tr元素的最后一个
$(“tr:even”)	偶数，选择所有的tr元素的第0，2，4… …个元素
$(“tr:odd”)	奇数，选择所有的tr元素的第1，3，5… …个元素
$(“td:eq(2)”)	选择所有的td元素中序号为2的那个td元素
$(“td:gt(4)”)	选择td元素中序号大于4的所有td元素
$(“td:ll(4)”)	选择td元素中序号小于4的所有的td元素
$(":header")	选取网页中所有的h1，h2，h3……
$(“div:animated”)	选取正在执行动画的div元素

2. 内容过滤选择器

选择器	描述
$(“div:contains(‘John’)”)	选择所有div中含有John文本的元素
$(“td:empty”)	选择所有的为空（也不包括文本节点）的td元素的数组
$(“div:has§”)	选择所有含有p标签的div元素
$(“td:parent”)	选择所有的以td为父节点的元素数组

3. 可视化过滤选择器

选择器	描述
$(":hidden")	选择所有的被hidden的div元素
$(":visible")	选择所有的可视化的div元素

4. 属性过滤选择器

选择器	描述
$(“div[id]”)	选择所有含有id属性的div元素
$(“input[name=‘newsletter’]”)	选择所有的name属性等于’newsletter’的input元素
$(“input[name!=‘newsletter’]”)	选择所有的name属性不等于’newsletter’的input元素
$(“input[name^=‘news’]”)	选择所有的name属性以’news’开头的input元素
$(“input[name$=‘news’]”)	选择所有的name属性以’news’结尾的input元素
$(“input[name*=’'news]”)	选择所有的name属性包含’news’的input元素
$(“input[id][name^=‘man’]”)	以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且name属性以man开头的元素

5.子元素过滤器

选择器	描述
$(“div span:first-child”)	返回所有的div元素中span的第一个子节点的数组
$(“div span:last-child”)	返回所有的div元素中sapn的最后一个节点的数组
$(“div button:only-child”)	返回所有的div中button只有唯一一个子节点的所有子节点的数组

参考网址

1.jQuery选择器总结
2.jQuery快速学习

注：文章是经过参考其他的文章然后自己整理出来的，有可能是小部分参考，也有可能是大部分参考，但绝对不是直接转载，觉得侵权了我会删，我只是把这个用于自己的笔记，顺便整理下知识的同时，能帮到一部分人。
ps : 有错误的还望各位大佬指正,小弟不胜感激