07_jQuery对象初识(五)事件(非常重要)

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>