【jQuery】jQuery中的事件全解析_06

儒雅的烤地瓜

已于 2022-07-15 11:19:12 修改

阅读量337

点赞数 1

分类专栏： # ⭐️ JQuery教程文章标签： jquery javascript 前端js框架 jQuery函数库 jQuery事件

于 2022-07-14 10:58:16 首次发布

本文链接：https://blog.csdn.net/sunyctf/article/details/125617267

版权

⭐️ JQuery教程专栏收录该内容

10 篇文章 0 订阅

订阅专栏

❣️ 总结：jQuery简化版函数3大特点

❣️ 总结：$()共有4种

❣️ 总结：知识点提炼

🆙【前文回顾】👉 jQuery操作之如何绑定事件_05

❣️ jQuery中的事件

1. 页面加载完成后自动执行

(1). 问题: 今后开发js代码都要写在外部独立的js文件中，然后再用<script>引入网页来执行。但是，有人把js文件在body结尾引入，而有人习惯把js文件在网页开头引入。但是，大多数js代码只有在结尾引入时，才能起作用。如果开头引入，提前执行，是不起作用的。比如: 事件绑定代码——由于代码是顺序执行的，执行到js文件时，因为找不到元素(元素在body里)，事件无法绑上，所以用户点元素没反应

(2). 解决: 如何实现无论在开头引入，还是结尾引入，都可以正常起作用？

a. 其实在网页内容加载完之后，浏览器会自动触发一个事件: window.onload。凡是绑定在window.onload上的事件处理函数，无论在哪里编写，都注定只在网页内容加载完成后，才能自动执行。

b. 如何绑定:

window.οnlοad=function(){

希望注定在页面内容加载后才能执行的代码！

比如: 事件绑定代码

}

(3). 问题: window.onload是以赋值方式绑定事件。一个页面中，一个window.onload只能绑定一个事件处理函数。如果多个js中都有window.onload，就会发生冲突！

(4). 解决: 使用添加事件监听的方式绑定onload事件处理函数。

a. DOM中: window.addEventListener("load",function(){...})

b. jq中: $(window).load(function(){ ... })

(5). 问题: window.onload事件必须等待所有网页内容(HTML+CSS+JS+图片)加载完才执行。会强迫用户必须等样式和图片加载完，才能使用功能！有点晚了！很多操作用户很着急，根本不用等样式和图片，就要急于操作。比如: 抢票

(6). 解决: 其实, 在页面加载过程中，在window.onload之前，还有一次页面加载完成事件:DOMContentLoaded。这个事件不用等待CSS和图片，只需要等待HTML+JS加载完就能提前触发！所以，只要将与css和图片无关的操作，绑定在DOMContentLoaded事件中，用户就无需等待css和图片，就可提前使用功能！

a. DOM中:

window.addEventListener("DOMContentLoaded",function(){

... ...

})

b. jq中:

$(window).on("DOMContentLoaded",function(){

... ...

})

注意：上图中，上下对应各有一条蓝线和红线，蓝线代表DOMContentLoaded，红线代表window.onload

(7). 问题: 因为今后绝大多数jq代码都要放在DOMContentLoaded中提前执行。所以，如果每次都反复写这么长的事件名，非常繁琐

(8). 简写:

a. $(document).ready(function(){ ... })

就绪

b. $().ready(function(){ ... })

c. $(function(){ ... }) —— 最终版本

d. ES6: $(()=>{ ... })

(9). 总结: 今后几乎所有js代码都要放在$(function(){ ... })中

(10). 示例: 使用jq实现仅DOM内容加载完整后就提前执行操作

event/14_ready.js

//希望必须在页面内容加载完成后才查找元素，绑定事件
// window.onload=function(){
// window.addEventListener("load",function(){
// $(window).load(function(){
// window.addEventListener("DOMContentLoaded",function(){
// $(window).on("DOMContentLoaded",function(){
$(function(){
  alert("仅DOM内容加载完成，就提前为btn1绑定事件");
  $("#btn1").click(function(){
    alert("btn1 疼!")
  })
})//千万不要加()，因为不是立刻执行，而是等事件发生时才自动执行！

