第四章 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 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...
随机推荐
- Docker系列(九)Kubernetes安装
环境: A.B两天机器A机器IP:192.169.0.104,B机器IP:192.168.0.102,其中A为Master节点,B为Slave节点 操作系统:Centos7 Master与Slave节 ...
- SQL Server 用表中已有数据造数据
从表中选择数据再插入到表中(select XXX into 与insert into XXX select的结合) 在做性能测试时需要大量的业务数据.完全从画面造数据比较费时间,使用SQL文批量插入数 ...
- Java网络编程(URL&URLConnection)
package cn.itcast.net.p2.ie_server; import java.io.IOException; import java.io.InputStream; import j ...
- Egret的第一个2048游戏
http://bbs.egret-labs.org/thread-242-1-1.html 对于AS3的开发者来说,可以直接过渡到的HTML5框架就是Egret了,基本上是了解了TypeSprite的 ...
- eclipse插件开发(一)
eclipse本身是一个开源平台, 给用户提供了很多扩展点.我们完全可以开发属于自己的一套插件,安装在eclipse插件目录下,即可使用我们的插件. 下面说下eclipse插件的快速开发. 1.在ec ...
- Postfix配置Q&A
原文地址:http://space.doit.com.cn/51460/viewspace-4943.html 在配置Postfix中遇到的一些问题及相关的解决方法,希望在遇到相同的问题时能起参考的作 ...
- 2014 ACM/ICPC 鞍山赛区现场赛 D&I 解题报告
鞍山现场赛结束了呢-- 我们出的是D+E+I三道题-- 吾辈AC掉的是D和I两道,趁着还记得.先在这里写一写我写的两道水题D&I的解题报告吧^_^. D题的意思呢是说星云内有一堆排成一条直线的 ...
- 用Bootstrap 写了个站点
近期发现vdceye的站点有些丑陋,就找了一个bootstrap工具,又一次把站点写了一遍 这个工具果然好用 http://vdceye.com/
- 【转】C++对象内存分配问题
原文:http://blog.csdn.net/c504665913/article/details/7797859 如果一个人自称为程序高手,却对内存一无所知,那么我可以告诉你,他一定在吹牛.用C或 ...
- Tomcat 配置 Probe 监控
转至:http://9771104.blog.163.com/blog/static/19446622009811112836524/ 手上接触Tomcat的项目越来越多,虽说tomcat的manag ...