JQ之小白计划五（事件的举例）

最新推荐文章于 2020-09-06 23:59:29 发布

___Alive___

最新推荐文章于 2020-09-06 23:59:29 发布

阅读量225

点赞数 1

分类专栏： JQ jQuery之小白计划

本文链接：https://blog.csdn.net/YU_M_K/article/details/83447335

版权

JQ 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

jQuery之小白计划

11 篇文章 1 订阅

订阅专栏

1：绑定事件

1.1点击事件

<script type="text/javascript">
$(function(){
        $("#panel h5.head").bind("click",function(){
	    var $content = $(this).next();
	    if($content.is(":visible")){//判断是否不可见
			$content.hide();//隐藏
		}else{
			$content.show();//展示
		}
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">我是标题</h5>
	<div class="content">
		 我是内容 我是内容 我是内容 我是内容  
		 我是内容 我是内容 我是内容 我是内容
	</div>
</div>
</body>

1.2 鼠标事件

<script type="text/javascript">
$(function(){
        $("#panel h5.head").bind("mouseover",function(){//鼠标滑入
	     $(this).next().show();
	}).bind("mouseout",function(){//鼠标滑出
	     $(this).next().hide();
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">我是标题</h5>
	<div class="content">
		 我是内容 我是内容 我是内容 我是内容  
		 我是内容 我是内容 我是内容 我是内容
	</div>
</div>
</body>

1.3事件简写

<script type="text/javascript">
$(function(){
    $("#panel h5.head").mouseover(function(){
	    $(this).next().show();
	}).mouseout(function(){
	    $(this).next().hide();
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">我是标题</h5>
	<div class="content">
		 我是内容 我是内容 我是内容 我是内容  
		 我是内容 我是内容 我是内容 我是内容
	</div>
</div>
</body>

简单补充：focus() 当元素获得焦点时，发生 focus 事件。 blur() 当元素失去焦点时，发生 blur 事件。

2：合成事件

2.1合成事件hover

<script type="text/javascript">
$(function(){
    $("#panel h5.head").hover(function(){//鼠标移入移出
	    $(this).next().show();
	},function(){
	    $(this).next().hide();   
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">我是标题</h5>
	<div class="content">
		 我是内容 我是内容 我是内容 我是内容  
		 我是内容 我是内容 我是内容 我是内容
	</div>
</div>

2.2合成事件toggle（复制可看效果）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>合成事件</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<style type="text/css">
	*{margin:0;padding:0;}	
	 body { font-size: 13px; line-height: 130%; padding: 60px }
	 #panel { width: 300px; border: 1px solid #0050D0 }
	.head { height:24px;line-height:24px;text-indent:10px;background: #F296B2; cursor: pointer;width:100%; }
	.content { padding: 10px; text-indent:24px; border-top: 1px solid #red;display:block;display:none; }
	.highlight{ background:#F7C942; }//添加或者删除的样式
</style>

<script type="text/javascript">
$(function(){
        $("#panel h5.head").toggle(function(){
			$(this).addClass("highlight");
			$(this).next().show();
	},function(){
			$(this).removeClass("highlight");
			$(this).next().hide();
	});
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">我是标题</h5>
	<div class="content">
		 我是内容 我是内容 我是内容 我是内容  
		 我是内容 我是内容 我是内容 我是内容
	</div>
</div>
</body>
</html>

2.3效果图：

3：事件冒泡和默认行为

在DOM中默认情况下，事件是会冒泡的，即同样的事件会沿着DOM树逐级触发。

如下：点击“内层span元素”会触发外层和body的click事件

<script type="text/javascript">
$(function(){
	// 为span元素绑定click事件
	$('span').bind("click",function(){
		var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
	});
	// 为div元素绑定click事件
	$('#content').bind("click",function(){
	    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
		$('#msg').html(txt);
	});
	// 为body元素绑定click事件
	$("body").bind("click",function(){
		var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
		$('#msg').html(txt);
	});
})
</script>
</head>
<body>
<div id="content">
	外层div元素
	<span>内层span元素</span>
	外层div元素
</div>

<div id="msg"></div>
</body>

有时这是我们不希望的行为，可以在事件处理函数中阻止它。

// 事件处理函数的第一个参数是一个事件对象
$('#foo').click(function(event){
    event.stopPropagation();//  阻止事件冒泡
    // do sth.
});

浏览器对用户事件的默认行为是另一个需要考虑的事情，尤其是<a>标签的click事件。当用户点击<a>标签时，首先调用所有的事件处理函数，然后执行默认行为：页面跳转或者定位。同样地，我们可以阻止它：

$('a').click(function(event){
    event.preventDefault();//阻止默认行为 ( 表单提交 )
    // do sth.
});

在实践中，我们常常让事件处理函数return false来阻止冒泡和默认行为，可以认为return false做了三件事情：

stopPropagation()；
preventDefault()；
立即结束当前函数并返回。

$('a').click(function(event){
    // do sth.
    return false;
});

故上述例子可改为如下以停止冒泡：

<script type="text/javascript">
$(function(){
   	// 为span元素绑定click事件
	$('span').bind("click",function(event){
		var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
		return false;
	});
	// 为div元素绑定click事件
	$('#content').bind("click",function(event){
	    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
		$('#msg').html(txt);
		return false;
	});
	// 为body元素绑定click事件
	$("body").bind("click",function(){
		var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
		$('#msg').html(txt);
	});
})
</script>
</head>
<body>
<div id="content">
	外层div元素
	<span>内层span元素</span>
	外层div元素
</div>

<div id="msg"></div>
</body>

故表单可以改为如下以阻止默认行为（表单提交）

<script type="text/javascript">
$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val();  //获取元素的值
         if(username==""){     //判断值是否为空
	 $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
	     //event.preventDefault();  //阻止默认行为 ( 表单提交 )
             return false;
	 }
   })
})
</script>
</head>
<body>
<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

<div id="msg"></div>
</body>

4：其它

事件类型多个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
  <style>
  div{
	width:100px;
	height:50px;
  }
  .over{
      color:red;
      background:#888;
  } 
  </style>

  <script type="text/javascript">
  $(function(){
     $("div").bind("mouseover mouseout", function(){
        $(this).toggleClass("over");
     });
  })
  </script>
</head>
<body>
<div >滑入.</div>
</body>
</html>

参考:锋利的jquery和https://harttle.land/2015/06/26/jquery-event.html

___Alive___

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ之小白计划五（事件的举例）

1：绑定事件1.1点击事件&lt;script type="text/javascript"&gt;$(function(){ $("#panel h5.head").bind("click",function(){ var $content = $(this).next(); if($content.is(":visible")){//判断是否不可...
复制链接

扫一扫

专栏目录