导读
1.常用事件简介
2.绑定事件
3.hover&toggle
4.事件对象
常用事件简介
绑定事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绑定事件</title>
<style type="text/css">
table {
border: 0;
border-collapse: collapse;
}
td {
font: normal 12px/17px Arial;
padding: 2px;
width: 100px;
}
th {
font: bold 12px/17px Arial;
text-align: left;
padding: 4px;
border-bottom: 1px solid #333;
}
/* 偶数行样式*/
.even {
background: #FFF38F;
}
/* 奇数行样式*/
.odd {
background: #FFFFEE;
}
/* 选中行样式*/
.selected {
background: #FF6500;
color: #fff;
}
/*悬浮时样式*/
.over {
background: green;
}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//1.分别给奇数行,偶数行加样式
$("tbody tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
$("tbody tr:has([checked])").addClass("selected");
//bind:添加事件
$("tbody tr").bind("click",function(){
//如果之前没有没有加selected样式,则加
//如果之前已经加selected样式,则去掉
$(this).toggleClass("selected");
//如果有样式,则多选框选中,如果没有样式,多选框取消选中
var isSelected = $(this).hasClass("selected");
$(this).find("input").prop("checked",isSelected);
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input userId="${test.userId}" type="checkbox" name="choice" value="" checked/></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>赵六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
</body>
</html>
hover&toggle
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>hover$toggle</title>
<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: #96E555;
cursor: pointer;
width: 100%;
}
.content {
padding: 10px;
text-indent: 24px;
border-top: 1px solid #0050D0;
display: none;/*隐藏*/
}
</style>
<script src="../scripts/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//移入和移出事件都执行这个匿名函数
/*$(".head").bind("mouseenter mouseout",function(){
//显示和隐藏切换
$(".content").toggle();
});*/
//移入执行第一个函数,移出执行第二个函数
//如果需要获取事件相关的信息,可以在匿名函数中添加一个形参,表示事件
$(".head").hover(function(event){
$(".content").show();//显示
//alert(event.type);
},function(event){
$(".content").hide();//隐藏
//alert(event.type);
});
});
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig
创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
事件对象
阻止默认行为
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>阻止默认行为</title>
<script src="../scripts/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//提交时,如果用户名为空,则提示用户名不能为空,并且不提交
//如果用户名不为空,则提交
$("#sub").bind("click",function(event){
var username = $("#username").val();
if(username.trim()==""){
//提示用户名不能为空
$("#msg").html("<span>用户名不能为空</span>");
//阻止默认行为
//方式1:
//event.preventDefault();
//方式2:
return false;
}
});
});
</script>
</head>
<body>
<form action="http://www.harmonyWin.com">
用户名：<input type="text" id="username"/>
<br/>
<input type="submit" value="提交" id="sub"/>
</form>
<div id="msg"></div>
</body>
</html>
阻止事件冒泡
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件冒泡</title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px; }
#content { width: 220px; border: 1px solid #0050D0;background: #96E555 }
span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;}
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="../scripts/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
//阻止冒泡
//方式1:
//event.stopPropagation();
//方式2:
return false;
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation();
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>
</html>
解除绑定
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>解除绑定事件</title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px; }
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="../scripts/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#btn').bind("click",myfun1=function(){
$('#test').append("<p>我的绑定函数1-click</p>");
}).bind("mouseout",myfun2=function(){
$('#test').append("<p>我的绑定函数2-mouseout</p>");
}).bind("click",myfun3=function(){
$('#test').append("<p>我的绑定函数3-click</p>");
});
$("#del1").click(function(){
//移除所有事件
$("#btn").unbind();
});
$("#del2").click(function(){
//删除指定类型的事件
$("#btn").unbind("mouseout");
});
$("#del3").click(function(){
//删除指定类型的特定事件
$("#btn").unbind("click",myfun3);
});
})
</script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="del1">删除所有事件</button>
<button id="del2">删除mouseout事件</button>
<button id="del3">删除处理函数是myfun3的事件</button>
</body>
</html>
扫一扫
1768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
