zoukankan      html  css  js  c++  java

  • jquery-5 jQuery筛选选择器

    jquery-5  jQuery筛选选择器

    一、总结

    一句话总结：选择器加动态添加方法可以不用想方法名，这个简单方便。

    1、筛选选择器有哪三种？

    过滤 查找 串联

    1.过滤

    eq();
    first();
    last();
    not();
    slice();

    2.查找

    children();
    find();
    next();
    nextAll();
    parent();
    prev();
    prevAll();
    siblings();

    3.串联

    add();
    andSelf();

    2、筛选选择器中的查找有哪几种？

    子代 后代 邻接 兄弟 父亲 之前

    children();
    find();
    next();
    nextAll();
    parent();
    prev();
    prevAll();
    siblings();

    3、筛选选择器中的过滤选择器有哪五种？

    索引 第一个  最后一个  非 片段

    eq();
    first();
    last();
    not();
    slice();

    4、筛选选择器串联有哪两种？

    增加和增加自己

    add();
    andSelf();

    5、选择器和筛选的区别是什么？

    使用this的时候选择器不好用，筛选比较好用

    28 $('.div1').click(function(){
29     //使用筛选来实现
30     $(this).children('h1').css({'color':'#00f'});
31 });

    6、jquery可以链式操作么？

    可以

    33 $('button').click(function(){
34     $(this).parent().parent().next().children().children().children().css({'color':'#00f'});
35 });

    7、多选框反选怎么实现？

    非checked属性

    77 $('#unall').click(function(){
78     $(':checkbox').each(function(){
79         this.checked=!this.checked;
80     });
81 });

    8、多选框全选怎么实现？

    attr，checked属性

    69 $('#all').click(function(){
70     $(':checkbox').attr({'checked':true});
71 });

    二、jQuery筛选选择器

    1、相关知识

    筛选:

    1.过滤

    eq();
    first();
    last();
    not();
    slice();

    2.查找

    children();
    find();
    next();
    nextAll();
    parent();
    prev();
    prevAll();
    siblings();

    3.串联

    add();
    andSelf();

    2、代码

    选择器和筛选的区别（这里用选择器不好实现）

     1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10         .div1{
11             background: #ccc;
12             cursor: pointer;
13         }
14     </style>
15     <script src="jquery.js"></script>
16 </head>
17 <body>
18     <div class='div1'>
19         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
20         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
21         <div class="div2">
22             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
23             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
24         </div>
25     </div>
26 </body>
27 <script>
28 $('.div1').click(function(){
29     //使用筛选来实现
30     $(this).children('h1').css({'color':'#00f'});
31 });
32 </script>
33 </html>

    siblings前后所有兄弟

     1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <h1>cccccccccccccccccccccc</h1>
15     <h1>cccccccccccccccccccccc</h1>
16     <div class='div1'>
17         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
18         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
19         <div class="div2">
20             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
21             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
22         </div>
23     </div>
24     <h1>cccccccccccccccccccccc</h1>
25     <h1>cccccccccccccccccccccc</h1>
26 </body>
27 <script>
28 $('.div1').siblings().css({'color':'#00f'});
29 </script>
30 </html>

    prevAll前面所有兄弟

     1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <h1>cccccccccccccccccccccc</h1>
15     <h1>cccccccccccccccccccccc</h1>
16     <h1>cccccccccccccccccccccc</h1>
17     <h1>cccccccccccccccccccccc</h1>
18     <div class='div1'>
19         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
20         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
21         <div class="div2">
22             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
23             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
24         </div>
25     </div>
26 </body>
27 <script>
28 $('.div1').prevAll().css({'color':'#00f'});
29 </script>
30 </html>

    nextAll后面所有兄弟

     1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div class='div1'>
15         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
16         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
17         <div class="div2">
18             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
19             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
20         </div>
21     </div>
22     <h1>cccccccccccccccccccccc</h1>
23     <h1>cccccccccccccccccccccc</h1>
24     <h1>cccccccccccccccccccccc</h1>
25     <h1>cccccccccccccccccccccc</h1>
26 </body>
27 <script>
28 // $('.div1').children('h1').css({'color':'#00f'});
29 $('.div1').nextAll().css({'color':'#00f'});
30 </script>
31 </html>

    find后代查找

     1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div class='div1'>
15         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
16         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
17         <div class="div2">
18             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
19             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
20         </div>
21     </div>
22 </body>
23 <script>
24 // $('.div1').children('h1').css({'color':'#00f'});
25 $('.div1').find('h1').css({'color':'#00f'});
26 </script>
27 </html>

    next关系查找

     1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div>
