第四章 jQuery中的事件
1.加载DOM
jQuery中，在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，此时可能元素的关联文件未下载完。
jQuery中的 load()方法，会在元素的onload事件中绑定一个处理函数。比如$(window).load(function(){...}),等价于JavaScript中的window.onload=function(){...}，该方法需要等网页所有元素都加载完（包括管理文件）。
2.事件绑定
在文档装载完之后，可以为元素绑定事件来完成一些操作。可以使用bind()方法来对匹配元素进行特定的事件绑定。
语法： bind(type,[data],fn);
<!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="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<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">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
<!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="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<script type="text/javascript">
$(function(){
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
});
$("#panel h5.head").bind("mouseout",function(){
$(this).next().hide();
})
})
</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>
3.合成事件
jQuery中有2个合成事件，hover()方法与toggle()方法。
hover() 语法：hover(enter,leave); 用来模拟光标悬停事件。
<!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="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<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">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
toggle()语法：toggle(fn1,fn2,...fnN); 用来模拟鼠标连续单击事件。
<!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="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<script type="text/javascript"> $(function(){
$("#panel h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
})
}) /*$(function(){
$("#panel h5.head").click(function(){
$(this).next().toggle();
})
})*/ </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>
4.事件冒泡
意思就是说，页面上有多个元素响应同一个事件。事件会按照DOM的层次结构像水泡一样不断往上至顶。
<!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>4-4-1</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-1.3.1.js" type="text/javascript"></script>
<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>
</html>
停止冒泡
<!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>Panel</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-1.3.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);
event.stopPropagation(); // 阻止事件冒泡
});
// 为div元素绑定click事件
$('#content').bind("click", function (event) {
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 为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 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>4-4-4</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-1.3.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);
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>
</html>
阻止默认行为
<!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="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#sub").bind("click", function (event) {
var username = $("#username").val(); //获取元素的值
if (username == "") { //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
event.preventDefault(); //阻止默认行为 ( 表单提交 )
}
})
})
</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>
</html>
<!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="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#sub").bind("click", function (event) {
var username = $("#username").val(); //获取元素的值
if (username == "") { //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
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>
</html>
5.事件对象的属性
jQuery对事件对象常用的属性进行了封装。
(1)event.type 可以获取事件的类型
<!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" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function () {
$("a").click(function (event) {
alert(event.type); //获取事件类型
return false; //阻止链接跳转
});
})
</script>
</head>
<body>
<a href='http://google.com'>click me .</a>
</body>
</html>
(2)event.target 可以获取出发事件的元素
<!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" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function () {
$("a[href=http://google.com]").click(function (event) {
alert(event.target.href); //获取触发事件的<a>元素的href属性值
return false; //阻止链接跳转
});
})
</script>
</head>
<body>
<a href='http://google.com'>click me .</a>
</body>
</html>
(3)event.pageX和event.pageY 可以获取光标相对于页面的x坐标与y坐标。
<!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" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function () {
$("a").click(function (event) {
alert("Current mouse position: " + event.pageX + ", " + event.pageY); //获取鼠标当前相对于页面的坐标
return false; //阻止链接跳转
});
})
</script>
</head>
<body>
<a href='http://google.com'>click me .</a>
</body>
</html>
(4)event.which 可以在鼠标单击事件中获取鼠标的左中右键，也可以获取键盘键。
<!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" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function(){
$("a").mousedown(function(e){
alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
return false;//阻止链接跳转
})
})
</script>
</head>
<body>
<a href='http://google.com'>click me .</a>
</body>
</html>
<!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" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function () {
$("input").keyup(function (e) {
alert(e.which);
})
})
</script>
</head>
<body>
<input />
</body>
</html>
6.移除事件
unbind([type],[data])方法用来移除事件。
<!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>4-6-2</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-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').bind("click", function () {
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", function () {
$('#test').append("<p>我的绑定函数2</p>");
}).bind("click", function () {
$('#test').append("<p>我的绑定函数3</p>");
});
$('#delAll').click(function () {
$('#btn').unbind("click");
});
})
</script>
</head>
<body>
<button id="btn">
点击我</button>
<div id="test">
</div>
<button id="delAll">
删除所有事件</button>
</body>
</html>
<!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>Panel</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-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').bind("click", myFun1 = function () {
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", myFun2 = function () {
$('#test').append("<p>我的绑定函数2</p>");
}).bind("click", myFun3 = function () {
$('#test').append("<p>我的绑定函数3</p>");
});
$('#delTwo').click(function () {
$('#btn').unbind("click", myFun2);
});
})
</script>
</head>
<body>
<button id="btn">
点击我</button>
<div id="test">
</div>
<button id="delTwo">
删除第二个事件</button>
</body>
</html>
one(type,[data],fn)方法可以为元素绑定处理函数，当处理函数触发一次后立即删除。
<!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>4-6-4</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-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').one("click", function () {
$('#test').append("<p>我的绑定函数1</p>");
}).one("click", function () {
$('#test').append("<p>我的绑定函数2</p>");
}).one("click", function () {
$('#test').append("<p>我的绑定函数3</p>");
});
})
</script>
</head>
<body>
<button id="btn">
点击我</button>
<div id="test">
</div>
</body>
</html>
7.模拟操作
jQuery中可以使用trigger()方法完成模拟操作。
<!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>
<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-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').bind("click", function () {
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", function () {
$('#test').append("<p>我的绑定函数2</p>");
}).bind("click", function () {
$('#test').append("<p>我的绑定函数3</p>");
});
$('#btn').trigger("click");
})
</script>
</head>
<body>
<button id="btn">
点击我</button>
<div id="test">
</div>
</body>
</html>
<!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>
<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-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').bind("myClick", function (event, message1, message2) {
$('#test').append("<p>" + message1 + message2 + "</p>");
});
$('#btn').click(function () {
$(this).trigger("myClick", ["我的自定义", "事件"]);
}).trigger("myClick", ["我的自定义", "事件"]);
})
</script>
</head>
<body>
<button id="btn">
点击我</button>
<div id="test">
</div>
</body>
</html>
PS：参考文献《锋利的jQuery》
第四章 jQuery中的事件的更多相关文章
- 第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
- JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
- 第4章 jQuery中的事件和动画
4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...
- 第3章 jquery中的事件和动画
一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...
- 四、jquery中的事件与应用
当用户浏览页面时,浏览器会对页面代码进行解释或编译--这个过程实质上是通过时间来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程.时间无论在页面元素本身还是在元素 ...
- 第四篇 jQuery中的事件与应用
4.1 事件中的冒泡现象,ready()方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- 第七章 jQuery中的事件与动画
事件的分类 基础事件: 鼠标事件 键盘事件 window事件 表单事件 复合事件: 鼠标光标悬停 鼠标连续点击 基础事件: 实例: mouseenter()和mouseover()用法的区别: mou ...
- jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- jQuery 中的事件绑定
一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...
随机推荐
- HW7.3
public class Solution { public static void main(String[] args) { char[][] answers = { {'A', 'B', 'A' ...
- SGU-495 Kids and Prizes 概率DP
题目链接:http://acm.sgu.ru/problem.php?contest=0&problem=495 题意:有n个盒子,每个盒子里面放了一个奖品,m个人轮流去选择盒子,如果盒子里面 ...
- HDU 3436--Queue-jumpers （树状数组 or Splay Tree）
树状数组这个真心想了好久,还是没想出来 %%% www.cppblog.com/Yuan/archive/2010/08/18/123871.html 树状数组求前缀和大于等于k的最大值,第一次看到这 ...
- Java HashMap实例源码分析
引言 HashMap在键值对存储中被经常使用,那么它到底是如何实现键值存储的呢? 一 Entry Entry是Map接口中的一个内部接口,它是实现键值对存储关键.在HashMap中,有Entry的实现 ...
- Java Collections Framework
集合OR 容器 通常我们会用数组去保存一些基本数据类型,数组是编译器支持的类型,但是数组的一个明显缺点就是具有固定尺寸,而在一般情况下,只有在程序运行的时候,我们才能知道要保存的具体数目. Java类 ...
- OWIN学习
在微软.net的dll中 有Microsoft.Owin Microsoft.Owin.Security, Microsoft.Owin.Security.Cookies, Microsoft.Owi ...
- 按要求编写Java程序： （1）编写一个接口：InterfaceA，只含有一个方法int method(int n)； （2）编写一个类：ClassA来实现接口InterfaceA，实现int method(int n)接口方 法时，要求计算1到n的和； （3）编写另一个类：ClassB来实现接口InterfaceA，实现int method(int n)接口 方法时，要求计算n的阶乘（n!）；
package com.homework2; public class ClassA implements InterfaceA { @Override public int method(int n ...
- mybatis-generator-core自动生成do、mapping、dao 代码
使用mybatis配置映射文件,有点麻烦,容易出错,可以使用jar工具自动生成代码,即高效又方便 一.下载两个jar,并放置在G:\tool\maven\generator目录下(自己定义) myba ...
- Android大图片裁剪终极解决方案 原理分析
约几个月前,我正为公司的APP在Android手机上实现拍照截图而烦恼不已. 上网搜索,确实有不少的例子,大多都是抄来抄去,而且水平多半处于demo的样子,可以用来讲解知识点,但是一碰到实际项目,就漏 ...
- JAVA实现的异步redisclient
再使用redis的过程中,发现使用缓存尽管好,可是有些地方还是比較难权衡,缓存对象大了,存储对象时的序列化工作非常繁重,消耗大量cpu:那么切分成非常小的部分吧,存取的次数变多了,redisclien ...