详解jQuery的核心函数和事件处理

目录

• 事件
• 页面载入
• 事件委派
• 事件切换
• 事件

事件

页面载入

1.ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数

$(document).ready(function(){// 在这里写你的代码...});// 下面是简写$(function($) {// 你可以在这里继续使用$作为别名...});

2.事件处理on(events,fn)在选择元素上绑定一个或多个事件的事件处理函数

// 给p标签添加点击事件监听$(\"p\").on(\"click\", function(){alert( $(this).text() );});// 第二种写法 等效于上面$(\"p\").click(function(){alert( $(this).text() );});

3.off(events,[fn])在选择元素上移除一个或多个事件的事件处理函数

// 移除p标签绑定的所有事件监听$(\"p\").off()// 移除p标签绑定的click事件监听$(\"p\").off( \"click\")

4.bind(events,fn)为每个匹配元素的特定事件绑定事件处理函数

// 移除p标签绑定的所有事件监听$(\"p\").bind(\"click\", function(){alert( $(this).text() );});// 同时绑定多个事件类型$(\'#foo\').bind(\'mouseenter mouseleave\', function() {alert();});

5.unbind(type,fn]])bind()的反向操作，从每一个匹配的元素中删除绑定的事件

// 把所有段落的所有事件取消绑定$(\"p\").unbind()// 将段落的click事件取消绑定$(\"p\").unbind( \"click\" )

6.one(type,[data],fn)为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数

// 当所有段落被第一次点击的时候，显示所有其文本$(\"p\").one(\"click\", function(){alert( $(this).text() );});

事件委派

1.delegate(selector,[type],[data],fn)指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

<div style=\"background-color:red\"><p>这是一个段落。</p><button>请点击这里</button></div>

// 当点击button时，隐藏或显示 p 元素$(\"div\").delegate(\"button\", \"click\", function () {$(\"p\").slideToggle();});

2.undelegate([selector,[type],fn])删除由 delegate() 方法添加的一个或多个事件处理程序

// 从p元素删除由 delegate() 方法添加的所有事件处理器$(\"p\").undelegate();// 从p元素删除由 delegate() 方法添加的所有click事件处理器$(\"p\").undelegate( \"click\" )

事件切换

