jQuery 常用操作

jQuery操作：不像dom是通过等号赋值，它是传递参数

　　$('#tb:checkbox').prop('checked'); 获取值
　　$('#tb:checkbox').prop('checked', true); 设置值

　内置循环，无须再遍历

　　jQuery方法内置循环：

　　　　$('#tb:checkbox').xxxx ，查找到的每一个复选框都会操作。

　　　　$('.c1').addClass('hide'); 只要应用了c1样式的标签，再加一个hide标签。

　　　　$('#i1').removeClass('hide'); 只要id为i1的标签，样式全删除hide.

当然也有手动循环：each()

　　$('#tb:checkbox').each(function(k){
　　　　k当前索引
　　　　this，DOM对象，当前循环的元素 $(this)
　　　})

三元操作
　　var v = 条件 ? 真值 : 假值结果赋值给v

jQuery实现全选，反选，取消

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div style="margin: 0 auto;width: 500px;height: 800px;">
 9 <input type="button" value="全选" onclick="checkAll();"/>
10 <input type="button" value="取消" onclick="cancelAll();"/>
11 <input type="button" value="反选" onclick="reverseAll();"/>
12 <table id="tb1" border="1">
13     <thead>
14         <tr><th>选择</th><th>IP</th><th>端口</th></tr>
15     </thead>
16     <tbody>
17         <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
18         <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
19         <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
20         <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
21         <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
22     </tbody>
23 </table>
24 </div>
25 <script src="jquery-3.3.1.js"></script>
26 <script>
27     function checkAll() {
28         $('#tb1 :checkbox').prop("checked",true);
29     }
30     function cancelAll() {
31         $('#tb1 :checkbox').prop("checked",false);
32     }
33     function reverseAll() {
34         $('#tb1 :checkbox').each(function (k) {
35             //console.log(k);  这里的k，可以是任何字母，代指当前索引
36  /* dom实现，this是dom对象，用到的方法也Dom自带的。
37             if (this.checked) {
38                 this.checked=false;
39             }else{
40                 this.checked=true;
41             } */
42  /* jQuery实现，先将this转换成jQuery对象，再调用jQuery的方法。
43         if ($(this).prop("checked")){
44             $(this).prop("checked",false);
45         }else{
46             $(this).prop("checked",true);
47         } */
48 // 三元运算符实现
49         var v = this.checked? false:true;
50         this.checked = v;
51         })
52     }
53 </script>
54 </body>
55 </html>

View Code

猜你喜欢