4.1 事件中的冒泡现象，ready()方法
<!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>事件中的冒泡现象，ready()方法</title> <style type="text/css"> body{ font-size:13px;} .clsShow{ border:#ccc 1px solid; background-color:#eee; margin-top:15px; padding:5px; 220px; line-height:1.8em; display:none;} .btn{ border:#666 1px solid; padding:2px; 50px;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> //事件触发分为：捕获，冒泡 //冒泡其实质就是事件执行中的顺序。 $(function(){ var intI=0; $("body,div,#btnShow").click(function(){ intI++; $(".clsShow").show().html("welcome").append("<div>执行次数<b>"+intI+"</b></div>"); event.stopPropagation();//阻止冒泡过程 //代码中，除了使用stopPropagation()方法阻止事件的冒泡过程外，还可以通过语句return false实现停止事件的冒泡过程。 }) }) /* jQuery中的 ready()方法：在jQuery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度，当然遇到执行ready()方法时，通过查看isReady值是否被设置，如果未被设置，那么就说明页面并未加载完成，在此情况下，将未完成的部分用一个数组缓存起来，当全部加载完成后，再将未完成的部分通过缓存一一执行。
$(function(){})
$(document).ready(function(){})
*/ </script> </head> <body> <div><input id="btnShow" type="button" value="点击" class="btn" /></div> <div class="clsShow"></div> </body> </html>
4.2 方法绑定事件
<!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"> .btn{ border:#666 1px solid; padding:2px; 50px;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> //bind() //bind(type,[data],fn) $(function(){ $("#btnBind").bind("click",function(){ $(this).attr("disabled","disabled");//按钮不可用 }); }) //在一个元素中绑定多个事件 $(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 映射方式绑定不同的事件
<!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"> body{ font-size:13px;} .clsTip{ border:#ccc 1px solid; background-color:#eee; margin-top:15px; padding:5px; 185px; display:none;} .txt{ border:#666 1px solid; padding:3px;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> //bind(type,[data],fn) $(function(){ $(".txt").bind({ focus:function(){$("#divTip").show().html("执行的是focus事件");}, change:function(){$("#divTip").show().html("执行的是change事件");} }) }) //也可以这么写 //bind(type,[data],fn) $(function(){ var meaaage_focus='执行的是focus事件'; $(".txt").bind("focus",{msg:meaaage_focus},function(event){ $("#divTip").show().html(event.data.msg); }) }) </script> </head> <body> <div>姓名：<input type="text" class="txt" /></div> <div id="divTip" class="clsTip"></div> </body> </html>
4.4 切换事件hover
<!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>切换事件hover</title> <style type="text/css"> body{ font-size:13px;} .clsFrame{ border:solid 1px #666; 220px;} .clsFrame .clsTitle{ background-color:#eee; padding:5px; font-weight:bold;} .clsFrame .clsContent{ padding:5px; display:none;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> //jQuery事件切换：hover(),toggle() //切换事件--既有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。 //hover(over,out) ==> $("a").hover(function(){...},function(){...}) ==> $("a").mouseenter(function(){...}) $("a").mouseleave(function(){...}) //hover() hover(over,out) ==>当鼠标移动到所选的元素上面时，执行指定的第一个函数；当鼠标移出这个元素时，执行指定的第二个函数。 $(function(){ $(".clsTitle").hover(function(){ $(".clsContent").show(); },function(){ $(".clsContent").hide(); }); }) </script> </head> <body> <div class="clsFrame"> <div class="clsTitle">jQuery简介</div> <div class="clsContent">XXXXXXXXXXXXXXX</div> </div> </body> </html>
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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>切换事件toggle</title> <style type="text/css"> body{ font-size:13px;} img{ border:solid 1px #ccc; padding:3px; 200px; height:60px;} div{ 200px; height:50px;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> //toggle(fn,fn2,[fn3,fn4,...]) --参数fn,fn2,...,fnN为单击时被依次调用的函数。 /* $(function(){ $("img").toggle(function(){ $(this).attr("src","img/1.png"); $(this).attr("title","01"); },function(){ $(this).attr("src","img/2.png"); $(this).attr("title","02"); },function(){ $(this).attr("src","img/3.png"); $(this).attr("title","03"); }) //$("img").trigger("click"); }) */ $(function(){ $("button").toggle(function(){ $("#div1").css("background-color","#030"); },function(){ $("#div1").css("background-color","#990"); },function(){ $("#div1").css("background-color","#C69"); }); }) </script> </head> <body> <img /> <div id="div1"></div> <button>test1</button> </body> </html>
4.6 unbind
<!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>移除事件unbind</title> <style type="text/css"> body{ font-size:13px;} .btn{ border:#666 1px solid; padding:2px; 80px;} div{ line-height:1.8em;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> $(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(); }) //unbind() --不仅可以删除某些类型的全部事件，还可以删除某个指定的自定义事件 $("input:eq(2)").bind("click",function(){ $("input").unbind("click",oClick); }) }) </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.7 one事件
<!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>其他事件one</title> <style type="text/css"> .btn{ border:#666 1px solid; padding:2px; 160px;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> $(function(){ function btn_Click(){ this.value = "010-12345678"; } $("input").bind("click",btn_Click); }) </script> </head> <body> <input id="Button1" type="button" value="点击查看联系方式" class="btn" /> </body> </html>
4.8 事件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>其他事件trigger</title> <style type="text/css"> body{ font-size:13px;} .txt{ border:#666 1px solid; padding:3px;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> //trigger() 方法触发被选元素的指定事件类型。 $(function(){ var oTxt=$("input"); oTxt.trigger("select"); oTxt.bind("btn_Click",function(){ var txt = $(this).val(); $("#divTip").html(txt); }) oTxt.trigger("btn_Click"); //自动触发的一些事件 //oTxt.triggerHandler("click");--如果不希望页面自动执行，可使用triggerHandler()方法，该方法不会自动执行其包含的事件。 }) </script> </head> <body> 姓名：<input id="Text1" type="text" class="txt" value="陶国荣" /> <div id="divTip" style="padding-top:5px"></div> </body> </html>
4.9 文本框中的事件应用，验证邮箱格式
<!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"> body{ font-size:13px;} /*元素初始状态样式*/ .divInit{ 390px; height:55px; line-height:55px; padding-left:20px;} .txtInit{ border:#666 1px solid; padding:3px; background-image:url(img/2.png) } .spnTip{ 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(img/3.png)} .spnBlur{ background-image:url(img/4.png);} .divFocu{ background-color:#EDFFD5;} .spnSucc{ background-image:url(img/6.png);} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> $(function(){ //获取焦点事件，页面加载后获取焦点 备注：addClass()是增加某种CSS样式，为了更好地体现设置的样式，应先通过removeClass（），删除已加载过的页面样式
$("#txtEmail").focus(function(){ $(this).removeClass("txtBlur").addClass("txtInit"); $("#email").removeClass("divBlur").addClass("divFocu"); $("#spnTip").removeClass("spnBlur").removeClass("spnSucc").html("请输入常用邮箱地址！"); }) $("#txtEmail").trigger("focus");// //失去焦点事件 $("#txtEmail").blur(function(){ var $email = $("#txtEmail").val(); if($email.length ==0) { //为空 $(this).removeClass("txtInit").addClass("txtBlur"); $("#email").removeClass("divFocu").addClass("divBlur"); $("#spnTip").addClass("spnBlur").html("邮箱地址不能为空！"); } else { //不为空！ 判断邮箱的格式 if(checkEmail($email)) { //true $(this).removeClass("txtBlur").addClass("txtInit"); $("#email").removeClass("divFocu"); $("#spnTip").removeClass("spnBlur").addClass("spnSucc").html(""); } else { //false $(this).removeClass("txtInit").addClass("txtBlur"); $("#email").removeClass("divFocu").addClass("divBlur"); $("#spnTip").addClass("spnBlur").html("格式不正确！"); } } })
/**/ function checkEmail(str){ var re = /^(w-*.*)+@(w-?)+(.w{2,})+$/ if(re.test(str)) { return true; //alert("正确"); }else { return false; //alert("错误"); } } }) </script> </head> <body> <form id="form1" action="#"> <div id="email" class="divInit"> 邮箱：<span id="spnTip" class="spnInit"></span> <input id="txtEmail" type="tex" class="txtInit" /> </div> </form> </body> </html>
4.10 列表框的事件
<!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"> body{ font-size:13px;} .clsInit{ 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; 65px; float:right; margin-top:6px; margin-right:6px;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> $(function(){ //$.each() --对数组遍历的处理 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(){ //alert(this); $("#selC").append("<option>"+this+"</option>"); }) } }) }) }) }) // $("#Button").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="Button" type="button" value="查询" class="btn" /> </div> <div class="clsInit" id="divTip"></div> </body> </html>
4.11