入口函数

　　使用$(document).ready(()=>{})作为jQuery入口函数，与window.onload(()=>{})类似，但它不会等待图片等外部资源的加载完毕，而是在HTML文档页面渲染后就立刻执行入口函数内部代码。

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

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

        <title>Document</title>

        <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>

        <script>

                $(document).ready(function () {

                        console.log($("button").get(0));

                });

        </script>

</head>

<body>

        <button type="button">点我</button>

</body>

</html>

　　也可以直接使用简写形式作为入口函数

<script>

	$(function () {

		console.log($("button").get(0));

	})

</script>

处理程序

绑定处理

　　在jQuery中，对于某一对象事件的处理程序应当使用接口函数on()进行异步处理。

　　 on()接口不仅仅可以做当前目标元素的事件处理，也以根据事件冒泡行为做成事件代理形式。

　　事件冒泡请参照以前的关于Js事件的文章：https://www.cnblogs.com/Yunya-Cnblogs/p/13531826.html

　　与JavaScript的addEventListener()事件监听类似，允许对同一事件目标的同一事件处理函数进行多次定义

　　如果回调函数是一个普通函数，那么函数中this指向为事件目标元素本身

　　如果回调函数是一个箭头函数，那么函数中this指向为window或undefined，此时应使用event.target获取事件目标。

<body>

        <button type="button">按钮1</button>

        <button type="button">按钮2</button>

</body>

<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>

<script>

        $(function () {

                $("button").on("click", function (jQevent) {  // jQevent为事件对象

                        console.log($(this).text());  // 按钮1  按钮2

                });

        })

</script>

　　利用事件冒泡特性，使用on()接口为未来元素的父级设置事件代理，可令未来元素的某一事件操作也具有对应的处理程序。

<body>

        <ul>

                <li>li1</li>

                <li>li2</li>

                <li>li3</li>

        </ul>

</body>

<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>

<script>

        $(function () {

                // 委托的DOM  事件类型  事件目标  jQevent为事件对象

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

                        console.log(jQevent)

                        console.log($(this).text());

                });

                $("ul").append("<li>li4</li>");  // 新增加的li本身并没有绑定任何事件，但由于事件代理给了父标签ul，故此li也能触发处理程序

        })

</script>

移除处理

　　使用off()接口在选择元素上移除一个或多个事件的事件处理函数。

<body>

        <div style="width: 50px;height: 50px;background-color:red"></div>

        <button type="button">点我面积增大</button>

        <button type="button">点我移除事件</button>

</body>

<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>

<script>

        $(function () {

                // eq返回jQuery对象，get()返回DOM元素。所以用eq

                $("button").eq(0).on("click", function (jQevent) {  // jQevent为事件对象

                        $(this).prev().css({ "width": ($(this).prev().width() + 50) + "px", "height": ($(this).prev().height() + 50) + "px" });

                });

                $("button").eq(1).on("click", function (jQevent) {  // jQevent为事件对象

                        $(this).prev().off("click");

                        $(this).prev().text("事件已移除");

                });

        })

</script>

　　移除事件代理

<body>

        <ul>

                <li>li1</li>

                <li>li2</li>

                <li>li3</li>

        </ul>

        <button>点我移除ul委托事件</button>

</body>

<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>

<script>

        $(function () {

                // 委托的DOM  事件类型  事件目标  jQevent为事件对象

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

                        console.log($(this).text());

                });

                $("button:first").on("click", function (jQevent) {

                        $(this).prev().off("click","li")

                        $(this).text("点击li不再显示");

                })

        })

</script>

其他绑定

　　下面的这些接口不太常用，了解即可。

接口名称	描述
bind()	单独绑定，不支持事件代理
one()	绑定一次性事件，不支持事件代理
trigger()	行为执行绑定
triggerHandler()	默认行为与冒泡行为阻止绑定
toggle()	用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 `click`事件。

　　 bind()

　　以下示例将展示使用单独绑定根据点击来改变元素随机色

