手记

jquery复习之路---事件篇

jq的优势:轻量级(大小不到30kb),强大的选择器,出色的DOM操作封装,可靠地事件处理机制, 完善的ajax , 不污染顶级变量, 出色的浏览器兼容,链式操作,隐式迭代, 行为层和结构层的分离,丰富的插件支持,完善的文档,开源;
$(this)和this的区别
$(this)是jQuery对象,this是HTML元素

jq的事件篇

一,使用文档和浏览器窗口事件

ready()    当html文档加载完成时触发$(document).ready(function(){ })或者$(function(){})可以使用多次
load()     html所有的组件全部加载完成时触发
unload()   当浏览器窗口关闭或者用户单击一个新链接或者在浏览器地址栏输入新地址时触发
resize()   当用户改变浏览器窗口大小时触发
scroll()   当浏览器滚动条滚动时触发
errror()   当http请求遇到错误时触发
//在用户离开页面时触发
$(window).unload(funciton(
alert("are you really leave this window?");
))

二,bind(),live(),delegate(),on()绑定事件或者用映射方式绑定多个事件

$(selector).bind('type',function(){});       //不能为动态新创建的元素绑定事件,仅能为已经存在的DOM元素添加绑定事件
$(selector).live('type',function(){});       //不仅能为DOM已经存在的元素,而且还可能为将来动态生成的元素绑定事件,但是他不支持链式调用
$(selector).delegate('selectorChild','type',function(){});   //能够为DOM已经存在的元素和动态生成的元素添加事件,而且还支持链式调用。
$(selector).on('type',function(){})         //on() 方法是 bind()、live() 和 delegate() 方法的新的替代品,使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。
$(selector).one('type',function(){})        //one() 方法为被选元素添加一个或多个事件处理程序,并规定当事件发生时运行的函数,当使用 one() 方法时,每个元素只能运行一次事件处理程序函数
$(selector).trigger("type");                //触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。
$(selector).hover(function(){},function(){}) //事件切换,鼠标移入时执行第一个函数,移出时执行第二个参数
$(selector).toggle(function(){},function(){},function(){}...) //当在元素上点击时调用第一个指定函数,当再次点击时调用第二个函数,以此类推。

//对应的移除绑定事件
$(selector).unbind("type");
$(selector).die("type");
$(selector).undelegate("type");
$(selector).off("type");

鼠标事件

click()                     //单击鼠标并释放将触发此事件
dbclick()                   //双击鼠标触发此事件
mousedown()                 //鼠标被按下那一刻触发此事件
mouseup()                   //鼠标被按下松开那一刻触发此事件
mouseenter()                // 鼠标进入某一元素区域时触发        
mouseleave()                // 鼠标离开某一元素区域时触发          
mousemove()                 // 鼠标在某一元素区域内移动时触发 
mouseout()                  //鼠标离开某一元素及其父元素时触发  
mouseover()                 // 鼠标进入某一元素及其父元素时触发 

表单事件

change()                 //表单项的值改变时触发此事件
focus()                  //按tab键进入某个文本域或者选择某个文本域(得到焦点时)触发此事件         
focusin()                //一个元素或者他的子元素得到焦点时触发
focusout()               //一个元素或者他的子元素失去焦点时触发
blur()                   //文本域(input:text)或者文本框(textarea)失去焦点时触发
select()                 //元素内的文本被选中时触发
submit()                 //表单提交时触发(或者点击了Submit按钮,或者按下了回车键)
reset()                  //表单使用 input type=“reset” 重置表单数据时触发

键盘事件

keydown()               //当一个按键被按下时触发
keypress()              //当一个键被按下一次或者多次时触发
keyup()                 //当一个键弹起时触发
0人推荐
随时随地看视频
慕课网APP

热门评论

神马,这玩意压缩版都80k了

查看全部评论