动态绑定事件：绑定(on)与解绑(off)

目标

学习事件的动态绑定与解绑

什么是事件绑定

在JS代码执行过程中，让某些元素绑定一些事件，这时这个元素就可以激活这些事件。也可以在执行过程中解绑一些事件，这个元素就失去了这些事件的激活能力。

绑定与解绑语法

事件绑定语法

说明

JQ对象.on("事件名", 处理函数)

作用：给JQ对象动态绑定一个事件  参数1：要绑定的事件名，如："click"  参数2：通常使用匿名函数，如：function() { }

事件解绑语法

说明

JQ对象.off("事件名1 事件名2")

解绑一个或多个事件，事件名通过空格隔开

JQ对象.off()

解绑所有的事件

 

示例：绑定事件

需求

有四个按钮，b1按钮使用以前的事件写法，点击弹出信息。b2按钮没有事件。b3按钮点击给b2按钮绑定点击事件。然后点击b2，查看输出的信息。b4按钮点击解除b2按钮的点击事件。

效果

jquery span动态绑定值 jquery动态绑定事件原理_html

 

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态绑定和解绑</title>
    <script src="js/jquery-3.3.1.js"></script>
    <style>
        #content {
            border: 2px solid gray;
            width: 650px;
            height: 528px;
        }
    </style>
</head>
<body>
<input type="button" value="绑定" id="b1">
<input type="button" value="解绑" id="b2">
<hr/>
<div id="content">
    <img src="img/adv1.jpg" id="girl"/>
</div>

<script type="text/javascript">
    //b1按钮的点击事件
    $("#b1").click(function () {
        //给div绑定鼠标移上的事件
        $("#content").on({
            "mouseover": function () {
                $("#girl").hide();
            },
            "mouseout": function () {
                $("#girl").show();
            }
        })
    });

    //b2按钮点击事件
    $("#b2").click(function () {
        //解绑所有的事件
        $("#content").off();
    })
</script>
</body>
</html>

小结

绑定：
JQ对象.on({
  "事件名":处理函数,
  "事件名":处理函数
})

解绑：
JQ对象.off();
JQ对象.off("事件名 事件名")

 

jQuery循环遍历的几种方式

  1. jQuery对象遍历的2种方式
  2. ES6中遍历集合的循环

JQ遍历的两种方式

JQ对象.each(function(index,element))
JQ对象就是要遍历的集合或数组
index: 表示当前遍历的索引号，从0开始
element：表示当前的元素

$.each(数组或集合, function(index,element))
第一个参数是要遍历的数组或集合
index: 表示当前遍历的索引号，从0开始
element：表示当前的元素

for(let 变量名 of 数组或集合)

注：无论使用上面哪些方式进行遍历，数组中每个元素都是JS对象

遍历的示例

需求

对一个select中的所有option元素进行遍历，并且输出它的HTML内容

效果

jquery span动态绑定值 jquery动态绑定事件原理_数组_02

 

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历元素</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<select name="city" id="city">
    <option>广州</option>
    <option>深圳</option>
    <option>东莞</option>
</select>
<input type="button" id="b1" value="对象方法的遍历"/>
<input type="button" id="b2" value="全局方法的遍历"/>
<input type="button" id="b3" value="for-of方法遍历"/>

<script type="text/javascript">
    /*
    JQ数组或集合对象.each(function(index,element))
    JQ对象就是要遍历的集合或数组
    index: 表示当前遍历的索引号，从0开始
    element：表示当前的元素

    $.each(数组或集合, function(index,element))
    第一个参数是要遍历的数组或集合
    index: 表示当前遍历的索引号，从0开始
    element：表示当前的元素

    for(let 变量名 of 数组或集合)

    注：无论使用上面哪些方式进行遍历，数组中每个元素都是JS对象
     */

    //得到所有的option元素
    let options = $("option");  //JQ对象，这是一个数组

    //使用对象方法
    $("#b1").click(function () {
        options.each(function (index, element) {
            alert("索引：" + index + ", 元素：" + element.innerText);   //因为element是js对象
        });
    });

    //使用全局方法
    $("#b2").click(function () {
        $.each(options, function (index, element) {
            alert("索引：" + index + ", 元素：" + $(element).text());  //调用JQ的方法
        })
    });

    //这是ES6中新增的方法
    $("#b3").click(function () {
       for(let op of options) {  //options是一个数组
           alert("元素：" + op.innerText);
       }
    });
</script>
</body>
</html>

小结

jQuery遍历的三种方式

JQ数组对象.each(function(index, element))     注：index-索引  element-接收数组中元素的临时变量

$.each(数组或集合, function(index, element))

for (let 变量名 of 数组或集合)

 

A