《jQuery权威指南》学习笔记之第4章 jQuery中的事件与应用

最新推荐文章于 2020-07-30 17:36:33 发布

鱼欲遇雨

最新推荐文章于 2020-07-30 17:36:33 发布

阅读量1.8k

点赞数 1

分类专栏： jQuery 文章标签： jQuery 学习笔记

本文链接：https://blog.csdn.net/jinhongliang123/article/details/9295193

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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 代码分析