HTML——jQuery—事件

最新推荐文章于 2023-05-30 15:09:20 发布

Jhinhua

最新推荐文章于 2023-05-30 15:09:20 发布

阅读量96

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104955790

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
				background-color: red;
				margin-left: 100px;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script>
			/**
			 * JS获取元素节点的时候 动作写在head中 
			 * 必须把这个动作放在 文档加载完成的事件中才可以
			 * 否则 获取节点会失败
			 */
			window.onload = function(){
				console.log("页面加载完成")
			}
			
			// JQ
			$(document).ready(function(){
				console.log("JQ页面加载完成")
			})
			
			//简化
			$(function(){
				console.log("JQ简化页面加载完成")
			})
			
		</script>
		
	</head>
	<body>
		<img src="../img/pic15.jpg" />
		<br /><br />
		
		<button>this is a button</button>
		<br /><br />
		
		<button class="btn">one event</button>
		
		<div></div>
		
		<script>
			/**
			 * 事件的语法
			 * 	$(选择器).事件名(触发事件执行的函数)
			 */
			// 鼠标悬浮的事件 ： 包含两个函数  鼠标进入的时候执行的函数 鼠标离开的时候执行的函数  只给一个函数的话 两个鼠标的动作都会执行这个函数
			// $("img").hover(function(e){
			// 	console.log("鼠标悬浮 ------ 离开")
			// })
			
			$("img").hover(
				// 鼠标悬浮指定的动作
				function(e){
					$(this).css("border", "solid 2px red")
				},
				// 鼠标离开执行的动作
				function(e){
					$(this).css("border", "0")
				}
			)
			
			
			// 绑定事件 on  可以绑定多个事件
			$("button").on({
				"click": function(e){
					console.log("哎呀 我不知道被谁点了一下")
				},
				"mouseover":function(e){
					console.log("哎呀 有只小老鼠爬上来了")
				},
				"mouseleave":function(e){
					console.log("哎呀 小老鼠终于走了")
				}
			})
			
			// 移除事件  可以移除多个事件  每个事件之间使用空格隔开
			$("button").off("click mouseleave")
			
			
			// 一次性事件
			// $(".btn").click(function(){
			// 	console.log("我被点击了")
			// })
			$(".btn").one("click", function(e){
				console.log("我被点击了")
			})
			
			
			// 事件对象及其属性
			$("div").mousedown(function(e){
				//console.log(e)
				// 获取鼠标相对与浏览器客户区的间隙
				console.log("获取鼠标相对与浏览器客户区的间隙" + e.clientX + "-----" + e.clientY)
				
				// 标签相当于body的左边间隙和上边间隙
				console.log("标签相当于body的左边间隙和上边间隙" + this.offsetLeft + "-----" + this.offsetTop)
				
				// 获取鼠标相当于标签的位置 --- 要完成的需求
				console.log("获取鼠标相当于标签的位置" + (e.clientX - this.offsetLeft) + "----" +   (e.clientY - this.offsetTop))
			})
			
		</script>
	</body>
</html>

Jhinhua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML——jQuery—事件

事件 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } div{ width: 200px...
复制链接

扫一扫

专栏目录