zoukankan      html  css  js  c++  java
  • jQuery中的事件(七)

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

    这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。

    在DOM加载完成时运行的代码,可以这样写

    $(document).ready(function(){
      // 在这里写你的代码...
    });

    使用 $(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。

    $(function($) {
      // 你可以在这里继续使用$作为别名...
    });

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

    该事件只适用于表单元素。

    参数说明:

    • fn:在每一个匹配元素的submit事件中绑定的处理函数
    • [data],fn
      • data:submit([Data], fn) 可传入data供函数fn处理
      • fn:在每一个匹配元素的submit事件中绑定的处理函数
    $("form:first").submit();
    
    //阻止表单提交
    $("form").submit( function () {
      return false;
    } );

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

    这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

    参数说明:

    • fn:在每一个匹配元素的select事件中绑定的处理函数
    • [data], fn
      • data:select([Data], fn) 可传入data供函数fn处理
      • fn:在每一个匹配元素的select事件中绑定的处理函数
    //触发所有input元素的select事件
    $("input").select();
    //当文本框中文本被选中时执行的函数
    $(":text").select( function () { /* ...do something... */ } );

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

    scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。

    参数说明:

    • fn:在每一个匹配元素的scroll事件中绑定的处理函数
    • [data],fn
      • data:scroll([Data], fn) 可传入data供函数fn处理。

      • fn:在每一个匹配元素的scroll事件中绑定的处理函数。
    //当页面滚动条变化时,执行的函数
    $(window).scroll( function() { /* ...do something... */ } );
    
    //对元素滚动的次数进行计数
    $("div").scroll(function() {
      $("span").text(x+=1);
    });

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

    参数说明:

    • fn:在每一个匹配元素的resize事件中绑定的处理函数
    • [data],fn
      • data:resize([Data], fn) 可传入data供函数fn处理。

      • fn:在每一个匹配元素的resize事件中绑定的处理函数。
    //让人每次改变页面窗口的大小时很郁闷的方法
    $(window).resize(function(){
      alert("Stop it!");
    });
    
    //对浏览器窗口调整大小进行计数
    $(window).resize(function() {
      $('span').text(x+=1);
    });

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

    与 click 事件不同,mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。

    参数说明:

    • fn:在每一个匹配元素的mouseup事件中绑定的处理函数
    • [data],fn
      • data:mouseup([Data], fn) 可传入data供函数fn处理。

      • fn:在每一个匹配元素的mouseup事件中绑定的处理函数。
    //当松开鼠标按钮时,隐藏或显示元素
    $("button").mouseup(function(){
      $("p").slideToggle();
    });

    类似的还有:

    • mouseout([[data],fn]):当鼠标指针从元素上移开时,发生 mouseout 事件
    • mousemove([[data],fn]):当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件
    • mouseover([[data],fn]):当鼠标指针位于元素上方时,会发生 mouseover 事件
    • mouseleave([[data],fn]):当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。
    • mouseenter([[data],fn]):当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。
    • mousedown([[data],fn]):当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。mousedown 与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。

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

    注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

    参数说明:

    • fn:在每一个匹配元素的keyup事件中绑定的处理函数
    • [data],fn
      • data:keyup([Data], fn) 可传入data供函数fn处理。
      • fn:在每一个匹配元素的keyup事件中绑定的处理函数。
    //当按下按键时,改变文本域的颜色
    $("input").keyup(function(){
      $("input").css("background-color","#D6D6FF");
    });

    类似的还有:

    • keypress([[data],fn]):当键盘或按钮被按下时,发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。 不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
    • keydown([[data],fn]):当键盘或按钮被按下时,发生 keydown 事件。如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

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

    focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。

    类似的还有:

    • focusin([data],fn):当元素获得焦点时,触发 focusin 事件。focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
    • focus([[data],fn]):当元素获得焦点时,触发 focus 事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数,注意,某些对象不支持focus方法。
    • focus([[data],fn]):当元素获得焦点时,触发 focus 事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数,注意,某些对象不支持focus方法

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

    当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。在很短的时间内发生两次 click,即是一次 double click 事件。提示:如果把 dblclick 和 click 事件应用于同一元素,可能会产生问题。

    $("p").dblclick( function () { alert("Hello World!"); });

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

    参数说明:

    • data:click([Data], fn) 可传入data供函数fn处理。
    • fn:在每一个匹配元素的click事件中绑定的处理函数。
    $("p").click();

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

    该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。

    参数说明:

    • data:change([Data], fn) 可传入data供函数fn处理。
    • fn:在每一个匹配元素的change事件中绑定的处理函数。
    $(selector).change();
    
    $("input[type='text']").change( function() {
      // 这里可以写些验证代码
    });

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

    这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的。

    参数说明:

    • data:blur([Data], fn) 可传入data供函数fn处理。
    • fn:在每一个匹配元素的blur事件中绑定的处理函数。
    $("p").blur();
    
    $("p").blur( function () { alert("Hello World!"); } );

    13. toggle([speed],[easing],[fn]), 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件

    如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

    1.9版本 .toggle(function, function, … ) 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。

    参数说明:

    • [speed] [,fn]
      • speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值:slow,normal,fast。"
      • fn:在动画完成时执行的函数,每个元素执行一次。
      • speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值:slow,normal,fast。"

      • easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"

      • fn:在动画完成时执行的函数,每个元素执行一次。

    • switch
      • 用于确定显示/隐藏的开关。如:true - 显示元素,false - 隐藏元素
    $('td).toggle();
    
    $("p").toggle("slow");
    
    
    $("p").toggle("fast",function(){
       alert("Animation Done.");
     });
    
    $('#foo').toggle(showOrHide);
    
    //相当于
    if (showOrHide) {
      $('#foo').show();
    } else {
      $('#foo').hide();
    }      

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

    鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件

    参数说明:

    • over,out
      • over:鼠标移到元素上要触发的函数
      • out:鼠标移出元素要触发的函数
    $("td").hover(
      function () {
        $(this).addClass("hover");
      },
      function () {
        $(this).removeClass("hover");
      }
    );

    15. triggerHandler(type, [data]), 触发指定的事件类型上所有绑定的处理函数

    这个方法的行为表现与trigger类似,但有以下三个主要区别:

    • 不会触发浏览器默认事件, 也不会产生事件冒泡
    • 只触发jQuery对象集合中第一个元素的事件处理函数
    • 返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。

    参数说明:

    • type,[data]  String,Array
      • type:要触发的事件类型
      • data:传递给事件处理函数的附加参数
    //如果你对一个focus事件执行了 .triggerHandler() ,浏览器默认动作将不会被触发,只会触发你绑定的动作。
    //html代码
    <button id="old">.trigger("focus")</button>
    <button id="new">.triggerHandler("focus")</button><br/><br/>
    <input type="text" value="To Be Focused"/>
    
    //jquery代码
    $("#old").click(function(){
      $("input").trigger("focus");
    });
    $("#new").click(function(){
      $("input").triggerHandler("focus");
    });
    $("input").focus(function(){
      $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
    });

    16. trigger(type,[data]), 在每一个匹配的元素上触发某类事件

    这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。

    参数说明:

    • type,[data]   String|Event,Array
      • type:一个事件对象或者要触发的事件类型;Event 是事件发生时运行的函数

      • data:传递给事件处理函数的附加参数

    //提交第一个表单,但不用submit()
    $("form:first").trigger("submit")
    
    //给一个事件传递参数
    $("p").click( function (event, a, b) {
      // 一个普通的点击事件时,a和b是undefined类型
      // 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
    } ).trigger("click", ["foo", "bar"]);
    
    //下面的代码可以显示一个"Hello World"
    $("p").bind("myEvent", function (event, message1, message2) {
      alert(message1 + ' ' + message2);
    });
    $("p").trigger("myEvent", ["Hello","World!"]);

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

    在每个对象上,这个事件处理函数只会被执行一次。

    这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。

    参数说明:

    • type,[data],fn    String,Object,Function
      • type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
      • data:将要传递给事件处理函数的数据映射
      • fn:每当事件触发时执行的函数。
    //当所有段落被第一次点击的时候,显示所有其文本。
    $("p").one("click", function(){
      alert( $(this).text() );
    });

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

    off() 方法移除用.on()绑定的事件处理程序。

    当有多个过滤参数,所提供的参数都必须匹配的事件处理程序被删除。

    $("p").off()
    
    $("p").off( "click", "**" )
  • 相关阅读:
    vue实战使用ajax请求后台数据(小白)
    jQuery实现tab栏切换效果
    jQuery下的ajax实例
    数据库之视图更新
    SQL Server 全文索引创建
    SQL Server 分区表
    数据快照 (Database Snapshot)
    FileStream
    ODBC,OLEDB,ADO,ADO.net,JDBC 理解
    拖延症?贪玩?来试试"百万金币时间管理法"
  • 原文地址:https://www.cnblogs.com/myitnews/p/11784938.html
Copyright © 2011-2022 走看看