jQuery 选择器

---

title: jQuery 选择器
date: 2017-01-07 20:32:26

tags: [jQuery, 选择器]

1、基本选择器

语法	说明
$("*")	选择文档中的全部元素
$("div")	元素选择器，选择全部的div元素，返回数组
$("#id")	Id选择器，返回单个元素
$(".class")	class选择器，返回数组
$("p , div")	并列选择器，返回全部的p元素和div元素

<!-- more -->

2、层次选择器

语法	说明
$("A B")	后代选择器，选择全部A元素下面的全部B子元素，包含非直接子节点
$("A > B")	子元素选择器，选择A下面的直接B子元素，不包含非直接子节点
$("A + B")	紧邻兄弟元素选择器，选择A元素后面紧邻的B元素，若是没有不选中，等同于next()方法
$("A ~ B")	兄弟元素选择器，选择A后面全部的B元素，等同于nextAll()方法

3、过滤选择器

一、基本过滤选择器

语法	说明
$("span : first")	选取第一个元素
$("span : last")	选取第二个元素
$("span : not(.wrap)")	取非元素
$("tr : even")	选取偶数行（索引从0开始）
$("tr : odd")	选取奇数行（索引从0开始）
$("tr : eq(2)")	选取指定索引的元素（索引从0开始）
$("tr : gt(2)")	选取大于索引号的元素（索引从0开始）
$("ul li : lt(2)")	选取小于索引号的元素（索引从0开始）
$(" : header")	选取全部的标题元素
$(" : animated")	选取全部的动画元素

二、内容过滤选择器

语法	说明
$("span : contains('hello')")	选取包含具体文本的元素
$("span : empty”)	选取不包含子元素或文本为空的元素
$("ol li : parent”)	选取包含子元素或文本不为空的元素
$("div : has(span)”)	选取子元素含有指定元素的元素，不是直系子元素也会生效

三、可见性过滤选择器

语法	说明
$("div : hidden")	仅选取display:none或input type="hidden"的元素，不选取visibility: hidden或opacity:0的元素，也就是说:hidden只匹配那些“隐藏的”而且不占空间的元素
$("div : visible")	选取可见的元素

四、属性过滤选择器

语法	说明
$("[href]")	选取全部带有 href 属性的元素
$("[href = '#']")	选取全部 href 属性的值等于 "#" 的元素
$("[href != '#']")	选取全部 href 属性的值不等于 "#" 的元素
$("[herf ^= 'http']")	选取全部 href 属性的值以 "http" 开头的元素
$("[herf $= '.jsp']")	选取全部 href 属性的值以 "jsp" 结尾的元素
$("[herf *= 'www']")	选取全部 href 属性的值包含 "www" 的元素

4、表单选择器

一、基本表单选择器

语法	说明
$(":input")	选取全部的 input 元素
$(":text")	选取全部type="text"的 input 元素
$(":password")	选取全部type="password"的 input 元素
$(":radio")	选取全部type="radio"的 input 元素
$(":checkbox")	选取全部type="checkbox"的 input 元素
$(":submit")	选取全部type="submit"的 input 元素和button的元素
$(":reset")	选取全部type="reset"的 input 元素和button的元素
$(":button")	选取全部type="button"的 input 元素和全部标签为button的元素
$(":image")	选取全部type="image"的 input 元素
$(":file")	选取全部type="file"的 input 元素

二、表单元素过滤选择器

语法	说明
$(":enabled")	选择全部启用的 input 和 button 元素
$(":disabled")	选择全部禁用（即设置了disabled="disabled"）的 input 和 button 元素
$(":selected")	选择全部被选中下拉列表 选项
$(":checked")	选择全部被选中的复选框 或单选 按钮元素

5、jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

语法： jQuery选择器.css("css属性", "css属性值");

$("div").css("background-color","red");

6、jQuery查找父、子、兄弟节点的方法

语法	说明
jQuery.parent(expr)	找父节点，能够传入expr进行过滤，好比$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr)	查找全部祖先元素，从父元素开始查找
jQuery.closest(expr)	查找第一个匹配的祖先元素，从当前元素开始查找
jQuery.children(expr)	返回全部子节点，这个方法只会返回直接的孩子节点，不会返回全部的子孙节点
jQuery.contents()	返回下面的全部内容，包括节点和文本。
jQuery.prev()	返回上一个兄弟节点，不是全部的兄弟节点
jQuery.prevAll()	返回全部以前的兄弟节点
jQuery.next()	返回下一个兄弟节点，不是全部的兄弟节点
jQuery.nextAll()	返回全部以后的兄弟节点
jQuery.siblings()	返回兄弟姐妹节点，不分先后
jQuery.find(expr)	不会有初始集合中的内容，好比$("p"),find("span"),是从子元素中找，等同于$("p span")
jQuery.filter(expr)	会有初始集合中的内容

7、参考资料

jQuery选择器大全

jQuery选择器总结

w3school-jQuery 参考手册 - 选择器