目录:
一、事件机制
二、页面载入事件
2.1、ready()方法的工作原理
2.2、ready()方法的几种相同写法
三、绑定事件
四、切换事件
4.1、hover()方法
4.2、toggle()方法
五、移除事件
六、其他事件
6.1、方法one()
6.2、方法trigger()
七、表单应用
7.1、文本框中的事件应用
7.2、下拉列表框中的事件应用
八、列表应用
九、网页选项卡的应用
十、综合案例分析——删除数据时的提示效果在项目中的应用
一、事件机制
众所周知,页面在加载时,会触发Load事件。当用户单击某个按钮时,触发该按钮的Click事件,通过种种事件实现各种功能或执行某项操作。事件在元素对象与功能代码中起着重要的桥梁作用。那么,事件被出发后是如何执行代码的呢?
严格来说,事件在触发后被分为两个阶段,一个是捕获(Capture),另一个则是冒泡(Bubbling);但有些遗憾的是,大多数浏览器并不是都支持捕获阶段,jQuery也不支持。因此在事件触发后,往往执行冒泡过程。所谓的冒泡其实质就是事件执行中的顺序。
二、页面载入事件
2.1、ready()方法的工作原理
jQuery中的页面载入事件ready()方法,类似于传统JavaScript中的OnLoad()方法,只不过在事件执行时间上有区别:OnLoad()方法的执行必须是页面中的全部元素完全加载到浏览器后才触发,在这种情况下,如果页面中的图片过多或图片过大,那么有可能要等OnLoad()方法执行完毕,用户才能进行其他的操作;如果使用jQuery中的ready()方法加载页面,则只要页面中的DOM模型加载完毕,就会触发ready()方法。因此,两者在事件的执行效果上ready()方法明显优于JavaScript中的OnLoad()方法。
我们剖析一下jQuery()中的ready()方法的工作原理:在jQuery脚本加载到页面时,会设置一个isReady的标记,用于监听页面加载的进度,当然遇到执行ready()方法时,通过查看isReady值是否被设置,如果未被设置,那么就说明页面并未加载完成,在此情况下,将未完成的部分用一个数组缓存起来,当全部加载完成后,再将未完成的部分通过缓存一一执行。
2.2、ready()方法的几种相同写法
写法一:
写法二:
- $(document).ready(function() {
- //代码部分
- })
写法三:
- $(function() {
- //代码部分
- })
写法四:
- jQuery(document).ready(function() {
- //代码部分
- })
其中写法二简单明了,使用较为广泛。
- jQuery(function() {
- //代码部分
- })
三、绑定事件
我们可以使用如下的代码绑定按钮的单击事件:
除了上述绑定事件的写法外,在jQuery中,还可以使用bind()方法进行事件的绑定。下面对该方法进行详细的介绍。
- $(function() {
- $("#btnShow").click(function() {
- //执行代码
- })
- })
bind()功能是为每个选择元素的事件绑定处理函数,其语法格式如下:
其中,参数type为一个或多个类型的字符串,如“click”或“change”,也可以自定义类型;可以被参数type调用的类型包括blur、focus、load、resize、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error。
- bind(type, [data], fn)
参数data是作为event.data属性值传递给事件对象的额外数据对象。
参数fn是绑定到每个选择元素的事件中的处理函数。
如果要在一个元素中绑定多个事件,可以将事件用空格隔开。
四、切换事件
在jQuery中,有两个方法用于事件的切换,一个是方法hover(),另一个是方法toggle()。所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换。如一个超链接标记<a>,若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发另一个事件,就可以调用jQuery中的hover()方法轻松实现。
4.1、hover()方法
调用jQuery中的hover()方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换,该方法在实际运用中,也可以通过jQuery中的事件mouseenter与mouseleave进行替换。
hover()功能是当鼠标移动到所选的元素上面时,执行指定的第一个函数;当鼠标移出这个元素时,执行指定的第二个函数,其语法格式如下:
参数over为鼠标移到元素时触发的函数,参数out为鼠标移出元素时触发的函数。
- hover(over, out)
示例 用hover方法绑定事件
- #========================================================================
- # FileName: demo12.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 14:04:39
- #========================================================================
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title>切换事件hover</title>
- <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript" charset="utf-8">
- $(function() {
- $("#title").hover(function(){
- $("#content").show();
- }, function(){
- $("#content").hide();
- })
- })
- </script>
- <style type="text/css">
- body { font-size:14px;}
- .title { background-color:#eee; border:solid 1px #6666; font-weight:bold; width:100px; padding:0px; margin:0px;}
- .content { border:solid 1px #666; width:100px; padding:0px; margin:0px;display:none;}
- </style>
- </head>
- <body>
- <div id="title" class="title">
- jQuery简介
- </div>
- <div id="content" class="content">
- jQuery是由美国人于2006年创建的一个开源项目,它的主旨是:以更少的代码,实现更多的功能(Write Less, Do More)。
- </div>
- </body>
- </html>
4.2、toggle()方法
在toggle()方法中,可以依次调用N个指定的函数,知道最后一个函数,然后重复对这些函数轮番调用。
toggle()方法的功能是每次单击后依次调用函数,“依次”说明该方法在调用函数时并未随机或指定调用,而是通过函数设置的前后顺序进行调用,其调用的语法格式如下:
其中参数fn, fn2, ..., fnN为单击时被依次调用的函数。
七、表单应用
toggle(fn, fn2, [fn3, fn4,...])7.1、文本框中的事件应用
文本框是表单中使用最为普遍的元素之一,因此,其前端用户页面的体验度显得十分重要。下面通过一个简单示例,介绍使用jQuery中的事件改变文本框的样式,以提高用户体验。
示例 文本框中的事件应用
示例效果如下:
- #========================================================================
- # FileName: demo16.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 15:17:12
- #========================================================================
- <!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 src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <style type="text/css">
- body{font-size:13px}
- /* 元素初始状态样式 */
- .divInit{width:390px;height:55px;line-height:55px;padding-left:20px}
- .txtInit{border:#666 1px solid;padding:3px;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:#666 1px solid;padding:3px;background-image:url('Images/bg_email_input2.gif')}
- .spnBlur{background-image:url('Images/bg_email_wrong.gif')}
- .divFocu{background-color:#EDFFD5}/* div获取焦点样式 */
- .spnSucc{background-image:url('Images/pic_Email_ok.gif');margin-top:20px}/* 验证成功时span样式 */
- </style>
- <script type="text/javascript">
- $(function() {
- $("#txtEmail").trigger("focus");//默认时文本框获取焦点
- $("#txtEmail").focus(function() {//文本框获取焦点事件
- $(this).removeClass("txtBlur").addClass("txtInit");
- $("#email").removeClass("divBlur").addClass("divFocu");
- $("#spnTip").removeClass("spnBlur")
- .removeClass("spnSucc").html("请输入您常用邮箱地址!");
- })
- $("#txtEmail").blur(function() {//文本框丢失焦点事件
- var vtxt = $("#txtEmail").val();
- if (vtxt.length == 0) {
- $(this).removeClass("txtInit").addClass("txtBlur");
- $("#email").removeClass("divFocu").addClass("divBlur");
- $("#spnTip").addClass("spnBlur").html("邮箱地址不能为空!");
- }
- else {
- if (!chkEmail(vtxt)) {//检测邮箱格式是否正确
- $(this).removeClass("txtInit").addClass("txtBlur");
- $("#email").removeClass("divFocu").addClass("divBlur");
- $("#spnTip").addClass("spnBlur").html("邮箱格式不正确!");
- }
- else {//如果正确
- $(this).removeClass("txtBlur").addClass("txtInit");
- $("#email").removeClass("divFocu");
- $("#spnTip").removeClass("spnBlur").addClass("spnSucc").html("");
- }
- }
- })
- /*
- *验证邮箱格式是否正确
- *参数strEmail,需要验证的邮箱
- */
- 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>
示例 用toggle方法绑定事件
- #========================================================================
- # FileName: demo13.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 14:07:49
- #========================================================================
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title>切换事件toggle</title>
- <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <style type="text/css">
- body { font-size:13px;}
- img { border:1px solid #ccc; padding:3px;}
- </style>
- <script type="text/javascript" charset="utf-8">
- $(function() {
- $("img").toggle(function() {
- $("img").attr("src", "logo.jpg");
- $("img").attr("title", $("img").src);
- }, function() {
- $("img").attr("src", "logo1.jpg");
- $("img").attr("title", $("img").src);
- }, function() {
- $("img").attr("src", "logo2.jpg")
- $("img").attr("title", $("img").src);
- })
- })
- </script>
- </head>
- <body>
- <img src="#" alt="">
- </body>
- </html>
五、移除事件
在DOM对象的实践操作中,既然存在用于绑定事件的bind方法,也相应存在用于移除绑定事件的方法,在jQuery中,可以通过unbind()方法移除绑定的所有事件或指定的某一个事件。
unbind()的功能是移除元素绑定的事件,其调用的语法格式如下:
其中,参数type为移除的事件类型,fn为需要移除的事件处理函数;如果该方法没有参数,则移除所有绑定的事件;如果带有参数type,则移除该灿说所指定的事件类型;如果带有参数fn,则只移除绑定时指定的函数fn。
- unbind([type], [fn])
示例 用unbind方法移除事件
- #========================================================================
- # FileName: demo14.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 14:21:48
- #========================================================================
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title>移除事件unbind</title>
- <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <style type="text/css">
- body { font-size:13px;}
- .btn { border:#666 solid 1px; padding:2px; width:80px; filter:progid:DXImageTransform.Microsoft.Gridient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D8);}
- div {line-height:1.8em}
- .tip { padding-top:10px;}
- </style>
- <script type="text/javascript" charset="utf-8">
- $(function() {
- function oClick() {
- $("#divTip").append("<div>按钮二的单击事件</div>");
- }
- $("input:eq(0)").bind("click", function() {
- $("#divTip").append("<div>按钮一的单击事件</div>");
- });
- $("input:eq(1)").bind("click", oClick);
- $("input:eq(2)").bind("click", function() {
- $("input").unbind();
- });
- })
- </script>
- </head>
- <body>
- <div id="" class="">
- <input type="button" id="Button1" class="btn" name="" value="按钮一">
- <input type="button" id="Button2" class="btn" name="" value="按钮二">
- <input type="button" id="Button3" class="btn" name="" value="删除事件">
- </div>
- <div id="divTip" class="tip">
- </div>
- </body>
- </html>
六、其他事件
除上述介绍的几种事件方法外,在jQuery中还有很多的事件处理方法,下面介绍其中较为常用的两种处理事件的方法one()和trigger()。
6.1、方法one()
one()方法功能是为所选的元素绑定一个仅触发一次的处理函数,其调用的语法格式为:
其中,参数type为事件类型,即需要触发什么类型的事件;参数data为可选参数,表示作为event.data属性值传递给事件对象的额外数据对象;fn为绑定事件时所要触发的函数。
- one(type, [data], fn)
6.2、方法trigger()
在前端页面开发中,有时希望页面在DOM加载完毕后,自动执行一些很人性化的操作,如:文本框中的内容处理全部被选中状态,某个按钮处于焦点中。利用传统的JavaScript语言需要编写复杂的代码才可实现上述功能;而在jQuery中,仅需要调用一个trigger()方法就可以轻松实现。
trigger()方法的功能是在所选择的元素上触发指定类型的事件。其调用的语法格式为:
其中,参数type为触发事件的类型,参数data为可选项,表示在触发事件时,传递给函数的附加参数。
- trigger(type, [data])
示例 用trigger方法绑定事件
页面效果如下:
- #========================================================================
- # FileName: demo15.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 14:36:00
- #========================================================================
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title>用trigger方法绑定事件</title>
- <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <style type="text/css">
- body { font-size:13px;}
- .txt { border:#666 solid 1px; padding:3px;}
- .tip { padding-top:5px;}
- </style>
- <script type="text/javascript" charset="utf-8">
- $(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 type="text" id="Text1" class="txt" name="" value="低调走过">
- <div id="divTip" class="tip"></div>
- </body>
- </html>
说明:trigger()方法可以实现触发性事件,即不必用户做任何动作,自动执行该方法中的事件。在这种情形下,其最终效果可能会有异样产生。如果不希望页面自动执行,可使用triggerHandler()方法,使用方法与trigger()方法基本相同,只是该方法不会自动执行其包含的事件。
7.2、下拉列表框中的事件应用
下拉列表框是最为常用的表单对象,该对象可以通过较小的页面空间,展示大量的数据;同时,多个列表框通过联动效果,展示数据的应用也相当广泛。下面通过一个示例,介绍如何在jQuery中,实现三个下拉列表框联动展示数据的功能。
示例 下拉列表框中的事件应用
页面效果如下:
- #========================================================================
- # FileName: demo17.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 15:22:45
- #========================================================================
- <!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 src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <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:#666 1px solid;padding:2px;width:65px;float:right;margin-top:6px;margin-right:6px;
- filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
- </style>
- <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>
八、列表应用
在页面开发中,经常使用<ul>,即列表标记。在设计展示数据或导航菜单的页面中,列表的使用相当广泛。下面通过一个简单的示例,介绍在jQuery中,如何使用列表<ul>标记实现导航菜单的功能。
示例效果如下所示:
- #========================================================================
- # FileName: demo18.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 15:28:03
- #========================================================================
- <!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 src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <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 type="text/javascript">
- $(function() {
- var curY; //获取所选项的Top值
- var curH; //获取所选项的Height值
- var curW; //获取所选项的Width值
- var srtY; //设置提示箭头的Top值
- var srtX; //设置提示箭头的Left值
- var objL; //获取当前对象
- /*
- *设置当前位置数值
- *参数obj为当前对象名称
- */
- function setInitValue(obj) {
- curY = obj.offset().top
- curH = obj.height();
- curW = obj.width();
- srtY = curY + (curH / 2) + "px"; //设置提示箭头的Top值
- srtX = curW - 5 + "px"; //设置提示箭头的Left值
- }
- $(".optn").mouseover(function() {//设置当前所选项的鼠标滑过事件
- objL = $(this); //获取当前对象
- setInitValue(objL); //设置当前位置
- var allY = curY - curH + "px"; //设置提示框的Top值
- 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"); //获取当前的上级li对象
- setInitValue(objL); //设置当前位置
- objL.addClass("optnFocus"); //增加上级li对象获取焦点时的样式
- $("#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>
九、网页选项卡的应用
在页面中,除使用列表<ul>标记实现滑动效果的菜单导航条外,还用于网页选项卡的设计。选项卡的功能十分简单,通过单击标题实现内容隐藏或显示的切换,由于它可以在有限的空间中展示大量的数据,因此,被广泛使用在各综合性的门户网站中。下面通过一个简单的示例,介绍网页选项卡快速实现的方法。
示例 网页选项卡的应用
页面效果如下所示:
- #========================================================================
- # FileName: demo19.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 15:32:33
- #========================================================================
- <!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 src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <style type="text/css">
- body{font-size:13px}
- ul,li {margin:0;padding:0;list-style:none}
- #menu li {text-align:center;float:left;padding:5px;
- margin-right:2px;width:50px;cursor:pointer}
- #menu li.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 type="text/javascript">
- $(function() {
- $("#menu li").each(function(index) { //带参数遍历各个选项卡
- $(this).click(function() { //注册每个选卡的单击事件
- $("#menu li.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>
十、综合案例分析——删除数据时的提示效果在项目中的应用
经分析,该案例的需求如下:
- 当用户单击“删除”按钮时,整个页面背景类似于关机效果,“删除”提示框突出显示,用户可以选“关闭”按钮,或单击“确定”或“取消”的操作。
- 删除提示框一直居中显示,不论页面大小发生如何变化,这个提示框始终居中显示。
- 如果对某条记录打勾,当用户单击提示框中的“确定”按钮时,将在页面中删除该条记录,同时关闭提示框,页面背景恢复正常。
- #========================================================================
- # FileName: demo20.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 15:43:20
- #========================================================================
- <!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 src="../jquery.js" type="text/javascript" charset="utf-8"></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);opacity:0.3;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>
页面效果如下所示:
这里要注意CSS的编写,尤其是各浏览器的兼容。
目录:
一、事件机制
二、页面载入事件
2.1、ready()方法的工作原理
2.2、ready()方法的几种相同写法
三、绑定事件
四、切换事件
4.1、hover()方法
4.2、toggle()方法
五、移除事件
六、其他事件
6.1、方法one()
6.2、方法trigger()
七、表单应用
7.1、文本框中的事件应用
7.2、下拉列表框中的事件应用
八、列表应用
九、网页选项卡的应用
十、综合案例分析——删除数据时的提示效果在项目中的应用
一、事件机制
众所周知,页面在加载时,会触发Load事件。当用户单击某个按钮时,触发该按钮的Click事件,通过种种事件实现各种功能或执行某项操作。事件在元素对象与功能代码中起着重要的桥梁作用。那么,事件被出发后是如何执行代码的呢?
严格来说,事件在触发后被分为两个阶段,一个是捕获(Capture),另一个则是冒泡(Bubbling);但有些遗憾的是,大多数浏览器并不是都支持捕获阶段,jQuery也不支持。因此在事件触发后,往往执行冒泡过程。所谓的冒泡其实质就是事件执行中的顺序。
二、页面载入事件
2.1、ready()方法的工作原理
jQuery中的页面载入事件ready()方法,类似于传统JavaScript中的OnLoad()方法,只不过在事件执行时间上有区别:OnLoad()方法的执行必须是页面中的全部元素完全加载到浏览器后才触发,在这种情况下,如果页面中的图片过多或图片过大,那么有可能要等OnLoad()方法执行完毕,用户才能进行其他的操作;如果使用jQuery中的ready()方法加载页面,则只要页面中的DOM模型加载完毕,就会触发ready()方法。因此,两者在事件的执行效果上ready()方法明显优于JavaScript中的OnLoad()方法。
我们剖析一下jQuery()中的ready()方法的工作原理:在jQuery脚本加载到页面时,会设置一个isReady的标记,用于监听页面加载的进度,当然遇到执行ready()方法时,通过查看isReady值是否被设置,如果未被设置,那么就说明页面并未加载完成,在此情况下,将未完成的部分用一个数组缓存起来,当全部加载完成后,再将未完成的部分通过缓存一一执行。
2.2、ready()方法的几种相同写法
写法一:
写法二:
- $(document).ready(function() {
- //代码部分
- })
写法三:
- $(function() {
- //代码部分
- })
写法四:
- jQuery(document).ready(function() {
- //代码部分
- })
其中写法二简单明了,使用较为广泛。
- jQuery(function() {
- //代码部分
- })
三、绑定事件
我们可以使用如下的代码绑定按钮的单击事件:
除了上述绑定事件的写法外,在jQuery中,还可以使用bind()方法进行事件的绑定。下面对该方法进行详细的介绍。
- $(function() {
- $("#btnShow").click(function() {
- //执行代码
- })
- })
bind()功能是为每个选择元素的事件绑定处理函数,其语法格式如下:
其中,参数type为一个或多个类型的字符串,如“click”或“change”,也可以自定义类型;可以被参数type调用的类型包括blur、focus、load、resize、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error。
- bind(type, [data], fn)
参数data是作为event.data属性值传递给事件对象的额外数据对象。
参数fn是绑定到每个选择元素的事件中的处理函数。
如果要在一个元素中绑定多个事件,可以将事件用空格隔开。
四、切换事件
在jQuery中,有两个方法用于事件的切换,一个是方法hover(),另一个是方法toggle()。所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换。如一个超链接标记<a>,若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发另一个事件,就可以调用jQuery中的hover()方法轻松实现。
4.1、hover()方法
调用jQuery中的hover()方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换,该方法在实际运用中,也可以通过jQuery中的事件mouseenter与mouseleave进行替换。
hover()功能是当鼠标移动到所选的元素上面时,执行指定的第一个函数;当鼠标移出这个元素时,执行指定的第二个函数,其语法格式如下:
参数over为鼠标移到元素时触发的函数,参数out为鼠标移出元素时触发的函数。
- hover(over, out)
示例 用hover方法绑定事件
- #========================================================================
- # FileName: demo12.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 14:04:39
- #========================================================================
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title>切换事件hover</title>
- <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript" charset="utf-8">
- $(function() {
- $("#title").hover(function(){
- $("#content").show();
- }, function(){
- $("#content").hide();
- })
- })
- </script>
- <style type="text/css">
- body { font-size:14px;}
- .title { background-color:#eee; border:solid 1px #6666; font-weight:bold; width:100px; padding:0px; margin:0px;}
- .content { border:solid 1px #666; width:100px; padding:0px; margin:0px;display:none;}
- </style>
- </head>
- <body>
- <div id="title" class="title">
- jQuery简介
- </div>
- <div id="content" class="content">
- jQuery是由美国人于2006年创建的一个开源项目,它的主旨是:以更少的代码,实现更多的功能(Write Less, Do More)。
- </div>
- </body>
- </html>
4.2、toggle()方法
在toggle()方法中,可以依次调用N个指定的函数,知道最后一个函数,然后重复对这些函数轮番调用。
toggle()方法的功能是每次单击后依次调用函数,“依次”说明该方法在调用函数时并未随机或指定调用,而是通过函数设置的前后顺序进行调用,其调用的语法格式如下:
其中参数fn, fn2, ..., fnN为单击时被依次调用的函数。
七、表单应用
toggle(fn, fn2, [fn3, fn4,...])7.1、文本框中的事件应用
文本框是表单中使用最为普遍的元素之一,因此,其前端用户页面的体验度显得十分重要。下面通过一个简单示例,介绍使用jQuery中的事件改变文本框的样式,以提高用户体验。
示例 文本框中的事件应用
示例效果如下:
- #========================================================================
- # FileName: demo16.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 15:17:12
- #========================================================================
- <!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 src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <style type="text/css">
- body{font-size:13px}
- /* 元素初始状态样式 */
- .divInit{width:390px;height:55px;line-height:55px;padding-left:20px}
- .txtInit{border:#666 1px solid;padding:3px;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:#666 1px solid;padding:3px;background-image:url('Images/bg_email_input2.gif')}
- .spnBlur{background-image:url('Images/bg_email_wrong.gif')}
- .divFocu{background-color:#EDFFD5}/* div获取焦点样式 */
- .spnSucc{background-image:url('Images/pic_Email_ok.gif');margin-top:20px}/* 验证成功时span样式 */
- </style>
- <script type="text/javascript">
- $(function() {
- $("#txtEmail").trigger("focus");//默认时文本框获取焦点
- $("#txtEmail").focus(function() {//文本框获取焦点事件
- $(this).removeClass("txtBlur").addClass("txtInit");
- $("#email").removeClass("divBlur").addClass("divFocu");
- $("#spnTip").removeClass("spnBlur")
- .removeClass("spnSucc").html("请输入您常用邮箱地址!");
- })
- $("#txtEmail").blur(function() {//文本框丢失焦点事件
- var vtxt = $("#txtEmail").val();
- if (vtxt.length == 0) {
- $(this).removeClass("txtInit").addClass("txtBlur");
- $("#email").removeClass("divFocu").addClass("divBlur");
- $("#spnTip").addClass("spnBlur").html("邮箱地址不能为空!");
- }
- else {
- if (!chkEmail(vtxt)) {//检测邮箱格式是否正确
- $(this).removeClass("txtInit").addClass("txtBlur");
- $("#email").removeClass("divFocu").addClass("divBlur");
- $("#spnTip").addClass("spnBlur").html("邮箱格式不正确!");
- }
- else {//如果正确
- $(this).removeClass("txtBlur").addClass("txtInit");
- $("#email").removeClass("divFocu");
- $("#spnTip").removeClass("spnBlur").addClass("spnSucc").html("");
- }
- }
- })
- /*
- *验证邮箱格式是否正确
- *参数strEmail,需要验证的邮箱
- */
- 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>
示例 用toggle方法绑定事件
- #========================================================================
- # FileName: demo13.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 14:07:49
- #========================================================================
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title>切换事件toggle</title>
- <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <style type="text/css">
- body { font-size:13px;}
- img { border:1px solid #ccc; padding:3px;}
- </style>
- <script type="text/javascript" charset="utf-8">
- $(function() {
- $("img").toggle(function() {
- $("img").attr("src", "logo.jpg");
- $("img").attr("title", $("img").src);
- }, function() {
- $("img").attr("src", "logo1.jpg");
- $("img").attr("title", $("img").src);
- }, function() {
- $("img").attr("src", "logo2.jpg")
- $("img").attr("title", $("img").src);
- })
- })
- </script>
- </head>
- <body>
- <img src="#" alt="">
- </body>
- </html>
五、移除事件
在DOM对象的实践操作中,既然存在用于绑定事件的bind方法,也相应存在用于移除绑定事件的方法,在jQuery中,可以通过unbind()方法移除绑定的所有事件或指定的某一个事件。
unbind()的功能是移除元素绑定的事件,其调用的语法格式如下:
其中,参数type为移除的事件类型,fn为需要移除的事件处理函数;如果该方法没有参数,则移除所有绑定的事件;如果带有参数type,则移除该灿说所指定的事件类型;如果带有参数fn,则只移除绑定时指定的函数fn。
- unbind([type], [fn])
示例 用unbind方法移除事件
- #========================================================================
- # FileName: demo14.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 14:21:48
- #========================================================================
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title>移除事件unbind</title>
- <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <style type="text/css">
- body { font-size:13px;}
- .btn { border:#666 solid 1px; padding:2px; width:80px; filter:progid:DXImageTransform.Microsoft.Gridient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D8);}
- div {line-height:1.8em}
- .tip { padding-top:10px;}
- </style>
- <script type="text/javascript" charset="utf-8">
- $(function() {
- function oClick() {
- $("#divTip").append("<div>按钮二的单击事件</div>");
- }
- $("input:eq(0)").bind("click", function() {
- $("#divTip").append("<div>按钮一的单击事件</div>");
- });
- $("input:eq(1)").bind("click", oClick);
- $("input:eq(2)").bind("click", function() {
- $("input").unbind();
- });
- })
- </script>
- </head>
- <body>
- <div id="" class="">
- <input type="button" id="Button1" class="btn" name="" value="按钮一">
- <input type="button" id="Button2" class="btn" name="" value="按钮二">
- <input type="button" id="Button3" class="btn" name="" value="删除事件">
- </div>
- <div id="divTip" class="tip">
- </div>
- </body>
- </html>
六、其他事件
除上述介绍的几种事件方法外,在jQuery中还有很多的事件处理方法,下面介绍其中较为常用的两种处理事件的方法one()和trigger()。
6.1、方法one()
one()方法功能是为所选的元素绑定一个仅触发一次的处理函数,其调用的语法格式为:
其中,参数type为事件类型,即需要触发什么类型的事件;参数data为可选参数,表示作为event.data属性值传递给事件对象的额外数据对象;fn为绑定事件时所要触发的函数。
- one(type, [data], fn)
6.2、方法trigger()
在前端页面开发中,有时希望页面在DOM加载完毕后,自动执行一些很人性化的操作,如:文本框中的内容处理全部被选中状态,某个按钮处于焦点中。利用传统的JavaScript语言需要编写复杂的代码才可实现上述功能;而在jQuery中,仅需要调用一个trigger()方法就可以轻松实现。
trigger()方法的功能是在所选择的元素上触发指定类型的事件。其调用的语法格式为:
其中,参数type为触发事件的类型,参数data为可选项,表示在触发事件时,传递给函数的附加参数。
- trigger(type, [data])
示例 用trigger方法绑定事件
页面效果如下:
- #========================================================================
- # FileName: demo15.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 14:36:00
- #========================================================================
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title>用trigger方法绑定事件</title>
- <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <style type="text/css">
- body { font-size:13px;}
- .txt { border:#666 solid 1px; padding:3px;}
- .tip { padding-top:5px;}
- </style>
- <script type="text/javascript" charset="utf-8">
- $(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 type="text" id="Text1" class="txt" name="" value="低调走过">
- <div id="divTip" class="tip"></div>
- </body>
- </html>
说明:trigger()方法可以实现触发性事件,即不必用户做任何动作,自动执行该方法中的事件。在这种情形下,其最终效果可能会有异样产生。如果不希望页面自动执行,可使用triggerHandler()方法,使用方法与trigger()方法基本相同,只是该方法不会自动执行其包含的事件。
7.2、下拉列表框中的事件应用
下拉列表框是最为常用的表单对象,该对象可以通过较小的页面空间,展示大量的数据;同时,多个列表框通过联动效果,展示数据的应用也相当广泛。下面通过一个示例,介绍如何在jQuery中,实现三个下拉列表框联动展示数据的功能。
示例 下拉列表框中的事件应用
页面效果如下:
- #========================================================================
- # FileName: demo17.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 15:22:45
- #========================================================================
- <!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 src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <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:#666 1px solid;padding:2px;width:65px;float:right;margin-top:6px;margin-right:6px;
- filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
- </style>
- <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>
八、列表应用
在页面开发中,经常使用<ul>,即列表标记。在设计展示数据或导航菜单的页面中,列表的使用相当广泛。下面通过一个简单的示例,介绍在jQuery中,如何使用列表<ul>标记实现导航菜单的功能。
示例效果如下所示:
- #========================================================================
- # FileName: demo18.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 15:28:03
- #========================================================================
- <!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 src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <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 type="text/javascript">
- $(function() {
- var curY; //获取所选项的Top值
- var curH; //获取所选项的Height值
- var curW; //获取所选项的Width值
- var srtY; //设置提示箭头的Top值
- var srtX; //设置提示箭头的Left值
- var objL; //获取当前对象
- /*
- *设置当前位置数值
- *参数obj为当前对象名称
- */
- function setInitValue(obj) {
- curY = obj.offset().top
- curH = obj.height();
- curW = obj.width();
- srtY = curY + (curH / 2) + "px"; //设置提示箭头的Top值
- srtX = curW - 5 + "px"; //设置提示箭头的Left值
- }
- $(".optn").mouseover(function() {//设置当前所选项的鼠标滑过事件
- objL = $(this); //获取当前对象
- setInitValue(objL); //设置当前位置
- var allY = curY - curH + "px"; //设置提示框的Top值
- 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"); //获取当前的上级li对象
- setInitValue(objL); //设置当前位置
- objL.addClass("optnFocus"); //增加上级li对象获取焦点时的样式
- $("#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>
九、网页选项卡的应用
在页面中,除使用列表<ul>标记实现滑动效果的菜单导航条外,还用于网页选项卡的设计。选项卡的功能十分简单,通过单击标题实现内容隐藏或显示的切换,由于它可以在有限的空间中展示大量的数据,因此,被广泛使用在各综合性的门户网站中。下面通过一个简单的示例,介绍网页选项卡快速实现的方法。
示例 网页选项卡的应用
页面效果如下所示:
- #========================================================================
- # FileName: demo19.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 15:32:33
- #========================================================================
- <!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 src="../jquery.js" type="text/javascript" charset="utf-8"></script>
- <style type="text/css">
- body{font-size:13px}
- ul,li {margin:0;padding:0;list-style:none}
- #menu li {text-align:center;float:left;padding:5px;
- margin-right:2px;width:50px;cursor:pointer}
- #menu li.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 type="text/javascript">
- $(function() {
- $("#menu li").each(function(index) { //带参数遍历各个选项卡
- $(this).click(function() { //注册每个选卡的单击事件
- $("#menu li.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>
十、综合案例分析——删除数据时的提示效果在项目中的应用
经分析,该案例的需求如下:
- 当用户单击“删除”按钮时,整个页面背景类似于关机效果,“删除”提示框突出显示,用户可以选“关闭”按钮,或单击“确定”或“取消”的操作。
- 删除提示框一直居中显示,不论页面大小发生如何变化,这个提示框始终居中显示。
- 如果对某条记录打勾,当用户单击提示框中的“确定”按钮时,将在页面中删除该条记录,同时关闭提示框,页面背景恢复正常。
- #========================================================================
- # FileName: demo20.html
- # Author: lowkey
- # Email: 361789273@qq.com
- # HomePage: http://blog.csdn.net/Iamduoluo
- # LastChange: 2012-04-11 15:43:20
- #========================================================================
- <!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 src="../jquery.js" type="text/javascript" charset="utf-8"></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);opacity:0.3;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>
页面效果如下所示:
这里要注意CSS的编写,尤其是各浏览器的兼容。