jquery事件

最新推荐文章于 2024-07-25 09:24:40 发布

挥发的石灰

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量427

点赞数 9

分类专栏： HTML 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/SJH184554558/article/details/135728937

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

🌸页面载入ready

🌸鼠标事件

🌹点击事件

💐按下抬起变色

🌹悬浮事件

🌹移动事件

🌸编辑

🌸键盘事件

🌹keypress

🌹keydown

🌸焦点事件

🌹focusin-focusout

🌹focus-blur

页面载入ready

通过ready事件可以让页面HTML执行结束后再执行jquery。

ready事件可以绑定在某个元素上。使用ready事件可以极大地提高web应用程序的响应速度，因为它允许在DOM载入就绪后立即调用所绑定的函数。

我们可以将jquery放在HTML代码下方，也可以使用ready事件进行处理。

鼠标事件

点击事件

单击事件和双击事件在使用方法上没有区别，具体选择则是根据页面的需求，所以这里以单击事件举例说明。

<body>
		<button>点击变色</button>
		<div></div>
		<script>
			var arrColor = ["red","orange","blue","pink"]
			$("button").click(function(){
				var num = parseInt( Math.random()*4);
				$("div").css("background-color",arrColor[num]);
			})
		</script>
</body>

按下抬起变色

<body>
		<button>点击变色</button>
		<div></div>
		<script>
			// 按下变成橘色,抬起又恢复原来颜色
			$("button").mousedown(function(){
				$("div").css("background-color","orange");
			})
			$("button").mouseup(function(){
				$("div").css("background-color","aqua");
			})
			
		</script>
</body>

悬浮事件

<body>
		<img src="img/Miss.jpg" />
		<script>
			//切换图片写法一
			$("img").mouseenter(function(){
				$("img").prop("src","img/tangsan.png");
			})
			$("img").mouseleave(function(){
				$("img").prop("src","img/Miss.jpg");
			})
			//切换图片写法二
			/* $("img").mouseover(function(){
				$("img").prop("src","img/tangsan.png");
			})
			$("img").mouseout(function(){
				$("img").prop("src","img/Miss.jpg");
			}) */
		</script>
</body>

移动事件

<body>
		<div>
			
		</div>
		<script>
		
			$(document).mousemove(function(e){
				$("div").html(e.pageX+"-"+e.pageY);
			})
		</script>
</body>

键盘事件

keypress

keydown

焦点事件

focusin-focusout

<body>
		<div>
			<input type="text" >
		</div>
		
		<script>
			$("div").focusin(function(){
				console.log("获取焦点")
			})
			$("div").focusout(function(){
				console.log("失去焦点")
			})
		</script>
</body>

focus-blur

<body>
		<div>
			<input type="text" >
		</div>
		
		<script>
			$("input").focus(function(){
				console.log("获取焦点")
			})
			$("input").blur(function(){
				console.log("失去焦点")
			})
		</script>
</body>