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>
上一篇:C# winform进度条 (异步)


下一篇:Android简易实战教程--第二十九话《创建图片副本》