event/14_ready2.js

// window.onload=function(){
// window.addEventListener("load",function(){
// $(window).load(function(){
// window.addEventListener("DOMContentLoaded",function(){
// $(window).on("DOMContentLoaded",function(){
$(function(){
  alert("仅DOM内容加载完成，就提前为btn1绑定事件");
  $("#btn2").click(function(){
    alert("btn2 疼!")
  })
});//千万不要加()，因为不是立刻执行，而是等事件发生时才自动执行！

event/14_ready.html

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8">
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    window.onload=function(){
      alert("整个页面内容加载完成!")
    }
  </script>
  <script src="14_ready.js">
    //window.addEventListener("DOMContentLoaded",function(){
      //$("#btn1").click(...)
    //}
  </script>
  <script src="14_ready2.js">
    //window.addEventListener("DOMContentLoaded",function(){
      //$("#btn2").click(...)
    //}
  </script>
 </head>
 <body>
  <h1>页面加载完成事件</h1>
  <button id="btn1">click me1</button>
  <button id="btn2">click me2</button>
 </body>
</html>
<!--触发window.onload事件处理函数,自动执行其中的两句事件绑定代码-->

运行结果：

注意加载顺序：先加载弹框2次"仅DOM内容加载完成，就提前为btn1绑定事件"，然后加载弹框"整个页面内容加载完成!")

2. 鼠标事件

(1). 问题: DOM中的鼠标事件有坑。反复进出子元素，也会反复触发父元素的鼠标进入和鼠标移出事件(就是说进入d2同样也会相继提示离开d1和进入d1，进入d3也如此，这是DOM事件模型的冒泡机制)。和现实不符！

(2). 解决: HTML5标准中(新HTMlDOM)提出了mouseenter和mouseleave两个事件代替mouseover和mouseout。优点: 即使反复进入子元素，也不会反复触发父元素的进出事件。和现实相符。

(3). 问题: 因为经常需要在鼠标进入时修改元素，鼠标移出时恢复原样。所以，每次都写mouseenter和mouseleave特别繁琐。

(4). 简写: 仅jq中:

$元素.hover( //等效于同时绑定mouseenter和mouseleave两个事件，所以需要两个事件处理函数。

function(){ ... }, //给mouseenter

function(){ ... } //给mouseleave

);

(5). 示例: 使用mouseenter和mouseleave代替mouseover和mouseout，并用hover简写:

event/15_mouse.html

<!DOCTYPE HTML>
<html>

<head>
	<title>事件处理</title>
	<meta charset="utf-8" />
	<style>
		#d1 #d2 #d3 {
			cursor: pointer
		}

		#d1 {
			background-color: green;
			position: relative;
			width: 150px;
			height: 150px;
			text-align: center;
			cursor: pointer;
		}

		#d2 {
			background-color: blue;
			position: absolute;
			top: 25px;
			left: 25px;
			width: 100px;
			height: 100px;
		}

		#d3 {
			background-color: red;
			position: absolute;
			top: 25px;
			left: 25px;
			width: 50px;
			height: 50px;
			line-height: 50px;
		}
	</style>

</head>

<body>
	<div id="d1">
		<div id="d2">
			<div id="d3">
			</div>
		</div>
	</div>
	<script src="js/jquery-1.11.3.js"></script>
	<script>
		// var d1=document.getElementById("d1");
		// // d1.onmouseover=function(){
		// //    当 鼠标 跨过
		// d1.onmouseenter=function(){
		// // 当 鼠标 进入
		// 	console.log(`进入d1`)
		// }
		// // d1.onmouseout=function(){
		// //    当 鼠标 出来
		// d1.onmouseleave=function(){
		// // 当 鼠标  离开
		// 	console.log(`离开d1`)
		// }

		//简写
		$("#d1").hover( //.mouseenter+.mouseleave
			function(){ //给mouseenter
				console.log(`进入d1...`)
			},
			function(){ //给mouseleave
				console.log(`移出d1...`)
			}
		)
	</script>