<body>

        <div

                style="background-color: red;color:white;height:100px;width: 100px;text-align: center;line-height: 100px;cursor: pointer;">

                点我随机变色</div>

</body>

<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>

<script>

        $(function () {

                $("div").bind("click", function (jQevent) {

                        const one_number = Math.floor(Math.random() * (255 + 1));

                        const two_number = Math.floor(Math.random() * (255 + 1));

                        const three_number = Math.floor(Math.random() * (255 + 1));

                        this.style.backgroundColor = `rgb(${one_number},${two_number},${three_number})`;

                });

        })

</script>

　　 one()

　　以下示例将展示使用单次绑定第一次点击时改变元素随机色

<body>

        <div

                style="background-color: red;color:white;height:100px;width: 100px;text-align: center;line-height: 100px;cursor: pointer;">

                点我随机变色</div>

</body>

<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>

<script>

        $(function () {

                $("div").bind("click", function (jQevent) {

                        const one_number = Math.floor(Math.random() * (255 + 1));

                        const two_number = Math.floor(Math.random() * (255 + 1));

                        const three_number = Math.floor(Math.random() * (255 + 1));

                        this.style.backgroundColor = `rgb(${one_number},${two_number},${three_number})`;

                });

        })

</script>

　　 trigger()

　　以下示例将展示使用trigger()对某一表单进行隐式提交。

<body>

        <form action="#">

                <p><input type="text" placeholder="用户名"></p>

                <p><input type="text" placeholder="密码"></p>

        </form>

</body>

<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>

<script>

        $("form").trigger("submit");

</script>

事件对象

　　每一次的事件触发都会产生一次事件对象，但jQuery中的事件对象与Js中的有所不同。

　　 jQuery中的事件对象是在原生的事件对象上的一次封装。

属性	描述
event.type	事件类型
event.target	事件目标对象，冒泡的父级通过该属性可以找到在哪个元素上执行了事件
event.currentTarget	当前执行事件的对象
event.timeStamp	事件发生时间
event.data	当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind
event.delegateTarget	当currently-called的jQuery事件处理程序附加元素
event.namespace	当事件被触发时此属性包含指定的命名空间
event.pageX	鼠标相对于文档的左边缘的位置
event.pageY	鼠标相对于文档的顶部边缘的位置
event.result	这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined
event.which	针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。

冒泡行为与默认行为

　　以下方法可用于解决事件的冒泡传递与一些元素的默认行为。

　　对于一些特定的事件类型也可以在处理程序中使用retrun false来解决，但是个人不推荐

方法名	描述
event.preventDefault()	阻止默认事件行为的触发。
event.isDefaultPrevented()	根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值。
event.stopPropagation()	防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。
event.isPropagationStopped()	根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。
event.stopImmediatePropagation() 推荐	阻止剩余的相同事件的处理函数执行，并且防止事件冒泡到DOM树上。
event.isImmediatePropagationStopped()	根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。

事件类型

