| 标题 | 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">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对象每次点击后依次调用函数。如果调用完了再从第一个开始调用. |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。