jQuery属性选择器功能演示

2024-09-05 12:18:15

字体：大中小

来源：转载

供稿：网友

jQuery属性选择器功能演示：选取含有属性title 的div元素，选取属性title值等于“test”的div元素，选取属性title值不等于“test”的div元素(没有属性title的也将被选中)，选取属性title值以“te”开始的div元素，组合属性选择器,首先选取有属性id的div元素，然后在结果中选取属性title值含有“es”的元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery属性选择器</title> <script src="/ajaxjs/jquery1.3.2.js" type="text/javascript"></script> <script type="text/javascript">   /*	辅助例子	1,自动重置	2,给元素添加动画  */    $(document).ready(function(){       //手动重置页面元素	  $("#reset").click(function(){		  $("*").removeAttr("style");		   $("div[class=none]").css({"display":"none"}); 	  });	  //判断是否自动重置	   $("input[type=button]").click(function(){		  if($("#isreset").is(":checked")){			   $("#reset").click();		   }	  });      //给id为mover的元素添加动画.	   function animateIt() {		  $("#mover").slideToggle("slow", animateIt);	    }		animateIt(); }) </script> <style>   div,span,p {    width:140px;    height:140px;    margin:5px;    background:#aaa;	border:#000 1px solid;    float:left;    font-size:17px;    font-family:Verdana;  }  div.mini {     width:55px;    height:55px;    background-color: #aaa;    font-size:12px;  }  div.hide {     display:none;  } </style> <script type="text/javascript">  $(document).ready(function(){	  //选取含有 属性title 的div元素.      $('#btn1').click(function(){		  $('div[title]').css("background","#bbffaa");	  })	  //选取 属性title值等于 test 的div元素.	  $('#btn2').click(function(){		  $('div[title=test]').css("background","#bbffaa");	  })	  //选取 属性title值不等于 test 的div元素.	  $('#btn3').click(function(){		  $('div[title!=test]').css("background","#bbffaa");	  })	  //选取 属性title值 以 te 开始 的div元素.	  $('#btn4').click(function(){		  $('div[title^=te]').css("background","#bbffaa");	  })	  //选取 属性title值 以 est 结束 的div元素.	  $('#btn5').click(function(){		  $("div[title$=est]").css("background","#bbffaa");	  })	  //选取 属性title值 含有 es  的div元素.	  $('#btn6').click(function(){		  $("div[title*=es]").css("background","#bbffaa");	  })	  //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.	  $('#btn7').click(function(){		  $("div[id][title*=es]").css("background","#bbffaa");	  })  });  </script></head><body>  <button id="reset">手动重置页面元素</button>  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>	  <h3> 属性选择器.</h3>  <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>  <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>  <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>  <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>  <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>  <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>  <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/><br /><div class="one" id="one" > id为one,class为one的div    <div class="mini">class为mini</div>  </div>    <div class="one"  id="two" title="test" >	 id为two,class为one,title为test的div.      <div class="mini"  title="other">class为mini,title为other</div>      <div class="mini"  title="test">class为mini,title为test</div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>	  <div class="mini">class为mini</div>	  <div class="mini"></div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>	  <div class="mini">class为mini</div>	  <div class="mini"  title="tesst">class为mini,title为tesst</div>  </div>  <div style="display:none;"  class="none">style的display为"none"的div</div>  <div class="hide">class为"hide"的div</div>   <div>  包含input的type为"hidden"的div<input type="hidden" size="8"/>  </div>  <span id="mover">正在执行动画的span元素.</span></body></html>

上一篇：jQuery加载图片的时间对比

下一篇：分享一款自制的网页滚动条样式