Jquery 选择器

  • A+
所属分类:Web前端
摘要

1.基本选择器   选择器      描述                   

1.基本选择器

  选择器      描述                   

  #id       根据给定的id匹配匹配一个元素  例如 $('#id')

  .class      根据给定的类名匹配元素   例如 $('.myclass')

  selector1,selector2...    将每一个选择器匹配到的元素合并后一起返回   例如 $(selector1,selector2..)

  *          匹配所有的元素

 

2.层次选择器

   选择器                描述   

   $("ancestor descendant")    选取ancestor元素里面的所有descendant元素

   $("parent > child")    选取parent元素下的child元素

   $("prev + next")      选取紧接在prev元素后的next元素

   $("prev ~ siblings")    选取prev元素之后的所有siblings元素

3.过滤选择器 

  1.基本过滤器选择器

   选择器  描述       

   :frist  选取第一个元素           例如:$("div:frist") 选取所有div的第一个

   :last      选取最后一个元素     例如:$("div:last") 选取所有div的最后一个

   :even  获取索引是偶数的所有元素   例如:$("tr:even") 选取所有tr的索引为偶数的

   :odd   获取索引是奇数的所有元素    例如:$("tr:odd") 选取所有tr的索引为奇数的

   :not(selector)获取除了选择器以外的元素    例如:$("div:not('.mydiv')") 选取所有div为.mydiv以为的所有div

   :eq(index)  获取索引等于index的元素    例如:$("div:eq(1)") 选取div索引为1的div

   :gt(index)  获取索引大于index的元素    例如:$("div:gt(1)") 选取所有div索引大于1的(返回集合)

   :lt(index)   获取索引小于index的元素      例如:$("div:lt(1)") 选取所有div索引小于1的(返回集合)

   :header  获取所有的标题元素,比如(h1,h2,...)  例如:$("div:header") 选取所有div的标题元素

   :animated   获取当前执行jQuery动画的元素   例如:$("div:animated") 选取当前执行动画的div


  3.子元素过滤选择器

      

选择器   描述  示例  
:nth-child(index/even/odd/eq) 选择的他们所有父元素的第n个子元素。(这里的index是从1开始算起)
$("p:nth-child(2)")选取body中第二个p元素
:first-child 选择所有父级元素下的第一个子元素。 $("div span:frist-child")

匹配 div 中查找第一个 span 

:last-child 选择所有父级元素下的最后一个子元素。 $("div span:last-child")

匹配 div 中查找最后一个 span 

:only-child 如果某个元素是其父元素的唯一子元素,那么它就会被选中 $("ul li:only-child")在ul中选取是唯一子元素的li元素


  2.内容过滤器选择器
 

  

选择器   描述      示例    
:contains(text)  选取含有文本内容为text的元素

$("div:contains('abc')")选取含有文本

“abc"的div元素

:empty 选择所有没有子元素的元素(包括文本节点)。 $("div:empty")选取不包含子元素(包括文本元素)的div元素
:has(selector) 选取含有选择器所匹配的元素的元素 $("div:has(p)")选取含有P元素的div元素
:parent 选择所有含有子元素或者文本的父级元素。 $("div:parent")选取拥有子元素(包括文本元素)的div元素

        

 

  4.属性过滤选择器

      

选择器  描述   示例  
[attribute] 选取拥有此属性的元素 $("div[id]")选取拥有属性Id的div元素
[attribute=value] 选取属性的值为value的元素 $("div[title=test")选取属性title为test的div元素
[attribute!=value] 选取属性的值不等于value的元素 $("div[title!=test]")选取属性title不等于test的div元素(注意,没有属性的div元素也会被选取)
[attribute^=value]   选取属性的值以value开始的 $("div[title^=test]")选取属性title以test开始的div元素
[attribute$=value] 选取属性的值以value结束的 $("div[title$=test]")选取属性title以test结尾的div元素
[attribure|=value] 选取属性的前缀等于value或为value 和-连接为前缀的元素

$("div[title|=test]")选取属性title前缀等于test或以test-*的div元素

(注意,没有title属性的div元素也会被选取)

[attribute~=value] 选取属性的值包含value的元素,value和其他字符用空格分隔 $("div[title~=test]")选取属性title包含test的div元素(注意,没有title属性的div元素也会被选取)
[attribute*=value] 选取属性的值含有value的元素 $("div[title*=test]")选取属性title含有test的div元素

[selector1]

[selector2]

用属性选择器合并成一个复合属性选择器,满足多个条件 $("div[id][title$=test]")选取拥有属性Id,并且属性title以test结尾

 

  5.表单对象属性过滤选择器

    

      

选择器 描述  示例 
:enabled 选取所有可用元素 $("#form1:enabled")选取Id为from1的表单内所有可用元素
:disabled 选取所有不可用元素 $("#form1:disabled")选取id为form1的表单内的所有不可以的元素
:checked 选取所有被选中的元素(单选按钮,复选框) $("input:checked")选取所有被选中的input元素
:selected 选取所有被选中的选项元素(下拉列表) $("select:selected")选取所有被选中的选项元素

  

  6.可见性过滤选择器

    

选择器 描述  示例 
:hidden  选择所有隐藏的元素。

$(":hidden")选取所有不可见的元素。

包括<input type=hidden/>,

 <div style="display:none"/>和

<div style="visibility:hidden"/>等元素。

如果只是选取input元素,可以使用$("input:hidden")

:visible 选取所有可见的元素 $("div:visible")选取所有可见的div元素


4. 表单选择器
  

    

选择器 描述  示例 
:input  选取所有的input,textarea,select,button元素 $(":input")
:text 选取所有的单行文本框 $(":text")
:password 选取所有的密码框 $(":password")
:radio 选取所有的单选框 $(":radio")
:checkbox 选取所有的复选框 $(":checkbox")
:submit 选取所有的提交按钮 $(":submit")
:image 选取所有的图像按钮 $(":image")
:reset 选取所有的重置按钮 $(":reset")
:button 选取所有的按钮 $(":button")
:file 选取所有的上传文件 $(":file")
:hidden 选取所有不可见的元素 $(":hidden")