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. js,jQuery数组常用操作小结

    一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift() ...

随机推荐

  1. cpu主频信息

    yangkunvanpersie ( yangkunvanpersie@163.com ) 通过"有道云笔记"邀请您查看以下笔记 修改CPU频率.note   打开笔记 kerne ...

  2. 【java】 获取计算机信息及Java信息

    获取计算机名称,操作系统信息,java信息 package com.agen.test1; import java.io.BufferedReader; import java.io.InputStr ...

  3. JS实现点击弹出对应的索引

    如果这样写的话 ,弹出来一直是2,原因 这个i ,循环已经结束,i 的值已经是2了,所以需要再前面添加: items[i].index=i;    //添加一个属性  ,技术一下 这个索引值 aler ...

  4. mysql 插入数据后返回当前的自增ID方法

    存储过程的写法: mysql>create procedure test( ->in username varchar(50), ->in password varchar(50), ...

  5. CSS实现标题/段落省略效果的三剑客

    white-space: nowrap;overflow:hidden;text-overflow:ellipsis; 效果如下:

  6. IDEA 文件列表隐藏某后缀文件

    preferences -> Editor -> File Types -> ignore files and folders   添加后缀类型如:   *.meta

  7. WCF安全:通过 扩展实现用户名密码认证

    在webSservice时代,可以通过SOAPHEADER的方式很容易将用户名.密码附加到SOAP header消息头上,用户客户端对调用客户端身份的验证.在WCF 时代,也可以通过Operation ...

  8. spring 配置 Java配置类装配bean

    https://www.cnblogs.com/chenbenbuyi/p/8457700.html 自动化装配的确有很大的便利性,但是却并不能适用在所有的应用场景,比如需要装配的组件类不是由自己的应 ...

  9. zw版【转发&#183;台湾nvp系列Delphi例程】HALCON BitXor

    zw版[转发·台湾nvp系列Delphi例程]HALCON BitXor procedure TForm1.Button1Click(Sender: TObject);var image0, imag ...

  10. python collection 中的队列

    认识中的队列 在以前的认知里,队列是先进先出,就是一头进,一头出,Queue.而无意间看到了deque 双向队列. 即从该队列的头或者尾部都能插入和移除元素.而起时间复杂度竟然是一样的!O(1),是不 ...