Jquery屬性選擇器

Jquery屬性選擇器基礎入門案例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>attribute selector</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
    <link type="text/css" rel="stylesheet" href="js/attribute.css"/>
    </head>
    <body>
         <input type="button" value="屬性title 的p元素綠色"  id="b1"/><br>
         <input type="button" value="屬性title值等於test的p元素紅色"  id="b2"/><br>
         <input type="button" value="屬性title值不等於test的p元素(包含沒有title屬性)黃色"  id="b3"/><br>
         <input type="button" value="屬性title值不等於test的p元素(包含title屬性)藍色"  id="b4"/><br>
         <input type="button" value="屬性title值 以te開始 的p元素紫色"  id="b5"/><br>
         <input type="button" value="屬性title值 以est結束 的p元素橙色"  id="b6"/><br>
         <input type="button" value="屬性title值 含有es的p元素粉色" id="b7"/><br>
         <input type="button" value="選取有屬性id的p元素,結果中選取屬性title值含有“es”的 p元素藍色"  id="b8"/><br>
         <input type="button" value="input元素類型為text顯示為紅色"  id="b9"/><br>
         <input type="text" value="hidden1"/><br>
         <input type="hidden" value="hidden2"/><br>
 
         <p id="one"  title="test">p id="one"  title="test"</p>
         <p id="one"  title="texxx">p id="one"  title="texxx"</p>
         <p id="one">p id="one"</p>
         <p id="one"  title="xxxesxxxxxt">p id="one"  title="xxxesxxxxxt"</p>
         <p id="two"   title="xxxxx">p id="two"  title="xxxxx"</p> 
         <p id="three"  class="one" >XXXXXXXXX</p>   
    </body>
     <script type="text/javascript">
     //元素名[屬性名]:屬性選擇器
     $('#b1').click(function(){
     $("p[title]").css("background","green");
     });
 
     //[屬性=屬性值];篩選特定的屬性值元素
      $('#b2').click(function(){
     $("p[title="test"]").css("background","red");
     });
 
     //篩選出title屬性值不是test的p元素,包含沒有title屬性的元素
      $('#b3').click(function(){
     $("p[title!='test']").css("background","green");
     });
 
 
     //[val][val]類似過濾器
     $('#b4').click(function(){
     $("p[title!='test'][title]").css("background","blue");
     });
 
     //^正則表達式:以....結束
     $('#b5').click(function(){
     $("p[title^='tes']").css("background","blue");
     });
 
     //$正則表達式:以....結束
     $('#b6').click(function(){
     $("p[title $='st']").css("background","orange");
     });
 
     //*正則表達式:包含
     $('#b7').click(function(){
     $("p[title *='es']").css("background","pink");
     });
 
     $('#b8').click(function(){
     $("p[id][title *='es']").css("background","pink");
     });
 
      $('#b9').click(function(){
     //$("#one").hide();  //隱藏id標記的p
     $("input[type='hidden']").css("display","block");
     $("input[type='text']").css("background","red");
    // $("#one").show();  //顯示id標記的p
     });
     </script>
</html>

 

這裡寫圖片描述

發佈留言