事件
1.页面载入 1.1 ready(fn) $(document).ready(function(){}) $(function(){})2.事件处理 2.1 on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数。 var data={id:5,name:"呜呜"}; function myFunc(event){ alert(event.data.id); } $("p").on("click mouseover","span",data,myFunc); // var data={id:5,name:"呜呜"}; var events={ "click":function(event){$(this).text(event.data.id)}, "mouseover":function(event){$(this).text(event.data.name);} }; $("p").on(events,"span",data); 2.2 off(events,[selector],[fn]) 移除元素上绑定的一个或多个事件的事件处理函数。主要用于解除由on()函数绑定的事件处理函数。 $("p").off("click mouseover","span",data,myFunc); 2.3 bind(type,[data],fn) 为每个匹配元素的一个或多个事件绑定事件处理函数 $("p").bind("click",function(){alert($(this).text());}) $("p").bind("click",{foo:"bar"},myFunc); function myFunc(event) { alert(event.data.foo) } $("p").bind({ click:function(){}, mouseover:function(){} }) jQuery事件绑定on()、bind()与delegate() 方法详解 http://www.jb51.net/article/67166.htm 2.4 unbind(type,[data|fn]) 移除匹配元素上绑定的一个或多个事件的事件处理函数。主要用于解除由bind()函数绑定的事件处理函数。 $("p").unbind("click",{foo:"bar"},myFunc); 2.5 one(type,[data],fn) 为每个匹配元素的一个或多个事件绑定一次性事件处理函数。 $("p").one("click",function(){}) 2.6 trigger(type,[data]) 在每个匹配元素上触发指定类型的事件。 $("p").trigger("click"); $("p").bind("myEvent", function (event, message1, message2) { alert(message1 + ' ' + message2); }); $("p").trigger("myEvent", ["Hello","World!"]); 2.7 triggerHandler(type, [data]) 在每个匹配元素上触发指定类型的事件 该函数的作用于trigger()函数相似，但triggerHandler()函数具有以下例外情况： triggerHandler()不会触发执行元素的默认行为(例如链接click事件默认的跳转行为，表单submit事件默认的提交行为)。 triggerHandler()触发事件只针对jQuery对象中的第一个匹配元素。 triggerHandler()触发的事件不会在DOM树中冒泡，因此事件不会冒泡传递到它的任何祖辈元素。 triggerHandler()的返回值是对应事件处理函数的返回值，而不是当前jQuery对象本身3.事件委派 3.1 delegate(sel,[type],[data],fn) 为指定元素的一个或多个事件绑定事件处理函数。 执行delegate()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数仍然对其有效。 $("p").delegate("p","click",function(event){alert($(this).text())}) 3.2 undelegate([sel,[type],fn]) 用于移除元素上绑定的一个或多个事件的事件处理函数,主要用于解除由delegate()函数绑定的事件处理函数。 $("p").undelegate("p","click",function(event){alert($(this).text())})4.事件切换 4.1 hover([over,]out) 为每个匹配元素的hover事件绑定处理函数 $("p").hover(function(){$(this).text("移入")},function(){$(this).text("移出")})； 4.2 toggle([speed],[easing],[fn]) 为每个匹配元素的click事件绑定轮流的处理函数 $("p").toggle(); $("p").toggle( function(){$(this).text("点击第一次执行")}, function(){$(this).text("点击第二次执行")}, function(){$(this).text("点击第三次执行")} );5.事件 5.1 focus([[data],fn]) 为每个匹配元素的focus事件绑定处理函数 $(":text").focus(); //获得焦点 $(":text").focus(function(){$(this).css("border","1px solid #f00");}) // var data={"name":"呜呜","age":"年龄"}; $(":text").focus(data,function(event){ var d=event.data; $(this).next().html('请输入['+d[this.name]+']'); }); 5.2 blur([[data],fn]) 为每个匹配元素的blur事件绑定处理函数 $("p").blur();//触发所有段落的blur事件 $("p").blur(function(){$(this).text("blur")}) // var data={"name":"姓名","age":"年龄"}; $(":text").blur(data,function(event){ var d=event.data; var me=$(this); var tips=''; if(me.val()){ tips='<span style="color:red">['+d[this.name]+']不能为空</span>'; } $(this).next().html(tips); }); 5.3 focusin([[data],fn]) 为每个匹配元素的focusin事件绑定处理函数,与focus事件不同的是：focusin可以检测该元素的后代元素获得焦点的情况(换句话说，focusin事件支持冒泡)。 $("p").focusin(function(){ $(this).css("","") }); var inputMap = { "name": "姓名", "age": "年龄" }; //为所有text元素的focusin事件绑定处理函数 $("p").focusin( inputMap, function(event){ var map = event.data; var inputName = $(this).children(":text:focus").attr("name"); $("#msg").html( '请输入[' + map[inputName] + ']' ); } ); 5.4 focusout([[data],fn])为每个匹配元素的focusout事件绑定处理函数,与blur事件不同的是：focusout可以检测该元素的后代元素获得焦点的情况(换句话说，focusout事件支持冒泡，blur不支持)。 var inputMap = { "name": "姓名", "age": "年龄" }; // 为所有p元素的focusout事件绑定处理函数 // 文本框失去焦点时，进行表单验证，并显示相应的提示信息 $("p").focusout( inputMap, function(event){ var map = event.data; var $focusText = $(this).children(":text"); var inputName = $focusText.attr("name"); var tips = ''; if( !$focusText.val() ){ tips = '[' + map[inputName] + ']不能为空!'; } $("#msg").html( tips ); } ); 5.5 change([[data],fn]) 为每个匹配元素的change事件绑定处理函数。仅适用于text,textarea,select. $(":text").change(myFunc); function myFunc(event){ $("label[for='"+this.name+"']").html(this.value); } // var data={name:'姓名',age:'年龄',sex:'性别'}; function myFunc(event){ var d=event.data; $("p").append(new Date().toLocaleString()+'['+d[this.name]+ ']发生了更改<br>'); } $(":text").change(data,myfunc) 5.6 select([[data],fn]) 为每个匹配元素的select事件绑定处理函数,select事件会在文本框中的文本内容被选中时触发。该事件仅适用于<input type="text">和<textarea>文本框。 $(":text").select(function(){$(this).css("","");}) // var user={name:'smm',age:'12'}; $(":text").select(data,function(event){ $("p").html(event.data.name + "，你选择了[" + this.name + "]中的一些文本内容!" ).show().fadeOut( 2000 ); }); 5.7 submit([[data],fn]) 为每个匹配元素的submit事件绑定处理函数。 $("form").submit(function(event){ if(!$("#name").val()){ alert(""姓名不能为空); return false; }else if(!$("#age").val()){ alert("年龄不能为空"); return false; } }) // var data={name:'姓名',age:'年龄'}; $("form").submit(data,function(event){ var d=event.data; var label=''; $(this).find(":text").each(function(){ if(!this.value){ label=d[this.name]; return false; } }); if(label){ alert(label+'不能为空'); return false; } }); 5.8 keydown([[data],fn]) 为每个匹配元素的keydown事件绑定处理函数。keydown事件会在按下键盘按键时触发 $(window).keydown(function(event){ $("body").append("<br>你按下的按键的代码值为:["+event.which+']'); }); var num={start:65,end:90}; $(":text").keydown(num,function(event){ var keys=event.data; return event.which >= key.start && event.which <= keys.end; }); 5.9 keypress([[data],fn]) 为每个匹配元素的keypress事件绑定处理函数, $(window).keypress( function(event){ $("body").append( "<br>你输入了字符[" + String.fromCharCode( event.which ) + "](event.which=" + event.which + ')' ) ; } ); // // { A:65, Z:90, a:97, z:122 } var validChars = { "A": "A".charCodeAt(0), "Z": "Z".charCodeAt(0), "a": "a".charCodeAt(0), "z": "z".charCodeAt(0) }; // 只允许输入大小写字母，不允许输入其他字符(使用某些输入法可能会绕过该限制，从而输入中文或其它字符) $("#chars").keypress( validChars, function(event){ var ch = event.data; return event.which >= ch.A && event.which <= ch.Z || event.which >= ch.a && event.which <= ch.z; } ); 5.10 keyup([[data],fn]) 为每个匹配元素的keyup事件绑定处理函数,keyup事件会在按下键盘按键并释放时触发 $(window).keyup( function(event){ $("body").append( "<br>你按下并释放的按键的代码值为:[" + event.which + ']' ) ; } ); // var template = "你按了count个按键!"; // 只允许按下的字母键生效 (使用某些输入法可能会绕过该限制) $("#keys").keyup( template, function(event){ var $me = $(this); var count = $me.data("count") || 0; $me.data("count", ++count); $("#counter").html( event.data.replace("count", count) ); } ); 5.11 click([[data],fn]) 为每个匹配元素的click事件绑定处理函数 $(":button").click( function(event){ alert( this.value + "-1" ); } ); 5.12 dbclick([[data],fn]) 为每个匹配元素的dblclick事件绑定处理函数 var user = { name: 'CodePlayer', age: 18 }; // 为所有button元素的dblclick事件绑定处理函数 $(":button").dblclick( user, function(event){ alert( event.data.name ); // CodePlayer } ); 5.13 mouseenter([[data],fn]) 为每个匹配元素的mouseenter事件绑定处理函数,mouseenter事件会在鼠标进入某个元素时触发 var cssStyle = { background: "#eee", color: "blue" }; //鼠标移入div元素就设置指定的css样式 $("div").mouseenter( cssStyle, function(event){ var style = event.data; $(this).css( style ); } ); 5.14 mouseleave([[data],fn]) 为每个匹配元素的mouseleave事件绑定处理函数,mouseleave事件会在鼠标离开某个元素时触发 $("div").mouseleave(function(){ $(this).css( "color", "purple" ); }); 5.15 mouseover([[data],fn]) 为每个匹配元素的mouseover事件绑定处理函数,mouseover事件会在鼠标进入某个元素时触发。它与mouseenter事件相似，但 mouseenter事件只会在鼠标进入当前元素时触发，而mouseover事件会在鼠标进入当前元素及其任何后代元素时触发 $("div").mouseover(function(){ $(this).css( "background", "#eee" ); }); 5.16 mouseout([[data],fn]) 为每个匹配元素的mouseout事件绑定处理函数。mouseout事件会在鼠标离开某个元素时触发。 $("div").mouseout(function(){ $(this).css( "color", "purple" ); }); 5.17 mousedown([[data],fn]) 为每个匹配元素的mousedown事件绑定处理函数,mousedown事件会在鼠标按钮被按下时触发。 // 分别记录每个p元素的mousedown事件的触发次数 $("p").mousedown(function(){ var $me = $(this); var count = $me.data("count") || 0; $me.data("count", ++count ); $me.html( '点击此处' + count + '次' ); }); // // event.which属性值：1表示鼠标左键，2表示鼠标中键(滚轮键)，3表示鼠标右键。 var buttonMap = { "1": "左", "2": "中", "3": "右" }; //记录触发div元素的mouseleave事件的次数 $(window).mousedown(buttonMap, function(event){ var map = event.data; $("#log").prepend( '你按下了鼠标[' + map[event.which] + ']键<br>'); }); 5.18 mouseup([[data],fn]) 为每个匹配元素的mouseup事件绑定处理函数,mouseup事件会在鼠标按钮被释放时触发 // event.which属性值：1表示鼠标左键，2表示鼠标中键(滚轮键)，3表示鼠标右键。 var buttonMap = { "1": "左", "2": "中", "3": "右" }; //记录触发div元素的mouseleave事件的次数 $(window).mouseup(buttonMap, function(event){ var map = event.data; $("#log").prepend( '你按下并松开了鼠标[' + map[event.which] + ']键<br>'); }); 5.19 load([[data],fn]) 为每个匹配元素的load事件绑定处理函数,load事件会在资源加载完成时触发 $("img").load( function(){ alert( "图片[" + this.alt + "]加载完毕!" ); } ); 5.20 unload([[data],fn]) 每个匹配元素的unload事件绑定处理函数,unload事件会在页面退出时触发 $(window).unload( function(){ alert("离开当前文档!"); } ); 5.21 error([[data],fn]) 为每个匹配元素的error事件绑定处理函数 ,error事件会在js发生错误或资源加载失败时触发 $("img").error( function(){ alert( "图片加载失败!" ); } ); var newImageURL = "http://www.365mini.com/static/image/backTop.png"; // 图片加载失败时，重新加载新的图片URL $("img").error( newImageURL, function(event){ this.src = event.data; } ); 5.22 resize([[data],fn]) resize事件会在元素的尺寸大小被调整时触发 var minSize = { width: 800, height: 600 }; $(window).resize( minSize, function(event){ var min = event.data; var $dom = $(this); if( $dom.width() < min.width ){ $("body").append("<br>窗口宽度不要小于" + min.width ); }else if( $dom.height() < min.height ){ $("body").append("<br>窗口高度不要小于" + min.height); } } ); 5.23 scroll([[data],fn]) scroll事件会在元素的滚动条位置发生改变时触发 $(window).scroll( function(event){ $("#msg").append( $(this).scrollTop() + '<br>' ); } ); // var maxScrollTop = 1000; // 向下滚动到据顶部超过1000px时，回到顶部 $(window).scroll( maxScrollTop, function(event){ var $me = $(this); if( $me.scrollTop() > event.data ){ $me.scrollTop( 0 ); } });