jQuery 事件

已于 2022-12-23 15:04:11 修改
阅读量1.8k 收藏 3
点赞数 1
分类专栏： # jQuery 文章标签： javascript jquery 前端
于 2022-12-21 17:51:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14876133/article/details/128395186
版权

文章目录

jQuery 事件

概述

在jQuery中，一个事件由3部分组成：

  • 事件主角：div、button？
  • 事件类型：点击、移动？
  • 事件过程：事件函数？

常用事件

页面事件

ready()

JavaScript中onload表示文档加载完后执行的一个事件，jQuery的ready事件与onload是一样的。jQuery的ready事件是可以多次执行的。

但是，jQuery的ready事件仅仅是DOM元素加载完成就可以执行，而JavaScript的onload事件在DOM元素加载完成后还需要等所有外部文件也加载完成才可以执行。

因此，jQuery的ready事件相对于JavaScript的onload事件来说，极大地提高页面的响应速度，有着更好的用户体验。

语法

//写法1：
$(document).ready(function(){ 
    …… 
}) 
 
//写法2： 
jQuery(document).ready(function(){ 
    …… 
}) 
 
//写法3： 
$(function(){ 
    ……  
}) 
 
//写法4： 
jQuery(function(){ 
    …… 
}) 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				console.log("第一次调用");
			})
			$(function() {
				console.log("第二次调用");
			})
			$(function() {
				console.log("第三次调用");
			})
		</script>
	</head>
	<body>
	</body>
</html>

注：依次输出”第一次调用“，”第二次调用“，”第三次调用“。

鼠标事件

事件说明
click鼠标单击事件
mouseover鼠标移入事件（会冒泡）
mouseout鼠标移出事件（会冒泡）
mouseenter鼠标移入事件（不会冒泡）
mouseleave鼠标移出事件（不会冒泡）
mousedown鼠标按下事件
mouseup鼠标抬起事件
mousemove鼠标移动事件

鼠标事件非常多，这里我们只列出最实用的，以免增加大家的记忆负担。从上表可以看出，jQuery事件比JavaScript事件只是少了“on”这个前缀。例如鼠标单击事件在JavaScript中是onclick，而在jQuery中是click。

自动触发点击事件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#btn").click(function() {
					alert("hello");
				}).click();
			})
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="点击">
	</body>
</html>
mouseover 和 mouseenter 区别

当鼠标滑过这个元素，会触发**mouseover()方法，滑过它的子元素时，同样会再次出发mouseover()**方法；但是，**mouseenter()**方法确实只在该元素本身被滑过时才被触发，该元素的子元素被划过时，**mouseenter()**函数是不会被触发的。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>mouseover与mouseenter事件</title>
	</head>
	<style>
		#box1 {
			width: 100px;
			height: 200px;
			background: #ccc;
		}

		#box1 div {
			width: 100px;
			height: 100px;
			background: #B3CD57;
		}

		#box2 {
			width: 100px;
			height: 200px;
			background: #ccc;
		}

		#box2 div {
			width: 100px;
			height: 100px;
			background: #B3CD57;
		}
	</style>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#box1").mouseover(function() {
				console.log("box1移入");
			}).mouseout(function() {
				console.log("box1移出");
			});
			$("#box2").mouseenter(function() {
				console.log("box2移入");
			}).mouseleave(function() {
				console.log("box2移出");
			});
		})
	</script>
	<body>
		<div id="box1">
			<div>box1</div>
		</div>
		<br>
		<div id="box2">
			<div>box2</div>
		</div>
	</body>
</html>

键盘事件

事件说明
keydown键盘按下
keyup键盘抬起

表单事件

事件说明
focus获取焦点时触发事件
blur失去焦点时触发事件
selct选中文本框中的内容时触发事件
change单选框、多选框、下拉菜单选中时触发事件

编辑事件

在jQuery中，常用的编辑事件只有一种，那就是contextmenu事件。

contextmenu事件在大多数情况下都是用来保护版权的。

滚动事件

滚动事件，指的是拉动页面滚动条时所触发的事件。滚动事件非常有用，特别是在“回顶部特效”以及“扁平化页面动画”中会大量用到。

