锋利的jquery —— 选择器

2011-3-23  jquery 选择器

 

1、基本选择器

    $('#id') ,

    $('.class') ,

    $('element')

     注： $('*').css("background","#bbffaa")     表示 改变所有元素 的背景色

 

2、层次选择器

     $("div span")   --- 选取<div>里的所有的<span>元素

     $("div>span")  --- 选取<div>元素下，元素名为<span>的子元素

     $(".one + div") --- 选取class为one的 下一个<div>元素  <==> $(".one").next("div")

     $("#two ~ div")---选取id为two的后面 所有同辈 <div>元素    <==> $("#two").nextAll("div")

     注： $("#two").siblings ("div")  选取id为two的所有同辈 <div>元素  (没有前后限定)

 

3、过滤选择器 （以：开头）

 

     1)基本过滤选择器

         ：first     ---- 例 $("div:first")   选取所有<div>元素中的第一个<div>元素

         ：last     ---- 例 $("div:last")   选取所有<div>元素中的第后一个<div>元素

         ：not(selector)   ----例$("input:not(.myclass)") 选取class不是myclass的所有<input>元素

         ：even  选取索引为偶数的所有元素(索引从0开始)  例$("input:even") 选取索引为偶数的<input>元素

         ： odd    选取索引为奇数的所有元素(索引从0开始)

         ：eq(index) 选取索引等于 index的元素(index 从0开始)

         ：gt(index) 选取索引大于 index的元素(index 从0开始)

         ：lt(index) 选取索引小于 index的元素(index 从0开始)

         ：header 选取所有标题元素 如：h1,h2,h3 等。  例$(":header") 选取网页中所有标题元素 如：h1,h2,h3 .等

         ：animated 选取当前正在执行动画的所有元素。例$("div:animated") 选取正在执行动画的<div>元素

 

    2)内容过滤选择器

         ：contains(text)  选取文本内容包含text的元素。 例$("div:contains('我')")选取文本包含“我”的<div>元素

         ：empty  选取不包含子元素或文本的空元素。 例$("div:empty")选取不包含子元素(包含文本元素)的<div>元素

         ：has(selector) 选取含有选择器所匹配的元素的元素。 例$("div:has(p)")选取含有<p>元素的<div>元素

         ： parent     选取含有子元素或者文本的元素。例$("div:parent")  选取拥有子元素(包含文本元素)的<div>元素

 

    3)可见性过滤选择器

         ：hidden     选取所有不可见的元素

                           $(":hidden")  选取所有不可见元素，包括<input  type="hidden" />;

                                                <div style="display:none;">和<div style="visibility:hidden;">等元素。

                           $("input:hidden").show(3000) 选取所有不可见的<input>元素,让它显示3000毫秒

 

         ：visible     选取所有可见的元素。 例$("div:visible") 选取所有可见的<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>元素.(注意:没有属性title的<div>也会被选取 )

         [attribute^ = value] 选取属性值以value开头 的元素。

         [attribute$ = value] 选取属性值以value结束 的元素。

         [attribute* = value] 选取属性值含有value 的元素。

 

     5)子元素过滤选择器

         ：first-child   选取父元素的第一个子元素

         ：last-child   选取父元素的最后一个子元素

         ：only-child  如果某元素是它父元素的唯一子元素，那么它将会匹配。如果还有其他子元素，则不匹配。

         ：nth-child (even ) 选取每个父元素下的索引值为偶 数的子元素。

         ：nth-child (odd ) 选取每个父元素下的索引值为奇 数的子元素。

         ：nth-child (2 ) 选取每个父元素下的索引值为2 的子元素。

         ：nth-child (3n ) 选取每个父元素下的索引值为3的倍数 的子元素。(n从0开始 )

         ：nth-child (3n+1 ) 选取每个父元素下的索引值为（3n+1） 的子元素。(n从0开始 )

注意： ：nth-child(index)  index 是从1开始 ；

         ：eq(index) index 是从0开始 ； 同理，：first和：first-child，：last和：last-child 类似。

 

      6)表单属性过滤选择器

          ：enabled  选取所有可用元素。

          ：disabled 选取所有不可用元素。

          ：checked  选取所有被选中的元素(单选框，复选框)。

          ：selected 选取所有被选中的选项元素(下拉列表)。

例： $("#from1 input:enabled ").val("hello...");  改变表单内可用 <input>元素的值。

       $("#from1 input:disabled ").val("hello...");  改变表单内不可用 <input>元素的值。

       $("input :checked ").length ;  获取多选框选中的个数

       $("select :selected ").text();  获取下拉列表选中的内容。

 

4、表单选择器

      ：input  选取所有<input>,<textarea>.<select>.<button>元素

      ：text   选取所有单行文本框

      ：password  选取所有的密码框

      ：radio  选取所有的单选框

      ：checkbox 选取所有的多选框

      ：submit  选取所有的提交按钮

      ：image  选取所有的图像按钮

      ：reset  选取所有的重置按钮

      ：button 选取所有的按钮

      ：file  选取所有的上传域

      ：hidden 选取所有不可见元素

 

在选择器中可以使用“ \\ ” 对特殊符号进行转义 ；例如 . /# 等等

 

区别： $(".test  :hidden") 中间多一个空格    ----   表示选取class为test的元素里面的 隐藏元素。 $(".test:hidden")   ----   表示选取隐藏的class为test的元素。