jquery筛选过滤函数

来源：互联网发布：什么英语听力软件最好编辑：程序博客网时间：2024/05/16 12:39
<!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>05-可见性过滤选择器.html</title> <!--   引入jQuery -->  <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> <script src="./script/assist.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="./css/style.css" />     <script type="text/javascript">  $(document).ready(function(){ // <input type="button" value=" 选择索引值等于3的元素"  id="b1"/>$('#b1').click(function(){    $('*').eq(3).css("background-color",'red');;}); // <input type="button" value=" 选择第一个div元素"  id="b2"/>      $('#b2').click(function(){var div=$('div').first().css("background-color",'red');;  }) // <input type="button" value=" 选择最后一个div元素"  id="b3"/>  $('#b3').click(function(){var div=$('div').last().css("background-color",'red');;  }) // <input type="button" value=" id=one div样式是否是one"  id="b4"/>  $('#b4').click(function(){var div=$('div#one').hasClass('.one').css("background-color",'red');;  }) // <input type="button" value=" 选择class为none的所有div"  id="b5"/>  $('#b5').click(function(){var div=$('div.none').css("background-color",'red');var divs=('div').filter('none').css("background-color",'red');  })//  <input type="button" value=" 样式为hide div 下一个兄弟是否是span"  id="b6"/>  $('#b6').click(function(){var div=$('div.hide').next().is("span");  })//  <input type="button" value=" 选择所有div中含有div的"  id="b7"/>  $('#b7').click(function(){var div=$('div').has('div').css("background-color",'red')  }) /// <input type="button" value=" 选择样式为one div 子元素中没有title属性的div"  /id="b8"/>  $('#b8').click(function(){var div=$('div.one').children().not("[title]").parent();  })//  <input type="button" value=" 选择所以号为3,4的div"  id="b9"/>  $('#b9').click(function(){var div=$('div').slice('3,4')..css("background-color",'red');  })});  </script></head><body>  <h3>可见性过滤选择器.</h3>  <button id="reset">手动重置页面元素</button>  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>  <br/><br/>  <input type="button" value=" 选择索引值等于3的元素"  id="b1"/>  <input type="button" value=" 选择第一个div元素"  id="b2"/>  <input type="button" value=" 选择最后一个div元素"  id="b3"/>  <input type="button" value=" id=one div样式是否是one"  id="b4"/>  <input type="button" value=" 选择class为none的所有div"  id="b5"/>  <input type="button" value=" 样式为hide div 下一个兄弟是否是span"  id="b6"/>  <input type="button" value=" 选择所有div中含有div的"  id="b7"/>  <input type="button" value=" 选择样式为one div 子元素中没有title属性的div"  id="b8"/>  <input type="button" value=" 选择所以号为3,4的div"  id="b9"/>  <br /><br />    <!--文本隐藏域--> <input type="hidden" value="hidden_1"> <input type="hidden" value="hidden_2"> <input type="hidden" value="hidden_3"> <input type="hidden" value="hidden_4">    <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"  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>    <span id="mover">正在执行动画的span元素.</span></body></html>
0 0