</body>

</html>

运行结果:

$("#d1").hover( //.mouseenter+.mouseleave
	function(){ //给mouseenter
		console.log(`进入d1...`)
	},
	function(){ //给mouseleave
		console.log(`移出d1...`)
	}
)

⏫ 以下代码与上面功能等价：一次绑定多个事件 ⏬

$("#d1").on( 
    {
		mouseenter:function(){ 
		    console.log(`进入d1...`)
		},
		mouseleave:function(){ //给mouseleave
		    console.log(`移出d1...`)
		}
	}
)

(6). 更简化: 如果你有本事将鼠标进入和鼠标离开的两个事件处理函数的内容改为完全一样的！其实只要写一个处理函数即可！

🛎️ 注意：下面的例子使用了toggleClass函数，可以将鼠标进入和鼠标离开的两个事件处理函数的内容改为一样，是因为它正好拥有可以自动判断是移入还是移出的功能，但是！现实是，很多情况下，鼠标进入和移出时进行的操作比较复杂、步骤特别多，是很难把2个函数改为同一个的。

所以，这种情况下还得使用mouseenter跟mouseleave，也就是说hover跟mouseenter、mouseleave不是替代关系，是要有前提看情况使用的，所以，并不是说学了hover，以后就不再使用mouseenter、mouseleave了

$元素.hover(

function(){ ... }//鼠标进入也执行，鼠标离开也执行！

)

(7). 示例: 使用简写方式实现鼠标移入变色，鼠标移出恢复

event/16_hover.html

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8">
  <style>
    #target {
      border: 1px solid #eee;
      border-radius: 6px;
      padding: 10px;
      transition: all .5s linear;
    }
    /*用css实现鼠标进入变样，鼠标移出恢复*/
    /* :hover用js是操作不了的 */
    /* #target:hover{ 
      border: 1px solid #aaa;
      box-shadow: 0 0 6px #aaa;
      background-color:red;
      color:#fff;
    } */
    /*用js实现鼠标进入变样，鼠标移出恢复*/
    /*自定义样式类*/
    #target.hover { 
      border: 1px solid #aaa;
      box-shadow: 0 0 6px #aaa;
      background-color:red;
      color:#fff;
    }
  </style>
 </head>
 <body>
  <h1>使用hover(fn,fn)</h1>

  <h3>鼠标悬停在div上方，则突出显示；移出则取消突出显示</h3>
  <div id="target">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi neque quae voluptatum ducimus culpa itaque maxime distinctio soluta cum cupiditate esse tenetur deserunt fuga perferendis sed veritatis asperiores. Numquam officia.</p>
  </div>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    // $("#target").hover(
    //  //当鼠标进入当前元素时，就为当前元素添加class hover
    //  function(){
    //    //$(this).addClass("hover")
    //    $(this).toggleClass("hover")
    //  },
    //  //当鼠标移出当前元素时，就从当前元素上删掉class hover
    //  function(){
    //    //$(this).removeClass("hover")
    //    $(this).toggleClass("hover")
    //  }
    // )
    $("#target").hover(  // 更简化toggleClass会自动判断是移入还是移出
       // 虽然只写了一个函数，但是即给mouseenter，又给mouseleave即鼠标进入也执行，鼠标离开也执行！
      function(){//即给mouseenter，又给mouseleave
        $(this).toggleClass("hover");
      }
    )
  </script>
 </body>
</html>

运行结果:

3. 模拟触发

(1). 什么是: 即使没有点在按钮上，也能触发和点击按钮完全相同的操作。

(2). 如何: $("要触发事件的元素").trigger("事件名")

触发

(3). 结果: 找到事件处理函数所在的元素，自动执行事件处理函数。

(4). 简写: 如果要触发的事件，属于常用事件列表中，可简写为:

$元素.事件名()

(5). 示例: 按回车和点按钮都能执行搜索操作

event/17_trigger.html

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
</head>

