jQuery选择器总结(全)

Jquery选择器申芳芳目标•基础选择器•层次选择器•过滤选择器•表单选择器jQuery中的基本选择器选择器描述返回示例#id根据给定的id匹配一个元素单个元素$(#test)选取id为test的元素.class根据给定的类名匹配元素集合元素$(.test)选取所有class为test的元素element根据给定的元素名称匹配元素集合元素$(p)选取所有的p元素selector1,selector2,selector3...将每一个选择器匹配到的元素合并后一起返回集合元素$(div,span,p.cls)选取所有div，span和拥有class为cls的p标签的一组元素*匹配所有元素集合元素$(*)选取所有的元素选择器语法1、通过ID选取元素语法：$(#id)2、通过类名获取元素语法：$(.className)3、通过标签名获取元素语法：$(tagName)4、一次性获取多个元素语法：$(selector1,selector2,select3...)层次选择器•如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器层次选择器选择器描述示例$(ancestordescendant)选取ancestor元素里的所有descendant(后代)元素$(divspan)选取div里的所有的span元素$(parentchild)选取parent元素下的child(子)元素$(divspan)选取div元素下元素名是span的子元素$(prev+next)选取紧接在prev元素后的next元素$(div+span)选取div元素的下一个span兄弟元素$(prev~siblings)选取prev元素之后的所有siblings元素$(div~span)选取div元素后面的所有span兄弟元素siblings()方法与$(prev~siblings)•注意:(“prev~div”)选择器只能选择“prev”元素后面的同辈元素;而jQuery中的方法siblings()与前后位置无关,只要是同辈节点就可以选取过滤选择器•过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,该选择器都以“:”开头•按照不同的过滤规则,过滤选择器又可分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器基本过滤选择器选择器描述示例:first选取第一个元素$(div:first)选取所有div元素中第一个div元素:last选取最后一个元素$(div:last)选取所有div元素中最后一个div元素:not(selector)去除所有与给定选择器匹配的元素$(input:not(.myClass))选取类名不是myClass的inupt元素:even选取索引是偶数的所有元素，索引从0开始$(input:even)选取索引是偶数的input元素:odd选取索引是奇数的所有元素，索引从0开始$(input:odd)选取索引是奇数的input元素:eq(index)选取索引等于index的元素(index从0开始)$(input:eq(1))选取索引等于1的input元素:gt(index)选取索引大于index的元素(index从0开始)$(input:gt(1))选取索引大于1的input元素:lt(index)选取索引小于index的元素(index从0开始)$(input:lt(1))选取索引小于1的input元素:header选取所有标题元素，例如：h1,h2,h3等等$(:header)选取网页中所有的标题元素内容过滤选择器选择器描述示例:contains(text)选取含有文本内容为text的元素$(div:contains('abc'))选取含有文本abc的div元素:empty选取不包含子元素或者文本的空元素$(div:empty)选取不包含子元素(包括文本元素)的div空元素:has(selector)选取含有选择器所匹配的元素的元素$(div:has(p))选取含有p元素的div元素:parent选取含有子元素或者文本的元素$(div:parent)选取拥有子元素(包括文本元素)的div元素可见性过滤选择器选择器描述示例:hidden选取所有不可见的元素$(:hidden)选取所有不可见的元素。包括inputtype=hidden/，divstyle=display:none。如果只想选取input元素，可以使用$(input:hidden):visible选取所有可见的元素$(div:visible)选取所有可见的div元素属性过滤选择器选择器描述示例[attribute]选取拥有此属性的元素$(div[id])选取拥有属性id的div元素[attribute=value]选取属性的值为value的元素$(div[title=test])选取属性title为test的div元素[attribute!=value]选取属性的值不等于value的元素$(div[title!=test])选取属性title不等于test的div元素(注意：没有属性title的div元素也会被选取)[attribute^=value]选取属性的值以value开始的元素$(div[title^=test])选取属性title以test开始的div元素[attribute$=value]选取属性的值以value结束的元素$(div[title$=test])选取属性title以test结尾的div元素[attribute*=value]选取属性的值含有value的元素$(div[title*=test])选取属性title含有test的div元素[selector1][selector2][selector3]用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围$(div[id][title$=test])选取拥有属性id，并且属性title以test结尾的div元素子元素过滤选择器选择器描述示例:first-child选取每个父元素的第一个子元素:first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素。例如$(ulli:first-child);选取每个ul中第一个li元素:last-child选取每个父元素的最后一个子元素同样，:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素。例如$(ulli:last-child);选择每个ul中最后一个li元素:only-child如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被配置$(ulli:only-child)在ul中选取是唯一子元素的li元素子元素过滤选择器选择器描述示例:nth-child(n)选择器匹配属于其父元素的第n个子元素，不论元素的类型（n可以是数字、关键词或公式）数字:每个相匹配子元素的索引值，从1开始关键词：even或odd，方程式:4n，n从0开始p:nth-child(2)选择属于其父元素的第二个子元素的每个p元素。:nth-last-child(n)选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式。同上，从最后一个子元素开始计数。子元素过滤选择器（type）选择器描述示例:first-of-type选择器匹配属于其父元素的特定类型的首个子元素的每个元素p:first-of-type选择属于其父元素的首个p元素的每个p元素。:last-of-type选择的所有元素之间具有相同元素名称的最后一个兄弟元素p:last-of-type选择属于其父元素的最后p元素的每个p元素。:only-of-type选择所有没有兄弟元素，且具有相同的元素名称的元素。p:only-of-type选择属于其父元素唯一的p元素的每个p元素。子元素过滤选择器（type）选择器描述示例:nth-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素的每个元素（n可以是数字、关键词或公式）数字:每个相匹配子元素的索引值，从1开始关键词：even或odd，方程式:4n，n从0开始p:nth-of-type(2)选择属于其父元素第二个p元素的每个p元素。:nth-last-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数。n可以是数字、关键词或公式。p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。表单元素选择器选择器描述示例:input选取所有的input、textarea、select和button元素$(:input)选取所有的input、textarea、select和button元素:text选取所有的单行文本框$(:text)选取所有的单行文本框:password选取所有的密码框$(:password)选取所有的密码框:radio选取所有的单选按钮$(:radio)选取所有的单选按钮:checkbox选取所有的复选框$(:checkbox)选取所有的复选框:submit选取所有的提交按钮$(:submit)选取所有的提交按钮:image选取所有的图像按钮$(:image)选取所有的图像按钮:reset选取所有的重置按钮$(:reset)选取所有的重置按钮:button选择所有按钮元素和类型为按钮的元素$(:button)选取所有的按钮:file选取所有的上传控件$(:file)选取所有的上传控件:hidden选取所有不可见元素$(:hidden)选取所有的不可见元素，已经在可见性过滤选择器中讲解过表单对象属性过滤选择器选择器描述示例:enabled选取所有可用元素$(#form1:enabled)选取id为form1的表单内的所有可用元素:disabled选取所有不可用元素$(#form1:disabled)选取id为form1的表单内的所有不可用元素:checked选取所有被选中的元素(单选按钮，复选框)$(input:checked)选取所有被选中的input元素:selected选取所有被选中的选项元素(下列列表)$(select:selected)选取所有被选中的选项元素