jQuery学习笔记——选择器2

一：内容过滤选择器
1 :contains(text)（取包含text文本的元素）
   $(function(){
      $("li:contains('r')").css("color","red");
   })
   <ul>
<li>abc</li>
<li>bcdr</li>
<li>cgh</li>
</ul>


2 :empty（取不包含子元素或文本为空的元素）
   $(function(){
      $("li:empty").html("没有内容");
   })
   <ul>
<li>php</li>
<li>jquery</li>
<li>html</li>
<li></li>
</ul>


3 :has(selector)（取选择器匹配的元素）
    $(function(){
      $("div:has('span')").css("color","red");
      })
</script>
<div>
<span>aaaa</span>
</div>
<div>
<p>aaaa</p>
</div>


4 :parent（取包含子元素或文本的元素） 
   $(function(){
$("li:parent").css("color","blue");
})


<ul>
<li>
<span>aaaa</span>
</li>
<li>dddd</li>
<li></li>
</ul>


二：可见性选择器
1 :hidden（取不可见的元素）
   $(function(){
      var dv = $("div:hidden").show(1000);
      var hd = $("input:hidden").val();
      alert(hd);
   })
    <div style="display: none"></div>
    <input type="hidden" value="这个是隐藏域">
    <div style="visibility: hidden;background:blue;"></div>
    <div style="opacity:0"></div>
   注:hidden选择器仅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或 opactity:0的元素占据了空间，会被排除在外。


2 :visible（取可见的元素）
  $(function(){
      var dv = $("div:visible").css("background","#f0f");
  })
   <div style="display: none"></div>
    <input type="hidden" value="这个是隐藏域">
    <div style="visibility: hidden;background:blue;"></div>
    <div style="opacity:0"></div>
    <div></div>




三：属性过滤选择器
1: [attribute]（取拥有attribute属性的元素）
     $(function(){
      $("span[class]").css("color","red");
     })


2: [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）
    $(function(){
             $("span[class=sp]").css("color","red");
      $("span[class!=sp]").css("color","red");
     })
3: [attribute ^= value], [attribute $= value]和[attribute *= value]（attribute属性值以value开始，以value结束，或包含value值）
   $(function(){
      $("span[class^=c]").css("color","red");
      $("span[class$=p]").css("color","blue");
      $("span[class*=l]").css("color","green");
     })
4: [selector1][selector2]（复合型属性过滤器，同时满足多个条件）
    $(function(){
      $("span[class][name=sp]").css("color","red");
     })




四：子元素过滤选择器
1 :first-child和:last-child(:first-child表示第一个子元素，:last-child表示最后一个子元素。)
注：:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。举个 例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。
    $(function(){
        //$("div:first").css("color","blue");
        $("div span:first-child").css("color","red");
        $("div span:last-child").css("color","red");
       })


    <div>
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>
<div>
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>


2 :only-child(某个元素是父元素中唯一的子元素)
   $(function(){
      $("div span:only-child").css("color","red");
   })


    <div>
<span>aaa</span>
</div>
<div>
<span>bbb</span>
<span>bbb</span>
<span>bbb</span>
</div>


3 :nth-child(匹配其父元素下的第N个子或奇偶元素,nth表示第n个)
注：:nth-child从1开始的，而:eq()是从0算起的。
    $(function(){
       $("div span:nth-child(2)").css("color","red");
     })
:nth-child有三种用法：
1) :nth-child(x)，获取第x个子元素 
2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素 
3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。
   $(function(){
      $("ul li:nth-child(6)").css("color","red");
      $("ul li:nth-child(even)").css("color","blue");
      $("ul li:nth-child(odd)").css("color","green");
      })
    <ul>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
</ul>


五：表单对象过滤选择器
  1 :enabled和:disabled（取可用或不可用元素）
  注：:enabled和:disabled的匹配范围包括input, select, textarea。
   $(function(){
        $(":enabled").css("border","1px solid red");
        $(":disabled").css("border","1px solid blue");
   })
   <input type="text" disabled="disabled">
    <select name="sel" disabled="disabled">
    <option>aaa</option>
    <option>aaa</option>
    <option>aaa</option>
    </select>
    <textarea disabled="disabled">aaaa</textarea>




 2 :checked（取选中的单选框或复选框元素）
  注：不匹配select元素
    $(function(){
      $(":checked").each(function(){
      alert($(this).val());
      });
      })
            <td>
<input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex" checked="true">女
</td>


3 :selected（取下拉列表被选中的元素）
      $(function(){
      alert($(":selected").val());
      })


    <select>
<option value="安徽">安徽</option>
<option value="浙江" selected>浙江</option>
<option value="江苏">江苏</option>
</select>


六：表单选择器
1：:input（取input,textarea,select,button元素）
   $(function(){
      $(":input").css("border","1px solid red");
      })
    <input type="text">
<input type="button">
<textarea></textarea>
<select></select>


2 :text（取单行文本框元素）和:password（取密码框元素）
      $(function(){
      alert($(":text").val());
      alert($(":password").attr("name"));
      })
      <input type="text" value="aaa">
 <input type="password" name="pwd">


3 :radio（取单选框元素）
   $(function(){
      $(":radio").each(function(){
      alert($(this).val());
      })
    })
    <input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex">女
4 :checkbox（取复选框元素）
  $(function(){
      $(":checkbox").each(function(){
      alert($(this).val());
      })
    })


5 :submit（取提交按钮元素）
  $(function(){
        alert($(":submit").val());
  })
  <input type="submit" value="提交">


6. :reset（取重置按钮元素）
    $(function(){
        var val = $(":reset").val();
        alert(val);
     })
7. :button（取按钮元素）
    $(function(){
        var val = $(":button").val();
        alert(val);
     })
8. :file（取上传域元素）
    $(function(){
        var val = $(":file").attr("name");
        alert(val);
     })
9. :image (取图片按钮元素)
    $(function(){
        var val = $(":image").attr("name");
        alert(val);
     })


10. :hidden（取不可见元素）
      $(function(){
        var val = $("input:hidden").attr("name");
        var val = $("p:hidden").html();
        alert(val);
     })