【Jquery】- 过滤器

2019独角兽企业重金招聘Python工程师标准>>>

Jquery 过滤器基础认识

界面

<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>

js操作逻辑

 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");
         });

效果：

---

Jquery 过滤器案例

界面

<input type="button" id="b1" value="偶数行红色"><br>
<input type="button" id="b2" value="奇数行绿色"><br>
<table border=1 width="100px">
<tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>4</td><td>4</td><td>4</td><td>4</td></tr>
<tr><td>5</td><td>5</td><td>5</td><td>5</td></tr>
</table><br>

<input type="button" id="b3" value="奇数列红色"><br>
<input type="button" id="b4" value="偶数列绿色"><br>
<table border=1 width="100px">
<tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>4</td><td>4</td><td>4</td><td>4</td></tr>
<tr><td>5</td><td>5</td><td>5</td><td>5</td></tr>
</table><br>

<input type="button" id="b5" value="奇数元素绿色"><br>
<table border=1 width="100px">
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td></tr>
<tr><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td></tr>
</table>

js操作逻辑

$('#b1').click(function(){
/*table:eq(0) tr:even  table:eq(0):筛选出第一张表格 tr:even:筛选出tr属性的对象
*注意table和tr对象中间有空格，表示从属关系
*/
$('table:eq(0) tr:even').css("background","red");  
});

$('#b2').click(function(){
$('table:eq(0) tr:odd').css("background","green");
});

$('#b3').click(function(){
$('table:eq(1) td:even').css("background","red");
});

$('#b4').click(function(){
$('table:eq(1) td:odd').css("background","green");
});

$('#b5').click(function(){
$('table:eq(2) td:even').css("background","green");
});

效果：

转载于:https://my.oschina.net/yangzhiwei256/blog/3016450