<body>

  <input><button>百度一下</button>

  <script src="js/jquery-1.11.3.js"></script>
  <script>
    //为按钮绑定单击事件
    $("button").click(function(){
      //先获得文本框中的内容
      var kw=$(":text").val();
      //执行搜索操作
      console.log(`搜索 ${kw} 相关的内容...`)
    })

    //希望当在文本框上按下回车键时，也能执行和单击按钮完全相同的操作！
    //     键盘按键抬起
    $(":text").keyup(function(e){
      //只有按回车键时才执行搜索操作
      if(e.keyCode==13){
        //希望找到按钮，触发按钮的单击事件
        // $("button").trigger("click");
        $("button").click();
      }
    })
  </script>
</body>

</html>

运行结果:

补：键盘每按一个键，就会通过键盘的连接线向主机发送一个数字，即键盘号，但是，键盘号发来之后，怎么接收呢？其实键盘号早就被保存在了事件对象e当中了，那么事件对象e.keyCode就保存着键盘号，而13号正是回车键的代号

❣️ 总结：jQuery简化版函数3大特点

1. 自带for循环

2. 一个函数两用

3. 绝大多数函数都会自动返回正在操作的.前的主语jq对象。如果后一句话所需的.前的主语，刚好和前一句话返回的主语相同，则可以直接用.继续操作，不用把.前主语反复写2遍！——链式操作。👉 链式操作具体示例——参看按节点间关系查找之示例7_tabs.html⏫

❣️ 总结：$()共有4种

1. $("选择器") 查找DOM元素，并包装进jQuery对象中

2. $(DOM元素对象) 不用查找，直接将DOM元素包装进jQuery对象中

3. $(`HTML片段`) 创建新元素

4. $(function(){ ... }) 绑定DOMContentLoaded事件处理函数，在DOM内容加载后就自动提前执行！

❣️ 总结：知识点提炼

1. 引入jQuery.js: 2种

(1). 引入项目本地jquery.js文件:

(2). 引入CDN网络中共享的jquery.js文件:

2. 创建jQuery类型子对象: 2种

(1). 只有jQuery类型子对象才能使用jQuery家简化版函数。

DOM家元素对象无权直接使用jQuery家简化版函数。

所以只要使用jQuery家简化版函数，都要先创建jQuery家子对象，其中保存一个要操作的DOM元素对象。

(2). 如何:2种:

a. 查找DOM元素对象，并保存进新创建的jQuery对象中:

var $jq子对象=$("选择器")

b. 不查找，直接将DOM元素对象保存进新创建的jQuery对象中:

var $jq子对象=$(DOM元素对象)

3. 原理:

(1). $=jQuery=new jQuery

(2). jq子对象其实是一个类数组对象，可保存找到的多个DOM元素对象

(3). 对jq子对象调用简化版函数，会被自动翻译为对应的原生DOM的方法和属性。

所以jQuery中的所有简化版函数效果和DOM中原生方法和属性效果一样。

jQuery中的this、e、e.target等，和DOM中的完全一样！

4. jQuery简化版函数3大特点:

(1). 自带for循环: 对整个jquery子对象调用一次简化版函数，等效于对jQuery子对象中保存的每个DOM元素对象分别调用一次对等的DOM原生方法或属性——不用自己写for循环

(2). 一个函数两用: 调用函数时:

a. 没给新值作为参数，默认执行获取旧值的操作

b. 给了新值作为参数，自动切换为执行修改操作

(3). 多数函数都会返回正在操作的.前的主语jq对象——链式操作。

5. 查找元素:

(1). jQuery支持用所以CSS3选择器查找

(2). jQuery新增选择器: (css中不能用)

a. 基本过滤: (下标从0开始)

:first :last :eq(i) :lt(i) :gt(i) :even :odd

b. 内容过滤:

:contains(文本) :has(选择器) :parent :empty

c. 可见性过滤:

:visible :hidden(只能选择display:none和input type="hidden")

d. 表单元素过滤:
:input :text :password :radio :checkbox ... ...

(3).用节点间关系查找: 2大类关系, 8个函数

a. 父子关系：3个函数:

$元素.parent()

$元素.children("选择器")

$元素.find("选择器")

