1. 目前为止学过的绑定事件的方式
1. 在标签里面写 onclick=foo(this);
2. 原生DOM的JS绑定 DOM对象.onclick=function(){...}
3. jQuery版的绑定事件 jQuery对象.click(function(){...})
2. 我们今后要用的jQuery绑定事件的方式
.on("click", function(){...})
$("#t1").on("click", "选择器", function(){...})
适用于 给未来的元素(页面生成的时候还没有的标签) 绑定事件 (事件委托)
事件冒泡和事件捕获
利用事件冒泡,给已经存在的标签绑定事件,用来捕获后代标签的事件.
3. 事件之间
1. 阻止后续事件的执行
显式的写 return false;
2. for循环,退出当前循环 ---> 用break;
4. 补充一个键盘事件
示例:批量操作的
5. DOM加载完之后执行
$(document).ready(function(){
// 写绑定事件的具体操作
});
6. 动画(了解即可)
3. jQuery补充
1. .each循环
1. $.each(a1, function(){...})
2. $("div").each(function(){
console.log(this); --> this指的是每次进入循环的标签
})
2. .data
1. 可以存字符串
2. 可以存数字
3. 可以存jQuery对象
3. 插件机制
1. 给具体的jQuery对象添加扩展
$.fn.extend({
"s9": function(){
...
}
})
2. 给jQuery添加全局扩展
$.extend({
"s9": function(){
...
}
})
因为许多元素是通过js或者jQuery添加的，可以看成是未来元素，在触发按钮的时候，这些元素还没有，所以无法提前绑定事件。
既然这些未来元素暂时不存在，那么就可以通过现有的元素来给未来元素绑定事件。
table、table里面的tbody，页面一加载就存在，尽量选择靠近未来元素所在位置的标签，让页面查询速度快一些。
<script src="../../jquery-3.2.1.min.js"></script>
<script>
$("#b1").on("click",function () {
//生成要添加的数据
var tr = document.createElement("tr");
$(tr).html("<td>3</td><td>小红</td><td>瓜子</td><td><button class=\"delete\">删除</button></td>");
// language=JQuery-CSS
$("#t1").find("tbody").append(tr);
})
$(".delete").on("click",function () {
$(this).parent().parent().remove();
})
</script>
写成这样就可以解决：
$("tbody").on("click",".delete",function () {
$(this).parent().parent().remove();
})
批量操作：在表格中勾选多个checkbox时，然后对select进行操作，select选中哪一个，所有被勾选的checkbox同时和某一个选中的一致。(有点复杂)
这里涉及到键盘事件的处理，以按下ctrl键进入批量为例，ctrl数字17代表（第一段小程序可以判断键盘代表数字几)。
大致思路就是，通过select找到checkbox的位置，然后用被选中的checkbox来控制select中的value一致。
还要注意键盘按下进入批量操作，键盘抬起退出批量操作，这两个定义为两个事件。
在控制台中获取键盘数字是多少，或者直接百度。
var $body = $("body");
$body.on("keydown", function (event) {
console.log(event);
//ctrl键
});
$("select").on("change", function () {
//取到当前select的值
var value = $(this).val();
//点击select找到checkbox
var $thisCheckbox = $(this).parent().siblings().first().find(":checkbox");
console.log($thisCheckbox[0]);
//判断checkbox是否被选中
if ($thisCheckbox.prop("checked") && mode) {
//真正进入批量模式
//找到所有被选中的checkbox,注意check一般都要用循环取
var $checked = $("input[type=‘checkbox‘]:checked");
for (var i = 0; i < $checked.length; i++) {
//找到同一行的select
$($checked[i]).parent().siblings().last().find("select").val(value);
}
}
})
完整代码：
<table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>小强</td>
<td>冰淇淋</td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小明</td>
<td>香蕉</td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小明</td>
<td>香蕉</td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小明</td>
<td>香蕉</td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
</tbody>
</table>
<script src="../../jquery-3.2.1.min.js"></script>
<script>
var mode = false;
var $body = $("body");
$body.on("keydown", function (event) {
console.log(event);
//ctrl键
if (event.keyCode === 17) {
//进入批量操作模式
mode = true;
}
});
//当按键抬起来的时候，退出批量操作模式
$body.on("keyup", function (event) {
console.log(event);
//ctrl键
if (event.keyCode === 17) {
//进入批量操作模式
mode = false;
}
})
$("select").on("change", function () {
//取到当前select的值
var value = $(this).val();
//点击select找到checkbox
var $thisCheckbox = $(this).parent().siblings().first().find(":checkbox");
console.log($thisCheckbox[0]);
//判断checkbox是否被选中
if ($thisCheckbox.prop("checked") && mode) {
//真正进入批量模式
//找到所有被选中的checkbox,注意check一般都要用循环取
var $checked = $("input[type=‘checkbox‘]:checked");
for (var i = 0; i < $checked.length; i++) {
//找到同一行的select
$($checked[i]).parent().siblings().last().find("select").val(value);
}
}
})
</script>
原文：https://www.cnblogs.com/cwj2019/p/11754052.html