事件名称	描述
未来事件
ready	当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。即入口函数
鼠标事件
click	进行单击触发
dblclick	进行双击触发
hover	鼠标悬停时触发
mousedown	鼠标指针移动到元素上方触发
mouseenter	鼠标指针穿过元素时触发，该事件大多数时候会与mouseleave 事件一起使用。
mouseleave	鼠标指针离开元素时触发，该事件大多数时候会与mouseenter 事件一起使用。
mousemove	鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mouseout	鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 [mouseover 事件一起使用。
mouseover	鼠标指针位于元素上方触发
mouseup	鼠标按钮在元素上放松时触发
focus	获得焦点时触发
focusin	获得焦点时触发，可以在父元素上检测子元素获取焦点的情况
focusout	失去焦点时触发
blur	失去焦点时触发
键盘事件
keydown	键键按下触发，注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生
keypress	键键按下触发，注释：如果在文档元素上进行设置，则元素必须获得焦点，该事件才会发生
keyup	按键松开触发
视窗事件
resize	当调整浏览器窗口的大小时，发生 resize 事件。
scroll	当用户滚动指定的元素时，会发生 scroll 事件。
select	当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
表单事件
change	当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素
submit	当提交表单时，会发生 submit 事件。

jQuery 事件操作的更多相关文章

jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架
jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...
jQuery事件操作
bind绑定事件 bind(type,data,fn) [参数描述] type (String) : 事件类型 data (Object) : (可选) 作为event.data属性值传递给事件对象的 ...
jQuery——事件操作
事件绑定 1.简单事件绑定 $("button").click(function () {})//可重复绑定,不会被层叠 2.bind():不推荐使用 $("button ...
jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
[jQuery学习系列四 ]4-Jquery学习四-事件操作
前言:今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席云集听道推酷青年中国说 SELF格致论道参考:http://www.365 ...
Jquery基础之事件操作
事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事 ...
事件冒泡及事件委托的理解（JQuery Dom操作）
jQuery事件冒泡: click mouseenter 等事件没有绑定也会触发,只是触发后没有任何结果子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...
JQuery操作样式以及JQuery事件机制
1.操作样式 1.1 css的操作功能:设置或者修改样式,操作的是style属性操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...

随机推荐

sublimeCLang配置报错以及sublime快捷键
subimeClang需要手动配置我真的真的很服记录一下满是报错的高光时刻 -------- 不过这个问题刚刚解决了只要把所有的shared_ptr改成std::shared_ptr 就行说白了 ...
circle踢人(约瑟夫环）　c++
这里更新指针法,真的每句都是坑 (寥寥数十句,句句都是坑) // // Created by snnnow on 2020/4/12. //question:转圈,一共N个人,数到M的出列,求最后一个 ...
Python os.close() 方法
概述 os.close() 方法用于关闭指定的文件描述符 fd.高佣联盟 www.cgewang.com 语法 close()方法语法格式如下: os.close(fd); 参数 fd -- 文件描述 ...
PHP fgetss() 函数
定义和用法 fgetss() 函数从打开的文件中返回一行,并过滤掉 HTML 和 PHP 标签. fgetss() 函数会在到达指定长度或读到文件末尾(EOF)时(以先到者为准),停止返回一个新行. ...
Calibre LVS BOX 详细用法
https://www.cnblogs.com/yeungchie/ LVS BOX的使用对于后端的团队协作起到非常便利的作用. 通过在lvs rules file添加BOX的相关语句可以达到这个目的 ...
MyBatis辟邪剑谱
一 MyBatis简介 MyBatis是一个优秀的持久层框架它对JDBC操作数据库的过程进行封装开发者只需要关注SQL本身而不需要花费精力去处理JDBC繁杂的过程代码 MyBatis将要执行的各 ...
PHP+Redis链表解决高并发下商品超卖问题
目录实现原理实现步骤上一篇文章聊了一下使用Redis事务来解决高并发商品超卖问题,今天我们来聊一下使用Redis链表来解决高并发商品超卖问题. 实现原理使用redis链表来做,因为pop操作是 ...
为什么需要将网站封装为app？
网站封装为app是一种宝贵的资源,为客户提供稳定的平台,一个网站也是一个有效的工具,用于企业与其客户之间的通信.企业网站用户可以通过他们的笔记本电脑,台式机,平板电脑,智能手机以及带有浏览器设备的 ...
手敲代码太繁琐？“拖拉拽”式Python编程惊艳到我了
Python到底有多火,从后端开发到前端开发:从金融量化分析到大数据:从物联网到人工智能,都有Python的踪迹. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后, ...
OpenCV之高斯平滑（Python实现）
假设一个列数为W,行数为H的高斯卷计算子gaussKernel,其中W,H均为奇数,描点位置在((H-1)/2 ,(W-1)/2),构建高斯卷积核的步骤如下 1.计算高斯矩阵 \[gaussMatri ...

jQuery 事件操作