JQuery学习历程2.JQuery选择器

Posted 2020-06-13

基本选择器

---

 

选择器	描述	返回	示例
#id	根据给定的id匹配元素	单个元素	$("#myId")
.class	根据给定的class类匹配元素	集合元素	$(".myClass")
element	元素选择器，匹配给定标签的元素	集合元素	$("input")
*	匹配所有元素	集合元素	$("*")
selector1,selector2	组合选择器，取交集	集合元素	$("div,input")选取div和input元素

层次选择器

---

 

选择器	描述	返回	示例
ancestor descendant	选取ancestor所有的后代descendant元素	集合元素	$("div span")选取div下的所有span(子孙)
parent > children	选取parent直系孩子children元素	集合元素	$("div > span"选取div下的直系孩子span(子)
pre + next	选取紧接在pre后面的同辈next元素	集合元素	$("div + span")选取紧接在div后面的兄弟元素next
pre ~ siblings	选取紧接在pre、后面的兴地元素siblings	集合元素	$("div ~ span")选取div后面的span元素

过滤选择器

---

 

　　基本过滤选择器

选择器	描述	返回	示例
:first	选取第一个元素	单个元素	$("div:first")选取第一个div元素
:last	选取最后一个元素	单个元素	$("div:last")选取最后一个div元素
:eq(index)	选取第index位置的元素，从0开始	单个元素	$("div:eq(0)")选取第0个元素
:gt(index)	选取下标大于index的元素,从0开始	集合元素	$("div:gt(1)")选取下标大于1的元素不包括1
:lt(index)	选取下标小于index的元素,从0开始	集合元素	$("div:lt(3)")选取下标小于3的元素不包括3
:not(selector)	去除selector选择器选择到的元素	集合元素	$("div:not(‘.lal‘)")选取class不是lal的div元素
:even	选取下标为偶数的元素,从0开始	集合元素	$("div:even")选取div的下标为偶数的元素
:animated	选取正在执行动画的元素	集合元素	$("div:animated")选取正在执行动画的div元素
:header	选取标题元素	集合元素	$(":header")选取网页中的所有标题元素
:focus	选取当前获取焦点的元素	集合元素	$("input:focus")选取获取焦点的input元素

　　内容过滤选择器

选择器	描述	返回	示例
:contains(text)	匹配指定的文本	集合元素	$("div:contains(‘lal‘))匹配div中有lal的文本元素
:has(selector)	匹配他的子元素有selector	集合元素	$("div:has(‘input‘)")匹配div中input的元素的div元素
:empty	选取没有子元素的元素	集合元素	$("div:empty")匹配div为空的元素
:parent	选取元素不为空的元素	集合元素	$("div:parent")匹配div元素不为空的元素

　　可见性过滤选择器

选择器	描述	返回	示例
:visable	选取可见的元素	集合元素	$("div:visable")选取可见的div元素
:hidden	选取不可见的元素	集合元素	$("div:hidden")选取不可见的

　　属性过滤选择器

选择器	描述	返回	示例
[attribute]	选取用此属性的元素	集合元素	$("div[id]")选取div中设置id的元素
[attribute=value]	选取属性值为value的元素	集合元素	$("div[id=myId]")选取id为myId的div元素
[attribute^=value]	选取属性值是以value为开头的元素	集合元素	$("div[id^=my]")选取id以my开头的div元素
[attribute$=value]	选取属性值是以value为结尾的元素	集合元素	$("div[id$=Id]")选取id以Id结尾的div元素
[attribute*=value]	选取属性值中包含value的元素	集合元素	$("div[id*=yI]")选取id中含有yI的div元素
[attribute!=value]	选取属性值不为value的元素	集合元素	$("div[id!=myId]")选取id不为myId的div元素
[attribute\=value]	选取属性值等于给定的字符或以该字符为前缀的元素（连字符-）	集合元素	$("div[id\=my]")选取id前缀为my的div元素  id=my-id被选中
[attribute~=value]	选取属性值以空格隔开中的一个值	集合元素	$("div[class=~=myClass]")选取class以空格隔开有myClass的div元素 class=myClass youClass
[attribute=value][attribute=value]	取交集	集合元素	$("div[id=myId][class=myClass]选取id为myId并且class为myClass的div元素

　　子元素过滤选择器(选取的是子元素)

选择器	描述	返回	示例
:nth-child(index/even/odd)从1开始	选取每个父元素d第index子元素	集合元素	$("div:nth-child(1)")选取div中的第一个子元素
:first-child	选取每个父元素的第一个子元素	集合元素	$("div:first-child")选取div中的第一个子元素
:last-child	选取每个父元素的最后一个子元素	集合元素	$("div:last-child")选取div中的最后一个子元素
:only-child	选取每个父元素中只有一个子元素的子元素	集合元素	$("div:only-child")选取div中只有一个子元素的子元素

　　表单对象过滤选择器

选择器	描述	返回	示例
:checked	选取被选中的元素	集合元素	$("#form1 input:checked")选取form1中被选中的input的元素
:selected	选取被选中的选项元素(下拉列表)	集合元素	$("select option:selelcted")选取select下被选中的选项
:enable	选取可用元素	集合元素	$("#form1 :enable)选取form1下所有可用元素
:disable	选取不可用元素	集合元素	$("#form1 :disable")选取form1下所有不可用元素

表单选择器

---

 

选择器	描述	返回	示例
:input	选取所有input,textarea,select,button元素	集合元素	$("#form1 :input")选取表单form1下的input元素
:password	选取所有密码框	集合元素	$("#form1 :password")选取表单form1下的密码输入框
:text	选取所有单行文本框	集合元素	$("#form1 :text")选取表单form1下的单行文本框
:radio	选取单选按钮框	集合元素	$("#form1 :radio")选取表单form1下的单选按钮框
:reset	选取重置按钮	集合元素	$("#form1 :reset")选取表单form1下的重置按钮
:submit	选取提交按钮	集合元素	$("#form1 :submit")选取表单form1下的提交按钮
:image	选取图像按钮	集合元素	$("#form1 :image")选取表单form1下的图像按钮
:checkbox	选取多选框	集合元素	$("#form1 :checkbox")选取表单form1下的多选框
:file	选取所有上传文件框	集合元素	$("#form1 :file")选取表单form1下的上传文件筐
:hidden	选取所有隐藏元素	集合元素	$("#form1 :hidden")选取表单form1 下的隐藏元素