HTML中详述jQuery事件绑定方式

最新推荐文章于 2022-11-10 08:42:08 发布

zzu957

最新推荐文章于 2022-11-10 08:42:08 发布

阅读量455

点赞数

分类专栏： HTML学习文章标签： js javascript jquery

本文链接：https://blog.csdn.net/zzu957/article/details/107448055

版权

HTML学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

jQuery事件绑定方式

1、bind（）方法：
bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数，各参数含义如下：
type表示事件类型，多个事件类型使用空格分隔；
data表示传递给绑定函数的额外数据对象，函数中使用event.data接收（了解）；
fn表示绑定的函数；

unbind(type,[data|fn]])：删除每个匹配的元素上已绑定的事件，如果没有参数，则删除该元素上绑定的所有事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<div style="border: 1px solid red;">王佳琦</div>
		
		<script>
			var obj = {
				name: "",
				doHomework:function(){
					
				},
			};
			
			obj = {
				mouseover:function(){
					this.style.backgroundColor="red";
				},
				
				mouseout:function(){
					this.style.backgroundColor="green";
				}
			};
			
			$("div").bind(obj);
			
			//$("div").unbind("mouseout","mouseover");
		</script>
	</body>
</html>

结果显示：
鼠标未浮动时：
在这里插入图片描述
鼠标悬浮时：

鼠标移出后且不悬浮时：
在这里插入图片描述
2、hover
hover([over,]out)：over表示鼠标移到元素上触发的函数；out表示鼠标移出元素触发的函数。
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<div style="border: 1px solid red;">王佳琦</div>
		
		<script>
			//$("form").trigger("submit");
			$("div").hover(function(){
				this.style.backgroundColor="green";
			},
			function(){
				this.style.backgroundColor="red";
			});
		</script>
	</body>
</html>

结果显示为：
悬浮前：
在这里插入图片描述
悬浮时：

悬浮后且鼠标未悬浮时：
在这里插入图片描述

3、change（）
change([[data],fn]) ：文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发change 事件；
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<select id="provience">
			<option value="">——请选择——</option>
			<option value="北京市">北京市</option>
			<option value="河南省">河南省</option>
			<option value="河北省">河北省</option>
			<option value="西藏自治区">西藏自治区</option>
		</select>
		
		<script>
			$("select").change(function(){
				//console.log(this);
				/*var array = this.options;
				for(var i=0;i<array.length;i++){
					if (array[i].selected) {
						console.log(array[i].value);
					}
				}*/
				
				console.log($(this).val());
			})
			
		</script>
	</body>
</html>

结果显示为：
在这里插入图片描述

4、keydown（）
keydown([[data],fn]) ：当键盘或按钮被按下时触发keydown事件。
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<form action="http://www.baidu.com/s">
			<input name="wd" />
			<input type="button" value="百度" />
		</form>
		
		<script>
			$(widnow).keydown(function(e){
				if(e.keyCode==13){//设定按下回车键时提交，并跳转页面。
					$("form").trigger("submit");
				}
			})
		</script>
	</body>
</html>