《jQuery权威指南》学习笔记之第4章 jQuery中的事件与应用
2013-07-10 22:12
369 查看
4.1 事件机制
事件触发后的两个阶段:捕获(capture)(不支持) 冒泡(bubbling):事件执行的顺序
示例4-1 事件中的冒泡现象
<html>
<head>
<title></title>
<style type="text/css">
body {
font-size: 13px;
}
.clsShow {
border: solid 1px #ccc;
background: #eee;
margin-top: 15px;
padding: 5px;
width: 220px;
line-height: 1.8em;
display: none;
}
.btn {
border: solid 1px #666;
padding: 2px;
width: 50px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
var intI = 0;
$("#btnShow").click(function(event) {
intI ++;
$(".clsShow")
.show()
.html("您好，欢迎来到jQuery的世界！")
.append("<div>执行次数<b>" + intI + "</b></div>");
//event.stopPropagation();
//return false;
});
});
</script>
</head>
<body>
<div>
<input id="btnShow" type="button" value="点击" class="btn" />
</div>
<div class="clsShow">
</div>
</body>
</html>
说明:阻止冒泡现象 stopPropagtion() 和return false
4.2 页面载入事件
4.2.1 ready()方法的工作原理
1. jQuery的ready()方法与javascript的OnLoad()方法的区别
ready() DOM模型加载完毕执行
OnLoad() 页面元素全部加载完毕后执行
2. ready()的工作原理
jQuery脚本加载到页面时,设置一个isReady标记,监听页面加载进度
遇到执行ready()方法时,isReady值是否被设置
未被设置,页面没有加载完成
未完成部分用一个数组缓存起来
当加载完成时,在将完成的部分通过缓存一一执行
4.2.2 ready()方法的几种相同写法
1. $(document.ready(function() {
//代码部分
)}
2. $(function() {
//代码部分
)}
3. jQuery(document.ready(function() {
//代码部分
)}
4. jQuery(function() {
//代码部分
)}
4.3 绑定事件
bind(type, [data], fn)
type:blur, focus, load, resize, scroll, unload, click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个选择元素的事件中的处理函数
示例4-2 用bind方法绑定事件
<html>
<head>
<title>bind方法绑定事件</title>
<style type="text/css">
.btn {
border: solid 1px #666;
padding: 2px;
width: 50px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btnBind").bind("click mouseout", function() {
$(this).attr("disabled", "disabled");
});
});
</script>
</head>
<body>
<input id="btnBind" type="button" value="button" class="btn" />
</body>
</html>示例4-3 用映射方式绑定不同的事件(4-3-1 [data]参数应用)
<html>
<head>
<title>映射方式绑定不同的事件</title>
<style type="text/css">
body {
font-size: 13px;
}
.clsTip {
border: solid 1px #ccc;
background-color: #eee;
margin-top: 15px;
padding: 5px;
width: 185px;
display: none;
}
.txt {
border: solid 1px #666;
padding: 3px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$(".txt").bind({ focus : function() {
$("#divTip")
.show()
.html("执行的是focus事件");
},
change:function() {
$("#divTip")
.show()
.html("执行的是change事件");
}
})
});
</script>
</head>
<body>
<div>姓名: <input type="text" class="txt" /></div>
<div id="divTip" class="clsTip"></div>
</body>
</html>
4.4 切换事件 hover()和toggle()
4.4.1 hover()方法
1. 鼠标悬浮与移出事件
$("a").hover(function() {
},function(){
});
$("a").mouseenter(function() {
});
$("a").mouseleave(function() {
});
2. 示例4-4 用hover方法绑定事件
<html>
<head>
<title>切换事件 hover</title>
<style type="text/css">
body {
font-size: 13px;
}
.clsFrame {
border: solid 1px #666;
width: 320;
}
.clsFrame .clsTitle {
background-color: #eee;
padding: 5px;
font-weight: bold;
}
.clsFrame .clsContent {
padding: 5px;
display: none;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$(".clsTitle").hover(function() {
$(".clsContent").show();
}, function() {
$(".clsContent").hide();
})
});
</script>
</head>
<body>
<div class="clsFrame">
<div class="clsTitle">jQuery简介</div>
<div class="clsContent"> jQuery是由美国人John Resig于2006年创建的一个开源项目，他的主旨是:以更少的代码，实现更多的功能(Write less, Do more).
</div>
</body>
</html>
4.4.2 toggle()方法: toggle(fn, fn2, [fn3, fn4,...])
示例4-5 用toggle方法绑定事件(出错)
<!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>切换事件toggle</title>
<script type="text/javascript"
src="script/jquery-1.4.2.js">
</script>
<style type="text/css">
body{font-size:13px}
img{border:solid 1px #ccc;padding:3px}
</style>
<script type="text/javascript">
$(function() {
$("img").toggle(function() {
$("img").attr("src", "Images/img05.jpg");
$("img").attr("title", this.src);
}, function() {
$("img").attr("src", "Images/img06.jpg");
$("img").attr("title", this.src);
}, function() {
$("img").attr("src", "Images/img07.jpg");
$("img").attr("title", this.src);
})
})
</script>
</head>
<body>
<img />
</body>
</html>
4.5 移除事件: unbind([type], [fn])
示例4-6 用unbind方法移除事件
<html>
<head>
<title>移除事件unbind</title>
<style type="text/css">
body {
font-size: 13px;
}
.btn {
border: solid 1px #666;
padding: 2px;
width: 80px;
}
div {
line-height: 1.8em;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
function onClick() {
$("#divTip").append("<div>按钮二的单击事件</div>");
}
$("input:eq(0)").bind("click", function() {
$("#divTip").append("<div>按钮一的单击事件</div>");
});
$("input:eq(1)").bind("click", onClick);
/*
$("input:eq(2)").bind("click", function() {
$("input").unbind();
});
*/
$("input:eq(2)").bind("click", function() {
$("input").unbind("click", onClick);
});
});
</script>
</head>
<body>
<div>
<input id="button1" type="button" value="按钮一" class="btn" />
<input id="button2" type="button" value="按钮二" class="btn" />
<input id="button3" type="button" value="删除事件" class="btn" />
</div>
<div id="divTip" style="padding-top:10px"></div>
</body>
</html>
4.6 其他事件:one()和trigger()
4.6.1 方法one()
示例4-7 用one方法绑定事件
<html>
<head>
<title>其他事件one</title>
<style type="text/css">
.btn {
border: solid 1px #666;
padding: 2px;
width: 160px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
function btn_click() {
this.value = "010-12345678";
}
$("input").one("click", btn_click);
});
</script>
</head>
<body>
<input id="button1" type="button" value="点击查看联系方式" class="btn" />
</body>
</html>
4.6.3 方法trigger()
示例4-8 用trigger()方法绑定事件(jQuery显示有问题)
<html>
<head>
<title>其他事件trigger</title>
<style type="text/css">
body {
font-size: 13px;
}
.txt {
border: solid 1px #666;
padding: 3px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
var oTxt = $("input");
oTxt.trigger("select");
oTxt.bind("btn_click", function() {
var txt = $(this).val();
$("#divTip").html(txt);
});
oTxt.trigger("btn_click");
});
</script>
</head>
<body>
姓名: <input id="text1" type="text" class="txt" value="陶国荣" ?
<div id="divTip" style="padding-top:5px"></div>
</body>
</html>
trigger()和triggerHandler()方法
4.7 表单应用
4.7.1 文本框的事件应用
示例4-9 文本框中的事件应用
<html>
<head>
<title>文本框中的事件应用</title>
<style type="text/css">
body {
font-size: 13px;
}
/*元素初始化状态样式*/
.divInit {
width: 390px;
height: 55px;
line-height: 55px;
padding-left: 20px;
}
.txtInit {
border: solid 1px #666;
background-image: url('images/bg_email_input.gif');
}
.spnInit {
width: 179px;
height: 40px;
line-height: 40px;
float: right;
margin-top: 8px;
padding-left: 10px;
background-repeat: no-repeat;
}
/*元素丢失焦点样式*/
.divBlur {
background-color: #FEEEC2;
}
.txtBlur {
border: solid 1px #666;
padding: 3px;
background-image: url('images/bg_email_input2.gif');
}
.spnBlur {
background-image: url('images/bg_email_wrong.gif');
}
.divFocus {
background-color: #EDFFD5;
}
.spnSucc {
background-image: url('images/pic_Email_ok.gif');
margin-top: 20px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#txtEmail").trigger("focus");
$("#txtEmail").focus(function() {
$(this).removeClass("txtBlur")
.addClass("txtInit");
$("#email").removeClass("divBlur")
.addClass("divFocus");
$("#spnTip").removeClass("spanBlur")
.removeClass("spnSucc")
.html("请输入您常用的邮箱地址！");
});
$("#txtEmail").blur(function() {
var vtxt = $("#txtEmail").val();
if(vtxt.length == 0) {
$(this).removeClass("txtInit")
.addClass("txtBlur");
$("#email").removeClass("divFocus")
.addClass("divBlur");
$("#spnTip").addClass("spnBlur")
.html("邮箱地址不能为空！");
} else {
if(!chkEmail(vtxt)) {
$(this).removeClass("txtInit")
.addClass("txtBlur");
$("#email").removeClass("divFocus")
.addClass("divBlur");
$("#spnTip").addClass("spnBlur")
.html("邮箱格式不对！");
} else {
$(this).removeClass("txtBlur")
.addClass("txtInit");
$("#email").removeClass("divFocus");
$("#spnTip").removeClass("spnBlur")
.addClass("spnSucc")
.html(" ");
}
}
});
function chkEmail(strEmail) {
if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(strEmail)) {
return false;
} else {
return true;
}
}
});
</script>
</head>
<body>
<form id="form1" action="#">
<div id="email" class="divInit">
邮箱:<span id="spnTip" class="spnInit"></span>
<input id="txtEmail" type="text" class="txtInit" />
</div>
</form>
</body>
</html>
4.7.2 下拉列表框中的事件应用
示例4-10 下拉列表框中的事件应用
<html>
<head>
<title>下拉列表框的事件应用</title>
<style type="text/css">
body {
font-size: 13px;
}
.clsInit {
width: 435px;
height: 35px;
line-height: 35px;
padding-left: 10px;
}
.clsTip {
padding-top: 5px;
background-color: #eee;
display: none;
}
.btn {
border: solid 1px #666;
padding: 2px;
width: 65px;
float: right;
margin-top: 6px;
margin-right: 6px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
function objInit(obj) {
return $(obj).html("<option>请选择</option>");
}
var arrData = {
厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2",
品牌1_2: "型号1_2_1,型号1_2_2" },
厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2",
品牌2_2: "型号2_2_1,型号2_2_2" },
厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2",
品牌3_2: "型号3_2_1,型号3_2_2" }
};
$.each(arrData, function(pF) {
$("#selF").append("<option>" + pF + "</option>");
});
$("#selF").change(function() {
objInit("#selT");
objInit("#selC");
$.each(arrData, function(pF, pS) {
if($("#selF option:selected").text() == pF) {
//
$.each(pS, function(pT, pC) {
$("#selT").append("<option>" + pT + "</option>");
});
$("#selT").change(function() {
objInit("#selC");
$.each(pS, function(pT,pC) {
if($("#selT option:selected").text() == pT) {
$.each(pC.split(","), function() {
$("#selC").append("<option>" + this + "</option>");
});
}
});
});
}
});
});
$("#button1").click(function() {
var strValue = "您选择的厂商是:";
strValue += $("#selF option:selected").text();
strValue += " 您选择的品牌:";
strValue += $("#selT option:selected").text();
strValue += " 您选择的型号:";
strValue += $("#selC option:selected").text();
$("#divTip")
.show()
.addClass("clsTip")
.html(strValue);
});
});
</script>
</head>
<body>
<div class="clsInit">
厂商: <select id="selF"><option>请选择</option></select>
品牌: <select id="selT"><option>请选择</option></select>
型号: <select id="selC"><option>请选择</option></select>
<input id="button1" type="button" value="查询" class="btn" />
</div>
<div class="clsInit" id="divTip"></div>
</body>
</html>
有关each()方法的使用:http://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.html
json数据中的-和_区别，坑爹呀，调了两天的程序
4.8 列表应用
示例4-11 列表中的导航菜单应用
<html>
<head>
<title>列表中的导航菜单应用</title>
<style type="text/css">
body {
font-size: 13px;
}
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.menu {
width: 190px;
border: solid 1px #E5D1A1;
background-color: #FFFDD2;
}
.optn {
width: 190px;
line-height: 28px;
border-top: dashed 1px #ccc;
}
.content {
padding-top: 10px;
clear: left;
}
a {
text-decoration: none;
color: #666;
padding: 10px;
}
.optnFocus {
background-color: #fff;
font-weight: bold;
}
div {
padding: 10px;
}
div img {
float: left;
padding-right: 6px;
}
span {
padding-top: 3px;
font-size: 14px;
font-weight: bold;
float: left;
}
.tip {
width: 190px;
border: solid 2px #ffa200;
position: absolute;
padding: 10px;
background-color: #fff;
display: none;
}
.tip li {
line-height: 23px;
}
#sort {
position: absolute;
display: none;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
var curY; //
var curH; //
var curW; //
var srtY; //
var srtX; //
var objL; //
/*
*
*
*/
function setInitValue(obj) {
curY = obj.offset().top;
curH = obj.height();
curW = obj.width();
srtY = curY + (curH / 2) + "px"; //
srtX = curW - 5 + "px"; //
}
//
$(".optn").mouseover(function() {
objL = $(this); //
setInitValue(objL); //
var allY = curY - curH + "px"; //
objL.addClass("optnFocus");
objL.next("ul").show()
//
.css({"top":allY, "left":curW});
$("#sort").show()
//
.css({"top":srtY, "left":srtX})
})
.mouseout(function() { //
//
$(this).removeClass("optnFocus");
$(this).next("ul").hide(); //
$("#sort").hide();
});
$(".tip").mousemove(function() {
$(this).show(); //
objL = $(this).prev("li"); //
setInitValue(objL); //
//
objL.addClass("optnFocus");
//
$("#sort").show().css({"top":srtY, "left":srtX});
})
.mouseout(function() {
$(this).hide();//
//
$(this).prev("li").removeClass("optnFocus");
$("#sort").hide(); //
});
});
</script>
</head>
<body>
<ul>
<li class="menu">
<div>
<img alt="" src="images/icon.gif" />
<span>电脑数码类产品</span>
</div>
<ul class="content">
<li class="optn"><a href="#">笔记本</a></li>
<ul class="tip">
<li><a href="#">笔记本1</a></li>
<li><a href="#">笔记本2</a></li>
<li><a href="#">笔记本3</a></li>
<li><a href="#">笔记本4</a></li>
<li><a href="#">笔记本5</a></li>
</ul>
<li class="optn"><a href="#">移动硬盘</a></li>
<ul class="tip">
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘2</a></li>
<li><a href="#">移动硬盘3</a></li>
<li><a href="#">移动硬盘4</a></li>
<li><a href="#">移动硬盘5</a></li>
</ul>
<li class="optn"><a href="#">电脑软件</a></li>
<ul class="tip">
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件2</a></li>
<li><a href="#">电脑软件3</a></li>
<li><a href="#">电脑软件4</a></li>
<li><a href="#">电脑软件5</a></li>
</ul>
<li class="optn"><a href="#">数码产品</a></li>
<ul class="tip">
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品2</a></li>
<li><a href="#">数码产品3</a></li>
<li><a href="#">数码产品4</a></li>
<li><a href="#">数码产品5</a></li>
</ul>
</ul>
<img id="sort" src="images/sort.gif" alt="" />
</li>
</ul>
</body>
</html>
4.9 网页选项卡的应用
示例4-12 网页选项卡的应用
<html>
<head>
<title>网页选项卡应用</title>
<style type="text/css">
body {
font-size: 13px;
}
ul, li {
margin: 0px;
padding: 0px;
list-style: none;
}
#menu li {
text-align: center;
float: left;
padding: 5px;
margin-right: 2px;
width: 50px;
cursor: pointer;
}
.tabFocus {
width: 50px;
font-weight: bold;
background-color: #f3f2e7;
border: solid 1px #666;
border-bottom: 0;
z-index: 100;
position: relative;
}
#content {
width: 260px;
height: 80px;
padding: 10px;
background-color: #f3f2e7;
clear:left;
border: solid 1px #666;
position:relative;
top: -1px;
}
#content li{
display: none;
}
#content li .conFocus {
display: block;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
//
$("#menu li").each(function(index) {
$(this).click(function() { //
//
$(".tabFocus").removeClass("tabFocus");
$(this).addClass("tabFocus"); //
//
$("#content li:eq("+index+")").show().siblings().hide();
});
});
});
</script>
</head>
<body>
<ul id="menu">
<li class="tabFocus">家居</li>
<li>电器</li>
<li>二手</li>
</ul>
<ul id="content">
<li class="conFocus">我是家居的内容!</li>
<li>欢迎您来到电器城</li>
<li>二手市场,产品丰富多彩!</li>
</ul>
</body>
</html>
4.10 综合案例分析---删除数据时的提示效果
4.10.1 需求分析
4.10.2 效果界面
4.10.3 功能实现
示例4-13 删除记录时的提示效果
<!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>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js">
</script>
<style type="text/css">
body{font-size:13px}
.divShow{line-height:32px;height:32px;background-color:#eee;width:280px;padding-left:10px}
.divShow span{padding-left:50px}
.dialog{width:360px;border:solid 5px #666;position:absolute;display:none;z-index:101}
.dialog .title{background-color:#fbaf15;padding:10px;color:#fff;font-weight:bold}
.dialog .title img{float:right}
.dialog .content{background-color:#fff;padding:25px;height:60px}
.dialog .content img{float:left}
.dialog .content span{float:left;padding-top:10px;padding-left:10px}
.dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee}
.mask {width:100%;height:100%; background-color:#000;position:absolute;
top:0px;left:0px;filter:alpha(opacity=30);display:none;z-index:100}
.btn {border:#666 1px solid;padding:2px;width:65px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</style>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() { //注册删除按钮点击事件
$(".mask").show(); //显示背景色
showDialog(); //设置提示对话框的Top与Left
$(".dialog").show(); //显示提示对话框
})
/*
*根据当前页面与滚动条位置，设置提示对话框的Top与Left
*/
function showDialog() {
var objW = $(window); //当前窗口
var objC = $(".dialog"); //对话框
var brsW = objW.width();
var brsH = objW.height();
var sclL = objW.scrollLeft();
var sclT = objW.scrollTop();
var curW = objC.width();
var curH = objC.height();
//计算对话框居中时的左边距
var left = sclL + (brsW - curW) / 2;
//计算对话框居中时的上边距
var top = sclT + (brsH - curH) / 2;
//设置对话框在页面中的位置
objC.css({ "left": left, "top": top });
}
$(window).resize(function() {//页面窗口大小改变事件
if (!$(".dialog").is(":visible")) {
return;
}
showDialog(); //设置提示对话框的Top与Left
});
$(".title img").click(function() { //注册关闭图片点击事件
$(".dialog").hide();
$(".mask").hide();
})
$("#Button3").click(function() {//注册取消按钮点击事件
$(".dialog").hide();
$(".mask").hide();
})
$("#Button2").click(function() {//注册确定按钮点击事件
$(".dialog").hide();
$(".mask").hide();
if ($("input:checked").length != 0) {//如果选择了删除行
$(".divShow").remove(); //删除某行数据
}
})
})
</script>
</head>
<body>
<div class="divShow">
<input id="Checkbox1" type="checkbox" />
<a href="#">这是一条可删除的记录</a>
<span>
<input id="Button1" type="button" value="删除" class="btn" />
</span>
</div>
<div class="mask"></div>
<div class="dialog">
<div class="title">
<img src="Images/close.gif" alt="点击可以关闭" />删除时提示
</div>
<div class="content">
<img src="Images/delete.jpg" alt="" /><span>您真的要删除该条记录吗？</span>
</div>
<div class="bottom">
<input id="Button2" type="button" value="确定" class="btn"/>
<input id="Button3" type="button" value="取消" class="btn"/>
</div>
</div>
</body>
</html>
4.10.4 代码分析
代码下载：点击打开链接
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 《jQuery权威指南》学习笔记之第4章 jQuery中的事件与应用
- jQuery学习笔记---阻止事件发生及事件发生顺序及表单提交示例应用
- jQuery事件绑定.on()简要概述及应用
- jQuery-文本框事件应用-判断邮箱地址
- jQuery事件绑定.on()简要概述及应用
- jquery文本框中的事件应用以输入邮箱为例
- jquery的事件与应用
- jQuery 学习笔记（三）——事件与应用
- JQuery入门――事件切换之toggle()方法应用介绍
- jQuery 选择器和事件应用
- jQuery 学习笔记（三）——事件与应用
- jQuery事件绑定.on()简要概述及应用
- jQuery focus和blur事件的应用详解
- jQuery中blur和focus事件的应用
- jQuery事件高级应用--EventListener/EventHandler（一）
- jQuery-事件和应用
- jQuery的动态绑定事件的应用
- 应用UpdatePanel后jQuery事件失效问题的解决方法
- jQuery 中 find()、trim()、replace()以load()函数和页面注册事件的应用
- 转:jQuery事件绑定.on()简要概述及应用