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>

jQuery 常用操作的更多相关文章

  1. JQuery常用操作实现方式

    http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...

  2. jQuery—常用操作

    一.jquery各版本变化 1.3:增加live(),为当前和将来增加的元素绑定事件 1.4:增加delegate().undelegate(),替代live(),可以遍历绑定 1.6:2个破坏性变更 ...

  3. Jquery常用操作：checkbox、select取值，radio、checkbox、select选中及其相关

    常用Jquery操作:checkbox取值.select取值.radio选中.checkbox选中.select选中及其相关: 1.影藏页面元素 使用jquery真的很方便,比如要控制div的显示与隐 ...

  4. jQuery 常用操作（转）

    一.书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并不是强制要求. 二.寻找元素 选择器 基本选择器 层级选择器 ...

  5. jQuery常用操作

    jQuery jQuery是一个轻量级的JS库,是一个被封装好的JS文件,提供了更为简便的元素操作方式,jQuery封装了DOM. 使用jQuery 引入jQuery文件 <scrtipt sr ...

  6. 160726、jQuery常用操作

    一.简介   定义  jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象  jQuery产 ...

  7. jQuery常用操作(待续)

    1. input清空内容 <1> $("#选择器id").val(""); <2> $("input[name='input框 ...

  8. jQuery常用操作部分总结

    注意:$(“.xxx”)   类,一定要在前面加上点callback为完成后执行的函数名称隐藏显示:hide()   show()淡入淡出:fadeIn()  fadeOut()  fadetoggl ...

  9. jquery常用操作整理

    1.数据中添加或者删除指定元素 var  arr=['red','yello','blue']; arr.push('green');  //添加元素 arr = $.grep(arr,functio ...

随机推荐

  1. 3.Appium处理原生与H5的嵌套

    环境前置准备 手机与电脑USB连接,开启USB调试模式,通过adb devices可查看到此设备. 电脑端.移动端安装chrome浏览器.(尽量保证移动端chrome版本低于电脑端) App webv ...

  2. 1.selenium实战之从txt文档读取配置信息并执行登录

    前置条件: 1.本机已搭建ECShop3.0网站 2.在脚本目录创建了user.txt文本如下: 目的:实现从txt中读取配置文件信息,本实战中,包含url地址.用户名.密码,然后进行ESChop的登 ...

  3. 什么是虚拟DOM?为啥虚拟DOM可以提升性能？

    现在流行的框架无论是React还是vue,都采用的是虚拟DOM 采用虚拟DOM的好处是,当数据变化的时候,无需像Backbone那样整体重新渲染,而是局部刷新变化部分 所谓虚拟DOM,其实就说用Jav ...

  4. 前端笔记 （3.JavaScript 2）

    一般来说,js代码越来越庞大的时候,最好要把它存在一个js文件中, 通过src引入即可,这样具有维护性高,可缓存(加载一次,无需加载) 方便未来拓展的特性 正确写法: <script type= ...

  5. iOS 静态库代码混淆方案

    基于开源 Obfuscator-LLVM方案 下载安装最新版本 Obfuscator-LLVM,目前3.6.1 $ git clone -b llvm-3.6.1 https://github.com ...

  6. android_rooting_tools 项目介绍（CVE-2012-4220）

    android_rooting_tools是GITHUB上的一个Android内核漏洞提权项目,包含多套内核漏洞的exploit代码: EXPLOIT CVE 简单描述 libdiagexploit ...

  7. tmux-2.3 conf

    set-window-option -g automatic-rename off set -g allow-rename off # 把前缀键从 C-b 更改为 C-a set -g prefix ...

  8. Java中的面向对象I

    一.首先来了解一下Java面向对象的五个程序设计方式: 1.万物皆对象 Java以类为基本模块来将问题抽象化,在计算机中解决实际生活中的问题 2.程序为对象的集合,程序中的类通过互发消息来告知彼此要做 ...

  9. 使用NATS替换NSQ为后台服务解耦

    简介 满世界的后台都在向微服务架构发展,我对微服务的理解是将一个复杂的业务分拆为多个服务,由多个服务协作完成一个服务:在后台微服务架构时需要考虑高可用.一致性等问题,也要考虑在实现上.编码上的复杂程度 ...

  10. ElasticSearch 从零到入门

    摘自:https://www.cnblogs.com/keme/p/10108918.html