Jquery之多重事件处理实例

最新推荐文章于 2022-09-05 11:46:25 发布

boonyaxnn

最新推荐文章于 2022-09-05 11:46:25 发布

阅读量281

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/boonyaxnn/article/details/52627910

版权

JavaScript 专栏收录该内容

90 篇文章 0 订阅

订阅专栏

Jquery的事件是从HTML继承和发展的，几乎所有的事件都可以用Jquery来调用和绑定（bind）。下面主要涉及到的事件是：click、dbclick、mousedown、hover、blur、focus等等。

HTML与Jquery代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟妞妞</title> 
<style type="text/css">
.a{
    height:50%;
    width:50%;
    color:#999; 
	background:#C09;
    float:left;
	}
.b{
	height:50%;
    width:50%;
    color:#0F0; 
	background:#00C;
	float:right;
    position:relative;
	}
.c{
	height:50%;
    width:50%;
    color:#FF0; 
	background:#F00;
	float:left;
	}		
.d{
	height:50%;
    width:50%;
    color:#60C; 
	background:#FC9;
	float:right;
    position:relative;
	}
.e{ 
    height:50%;
    width:100%;
    color:#FFF; 
	background:#000; 
	vertical-align:middle;
	}	
</style>
<script src="../js/jquery-1.7.min.js">
</script>
<script type="text/jscript">
$(document).ready(function(){
	
	 $("div.a p").click(function(){
		 $(this).hide();
	 });	
		  
	 $("div.b p").dblclick(function(){
		 $(this).hide();
	 });
		 
	 $("div.c p").mousedown(function(){
		alert("鼠标在该段落上落下!");
	 });
		
	 $("div.d p").hover(function(){
		alert("欢迎进入该段落！");
		},
		function(){
			alert("您已离开当前段落!");
	});
		
	 $("div.e p").focus(function(){
	  $(this).css("background-color:red");
	   });
	   
	  $("div.e p").blur(function(){
		  $(this).css("background-color:red"); 
		});	
});
</script>
</head>
<body>
    <div id="header1" class="header1" style="text-height:50%; width:100%">
        <div id="a" class="a">
          <p>如果你点我，我就会消失.</p>
          <p>点我消失!</p>
          <p>点我也消失!</p>
        </div>
        <div id="b" class="b">
          <p>不要双击我，我会消失的。</p>
          <p>都说了不要双击我了啦.</p>
          <p>你再双击，我揍你.</p>
        </div>
    </div>
    <div id="header2" class="header2" style="text-height:50%; width:100%">
        <div id="c" class="c">
          <p>我是小妞妞，</p> 
          <p>我一直很乖.</p>
          <p>妞妞爱哥哥!</p>
        </div>
        <div id="d" class="d">
          <p>我是小妞妞，</p> 
          <p>我一直很乖乖.</p>
          <p>妞妞爱哥哥!</p>
        </div>
    </div>
    <div id="header3" class="header3" style="text-height:50%; width:100%;">
        <div id="e" class="e">
          <p>人家喜欢玩萌萌消，</p>
          <p>哥哥想让我学习，</p>
          <p>所以我就不玩了!</p>
        </div>
    </div>
</body>
</html>

效果展示图

点击后：

boonyaxnn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery之多重事件处理实例

Jquery的事件是从HTML继承和发展的，几乎所有的事件都可以用Jquery来调用和绑定（bind）。下面主要涉及到的事件是：click、dbclick、mousedown、hover、blur、focus等等。HTML与Jquery代码菜鸟妞妞 .a{ height:50%; width:50%; color:#999; background:
复制链接

扫一扫