scroll()方法经常配合scrollTop()方法一起使用。scroll()方负责滚动监听，scrollTop()负责获取距离。

语法

$(元素).scroll(function() {
	...
}
固定栏目
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body {
				height: 1000px;
			}

			div {
				display: inline-block;
				width: 100px;
				height: 100px;
			}

			#box1 {
				background-color: red;
			}

			#box2 {
				background-color: blue;
			}
		</style>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var top = $("#box2").offset().top;
				$(window).scroll(function() {
					if ($(this).scrollTop() > top) {
						$("#box2").css({
							"position": "fixed",
							"top": "0"
						});
					} else {
						$("#box2").css({
							"position": "relative",
						});
					}
				});
			})
		</script>
	</head>
	<body>
		<div id="box1"></div><br>
		<div id="box2"></div>
	</body>
</html>

在这里插入图片描述

事件

绑定事件

jQuery中的click()方法类似于JavaScript中的onclick属性，jQuery中的on()方法类似于JavaScript的addEventListener()方法。

语法

$(元素).on("事件名",函数)

添加绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#btn").on("click", function() {
					alert("hello");
				});
			})
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="点击">
	</body>
</html>

动态创建的元素添加绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var $btn = $("<input id='btn' type='button' value='按钮'>");
				$($btn).appendTo("body")
				$($btn).on("click", function() {
					alert("hello");
				});
			})
		</script>
	</head>
	<body>
	</body>
</html>

解绑事件

语法

$(元素).off("事件名")

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				//添加事件
				$("#btn").on("click", function() {
					alert("hello");
				});
				//解绑事件
				$("btn-off").click(function() {
					$("#btn").off("click");
				});
			})
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="点击">
		<input id="btn-off" type="button" value="解绑">
	</body>
</html>

合成事件

语法

$(元素).hover(函数1, 函数2)

说明

函数1表示鼠标移入时触发函数，函数2表示鼠标移出时触发函数。

替代了mouseenter()和mouseleave()方法。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("div").hover(function() {
					$(this).css("color", "red");
				}, function() {
					$(this).css("color", "green");
				});
			})
		</script>
	</head>
	<body>
		<div>hello world</div>
	</body>
</html>

在这里插入图片描述

一次事件

语法

$(元素).one("事件名", 函数)

说明

one()方法可以为元素添加一个只会触发一次的事件。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#btn").one("click", function() {
					alert("hello");
				});
			})
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="点击">
	</body>
</html>

自定义事件

说明

在jQuery中，可以通过on()方法来自定义一个事件，然后通过trigger()方法来触发这个自定义事件。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#btn").on("delay", function() {
					setTimeout(function() {
						alert("hello");
					}, 2000);
				});
				$("#btn").click(function() {
					$("#btn").trigger("delay");
				});
			})
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="点击">
	</body>
</html>

event对象

event对象的属性

属性说明
type事件类型
target事件元素
which鼠标左、中、右键
pageX、pageY鼠标在页面的坐标
shiftKey是否按下shift键
ctrlKey是否按下ctrl键
altKey是否按下alt键
keyCode键码值
event.type
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#btn").click(function(e) {
					console.log(e.type); //click
				});
			})
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="点击">
	</body>
</html>
event.target
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("a").click(function(e) {
					var url = $(e.target).attr("href");
					console.log(url); //http://www.baidu.com
					return false; //return false可以阻止超链接跳转
				});
			})
		</script>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>
event.which
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#btn").mousedown(function(e) {
					switch (e.which) {
						case 1:
							console.log("左键");
							break;
						case 2:
							console.log("中键");
							break;
						case 3:
							console.log("右键");
							break;
					}
				});
			})
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="点击">
	</body>
</html>
event.pageX 和 event.pageY
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$(document).mousemove(function(e) {
					var x = e.pageX;
					var y = e.pageY;
					var result = "鼠标点坐标X：" + x + " Y：" + y;
					$("body").text(result);
				});
			})
		</script>
	</head>
	<body>
	</body>
</html>
keyCode

常用的按键及对应的键码

在这里插入图片描述

