jQuery练习

最新推荐文章于 2024-07-18 18:11:14 发布

zmhmz

最新推荐文章于 2024-07-18 18:11:14 发布

阅读量99

点赞数

本文链接：https://blog.csdn.net/zuebak/article/details/102938436

版权

模拟用户操作

例5-3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟用户操作</title>

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
    	$("input:button").bind("click",function(event,msg1,msg2){
      		  alert(msg1+msg2);  
    }).trigger("click",["欢迎访问","明日科技"]); 	
});
</script>
</head>

<body>
<input type="button" name="button" id="button" value="普通按钮" />
</body>
</html>

事件捕获与事件冒泡

例5-5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
		<style type="text/css">
		    .redBorder{
		    border:2px solid red;
		    }
			.test1{
			width:240px;
			height:150px;
			background-color:#3493B9;
			text-align:center;
			padding:3px 0px;
			}
			.test2{
			width:160px;
			height:100px;
			background-color:#47BAE7;
			text-align:center;
			line-height:20px;
			margin:10px auto;
			}
			span{
			width:100px;
			height:35px;
			background-color:#fff;
			padding:20px 20px 20px 20px;
			}
			body{
			font-size:12px;
			}
		</style>
		
		<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
			<script type="text/javascript">
			$(document).ready(function(){
			    $(".test1").mouseover(function(event){
				    $(".test1").addClass("redBorder");
			    });
			    $(".test1").mouseout(function(event){
				    $(".test1").removeClass("redBorder");
			    });
			    $(".test2").mouseover(function(event){
				    $(".test2").addClass("redBorder");
			    });
			    $(".test2").mouseout(function(event){
				    $(".test2").removeClass("redBorder");
			    });
			    $("span").mouseover(function(event){
				    $("span").addClass("redBorder");
			    });
			    $("span").mouseout(function(event){
				    $("span").removeClass("redBorder");
			    });
		
			});
			</script>
		</head>
	 

	<body>
	<div class="test1">
		<b>div元素</b>
		<p class="test2">
			<b>p元素</b> <br /><br />
			<span><b>span元素</b></span>
		</p>
	</div>
	</body>
</html>

zmhmz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery练习

模拟用户操作例5-3<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>模拟用户操作</title><script type="text/javascript" src="../js/jquery-1.11.1.min.js"...
复制链接

扫一扫