b. 兄弟关系：5个

$元素.prev()

$元素.prevAll("选择器")

$元素.next()

$元素.nextAll("选择器")

$元素.siblings("选择器")

6. 修改元素: 3种:

修改中的所有函数，都是一个函数两用！

(1). 内容: 3种:

a. 原始HTML内容:

$元素.html("新HTML内容") 代替.innerHTML

b. 纯文本内容:

$元素.text("纯文本内容") 代替.textContent

c. 表单元素的值:

$元素.val("新值") 代替.value

(2). 属性: 3种:

a. 字符串类型的HTML标准属性:2种:

1). $元素.attr("属性名","新属性值")

代替元素.getAttribute()和setAttribute()

2). $元素.prop("属性名", bool值)

代替元素.属性名=bool值
b. bool类型的HTML标准属性: 只有1种

$元素.prop("属性名", bool值)

代替元素.属性名=bool值

c. 自定义扩展属性:只有一种:

$元素.attr("属性名","新属性值")

代替元素.getAttribute()和setAttribute()

反过来总结:

$元素.attr()可修改一切字符串类型的属性(字符串类型HTML标准属性+自定义扩展属性)

$元素.prop()可修改一切可用.访问的属性(所有HTML标准属性)

(3). 样式:

a. 获取或修改单个css属性: 只有1种

$元素.css("css属性名", "属性值")

获取属性值时被翻译为getComputedStyle(元素)

修改属性值时被翻译为.style.css属性=属性值

b. 使用class批量修改样式:

$元素.addClass("class名")

$元素.removeClass("class名")

$元素.hasClass("class名")

$元素.toggleClass("class名")

修改相关的函数都可同时修改多个属性值:

$元素.attr或prop或css({

属性名:"属性值",

... : ...

})

7. 添加删除替换克隆元素:

(1). 添加新元素: 2步

a. 使用HTML片段批量创建新元素:

$(`HTML片段`)

b. 将新元素添加到DOM树: 5种方式，10个函数

1). 末尾追加:

$父元素.append($新元素)

    $新元素.appendTo($父元素)
    2). 开头插入: 新增:
    $父元素.prepend($新元素)

$新元素.prependTo($父元素)

3). 插入到一个现有元素之前:

$现有元素.before($新元素)

$新元素.insertBefore($现有元素)

4). 插入到一个现有元素之后:

$现有元素.after($新元素)

$新元素.insertAfter($现有元素)

5). 替换现有元素:

$现有元素.replaceWith($新元素)

$新元素.replaceAll($现有元素)

(2). 删除元素: $元素.remove()

(3). 克隆元素: $元素.clone()

(4). 判断一个元素是否具有什么特征: $元素.is("选择器")

8. 事件绑定:

(1). 标准写法:
$元素.on("事件名", 事件处理函数)

$元素.off("事件名", 原事件处理函数)

(2). 简写: $元素.事件名(事件处理函数)

(3). 事件委托:

$父元素.on("事件名","选择器",function(){

...this指向e.target...

})

9. 事件: ⏬ 👇

(1). 页面加载后自动执行:

a. 先$(document).ready(function(){})

简写: $(function(){ ... })

b. 后$(window).load(function(){ ... })

(2). 鼠标事件:

mouseenter代替mouseover

mouseleave 代替mouseout

简写: .hover(处理函数1,处理函数2)

等于: .mouseenter(处理函数1)

.mouseleave(处理函数2)

(3). 模拟触发:

a. 标准: $元素.trigger("事件名")

b. 如果属于常用事件列表，可简写为:

$元素.事件名()

🆕【后文传送门】👉 一文详解jQuery动画_07

如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！

儒雅的烤地瓜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【jQuery】jQuery中的事件全解析_06

jQuery事件是对JavaScript事件的封装，常用事件如：鼠标事件—click()、mouseenter()、mouseleave()，键盘事件——keyup()、keydown()、keypress()，表单事件——focus() 、blur() ，绑定事件——bind(type,[data],fn)，复合事件——hover()、toggle()方法等等.....................
复制链接

扫一扫