禁止使用Shift、Ctrl、Alt键

<!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="js/jquery-1.12.4.min.js"></script> 
    <script> 
        $(function () { 
            $(document).keydown(function(e){ 
                if (e.shiftKey || e.altKey || e.ctrlKey) { 
                    alert("禁止使用Shift、Ctrl、Alt键！") 
                } 
            }) 
        }) 
    </script> 
</head> 
<body> 
    <div>hello world</div> 
</body> 
</html>

获取“上”“下”“左”“右”方向键

<!DOCTYPE html>
<html> 
    <head> 
        <meta charset="utf-8" /> 
        <title></title> 
        <script src="js/jquery-1.12.4.min.js"></script> 
        <script> 
            $(function () { 
                $(window).keydown(function(e){ 
                    if (e.keyCode == 38 || e.keyCode == 87) { 
                        $("span").text("上"); 
                    } else if (e.keyCode == 39 || e.keyCode == 68) { 
                        $("span").text("右"); 
                    } else if (e.keyCode == 40 || e.keyCode == 83) { 
                        $("span").text("下"); 
                    } else if (e.keyCode == 37 || e.keyCode == 65) { 
                        $("span").text("左"); 
                    } else { 
                        $("span").text(""); 
                    } 
                }) 
            }) 
        </script> 
    </head> 
    <body> 
        <div>你控制的方向是： 
            <span style="color:red;"></span> 
        </div> 
    </body> 
</html>

this

原生JavaScript中的this是非常复杂的。不过在jQuery中，this的使用相对来说简单一点。jQuery中的this大多数是用于事件操作中。

在jQuery中的thisthis始终指向触发当前事件的元素。

<!DOCTYPE html>
<html> 
    <head> 
        <meta charset="utf-8" /> 
        <title></title> 
        <script src="js/jquery-1.12.4.min.js"></script> 
        <script> 
            $(function () { 
                $("div").click(function(){ 
                    //$(this)等价于$("div") 
                    $(this).css("color", "red"); 
                }) 
                $("p").click(function () { 
                    //$(this)等价于$("p") 
                    $(this).css("color", "blue"); 
                }) 
            }) 
        </script> 
    </head> 
    <body> 
        <div>hello</div> 
        <p>world</p> 
    </body> 
</html>

案例

统计输入字符的长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#txt").keyup(function() {
					var str = $(this).val();
					$("#num").text(str.length);
				});
			})
		</script>
	</head>
	<body>
		<input id="txt" type="text" />
		<div>字符串长度：<span id="num">0</span></div>
	</body>
</html>

在这里插入图片描述

验证输入是否正确

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var reg = /^[0-9]*$/;
				$("#txt").keyup(function() {
					var str = $(this).val();
					if (reg.test(str)) {
						$("#tip").text("输入正确");
					} else {
						$("#tip").text("必须输入数字");
					}
				});
			})
		</script>
	</head>
	<body>
		<input id="txt" type="text" />
		<div id="tip"></div>
	</body>
</html>

在这里插入图片描述在这里插入图片描述

搜索框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				var txt = $("#search").val();
				$("#search").focus(function() {
					if ($(this).val() == txt) {
						$(this).val("");
					}
				}).blur(function() {
					if ($(this).val() == "") {
						$(this).val(txt);
					}
				});
				$("#btn").click(function() {
					$("#search").focus();
				});
			})
		</script>
	</head>
	<body>
		<input id="search" type="text" value="搜索一下" />
		<input id="btn" type="button" value="搜索">
	</body>
</html>

在这里插入图片描述

全选文本框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#search").click(function() {
					$(this).select();
				});
			})
		</script>
	</head>
	<body>
		<input id="search" type="text" placeholder="搜索一下" />
	</body>
</html>

在这里插入图片描述

