jQuery事件和其他方法

(2)jQuery 事件处理

2.1 事件处理 on() 绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数;

语法演示如下:


element.on(events,[selector],fn)



😆温馨提醒😆:

  1. events:一个或多个用空格分隔的事件类型,如"click"或"keydown";

  2. selector:元素的子元素选择器;

  3. fn:回调函数 即绑定在元素身上的侦听函数;

1️⃣ on() 方法优势1:可以绑定多个事件,多个处理事件处理程序;

代码演示如下:


$(“div”).on({

	mouseover: function(){}, 

    mouseout: function(){},

    click: function(){}	

}); 

//如果事件处理程序相同

$(“div”).on(“mouseover mouseout”, function() {

	$(this).toggleClass(“current”);

});



2️⃣ on() 方法优势2:可以事件委派操作 。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。

代码演示如下:


$('ul').on('click', 'li', function() {

	alert('hello world!');

});



😆温馨提醒😆:在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派,最新版本的请用on替代他们。

3️⃣ on() 方法优势3:动态创建的元素,click() 没有办法绑定事件, on() 可以给动态生成的元素绑定事件;

代码演示如下:


$(“div").on("click",”p”, function(){

	alert("俺可以给动态生成的元素绑定事件")

}); 




$("div").append($("<p>我是动态创建的p</p>"));



完整代码演示如下:


<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: pink;

        }

        

        .current {

            background-color: purple;

        }

    </style>

    <script src="jquery.min.js"></script>

</head>



<body>

    <div></div>

    <ul>

        <li>生如夏花之绚烂,死如秋叶之静美。 --飞鸟集</li>

        <li>生如夏花之绚烂,死如秋叶之静美。 --飞鸟集</li>

        <li>生如夏花之绚烂,死如秋叶之静美。 --飞鸟集</li>

        <li>生如夏花之绚烂,死如秋叶之静美。 --飞鸟集</li>

        <li>生如夏花之绚烂,死如秋叶之静美。 --飞鸟集</li>

    </ul>

    <ol>



    </ol>

    <script>

        $(function() {

            // 1. 单个事件注册

            // $("div").click(function() {

            //     $(this).css("background", "purple");

            // });

            // $("div").mouseenter(function() {

            //     $(this).css("background", "skyblue");

            // });



            // 2. 事件处理on

            // (1) on可以绑定1个或者多个事件处理程序

            // $("div").on({

            //     mouseenter: function() {

            //         $(this).css("background", "skyblue");

            //     },

            //     click: function() {

            //         $(this).css("background", "purple");

            //     },

            //     mouseleave: function() {

            //         $(this).css("background", "blue");

            //     }

            // });

            $("div").on("mouseenter mouseleave", function() {

                $(this).toggleClass("current");

            });

            // (2) on可以实现事件委托(委派)

            $("ul").on("click", "li", function() {

                alert(30);

            });

            // click 是绑定在ul 身上的,但是 触发的对象是 ul 里面的小li

            // (3) on可以给未来动态创建的元素绑定事件

            $("ol").on("click", "li", function() {

                alert(30);

            });

            var li = $("<li>我是后来创建的</li>");

            $("ol").append(li);

        })

    </script>

</body>



</html>



2.1.1 案例:发布微博案例

要求:

  1. 点击发布按钮,动态创建一个小li,放入文本框的内容和删除按钮,并且添加到ul中;

  2. 点击的删除按钮,可以删除当前的微博留言;


<!DOCTYPE html>

<html>



<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            margin: 0;

            padding: 0

        }

        

        ul {

            list-style: none

        }

        

        .box {

            width: 600px;

            margin: 100px auto;

            border: 1px solid #000;

            padding: 20px;

        }

        

        textarea {

            width: 450px;

            height: 160px;

            outline: none;

            resize: none;

        }

        

        ul {

            width: 450px;

            padding-left: 80px;

        }

        

        ul li {

            line-height: 25px;

            border-bottom: 1px dashed #cccccc;

            display: none;

        }

        

        input {

            float: right;

        }

        

        ul li a {

            float: right;

        }

    </style>

    <script src="jquery.min.js"></script>

    <script>

        $(function() {

            // 1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中

            $(".btn").on("click", function() {

                var li = $("<li></li>");

                li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");

                $("ul").prepend(li);

                li.slideDown();

                $(".txt").val("");

            });



            // 2.点击的删除按钮,可以删除当前的微博留言li

            // $("ul a").click(function() {  // 此时的click不能给动态创建的a添加事件

            //     alert(11);

            // })

            // on可以给动态创建的元素绑定事件

            $("ul").on("click", "a", function() {

                $(this).parent().slideUp(function() {

                    $(this).remove();

                });

            });

        });

    </script>

