jQuery之加载和绑定事件

幼稚园「先生」

于 2023-06-09 18:19:05 发布

阅读量328

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_63040021/article/details/131132940

版权

ready加载事件

ready加载事件类似 onLoad()事件
预加载事件
当页面的dom结构加载完毕后执行
类似于js中load事件
ready事件可以写多个
语法：
$(document).ready(function(){});
简写：
$(function(){});

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>ready加载事件</title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script>

			$(function(){
				console.log("ready加载事件...");
			});
			$(document).ready(function(){
				// 获取元素
				console.log($("#p1"));
			});

		</script>
	</head>
	<body>
		<p id="p1">文本</p>
	</body>
</html>

绑定事件

在jQuery 1.7版本之后，推荐使用on方法代替bind方法。因为on方法不仅包括了bind方法的功能，还支持动态绑定事件。

绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
绑定事件
bind绑定事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
语法：
$(selector).bind( eventType [, eventData], handler(eventObject));
     eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。
[, eventData]：传递的参数，格式：{名:值,名2:值2}
     handler(eventObject)：该事件触发执行的函数
绑定单个事件
bind绑定
$("元素").bind("事件类型",fucntion(){

});
直接绑定
$("元素").事件名(function(){

});
绑定多个事件
bind绑定
1. 同时为多个事件绑定同一个函数
指定元素.bind("事件类型1 事件类型1 ..",function(){

});
2. 为元素绑定多个事件，并设置对应的函数
指定元素.bind("事件类型",function(){

}).bind("事件类型",function(){

});
3. 为元素绑定多个事件，并设置对应的函数
指定元素.bind({
"事件类型":function(){

},
"事件类型":function(){

}
});
直接绑定
指定元素.事件名(function(){

}).事件名(function(){

});

</body>
</html>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>绑定事件</title>
	</head>
	<body>
		<h3>bind()方简单的绑定事件</h3>
		<!-- style="cursor:pointer" 设置鼠标图标 -->
		<div id="test" style="cursor:pointer">点击查看名言</div>
		<input id="btntest" type="button" value="点击就不可用了" />
		<hr >
		<button type="button" id="btn1">按钮1</button>
		<button type="button" id="btn2">按钮2</button>
		<button type="button" id="btn3">按钮3</button>
		<button type="button" id="btn4">按钮4</button>
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		/*
			 1.确定为哪些元素绑定事件
				获取元素
			 2.绑定什么事件（事件类型）
				第一个参数：事件的类型
			 3.相应事件触发的，执行的操作
				第二个参数：函数
		 * */
		/* 绑定单个事件 */
		$("#test").on("click",function(){
			console.log("世上无难事，只怕有心人");
		});
		// 原生js绑定事件
		/* document.getElementById("test").onclick = function(){
			console.log("test...");
		} */
		// 直接绑定
		$("#btntest").click(function(){
			// 禁用按钮
			console.log(this);
			$(this).prop("disabled",true);
		});

		/* 绑定多个事件 */
		// 1. 同时为多个事件绑定同一个函数
		$("#btn1").on("click mouseout",function(){
			console.log("按钮1...");
		});

		// 2. 为元素绑定多个事件，并设置对应的函数
		$("#btn2").bind("click",function(){
			console.log("按钮2被点击了...");
		}).bind("mouseout",function(){
			console.log("按钮2移开了...");
		});

		// 3. 为元素绑定多个事件，并设置对应的函数
		$("#btn3").on({
			"click":function(){
				console.log("按钮3被点击了...");
			},
			"mouseout":function(){
				console.log("按钮3移开了...");
			}
		});

		// 直接绑定
		$("#btn4").click(function(){
			console.log("按钮4被点击了...");
		}).mouseout(function(){
			console.log("按钮4移开了...");
		});


	</script>
</html>

幼稚园「先生」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之加载和绑定事件

在jQuery 1.7版本之后，推荐使用on方法代替bind方法。因为on方法不仅包括了bind方法的功能，还支持动态绑定事件。ready加载事件类似 onLoad()事件。当页面的dom结构加载完毕后执行。类似于js中load事件。ready事件可以写多个。
复制链接

扫一扫