复选框的全选和反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#checkAll").change(function() {
					$("input:checkbox").prop("checked", true);
				});
				$("#checkBack").change(function() {
					$("input:checkbox").each(function(index, element) {
						$(element).prop("checked", !$(element).prop("checked"));
					});
				});
			})
		</script>
	</head>
	<body>
		<div>
			<p>你喜欢的水果：</p>
			<label><input type="checkbox" name="fruit">苹果</label>
			<label><input type="checkbox" name="fruit">橘子</label>
			<label><input type="checkbox" name="fruit">香蕉</label>
		</div>
		<br>
		<div>
			<label><input id="checkAll" type="radio" name="select">全选</label>
			<label><input id="checkBack" type="radio" name="select">反选</label>
		</div>
	</body>
</html>

在这里插入图片描述

下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("select").change(function() {
					var url = $("option:selected").val();
					window.open(url);
				});
			})
		</script>
	</head>
	<body>
		<select>
			<option value="https://www.baidu.com">百度</option>
			<option value="https://www.tencent.com">腾讯</option>
			<option value="https://www.aliyun.com">阿里</option>
		</select>
	</body>
</html>

返回顶部特效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body {
				height: 1800px;
			}

			div {
				position: fixed;
				right: 50px;
				bottom: 50px;
				display: none;
				width: 40px;
				height: 40px;
				color: white;
				background-color: #45b823;
				font-family: 微软雅黑;
				font-size: 15px;
				font-weight: bold;
				text-align: center;
				cursor: pointer;
			}
		</style>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$(window).scroll(function() {
					if ($(this).scrollTop() > 300) {
						$("div").css("display", "inline-block");
					} else {
						$("div").css("display", "none");
					}
				});

				$("div").click(function() {
					$("html,body").scrollTop(0);
				});
			})
		</script>
	</head>
	<body>
		<h3>hello world</h3>
		<div>回到顶部</div>
	</body>
</html>

在这里插入图片描述

鼠标经过显示详细内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			h3 {
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: #ddd;
				cursor: pointer;
			}

			div {
				display: none;
				padding: 10px;
				border: 1px solid silver;
				text-indent: 32px;
			}
		</style>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("h3").hover(function() {
					$("div").css("display", "block");
				}, function() {
					$("div").css("display", "none");
				});
			})
		</script>
	</head>
	<body>
		<h3>hello world</h3>
		<div>
			这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。
		</div>
	</body>
</html>

在这里插入图片描述

