Web 前端学习之jQuery 事件操作

最新推荐文章于 2023-05-04 10:58:16 发布

Joker-Tong

最新推荐文章于 2023-05-04 10:58:16 发布

阅读量212

点赞数

分类专栏： # web开发学习文章标签： js javascript jquery

本文链接：https://blog.csdn.net/Weary_PJ/article/details/107782923

版权

web开发学习专栏收录该内容

31 篇文章 1 订阅

订阅专栏

Web 前端学习之jQuery 事件操作

1.文档的加载

jq与js页面初始函数的区别

$(function(){})
等价于
$(document).ready(function(){})

window.onload = function(){}

在这里插入图片描述

标签显示需要的内容只的是如img标签里面的src等需要解析,所以原生js的页面加载函数会比jq慢一点
在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	window.onload = function () {
		alert("原生js的页面加载完成之后--1")
	}
	window.onload = function () {
		alert("原生js的页面加载完成之后--2")
	}
	window.onload = function () {
		alert("原生js的页面加载完成之后--3")
	}
	$(function () {
		alert("jquery的页面加载完成 之后--1")
	});
	// jquery的页面加载完成 之后
	$(function () {
		alert("jquery的页面加载完成 之后--2")
	});
	$(function () {
		alert("jquery的页面加载完成 之后--3")
	});


</script>
</head>
<body>
	<button>我是按钮</button>
	
	<iframe src="https://www.baidu.com"></iframe>
	<img src="http://localhost:8080/1.jpg" alt=""/>
</body>
</html>

如上代码,可以看到执行的顺序如下
在这里插入图片描述
因为window.onload = function ()是赋值语句,所以前面两次都被覆盖了

2.事件绑定

在这里插入图片描述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		
			$(function(){
				//*1.通常绑定事件的方式
				//给元素绑定事件  
				//jquery对象.事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 })
				//绑定事件可以链式操作
				$(".head").click(function(){
					$(".content").toggle();
				}).mouseover(function(){
					$(".content").toggle();
				}); 
				
				//*2.jQuery提供的绑定方式：bind(type,[data],fn)函数把元素和事件绑定起来
				//type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法
				//bind(事件字符串,回调函数),后来添加的元素不会绑定事件
				//使用bind()绑定多个事件   type可以接受多个事件类型，使用空格分割多个事件
				/* $(".head").bind("click mouseover",function(){
					$(".content").toggle();
				}); */
			
				
				//3.one()只绑定一次,绑定的事件只会发生一次one(type,[data],fn)函数把元素和事件绑定起来
				//type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法
			/* 	$(".head").one("click mouseover",function(){
					$(".content").toggle();
				}); */

				//4.live方法会为现在及以后添加的元素都绑定上相应的事件
			/**	$(".head").live("click",function(){
					$(".content").toggle();
				});
				
				$("#panel").before("<h5 class='head'>什么是jQuery?</h5>");
			*/
			});
		
		</script>
	</head>
	<body>
		<div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
		</div>
	</body>
</html>

3.事件移除

unbind方法的应用

		<script type="text/javascript">
			$(function(){
				//给li绑定两种事件：单击和鼠标移入
				$("li").bind("click mouseenter" , function(){
					alert(this.innerHTML);
				});
				
				//点击第一个button，将#bj上的mouseenter事件移除
				//unbind()可以移除指定的事件，只需要传一个事件名作为参数
				//unbind(type,[data|fn]])
				//type事件类型  当传入type的时候会解除type事件
				//如果没有传入type值，会移除所有事件
				$("button:eq(0)").click(function(){
					$("li").unbind("click mouseenter");
				});
				
				//点击第二个button，将#rl上的所有事件移除
				$("button:eq(1)").click(function(){
					
				});
			});
		</script>

4.事件冒泡

在这里插入图片描述
简单的说

		<div id="content">
			外层div元素
			<span>内层span元素</span>
			外层div元素
		</div>

对于上述代码,如果为div设置了点击事件,为div中的span也设置了点击事件
那么在点击span的时候,div的事件也会生效,这就是冒泡
为了避免这种情况,可以在span的事件中加入 return false

		<script type="text/javascript">
			$(function(){
				
				//冒泡就是事件的向上传导，子元素的事件被触发，父元素的响应事件也会触发
				//解决冒泡问题：return false;
				
				//给span绑定一个单击响应函数
				$("span").click(function(){
					alert("我是span的单击响应函数");
					return false;
				});
				
				//给id为content的div绑定一个单击响应函数
				$("#content").click(function(){
					alert("我是div的单击响应函数");
					return false;
				});
				
				//给body绑定一个单击响应函数
				$("body").click(function(){
					//alert("我是body的单击响应函数");
				});
				
				//取消默认行为
				/* $("a").click(function(){
					return false;
				}) */
				
			})
		</script>

5.事件对象

在这里插入图片描述

案例图片跟随

实现目标如下
在这里插入图片描述
简单的分析后得知,需要下面几个事件

1.鼠标滑入
2.鼠标滑出
3.鼠标移动

代码实现如下,这里需要注意的点是在设置大图片坐标的时候需要稍微大一点,不然会影响鼠标的位置判定,导致闪屏的现象

<script type="text/javascript">
	$(function(){
		$("#small").bind("mouseover mouseout mousemove",function (event) {
			if (event.type == "mouseover") {
				$("#showBig").show();
			} else if (event.type == "mousemove") {
				console.log(event);
				$("#showBig").offset({
					left: event.pageX + 10,
					top: event.pageY + 10
				});
			} else if (event.type == "mouseout") {
				$("#showBig").hide();
			}
		});
	});
</script>

Joker-Tong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web 前端学习之jQuery 事件操作

Web 前端学习之jQuery 事件操作1.文档的加载jq与js页面初始函数的区别$(function(){})等价于$(document).ready(function(){})window.onload = function(){}标签显示需要的内容只的是如img标签里面的src等需要解析,所以原生js的页面加载函数会比jq慢一点<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w
复制链接

扫一扫