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

简单350

目录

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

事件


页面载入

1.

1. ready(fn)

复制代码

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

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

复制代码

2.事件处理

1. on(events,fn)

复制代码

在选择元素上绑定一个或多个事件的事件处理函数

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

复制代码

3.

1. off(events,[fn])

复制代码

在选择元素上移除一个或多个事件的事件处理函数

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

复制代码

4.

1. bind(events,fn)

复制代码

为每个匹配元素的特定事件绑定事件处理函数

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

复制代码

5.

1. unbind(type,fn]])bind()

复制代码

的反向操作，从每一个匹配的元素中删除绑定的事件

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

复制代码

6.

1. one(type,[data],fn)

复制代码

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数

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

复制代码

事件委派

1.

1. delegate(selector,[type],[data],fn)

复制代码

指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

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

复制代码

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

复制代码

2.

1. undelegate([selector,[type],fn])

复制代码

删除由 delegate() 方法添加的一个或多个事件处理程序

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

复制代码

事件切换

1.

1. hover([over,]out)

复制代码

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

1. over

复制代码

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

1. out

复制代码

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

1. // 鼠标悬停的表格加上特定的类
   
2. $("td").hover(
   
3.   function () {
   
4.     $(this).addClass("hover");
   
5.   },
   
6.   function () {
   
7.     $(this).removeClass("hover");
   
8.   }
   
9. );

复制代码

事件

1.

1. blur([[data],fn])

复制代码

当元素失去焦点时触发 blur 事件

1. // 鼠标悬停的表格加上特定的类
   
2. $("td").hover(
   
3.   function () {
   
4.     $(this).addClass("hover");
   
5.   },
   
6.   function () {
   
7.     $(this).removeClass("hover");
   
8.   }
   
9. );

复制代码

2.

1. change([[data],fn])

复制代码

当元素的值发生改变时，会发生 change 事件

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

复制代码

3.

1. click([[data],fn])

复制代码

触发每一个匹配元素的click事件

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

复制代码

4.

1. dblclick([[data],fn])

复制代码

当双击元素时，会发生 dblclick 事件

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

复制代码

5.

1. error([[data],fn])

复制代码

当元素遇到错误（没有正确载入）时，发生 error 事件

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

复制代码

6.

1. focus([[data],fn])

复制代码

当元素获得焦点时，触发 focus 事件

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

复制代码

7.

1. focusin([data],fn)

复制代码

当元素获得焦点时，触发 focusin 事件

1. <p><input type="text" /> <span>focusout fire</span></p>
   
2. <p><input type="password" /> <span>focusout fire</span></p>

复制代码

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

复制代码

8.

1. focusout([data],fn)

复制代码

当元素失去焦点时触发 focusout 事件

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

复制代码

9.

1. keydown([[data],fn])

复制代码

当键盘或按钮被按下时，发生 keydown 事件

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

复制代码

10.

1. keypress([[data],fn])

复制代码

当键盘或按钮被按下时，发生 keypress 事件

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

复制代码

11.

1. keyup([[data],fn])

复制代码

当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上

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

复制代码

12.

1. mousedown([[data],fn])

复制代码

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件

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

复制代码

13.

1. mouseenter([[data],fn])

复制代码

当鼠标指针穿过元素时，会发生 mouseenter 事件

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

复制代码

14.

1. mouseleave([[data],fn])

复制代码

当鼠标指针离开元素时，会发生 mouseleave 事件

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

复制代码

15.

1. mousemove([[data],fn])

复制代码

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
事件坐标

• 1. event.clientX, event.clientY

  复制代码
  相对于视口的左上角
  
• 1. event.pageX,event.pageY

  复制代码
  相对于页面的左上角
  
• 1. event.offsetX,event.offsetY

  复制代码
  相对于事件元素的左上角
  

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

复制代码

16.

1. mouseout([[data],fn])

复制代码

当鼠标指针从元素上移开时，发生 mouseout 事件

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

复制代码

17.

1. mouseover([[data],fn])

复制代码

当鼠标指针位于元素上方时，会发生 mouseover 事件

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

复制代码

18.

1. mouseup([[data],fn])

复制代码

当在元素上放松鼠标按钮时，会发生 mouseup 事件

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

复制代码

19.

1. resize([[data],fn])

复制代码

当调整浏览器窗口的大小时，发生 resize 事件

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

复制代码

20.

1. scroll([[data],fn])

复制代码

当用户滚动指定的元素时，会发生 scroll 事件

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

复制代码

21.

1. select([[data],fn])

复制代码

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件

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

复制代码

22.

1. submit([[data],fn])

复制代码

当提交表单时，会发生 submit 事件

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

复制代码

1. 23.unload([[data],fn])

复制代码

在当用户离开页面时，会发生 unload 事件
点击某个离开页面的链接
在地址栏中键入了新的 URL
使用前进或后退按钮
关闭浏览器
重新加载页面

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

复制代码

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
                                                        
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！