xiangxiongfly915
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解jQuery 事件处理
10-22
下面小编就为大家带来一篇深入理解jQuery 事件处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery 事件 方法
12-13
jQuery 事件 方法 jQuery 事件方法 事件方法触发器或添加一个函数到被选元素的事件处理程序。 下面的表格列出了所有用于处理事件的 jQuery 方法。 方法 描述 bind() 向元素添加事件处理程序 blur() 添加/触发失去焦点事件 change() 添加/触发 change 事件 click() 添加/触发 click 事件 dblclick() 添加/触发 double click 事件 delegate() 向匹配元素的当前或未来的子元素添加处理程序 die() 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理
jQuery(document).ready(function($) { });的几种表示方法
11-24
在写jquery的时候，因为平时用sublime text快捷键生成jQuery(document).ready(function($) { });，所以忘记了其他的几种表示方法，今天花了几分钟特意记录了一下。
jQuery事件详解
10-20
本文主要介绍了jQuery事件的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
理解jquery事件冒泡
01-19
一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡。 代码实例如下: <html> <head> <meta charset= gb2312> <title>事件冒泡</title> [removed][removed] [removed] $(document).ready
Jquery中的$(document).ready()详解
热门推荐
beidaol的专栏
07-12 9万+
转载：https://blog.csdn.net/u010098331/article/details/62036597window.onload = function(){ alert("welcome"); }语句的作用是希望在页面加载完，自动执行定义js代码（function）。$(document).ready(function(){.... })这个函数是用来取代页面中的window.o...
$(document).ready(function()详解
Thinkingcao的专栏
02-22 2万+
1、       $就是jquery的简写，$()就是一个选择器，document是html的所有元素，$(document）返回一个数组，而这个数组是一个对象，这个对象调用ready方法，function则是ready里面的参数，就是说等这个页面全部加载完之后就去执行写入的js。而且在$(document）.ready(function(){  });里面写入的js特效是和下一个里面写入的特效
$(document).ready(function()
weixin_45156514的博客
05-20 4302
$就是jquery的简写，$()就是一个选择器，document是html的所有元素，$(document）返回一个数组， 而这个数组是一个对象，这个对象调用ready方法，function则是ready里面的参数，就是说等这个页面全部加载完之后就去执行写入的js。 而且在$(document）.ready(function(){ }); 里面写入的js特效是和下一个里面写入的特效是不冲突的，俩者之间是不影响的， 因此可以通过$(function(){});在一个页面中加载多个js。 read.
jq之鼠标事件
nknnl7的博客
01-31 1967
(6):mouseout事件：mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。(4):mouseup事件：mouseup事件在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么click事件也会触发。(3):mousedown事件：mousedown事件在用户敲击鼠标键时触发，跟keydown事件不一样，该事件仅在按下鼠标时触发。(1):click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。
详解jQuery事件
10-20
本文主要介绍了jQuery事件的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧
$(document).ready(function(){}) 的含义及其使用
weixin_39840445的博客
09-16 6752
$(document).ready(function(){})  表示文档结构已经加载完成（不包含图片等非文字媒体文件） 在一个js中可能存在多个方法,不过js是顺序执行的，如果要想让一个方法在另一个方法 之前调用的话，那么我们可以调用$(document).ready(function(){})方法,就可以解决顺序 执行问题。 function one(){
jQuery学习
weixin_44552307的博客
04-10 1189
1. jQuery入门 1.1 jQuery概述 1.1.1 jQuery的概念 jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less , Do More”，即倡导写更少的代码，做更多的事情。 j就是JavaScript;Query查询;意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。 1.1.2 jQuery的优点
$(document).ready()使用讨论
博海软件
07-19 237
一、先为说说 $(document).ready() 的功能：     1. JQuery API对 $(document).ready() 的解释是：当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。     2. 我的理解：$(document).ready() 用于当前页面加载完成后，就执行其定义的方法，用于异步加载，提交页面响影的速度，用于在一个页面中包含多个页面的情况（一个页面中...
关于$(document).ready() 函数
weixin_45873965的博客
05-04 1405
一、$(document).ready()函数介绍。 要学习jQuery，第一步就应该了解$(document).ready()函数。例如要在一个页面运行一个JavaScript函数，那么就应该将它写在$(document).ready()函数内。在该函数内的所有代码都将在dow加载完毕后，页面全部内容（包括图片等）加载完前被执行。 JavaScript代码如下： $(document).rea...
$(document).ready()
WalkingAlien World
06-20 1322
简介$( document ).ready(function() { console.log( "ready!" ); });在网页文档加载完毕前一个页面是无法安全操纵的。jQuery可以为我们检测到待发状态。$(document).ready()中的代码在 Document Object Model (DOM) 完毕后会立即执行。$( window ).on( “load”, functi
关于JQuery中的鼠标事件
Hfeidz的博客
10-26 3587
注：以下所有效果都会以此结构展示 <style> #box{ width: 300px; height: 300px; background-color: pink; margin: 200px auto; transition: 0.5s; text-align: center; line-height:
$(document).ready(function(){})意思
H1453571548的博客
08-24 960
$(document).ready(function(){})表示文档结构已经加载完成（不包含图片等非文字媒体文件）
jquery事件委托
最新发布
12-29
事件委托是利用事件冒泡原理来实现的一种机制，可以通过给父元素添加事件处理程序来管理其子元素的事件。在jQuery中，可以使用`on()`方法来实现事件委托。 下面是一个示例，演示如何使用jQuery事件委托： ```javascript // HTML结构 <div id="parent"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> // jQuery事件委托 $("#parent").on("click", "li", function() { console.log($(this).text()); }); ``` 在上面的示例中，我们给父元素`#parent`添加了一个点击事件处理程序，并指定了子元素`li`作为事件的目标元素。当点击子元素`li`时，事件会冒泡到父元素`#parent`，然后触发事件处理程序，并输出被点击的子元素的文本内容。 通过使用事件委托，我们可以减少事件处理程序的数量，提高性能，并且可以动态地添加或删除子元素而不需要重新绑定事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值