15         <div>
16             <button>打小金</button>
17         </div>
18     </div>
19 
20     <div>
21         <div>
22             <div>
23                 <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
24                 <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
25                 <h1>bbbbbbbbbbbbbbbbbbbbbb</h1>
26                 <p>bbbbbbbbbbbbbbbbbbbbbbbbbb</p>
27             </div>
28         </div>
29     </div>
30 
31 </body>
32 <script>
33 $('button').click(function(){
34     $(this).parent().parent().next().children().children().children().css({'color':'#00f'});
35 });
36 </script>
37 </html>

    parent、prev、children关系查找

     1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div>
15         <div>
16             <div>
17                 <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
18                 <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
19                 <h1>bbbbbbbbbbbbbbbbbbbbbb</h1>
20                 <p>bbbbbbbbbbbbbbbbbbbbbbbbbb</p>
21             </div>
22         </div>
23     </div>
24 
25     <div>
26         <div>
27             <button>打小金</button>
28         </div>
29     </div>
30 </body>
31 <script>
32 $('button').click(function(){
33     $(this).parent().parent().prev().prev().children().children().children().css({'color':'#00f'});
34 });
35 </script>
36 </html>

    andSelf串联上自己

     1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div>
15         <h1>aaaaaaaaaaaaaaaaa</h1>
16         <h1>aaaaaaaaaaaaaaaaa</h1>
17     </div>
18     <h1>bbbbbbbbbbbbbbbbbbb</h1>
19 </body>
20 <script>
21 $('div').next().andSelf().css({'color':'#00f'});
22 </script>
23 </html>

    add组合串联筛选

     1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <h1>00001</h1>
15     <h1>00002</h1>
16     <hr>
17     <p>00003</p>
18     <p>00004</p>
19 </body>
20 <script>
21 $('h1').add('p').css({'color':'#00f'});
22 </script>
23 </html>

    过滤筛选

     1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <h1>00001</h1>
15     <h1>00002</h1>
16     <h1>00003</h1>
17     <h1>00004</h1>
18     <h1>00005</h1>
19 </body>
20 <script>
21 // $('h1').eq(0).css({'color':'#00f'});
22 // $('h1').not($('h1').eq(0)).css({'color':'#00f'});
23 // $('h1').first().css({'color':'#00f'});
24 // $('h1').last().css({'color':'#00f'});
25 $('h1').slice(1).css({'color':'#00f'});
26 </script>
27 </html>

    checked找到所有被选中的人

     1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <form action="">
15         <p>选择爱好:</p>
16         <p>
17             <label>
18                 <input type="checkbox" name="" id=""> 打篮球
19             </label>
20         </p>
21         <p>
22             <label>
23                 <input type="checkbox" name="" id=""> 踢足球
24             </label>
25         </p>
26         <p>
27             <label>
28                 <input type="checkbox" name="" id=""> 去游泳
29             </label>
30         </p>
31         <p>
32             <label>
33                 <input type="checkbox" name="" id=""> 去游泳
34             </label>
35         </p>
36         <p>
37             <label>
38                 <input type="checkbox" name="" id=""> 去游泳
39             </label>
40         </p>
41         <p>
42             <label>
43                 <input type="checkbox" name="" id=""> 去游泳
44             </label>
45         </p>
46         <p>
47             <label>
48                 <input type="checkbox" name="" id=""> 去游泳
49             </label>
50         </p>
51         <p>
52             <label>
53                 <input type="checkbox" name="" id=""> 去游泳
54             </label>
55         </p>
56     </form>
57     <p>
58         <button id='all'>全选</button>
59         <button id='notall'>全不选</button>
60         <button id='unall'>反选</button>
61         <button id='ok'>ok</button>
62     </p>
63     <hr>
64     <div class='info'>
65             
66     </div>
67 </body>
68 <script>
69 $('#all').click(function(){
70     $(':checkbox').attr({'checked':true});
71 });
72 
73 $('#notall').click(function(){
74     $(':checkbox').attr({'checked':false});
75 });
76 
77 $('#unall').click(function(){
78     $(':checkbox').each(function(){
79         this.checked=!this.checked;
80     });
81 });
82 
83 $('#ok').click(function(){
84     $(':checked').parent().parent().appendTo('.info');
85 });
86 </script>
87 </html>
     
     
     
     
  • 相关阅读:
    51nod1229 序列求和 V2
    51nod 1228、1258 序列求和
    题解P3711：【仓鼠的数学题】
    伯努利数学习笔记的说...
    题解 P4692 【[Ynoi2016]谁的梦】
    积性函数与卷积
    题解 P5065 【[Ynoi2014]不归之人与望眼欲穿的人们】
    [Ynoi2018]末日时在做什么?有没有空?可以来拯救吗?
    [51nod1965]奇怪的式子
    PGCD2
  • 原文地址：https://www.cnblogs.com/Renyi-Fan/p/9215640.html
Copyright © 2011-2022 走看看