| 标题 | jquery事件操作 |
| 内容 | jquery第十五课,jquery对象绑定事件,事件处理,事件委派,以及事件的切换 参考共用代码 <!doctype html public -//w3c//dtd html 4.0 transitional//en> <html><head><title>jquery事件操作</title> <script language=javascript src=jquery-1.4.2.min.js></script> <style> .www {height:100px;background-color:#ff0;} .forasp {height:50px;} .cn {height:80px;} </style> <script language=javascript> $(function(){ <!--jquery文档处理代码区--> }); </script> <body> <div id=1 class=www>jquery</div> <div id=2>事件</div> <div id=3>处理</div> </body> </html> 1.页面载入,也就是dom中的onload.当dom载入就绪可以查询及操纵时绑定一个要执行的函数。 jquery中页面载入已经用了很多次了$(function(){code}); 这个是jquery载入的简写形式,下面说一下jquery页面载入代码. 全写代码:$(document).ready(function(){code}); 使用 $(document).ready() 的简写，同时内部的 jquery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。 简写形式:jquery(function(){code});或者$(function(){code}); 2.jquery事件处理 (1).bind(type,[data],fn);用来对jquery元素进行事件的绑定.我们逐步来说. 第一种简单绑定: $(#1).bind(click,function(){alert(jquery在id=1绑定的click事件已经触发)}); 获取id为1的jquery对象,然后绑定click事件,当点击(触发click)事件,则弹出jquery在id=1绑定的click事件已经触发对话框. 第二种多事件绑定 $(#2).bind(mouseover mouseout,function(){if(event.type=='mouseover'){alert(触发mouseover事件);}else if(event.type==mouseout){alert(触发mouseout事件);}}); 当鼠标移动到id=2层上触发mouseover事件,当鼠标移动到层外面时,触发mouseout事件. 第三种是第二种延续,是不同事件调用不同函数的方法 $(#3).bind({mouseover:function(){alert(jquery触发mouseover事件);},mouseout:function(){alert(jquery触发mouseout事件);}}); 这样就不用判断事件类型来调用不同函数. 第四种是传递了[date]参数的. var temp=jquery参数操作; $(#1).bind(click,{canshu:temp},function(event){alert(jquery传递参数事件:+event.data.canshu);}); 这样就可以传递参数,也可多个参数,用,隔开 (2).one(type,[data],fn); 只调用一次的事件处理. $(#2).one('click',function({alert('仅处理一次的事件');}));当第一次点击可以用,以后再点击就已经消失了,其他多事件绑定跟.bind一样的. (3).trigger(type,[data]);在每一个匹配的元素上触发某类事件。也就是触发事件 举例:$(#1).trigger(click); 当jquery运行到这里则id=1的层触发了click事件,用jquery代替鼠标等. 如果有参数时,$(#1).bind('click',function(event,canshu1,canshu2){}); 执行$(#1).trrgger(click,['参数1','参数2']); (4).triggerhandler(type,[data]);这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。 这个方法的行为表现与trigger类似，但有以下三个主要区别： * 第一，他不会触发浏览器默认事件。 http://%77%77%77%2e%66%6f%72%61%73%70%2e%63%6e * 第二，只触发jquery对象集合中第一个元素的事件处理函数。 * 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jquery对象。此外，如果最开始的jquery对象集合为空，则这个方法返回 undefined 。 使用方法跟trigger一样. (5).unbind([type],[fn]);bind()的反向操作，从每一个匹配的元素中删除绑定的事件. jquery举例:$(#1).unbind();删除了所有绑定事件$(#1).unbind(click);删除了click事件,$(#1).unbind(click,functionname);删除了绑定的click事件中的functionname函数. 3.jquery事件委派 (1).live(type,[data],fn);jquery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效.这个的用法跟bind一样.不同的是,新加上来的匹配元素,也会加上事件. $(.www).live(click,function(){alert(测试新添加的元素);}); $(body).append(<div class='www'>新添加元素</div>); 虽然绑定事件实在前面发生,但是下面的新的div也有click事件. (2)die([type],[fn]);此方法与live正好完全相反。如果不带参数，则所有绑定的live事件都会被移除。你可以解除用live注册的自定义事件。如果提供了type参数，那么会移除对应的live事件。如果也指定了第二个参数function,则只移出指定的事件处理函数。 4.事件的切换. (1).hover(overfunction,outfunction);一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。鼠标在上面时触发overfunction事件,如果移出则触发outfunction事件 (2).toggle(fn, fn2, [fn3, fn4, ...]);对jquery对象每次点击后依次调用函数。如果调用完了再从第一个开始调用. |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。