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中的事件的更多相关文章

  1. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  2. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  3. 第4章 jQuery中的事件和动画

    4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...

  4. 第3章 jquery中的事件和动画

    一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...

  5. 四、jquery中的事件与应用

    当用户浏览页面时,浏览器会对页面代码进行解释或编译--这个过程实质上是通过时间来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程.时间无论在页面元素本身还是在元素 ...

  6. 第四篇 jQuery中的事件与应用

    4.1 事件中的冒泡现象,ready()方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  7. 第七章 jQuery中的事件与动画

    事件的分类 基础事件: 鼠标事件 键盘事件 window事件 表单事件 复合事件: 鼠标光标悬停 鼠标连续点击 基础事件: 实例: mouseenter()和mouseover()用法的区别: mou ...

  8. jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  9. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

随机推荐

  1. Ngrok,一款可以帮助你展示网站和联网开发的工具

      使用Ngrok的目的就是为了可以让别人通过网络访问到自己本机上的项目 下面是一个简单的使用教程,详细的查看官网英文文档. 第一步: 登录官网:https://ngrok.com/   注册或者登录 ...

  2. hdoj 1213 How Many Tables

    How Many Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  3. ELK beats通用配置说明(12th)

    Beats配置文件是以YAML语法,该文件包含用于所有的beats的通用配置选项,以及其特点的选项.下面说说通用的配置,特定的配置要看各自beat文档. 通用的配置如下几部分: Shipper Out ...

  4. 按要求编写一个Java应用程序: (1)定义一个类,描述一个矩形,包含有长、宽两种属性,和计算面积方法。 (2)编写一个类,继承自矩形类,同时该类描述长方体,具有长、宽、高属性, 和计算体积的方法。 (3)编写一个测试类,对以上两个类进行测试,创建一个长方体,定义其长、 宽、高,输出其底面积和体积。

    package jvxing; public class Jvxing { //成员变量 private double width; private double chang; public doub ...

  5. Css3 display用法

    display 属性规定元素应该生成的框的类型. display:none   此元素不会被显示 display:block   此元素将显示为块级元素,此元素前后会带有换行符 display:inl ...

  6. Css基础-id选择器

    id 选择器以#来定义 <p id="pid">Hello css</p> #pid { color:red; } <div id="div ...

  7. C#通过OLEDB导出大数据到Excel

    C#导出数据到Excel,基本有两种方法,一种方法是通过Microsoft.Office.Interop.Excel.Application,一行一列的写入Excel中:另一种方法是通过OLEDB,利 ...

  8. 【美妙的Python之中的一个】Python简单介绍及环境搭建

    美妙的Python之Python简单介绍及安装         简而言之: Python 是能你无限惊喜的语言,与众不同.             1.Python:                  ...

  9. 【M19】了解临时对象的来源

    1.首先,确认什么是临时对象.在swap方法中,建立一个对象temp,程序员往往把temp称为临时对象.实际上,temp是个局部对象.C++中所谓的临时对象是不可见的,产生一个non-heap对象,并 ...

  10. 从零开始学android开发-sqlitepro安装