jQuery事件和其他方法

最新推荐文章于 2024-07-24 23:00:08 发布
最新推荐文章于 2024-07-24 23:00:08 发布
阅读量431 收藏 10
点赞数 3
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85124329/article/details/139782587
版权

（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)
2401_85124329
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery—事件、 jQuery 其他方法、jQuery 插件
m0_59030524的博客
03-19 316
目标： 能够说出4种常见的注册事件 能够说出on绑定事件的优势 能够说出jQuery事件委派的优点以及方式 能够说出绑定事件写解绑事件 1. jQuery 事件 1.1 事件注册 语法： element.事件(function () {}) $('div').click(function () { 事件处理程序 }) 其他事件和原生基本一致。 比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll..
jQuery事件
weixin_64037609的博客
09-20 1113
jQuery事件
jQuery事件导读+其它方法
ldd_eb的博客
05-27 394
单个事件叫注册，多个事件叫处理。不会触发事件默认行为。
Jquery注册事件实现方法
12-09
除了上述方法，jQuery还提供了其他事件处理方法，如`on()`, `off()`, `one()`, `delegate()`, `live()`, `bind()`, `unbind()`, `delegate()`, `trigger()`, 和 `triggerHandler()`等。这些方法使得开发者能够更加...
JQuery 常用方法和事件详细介绍
12-01
本篇文章将深入探讨JQuery中的常用方法和事件，帮助开发者更好地理解和应用这个强大的工具。 首先，我们来了解一个核心概念——文档就绪函数`$(document).ready()`。这个函数确保所有HTML元素都已经加载完毕再执行...
jQuery 事件 方法
12-13
jQuery 事件方法是 jQuery 库中的...jQuery事件方法是构建交互式和动态网页的关键工具，它们简化了JavaScript代码，使得事件处理变得更加直观和高效。理解并熟练运用这些方法，能够提高开发效率，同时提升用户体验。
jQuery简单注册和禁用全局事件的方法
10-21
对于处理异步请求，如Ajax操作，jQuery提供了一套完善的全局事件系统，使得开发者可以方便地监控和管理这些请求。本篇文章将深入探讨如何使用jQuery进行全局事件的注册和禁用，特别是`ajaxStart`和`ajaxStop`这两个...
jQuery事件绑定与解除绑定实现方法
12-12
本文将深入探讨jQuery中的事件绑定与解除绑定的实现方法，帮助你更好地理解和应用这些功能。 ### 1. 事件绑定（Event Binding） 在jQuery中，事件绑定通常通过`bind()`函数来实现。这个函数允许我们将一个或多个...
网站基本布局CSS
m0_46608027的博客
07-24 491
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 452
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
Web安全:Web体系架构存在的安全问题和解决方室
程序员-张师傅
07-24 1083
Web体系架构在提供丰富功能和高效服务的同时，也面临着诸多安全问题。这些问题可能涉及数据泄露、服务中断、系统被控制等多个方面，对企业和个人造成不可估量的损失。
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 640
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 975
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 58
【代码】TS如何处理js模块的类型？
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 138
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 850
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 643
CTFWP，ctfshow-web42
Web Pages 表单
07-20 316
Web pages 表单是现代网页设计中不可或缺的组成部分，它们允许用户与网站进行交互，提交信息，如注册、登录、反馈、预订等。表单的设计和功能对用户体验和网站的业务目标有着直接的影响。本文将深入探讨Web pages表单的各个方面，包括设计原则、常用元素、验证机制和最佳实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值