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实现全选，反选，取消

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <div style="margin: 0 auto;width: 500px;height: 800px;">
 <input type="button" value="全选" onclick="checkAll();"/>
 <input type="button" value="取消" onclick="cancelAll();"/>
 <input type="button" value="反选" onclick="reverseAll();"/>
 <table id="tb1" border="1">
     <thead>
         <tr><th>选择</th><th>IP</th><th>端口</th></tr>
     </thead>
     <tbody>
         <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
         <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
         <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
         <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
         <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
     </tbody>
 </table>
 </div>
 <script src="jquery-3.3.1.js"></script>
 <script>
     function checkAll() {
         $('#tb1 :checkbox').prop("checked",true);
     }
     function cancelAll() {
         $('#tb1 :checkbox').prop("checked",false);
     }
     function reverseAll() {
         $('#tb1 :checkbox').each(function (k) {
             //console.log(k);  这里的k，可以是任何字母，代指当前索引
  /* dom实现，this是dom对象，用到的方法也Dom自带的。
             if (this.checked) {
                 this.checked=false;
             }else{
                 this.checked=true;
             } */
  /* jQuery实现，先将this转换成jQuery对象，再调用jQuery的方法。
         if ($(this).prop("checked")){
             $(this).prop("checked",false);
         }else{
             $(this).prop("checked",true);
         } */
 // 三元运算符实现
         var v = this.checked? false:true;
         this.checked = v;
         })
     }
 </script>
 </body>
 </html>