zoukankan      html  css  js  c++  java
  • jQuery 参考手册

    事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。

    bind()向匹配元素附加一个或更多事件处理器

    $(selector).bind(event,function)
    
    $(selector).bind({event:function, event:function, ...})
    
    $("button").bind("click",function(){
      $("p").slideToggle();//为button绑定一个click事件和函数
    });

    blur()触发、或将函数绑定到指定元素的 blur 事件

    $(selector).blur()
    
    
    $(selector).blur(function)
    
    $("input").blur(function(){
      $("input").css("background-color","#D6D6FF");//当元素失去焦点时,会触发事件
    });

    change()触发、或将函数绑定到指定元素的 change 事件(该事件仅适用于文本域(text field),以及 textarea 和 select 元素)

    $(selector).change()
    
    $(selector).change(function)
    
    $(".field").change(function(){
      $(this).css("background-color","#FFFFCC");//当元素的值发生改变时,会发生 change 事件
    });

    click()触发、或将函数绑定到指定元素的 click 事件

    $(selector).click()
    
    $(selector).click(function)
    
    $("button").click(function(){
      $("p").slideToggle();//当点击元素时,会发生 click 事件
    });

    dblclick()触发、或将函数绑定到指定元素的 double click 事件

    $(selector).dblclick()
    
    $(selector).dblclick(function)
    
    $("button").dblclick(function(){
      $("p").slideToggle();//当双击元素时,会发生 dblclick 事件
    });

    delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器

    $(selector).delegate(childSelector,event,function)
    
    $("div").delegate("button","click",function(){
      $("p").slideToggle();//为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数//
    });

    die()移除所有通过 live() 函数添加的事件处理程序。

    $(selector).die(event,function)
    
    $("p").die();//die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序

    error()触发、或将函数绑定到指定元素的 error 事件

    $(selector).error()
    
    $(selector).error(function)
    
    $("img").error(function(){
      $("img").replaceWith("
    Missing image!//当元素遇到错误(没有正确载入)时,发生 error 事件。触发 error 事件,或规定当发生 error 事件时运行的函数
    ");
    });

    event.isDefaultPrevented()返回 event 对象上是否调用了 event.preventDefault()。

    event.isDefaultPrevented()
    
    $("a").click(function(event){
       event.preventDefault();//isDefaultPrevented() 方法返回指定的 event 对象上是否调用了 preventDefault() 方法
      alert("Default prevented: " + event.isDefaultPrevented());
    });

    event.pageX相对于文档左边缘的鼠标位置。

    event.pageX
    
    $(document).mousemove(function(e){
      $("span").text("X: " + e.pageX + ", Y: " + e.pageY);//pageX() 属性是鼠标指针的位置,相对于文档的左边缘
    });

    event.pageY相对于文档上边缘的鼠标位置。同上

    event.preventDefault()阻止事件的默认动作。

    event.preventDefault()
    
    $("a").click(function(event){
      event.preventDefault();//preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)
    });

    event.result包含由被指定事件触发的事件处理器返回的最后一个值。

    event.result
    
    $("button").click(function(e) {
      $("p").html(e.result);//result 属性包含由被指定事件触发的事件处理器返回的最后一个值,除非这个值未定义
    });

    event.target触发该事件的 DOM 元素。

    event.target
    
    $("p, button, h1, h2").click(function(event){
      $("div").html("Triggered by a " + event.target.nodeName + " element.");//target 属性规定哪个 DOM 元素触发了该事件
    });

    event.timeStamp该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。

    event.timeStamp
    
    $("button").click(function(event){
      $("span")html(event.timeStamp);//timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数
    });

    event.type描述事件的类型。

    event.type
    
    $("p").bind('click dblclick mouseover mouseout',function(event){
      $("div").html("Event: " + event.type);//属性描述触发哪种事件类型
    });

    event.which指示按了哪个键或按钮。

    event.which
    
    $("input").keydown(function(event){
      $("div").html("Key: " + event.which);//which 属性指示按了哪个键或按钮
    });

    focus()触发、或将函数绑定到指定元素的 focus 事件

    $(selector).focus()
    
    $(selector).focus(function)
    
    $("input").focus(function(){
      $("input").css("background-color","#FFFFCC");//当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。发生 focus 事件
    });

    keydown()触发、或将函数绑定到指定元素的 key down 事件

    $(selector).keydown()
    
    $(selector).keydown(function)
    
    $("input").keydown(function(){
      $("input").css("background-color","#FFFFCC");//当按钮被按下时,发生 keydown 事件
    });

    keypress()触发、或将函数绑定到指定元素的 key press 事件

    $(selector).keypress()
    
    $(selector).keypress(function)
    
    $("input").keypress(function(){
      $("span").text(i+=1);/*keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。
    不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件*/
    });

    keyup()触发、或将函数绑定到指定元素的 key up 事件

    $(selector).keyup()
    
    $(selector).keyup(function)
    
    $("input").keyup(function(){
      $("input").css("background-color","#D6D6FF");
    });//当按钮被松开时,发生 keyup 事件

    live()为当前或未来的匹配元素添加一个或多个事件处理器

    $(selector).live(event,function)
    
    $("button").live("click",function(){
      $("p").slideToggle();/*live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
    通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)*/
    });

    load()触发、或将函数绑定到指定元素的 load 事件

    $(selector).load(function)
    
    $("img").load(function(){
      $("div").text("Image loaded");/*当指定的元素(及子元素)已加载时,会发生 load() 事件。
    该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。
    根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。*/
    });

    mousedown()触发、或将函数绑定到指定元素的 mouse down 事件

    $(selector).mousedown()
    
    $(selector).mousedown(function)
    
    $("button").mousedown(function(){
      $("p").slideToggle();//与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生
    });

    mouseenter()触发、或将函数绑定到指定元素的 mouse enter 事件

    $(selector).mouseenter()
    
    $(selector).mouseenter(function)
    
    $("p").mouseenter(function(){
      $("p").css("background-color","yellow");
    });/*当鼠标指针穿过元素时,会发生 mouseenter 事件。
    该事件大多数时候会与 mouseleave 事件一起使用。与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。*/

    mouseleave()触发、或将函数绑定到指定元素的 mouse leave 事件

    $(selector).mouseleave()
    
    $(selector).mouseleave(function)
    
    $("p").mouseleave(function(){
      $("p").css("background-color","#E9E9E4");
    });/*当鼠标指针离开元素时,会发生 mouseleave 事件。
    该事件大多数时候会与 mouseenter 事件一起使用。与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件*/

    mousemove()触发、或将函数绑定到指定元素的 mouse move 事件

    $(selector).mousemove()
    
    $(selector).mousemove(function)
    
    $(document).mousemove(function(e){
      $("span").text(e.pageX + ", " + e.pageY);
    });//用户把鼠标移动一个像素,就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

    mouseout()触发、或将函数绑定到指定元素的 mouse out 事件

    $(selector).mouseout()
    
    $(selector).mouseout(function)
    
    $("p").mouseout(function(){
      $("p").css("background-color","#E9E9E4");
    });//当鼠标指针从元素上移开时,发生 mouseout 事件

    mouseover()触发、或将函数绑定到指定元素的 mouse over 事件

    $(selector).mouseover()
    
    $(selector).mouseover(function)
    
    $("p").mouseover(function(){
      $("p").css("background-color","yellow");
    });//当鼠标指针位于元素上方时,会发生 mouseover 事件.该事件大多数时候会与 mouseout 事件一起使用

    mouseup()触发、或将函数绑定到指定元素的 mouse up 事件

    $(selector).mouseup()
    
    $(selector).mouseup(function)
    
    $("button").mouseup(function(){
      $("p").slideToggle();//当在元素上放松鼠标按钮时,会发生 mouseup 事件
    });

    one()向匹配元素添加事件处理器。每个元素只能触发一次该处理器。

    $(selector).one(event,function)
    
    $("p").one("click",function(){
      $(this).animate({fontSize:"+=6px"});
    });//one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。当使用 one() 方法时,每个元素只能运行一次事件处理器函数

    ready()文档就绪事件(当 HTML 文档就绪可用时)

    $(document).ready(function)
    
    $().ready(function)
    
    $(function)
    
    $(document).ready(function(){
      $(".btn1").click(function(){
        $("p").slideToggle();//当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件
      });
    });

    resize()触发、或将函数绑定到指定元素的 resize 事件

    $(selector).resize()
    
    $(selector).resize(function)
    
    $(window).resize(function() {
      $('span').text(x+=1);//当调整浏览器窗口的大小时,发生 resize 事件
    });

    scroll()触发、或将函数绑定到指定元素的 scroll 事件

    $(selector).scroll()
    
    $(selector).scroll(function)
    
    $("div").scroll(function() {
      $("span").text(x+=1);//当用户滚动指定的元素时,会发生 scroll 事件。
    scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)
    });

    select()触发、或将函数绑定到指定元素的 select 事件

    $(selector).select()
    
    $(selector).select(function)
    
    $("input").select(function(){
      $("input").after(" Text marked!");
    });//当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件

    submit()触发、或将函数绑定到指定元素的 submit 事件

    $(selector).submit()
    
    $(selector).submit(function)
    
    $("form").submit(function(e){
      alert("Submitted");//当提交表单时,会发生 submit 事件。该事件只适用于表单元素
    });

    toggle()绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。

    $(selector).toggle(function1(),function2(),functionN(),...)
    
    $("p").toggle(
      function(){
      $("body").css("background-color","green");},
      function(){
      $("body").css("background-color","red");},
      function(){
      $("body").css("background-color","yellow");}
    );//toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件
    
    $(selector).toggle(switch)//switch必需。布尔值,规定 toggle() 是否应只显示或只隐藏所有被选元素

    trigger()所有匹配元素的指定事件

    $(selector).trigger(event)
    
    $("button").click(function(){
      $("input").trigger("select");
    });//规定被选元素要触发的事件

    triggerHandler()第一个被匹配元素的指定事件

    $(selector).triggerHandler(event)
    
    $("button").click(function(){
      $("input").triggerHandler("select");
    });//triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素

    unbind()从匹配元素移除一个被添加的事件处理器

    $(selector).unbind(event,function)
    
    $("button").click(function(){
      $("p").unbind();
    });/*unbind() 方法移除被选元素的事件处理程序。
    该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
    ubind() 适用于任何通过 jQuery 附加的事件处理程序*/

    undelegate()从匹配元素移除一个被添加的事件处理器,现在或将来

    $(selector).undelegate(selector,event,function)
    
    $("body").undelegate()//undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序

    unload()触发、或将函数绑定到指定元素的 unload 事件

    event.unload(function)
    
    $(window).unload(function(){
      alert("Goodbye!");
    });/*当用户离开页面时,会发生 unload 事件。
    具体来说,当发生以下情况时,会发出 unload 事件:
    点击某个离开页面的链接
    在地址栏中键入了新的 URL
    使用前进或后退按钮
    关闭浏览器
    重新加载页面
    unload() 方法将事件处理程序绑定到 unload 事件。
    unload() 方法只应用于 window 对象*/
  • 相关阅读:
    安装一些好用的工具
    转:通过快键强制关闭 Ubuntu 上无响应的程序
    同步cm10.1源码时出现的一些错误的解决办法。
    repo sync的介绍翻译
    配置grub解决ubuntu12.04不能保存亮度和调节的问题
    给fcitx加上云拼音库
    自己安装配置ubuntu12.04过程(内容丰富)
    关于repo sync -j*的含义的猜测
    同步cm10.1的时候发生同步错误不能找到github上的文件
    Element-ui tree组件自定义节点使用方法
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3539755.html
Copyright © 2011-2022 走看看