Jquery过滤器的基础入门案例

Jquery过滤器的基础入门案例

HTML正文：

         <input type="button" value="改变第N个 div 元素的背景色为黄色"  id="b1"/><br>         <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为紫色"  id="b2"/><br>         <input type="button" value=" 改变索引值为偶/奇的 div 元素的背景色偶数为红色奇数为绿色"  id="b3"/><br>         <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 蓝色"  id="b4"/><br>         <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 黄色"  id="b5"/><br>         <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 粉色"  id="b6"/><br>         <input type="button" value=" 改变所有的标题元素的背景色为 橙色"  id="b7"/><br>         <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 紫色"  id="b8"/><br>         <div id="div01"  class="min">div01</div>         <div id="div02">div02             <div id="div0201" class="min">div0201</div>             <div id="div0202" class="min">div0202</div>         </div>         <div id="div03"  class="one">div03 class：one             <div id="div0301"  class="min">div0301</div>         </div>         <div id="mover">动画</div>         <span id="sp01"  class="min">sp01</span>         <span id="sp02">sp02</span>

Javascript操作代码：

 function ca(){            $("#mover").slideToggle("slow",ca);  //给控件绑定效果        }        ca();         //：eq(索引值):为过滤符号         $('#b1').click(function(){          $('div:eq(0)').css("background","yellow");//等价          //$('div:first').css("background","yellow");          $('div:last').css("background","yellow");         });          //not表示排除里面的元素（id 类 元素）类似sql 注意not里面只能放一个对象          $('#b2').click(function(){           $('div:not(.one)').css("background","purple");           //$('div:not(.one):not("#div02")').css("background","purple");  //筛选出class id特定对象         });         //even:偶数  odd:奇数         $('#b3').click(function(){           $('div:even').css("background","red");   //前序遍历  父--->子           $('div:odd').css("background","green");         });         //gt(索引值)  大于          $('#b4').click(function(){           $('div:gt(3)').css("background","blue");            });         $('#b5').click(function(){           $('div:eq(3)').css("background","yellow");            });          //lt(索引值):小于          $('#b6').click(function(){           $('div:lt(3)').css("background","pink");            });          //设置h1 h2 h3等元素属性          $('#b7').click(function(){           $(':header').css("background","orange");            });          $('#b8').click(function(){          $(":animated").css("background","purple");         });

效果：