您的位置：首页 > Web前端 > JQuery

jQuery练习

2020-02-03 02:00 711 查看

模拟用户操作

例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>
  • 点赞
  • 收藏
  • 分享
  • 文章举报
站内首发文章 涡轮发动机i 发布了9 篇原创文章 · 获赞 0 · 访问量 448 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航