jquery事件

最新推荐文章于 2024-03-20 08:53:45 发布

jeo_chow

最新推荐文章于 2024-03-20 08:53:45 发布

阅读量203

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/jeo_chow/article/details/52206174

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- 记得引入jquery-1.11.3.js文件到js目录下 -->
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <style type="text/css">
    	body{
    		font-family: "Microsoft YaHei"
    	}
    	.cGreen{color: #4CA902}
    	.cPink{color: #ED4A9F}
    	.cBlue{color: #0092E7}
    	.cCyan{color: #01A6A2}
    	.cYellow{color: #DCA112}
    	.cRed{color: #B7103B}
    	.cPurple{color: #792F7C}
    	.cBlack{color: #110F10}
    	.cOrange{color: #FF4500}
    	.cGray{color: #A9A9A9}
    	.hide{display: none;}
    	div {
    		width:100%;
    		text-align: center;
    	}
    	span {
    		border:solid 1px #A9A9A9;
    		padding:10px;
    		text-align: center;
    	}
    	.hoverCls{
    		color:#FF4500;
    		border:solid 1px #FF4500;
    	}
    </style>
    <script type="text/javascript">
    
    	$(document).ready(function(){
    		$("#btn1").click(function(){
    			// on()点击图片弹出信息
    			$("img:first").on("click",function(){
    				alert("点击图片！");
    			});
    		});
    		$("#btn2").click(function(){
    			//$("img:first").off();
    			$("img:first").off("click");  // 参数指定要取消的事件
    		});
    		$("#btn3").click(function(){
    			/* 直接对对象绑定事件（推荐）
    			$(document).mousemove(function(e){
   				    $("span:eq(1)").text(e.pageX + ", " + e.pageY);
   				});
    			*/
    			
    			// bind()绑定document的鼠标移动事件并显示鼠标相对位置
    			$(document).bind("mousemove",function(e){
    				 $("span:last").text(e.pageX + ", " + e.pageY);	
    			});
    		});
    		$("#btn4").click(function(){
    			$(document).unbind("mousemove");
    		});
    		$("#btn5").click(function(){
    			$("img:first").one("click",function(){
    				alert("one more time!");
    			});
    		});
    		
    		$("#btn6").click(function(){
    			// hover()实现 鼠标放上来图片不显示，鼠标移开图片再次显示
    			
    			$("span:first").hover(
    				function(){		// 鼠标悬浮span上
    					$("img:first").hide();
    					$(this).addClass("hoverCls");
    				},	
    				function(){		// 鼠标移开span
    					$("img:first").show();
    					$(this).removeClass("hoverCls");
    				}
    			);
    			
    		});
    		
    		$("#btn7").click(function(){
    			// 鼠标移动，获取坐标，作为img图片的位置！
    			$(document).mousemove(function(e){
    				$("img:first").offset({"left":e.pageX,"top":e.pageY});
    			})
    		});
    		
    		$("#btn8").click(function(){
    			// 给span添加事件
    			$("span:eq(0)").click(function(){
    				alert("点击Span");
    				return false;  // 防止事件冒泡！
    			});
    		});
    		
    		// 给div添加事件
    		$("div:eq(0)").click(function(){
    			alert("点击Div");
    		})
    		
    	});
    </script>
    
  </head>
  
  <body>
  	<div>
  		<br>
  		<span>鼠标放上来图片不显示，鼠标移开图片再次显示</span>
  		<br><br>
  		<img alt="itcast" src="logo.png">
  		<br><br>
  		鼠标的相对位置为：<span style="border:0px;"></span>
  	</div>
    <div style="clear:both;"></div>
    <br><br>
    <hr>
    <input type="button" id="btn1" value="on()点击图片弹出信息">
    <input type="button" id="btn2" value="off()取消图片的点击事件">
    <input type="button" id="btn3" value="bind()绑定document的鼠标移动事件并显示鼠标相对位置">
    <input type="button" id="btn4" value="unbind()取消bind绑定的事件">
    <input type="button" id="btn5" value="one()为图片绑定一个一次性的点击事件弹出信息">
    <input type="button" id="btn6" value="hover()实现 鼠标放上来图片不显示，鼠标移开图片再次显示">
    <input type="button" id="btn7" value="图片如影随形">
    <input type="button" id="btn8" value="事件冒泡，点击span后div也被触发点击">
  </body>
</html>