PowerPoint 演示文稿

Size: px

Start display at page:

Download "PowerPoint 演示文稿"

杖柳
5 years ago
Views:

1 jquery 事件处理管理科学与工程学科耿方方

2 主要内容事件机制页面载入事件绑定事件切换事件移除事件其他事件事件应用

3 事件机制当用户浏览页面时, 浏览器会对页面代码进行解释或编译, 这个过程实质上是通过事件来驱动的, 即页面在加载时, 执行一个 load 事件, 在这个事件中实现浏览器编译页面代码的过程事件无论在页面元素本身还是在元素与人机交互中, 都占有十分重要的地位众所周知, 页面在加载时, 会触发 Load 事件, 当用户单击某个按钮时, 触发该按钮的 Click 事件, 通过种种事件实现各项功能或执行某项操作事件在元素对象与功能代码中起着重要的桥梁作用事件在触发后分为两个阶段, 一个是捕获, 另一个则是冒泡大多数浏览器都不支持捕获阶段,jQuery 也不支持因此, 在事件触发后往往执行冒泡过程

4 事件机制案例 1: <script src="jquery/jquery js" type="text/javascript"></script> <script> $(function(){ var inti=0; $("body,div,#btnshow").click(function(){ inti++; </head> <body> <div> <input id="btnshow" type="button" value=" 点击 " class="btn"> </div> <div class="clsshow"></div> </body> </html> $(".clsshow").show().html(" 您好, 欢迎来到 jquery 世界!").append("<div> 执行次数 <b>"+inti+"<b></div>") </script>

5 事件机制在实际过程中, 我们不需要事件的冒泡现象发生, 可以通过 stoppropagation() 方法来实现, 该方法可以阻止冒泡过程的发生 <script> $(function(){ var inti=0; $("body,div,#btnshow").click(function(){ inti++; $(".clsshow").show().html(" 您好, 欢迎来到 jquery 世界!"). a p p e n d ( " < d i v > 执行次数 <b>"+inti+"<b></div>"); event.stoppropagation(); });}); </script> 除了使用 stoppropagation() 方法外, 还可以通过 return false 实现停止事件的冒泡

6 页面载入事件页面载入事件 jquery 的页面载入事件 ready() 方法类似于传统的 JavaScript 的 onload() 方法只是在执行时间上有区别 onload() 方法必须是页面中的全部元素完全加载到浏览器后才触发如果用 ready() 方法加载页面, 则只要页面的 DOM 模型加载完毕, 就会触发 ready() 方法 ready() 的工作原理 : 在 jquery 脚本加载到页面时, 会设置一个 isready 的标记, 用于监听页面加载的进度, 当然遇到执行 ready() 方法时, 通过查看 isready 值是否被设置, 如果未被设置, 那么就说明页面未加载完成, 在此情况下, 将未完成的部分用一个数组缓存起来, 当全部加载完成后, 再将未完成的部分通过缓存一一执行

7 页面载入事件页面载入事件在前面的章节中我们简单的介绍了 jquery 中的页面载入事件 ready() 方法, 除了简化的 $(function(){}) 方法外,ready() 方法还有以下几种不同的写法, 但它们执行的效果是一样的 $(document).ready(function(){// 代码部分 }); $(function(){// 代码部分 }); jquery(document).ready(function(){// 代码部分 }); jquery(function(){// 代码部分 });

8 绑定事件在进行事件的绑定时, 我们在前面使用了.click(function(){}) 绑定按钮的点击事件, 除了这种写法之外, 在 jquery 中我们还可以使用 bind() 方法进行事件的绑定,bind() 功能是为每个选择元素的事件绑定处理函数, 其语法结构如下所示 : bind(type,[data],fn); type 为一个或多个类型的字符串, 如 click 或 change, 也可以自定义类型 : 可以被参数 type 调用的类型包括 blur focus resize scroll unload click dbclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error data 是作为 event.data 属性值传递给事件对象的额外数据对象 fn 是绑定到每个选择元素的事件中的处理函数

9 绑定事件如果要在一个元素中绑定多个事件, 可以将事件用空格隔开, 例如 : <script> $(function(){ $("#btnbind").bind("click mouseout",function(){ $(this).attr("disabled","disabled"); </script>

10 绑定事件案例 2 <script src="jquery/jquery js" type="text/javascript"></script> <script> $(function(){ $("#btnbind").bind("click",function(){ $(this).attr("disabled","disabled"); </script> </head> <body> <input id="btnbind" type="button" value="button" class="btn"> </body>

11 绑定事件案例 3 <script> $(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>

12 切换事件在 jquery 中, 有两个方法用于事件的切换, 一个是 hover(), 另一个是方法 toggle() 所谓的切换事件, 就是有两个以上的事件绑定于一个元素, 在元素的行为动作间进行切换调用 jquery 中的 hover() 方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换, 该方法在实现运用中, 也可以通过 jquery 中的事件 mousenter 与 mouseleave 进行替换下面的代码是等价的 : $( a ).hover(function(){ // 执行代码 1},function(){ // 执行代码 2 }) $( a ).mouseenter(function(){ // 执行代码 1 }) $( a ).mouseleave(function(){ // 执行代码 2 hover() 功能是当鼠标移动到所选元素上面时, 执行指定的第一个函数 ; 当鼠标移出这个元素时, 执行指定的第二个函数, 其语法如下 : hover(over,out)

13 切换事件案例 4 <style>.clsframe{border: 1px solid #666;width: 220px;}.clsTitle{background-color: #eee;padding: 5px;font-weight: bold;}.clscontent{padding: 5px;display: none;} <div class="clsframe"> <div class="clstitle">jquery 简介 </div> <div class="clscontent">query 是一个快速简洁的 JavaScript 框架, 是继 Prototype 之后 </div> </div> </style> <script> $(function(){ $(".clstitle").hover(function(){ $(".clscontent").show();}, function(){ $(".clscontent").hide(); </script>

14 切换事件 toggle() 方法, 可以依次调用 N 个指定的函数, 直到最后一个函数, 然后重复对这些函数轮番调用该方法在调用函数时并非随机或指定调用, 而是通过函数设置的前后顺序进行调用, 其调用的语法格式如下 : toggle(fn,fn2,[fn3,fn4,...])

15 切换事件案例 5 $(function(){ $("img").toggle(function(){ $("img").attr("src","images/img01.jpg"); $("img").attr("title",this.src); },function(){ $("img").attr("src","images/img02.jpg"); $("img").attr("title",this.src); }, function(){ $("img").attr("src","images/img03.jpg"); </script>

16 移除事件在 DOM 对象的实际操作中, 既然存在用于绑定事件的 bind 方法, 那么相应的也存在用于移除绑定事件的方法, 在 jquery 中, 可以通过 unbind() 方法移除绑定的所有事件或指定某一个事件, 其语法结构如下所示 : unbind([type],[fn])

17 移除事件案例 6 <script> $(function(){ $("p").click(function(){ $(this).hide(); $("button").click(function(){ $("p").unbind(); </script> </head> <body> <p> 这是一个段落 </p> <p> 这是另一个段落 </p> <p> 点击任何段落可以令其消失包括本段落 </p> <button> 删除 p 元素的事件处理器 </button> </body>

18 其他事件除了以上的几种事件外, 在 jquery 中还有很多的事件处理方法, 我们这里主要介绍一下最为实用的两种处理事件的方法 :one() 和 trigger() one() 方法的功能是为所选的元素绑定一个仅触发一次的处理函数, 其语法结构如下所示 : one(type,[data],fn) trigger() 方法的功能是在所选择的元素上触发指定类型的事件, 其语法结构如下所示 : trigger(type,[data])

19 其他事件案例 7: <script> $(function(){ function btn_click(){ this.value=" "; } $("input").one("click",btn_click); }) </script> </head> <body> <input id="button1" type="button" value=" 点击查看联系方式 " class="btn"> </body>

20 其他事件案例 8: <script> $(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>

21 事件应用案例 9: 文本框的事件应用 <style> body{font-size: 13px;}.divInit{width: 390px;height: 55px;lineheight: 55px; padding-left: 20px;}.txtInit{border: 1px solid #666;padding: 3px;}.spnInit{width: 179px; height: 40px;lineheight: 40px; float: right;margin-top: 8px;padding-left: 10px;}.divBlur{background-color: #FEEEC2;}.txtBlur{border: 1px solid #666;padding: 3px;}.divFocu{background-color: #EDFFD5;}.spnSucc{margin-top: 20px;} </style> else{ 表单应用 if(!chk (vtxt)){ $(this).removeclass("txtinit").addclass("txtblur"); $("# ").removeclass("divfocu").addclass("divblur"); $("#spntip").addclass("spnblur").html(" 邮箱格式不正确!"); } else{ $(this).removeclass("txtblur").addclass("txtinit"); $("# ").removeclass("divfocu"); $("#spntip").removeclass("spnblur").addclass("spnsucc").html(""); } }); function chk (str ){ if(!/\w+[@]{1}\w+[.]\w+/.test(str )){ return false; } else{ return true; } } });</script>

22 事件应用案例 10: 网页选项卡事件应用 <script> $(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> <ul id="menu"> 表单应用 <li class="tabfocus"> 家居 </li> <li> 电器 </li> <li> 二手 </li> </ul> <ul id="content"> <li class="confocus"> 我是家居的内容 </li> <li> 欢迎来到电器城 </li> <li> 二手市场, 产品丰富多彩 </li> </ul>

23 想一想 1 网页选项卡的原理? 2 动手编写网页选项卡?

05 01 accordion UI containers 03 Accordion accordion UI accordion 54

jquery UI plugin Accordion 05 01 accordion UI containers 03 Accordion accordion UI accordion 54 05 jquery UI plugin 3-1