1.hover([over,]out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

// 鼠标悬停的表格加上特定的类$(\"td\").hover(function () {$(this).addClass(\"hover\");},function () {$(this).removeClass(\"hover\");});

事件

1.blur([[data],fn])当元素失去焦点时触发 blur 事件

// 鼠标悬停的表格加上特定的类$(\"td\").hover(function () {$(this).addClass(\"hover\");},function () {$(this).removeClass(\"hover\");});

2.change([[data],fn])当元素的值发生改变时，会发生 change 事件

// 触发被选元素的 change 事件$(selector).change();

3.click([[data],fn])触发每一个匹配元素的click事件

// 触发页面内所有段落的点击事件$(\"p\").click();

4.dblclick([[data],fn])当双击元素时，会发生 dblclick 事件

// 给页面上每个段落的双击事件绑上 \"Hello World!\" 警告框$(\"p\").dblclick( function () { alert(\"Hello World!\"); });

5.error([[data],fn])当元素遇到错误（没有正确载入）时，发生 error 事件

// 在服务器端记录JavaScript错误日志:$(window).error(function(msg, url, line){jQuery.post(\"js_error_log.php\", { msg: msg, url: url, line: line });});

6.focus([[data],fn])当元素获得焦点时，触发 focus 事件

// 当页面加载后将 id 为 \'login\' 的元素设置焦点:$(document).ready(function(){$(\"#login\").focus();});

7.focusin([data],fn)当元素获得焦点时，触发 focusin 事件

<p><input type=\"text\" /> <span>focusout fire</span></p><p><input type=\"password\" /> <span>focusout fire</span></p>

// 获得焦点后会触发动画$(\"p\").focusin(function() {$(this).find(\"span\").css(\'display\',\'inline\').fadeOut(1000);});

8.focusout([data],fn)当元素失去焦点时触发 focusout 事件

// 获得焦点后会触发动画$(\"p\").focusout(function() {$(this).find(\"span\").css(\'display\',\'inline\').fadeOut(1000);});

9.keydown([[data],fn])当键盘或按钮被按下时，发生 keydown 事件

// 在页面内对键盘按键做出回应，可以使用如下代码$(window).keydown(function(event){switch(event.keyCode) {// ...// 不同的按键可以做不同的事情// 不同的浏览器的keycode不同// 更多详细信息:     http://unixpapa.com/js/key.html// ...}});

10.keypress([[data],fn])当键盘或按钮被按下时，发生 keypress 事件

// 计算在输入域中的按键次数$(\"input\").keydown(function(){$(\"span\").text(i+=1);});

11.keyup([[data],fn])当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上

// 当按下按键时，改变文本域的颜色$(\"input\").keyup(function(){$(\"input\").css(\"background-color\",\"#D6D6FF\");});

12.mousedown([[data],fn])当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件

// 当按下鼠标按钮时，隐藏或显示元素$(\"button\").mousedown(function(){$(\"p\").slideToggle();});

13.mouseenter([[data],fn])当鼠标指针穿过元素时，会发生 mouseenter 事件

// 当鼠标指针进入（穿过）元素时，改变元素的背景色$(\"p\").mouseenter(function(){$(\"p\").css(\"background-color\",\"yellow\");});

14.mouseleave([[data],fn])当鼠标指针离开元素时，会发生 mouseleave 事件

// 当鼠标指针离开元素时，改变元素的背景色$(\"p\").mouseleave(function(){  $(\"p\").css(\"background-color\",\"#E9E9E4\");});// 当鼠标指针离开元素时，改变元素的背景色$(\"p\").mouseleave(function(){$(\"p\").css(\"background-color\",\"#E9E9E4\");});

15.mousemove([[data],fn])当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件

事件坐标

• event.clientX, event.clientY相对于视口的左上角
• event.pageX,event.pageY相对于页面的左上角
• event.offsetX,event.offsetY相对于事件元素的左上角

// 获得鼠标指针在页面中的位置$(document).mousemove(function(e){$(\"span\").text(e.pageX + \", \" + e.pageY);});

16.mouseout([[data],fn])当鼠标指针从元素上移开时，发生 mouseout 事件

// 当鼠标从元素上移开时，改变元素的背景色：$(\"p\").mouseout(function(){$(\"p\").css(\"background-color\",\"#E9E9E4\");});

17.mouseover([[data],fn])当鼠标指针位于元素上方时，会发生 mouseover 事件

// 当鼠标指针位于元素上方时时，改变元素的背景色$(\"p\").mouseover(function(){$(\"p\").css(\"background-color\",\"yellow\");});

18.mouseup([[data],fn])当在元素上放松鼠标按钮时，会发生 mouseup 事件

// 当松开鼠标按钮时，隐藏或显示元素$(\"button\").mouseup(function(){$(\"p\").slideToggle();});

19.resize([[data],fn])当调整浏览器窗口的大小时，发生 resize 事件

// 改变页面窗口的大小时弹出警告窗$(window).resize(function(){alert(\"Stop it!\");});

20.scroll([[data],fn])当用户滚动指定的元素时，会发生 scroll 事件

// 当页面滚动条变化时，执行的函数:$(window).scroll( function() {alert(\"Stop it!\");});

21.select([[data],fn])当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件

// 触发所有input元素的select事件:$(\"input\").select();

22.submit([[data],fn])当提交表单时，会发生 submit 事件

// 提交本页的第一个表单:$(\"form:first\").submit();// 阻止表单提交:$(\"form\").submit( function () {return false;} );

23.unload([[data],fn])在当用户离开页面时，会发生 unload 事件

点击某个离开页面的链接

在地址栏中键入了新的 URL

使用前进或后退按钮

关闭浏览器

重新加载页面

// 页面卸载的时候弹出一个警告框:$(window).unload( function () { alert(\"Bye now!\"); } );

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

• JQuery核心函数是什么及使用方法介绍
• 浅谈Jquery核心函数
• jQuery源码分析-03构造jQuery对象-源码结构和核心函数
• jQuery事件处理的特征(事件命名机制)
• 深入理解jQuery 事件处理
• 浅谈jquery事件处理