JQuery学习历程2.JQuery选择器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery学习历程2.JQuery选择器相关的知识,希望对你有一定的参考价值。

基本选择器


 

选择器 描述  返回 示例
#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 下的隐藏元素

以上是关于JQuery学习历程2.JQuery选择器的主要内容,如果未能解决你的问题,请参考以下文章

二次学习JQuery 选择器&选择集过滤&转移

jQuery-1

jquery基础入门

jquery基础入门

JQuery选择器学习整理(基本选择器,层级选择器,伪类选择器,属性过滤,内容过滤,可见性过滤,范围选择器,排除选择器)

基础2.Jquery过滤选择器