</head>



<body>

    <div class="box" id="weibo">

        <span>微博发布</span>

        <textarea name="" class="txt" cols="30" rows="10"></textarea>

        <button class="btn">发布</button>

        <ul>

        </ul>

    </div>

</body>



</html>



2.2 事件处理 off() 解绑事件

off()方法可以移除通过 on() 方法添加的事件处理程序;

语法演示如下:


$("p").off(); // 解绑p元素所有事件处理程序



$("p").off( "click");  // 解绑p元素上面的点击事件



$("ul").off("click", "li");   // 解绑事件委托



完整代码演示如下:


<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: pink;

        }

    </style>

    <script src="jquery.min.js"></script>

    <script>

        $(function () {

            $("div").on({

                click: function () {

                    console.log("我点击了");

                },

                mouseover: function () {

                    console.log('我鼠标经过了');

                }

            });

            $("ul").on("click", "li", function () {

                alert(11);

            });

            // 1. 事件解绑 off 

            // $("div").off();  // 这个是解除了div身上的所有事件

            $("div").off("click"); // 这个是解除了div身上的点击事件

            $("ul").off("click", "li");

            // 2. one() 但是它只能触发事件一次

            $("p").one("click", function () {

                alert(11);

            });

        })

    </script>

</head>



<body>

    <div></div>

    <ul>

        <li>稻花香里说丰年。听取蛙声一片。</li>

        <li>稻花香里说丰年。听取蛙声一片。</li>

        <li>稻花香里说丰年。听取蛙声一片。</li>

    </ul>

    <p>西江月·夜行黄沙道中</p>

</body>



</html>



2.3 自动触发事件 trigger()

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。

语法演示如下:


element.click()  // 第一种简写形式

element.trigger("type") // 第二种自动触发模式



$("p").on("click", function () {

  alert("hi~");

}); 

$("p").trigger("click"); // 此时自动触发点击事件,不需要鼠标点击



element.triggerHandler(type)  // 第三种自动触发模式



😆温馨提醒😆:triggerHandler模式不会触发元素的默认行为,这是和前面两种的区别;


(3)jQuery 事件对象

事件被触发,就会有事件对象的产生。

语法演示如下:


element.on(events,[selector],function(event) {})



1️⃣ 阻止默认行为:event.preventDefault() 或者 return false

2️⃣ 阻止冒泡:event.stopPropagation()


二、jQuery 其他方法


(1)jQuery 对象拷贝

如果想要把某个对象拷贝(合并) 给另外一个对象使用,此时可以使用 $.extend() 方法;

语法演示如下:


$.extend([deep], target, object1, [objectN])



😆温馨提醒😆:

  1. deep: 如果设为 true 为深拷贝, 默认为 false 浅拷贝;

  2. target: 要拷贝的目标对象;

  3. object1:待拷贝到第一个对象的对象;

  4. objectN:待拷贝到第N个对象的对象;

  5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象;❗️ ❗️ ❗️

  6. 深拷贝,前面加true,完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象;❗️ ❗️ ❗️

完整代码演示如下:


<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="jquery.min.js"></script>

    <script>


### 计算机网络

*   HTTP 缓存

*   你知道 302 状态码是什么嘛?你平时浏览网页的过程中遇到过哪些 302 的场景?

*   HTTP 常用的请求方式,区别和用途?

*   HTTPS 是什么?具体流程

*   三次握手和四次挥手

*   你对 TCP 滑动窗口有了解嘛?

*   WebSocket与Ajax的区别

*   了解 WebSocket 嘛?

*   HTTP 如何实现长连接?在什么时候会超时?

*   TCP 如何保证有效传输及拥塞控制原理。

*   TCP 协议怎么保证可靠的,UDP 为什么不可靠?


![](https://img-blog.csdnimg.cn/img_convert/614771dc66a0fec7a3e33c2c7e1fa878.png)



### 算法

* 链表

* 字符串

* 数组问题

* 二叉树

* 排序算法

* 二分查找

* 动态规划

* BFS

* 栈

* DFS

* 回溯算法

  ![](https://img-blog.csdnimg.cn/img_convert/6c250b6200355d0edce85b970db267bd.png)
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值