Jquery选择器基本用法

Jquery属性选择器基础入门案例

HTML正文：

         <input type="button" value="属性title 的div元素绿色"  id="b1"/><br>         <input type="button" value="属性title值等于test的div元素红色"  id="b2"/><br>         <input type="button" value="属性title值不等于test的div元素(包含没有title属性)黄色"  id="b3"/><br>         <input type="button" value="属性title值不等于test的div元素(包含title属性)蓝色"  id="b4"/><br>         <input type="button" value="属性title值 以te开始 的div元素紫色"  id="b5"/><br>         <input type="button" value="属性title值 以est结束 的div元素橙色"  id="b6"/><br>         <input type="button" value="属性title值 含有es的div元素粉色" id="b7"/><br>         <input type="button" value="选取有属性id的div元素，结果中选取属性title值含有“es”的 div元素蓝色"  id="b8"/><br>         <input type="button" value="input元素类型为text显示为红色"  id="b9"/><br>         <input type="text" value="hidden1"/><br>         <input type="hidden" value="hidden2"/><br>         <div id="one"  title="test">div id="one"  title="test"</div>         <div id="one"  title="texxx">div id="one"  title="texxx"</div>         <div id="one">div id="one"</div>         <div id="one"  title="xxxesxxxxxt">div id="one"  title="xxxesxxxxxt"</div>         <div id="two"   title="xxxxx">div id="two"  title="xxxxx"</div>          <div id="three"  class="one" >XXXXXXXXX</div>   

Javascript处理代码：

     //元素名[属性名]：属性选择器     $('#b1').click(function(){     $("div[title]").css("background","green");     });     //[属性=属性值]；筛选特定的属性值元素      $('#b2').click(function(){     $("div[title='test']").css("background","red");     });     //筛选出title属性值不是test的div元素，包含没有title属性的元素      $('#b3').click(function(){     $("div[title!='test']").css("background","green");     });     //[val][val]类似过滤器     $('#b4').click(function(){     $("div[title!='test'][title]").css("background","blue");     });     //^正则表达式:以....结束     $('#b5').click(function(){     $("div[title^='tes']").css("background","blue");     });     //$正则表达式:以....结束     $('#b6').click(function(){     $("div[title $='st']").css("background","orange");     });     //*正则表达式:包含     $('#b7').click(function(){     $("div[title *='es']").css("background","pink");     });     $('#b8').click(function(){     $("div[id][title *='es']").css("background","pink");     });      $('#b9').click(function(){     //$("#one").hide();  //隐藏id标记的div     $("input[type='hidden']").css("display","block");     $("input[type='text']").css("background","red");    // $("#one").show();  //显示id标记的div     });

效果：