zoukankan      html  css  js  c++  java
  • jQuery入门(5):事件

    事件

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

    $(document).ready(function(){

     // Your code here...

    });

    或者直接:当然jQuery可以为$

    jQuery(function() {

     // Your code using failsafe $ alias here...

    });

    事件处理
    bind(type,data,fn)
    为每一个匹配元素的特定事件click绑定一个事件处理器函数

    当每个段落被点击的时候,弹出其文本。

    $("p").bind("click", function(){

     alert( $(this).text() );

    });

    可以在事件处理之前传递一些附加的数据。

    function handler(event) {

     alert(event.data.foo);

    }

    $("p").bind("click", {foo: "bar"}, handler)

    通过返回false来取消默认的行为并阻止事件起泡。

    $("form").bind("submit", function() { return false; })

    通过使用 preventDefault() 方法只取消默认的行为。

    $("form").bind("submit", function(event){

     event.preventDefault();

    });

    通过使用 stopPropagation() 方法只阻止一个事件起泡。

    $("form").bind("submit", function(event){

     event.stopPropagation();

    });

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

    当所有段落被第一次点击的时候,显示所有其文本。

    $("p").one("click", function(){

     alert( $(this).text() );

    });

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

    提交第一个表单

    $("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!"]);

    triggerHandler(type,data):这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作

    例:如果你对一个focus事件执行了 .triggerHandler(),浏览器默认动作将不会被触发,只会触发你绑定的动作。

    <button id="old">.trigger("focus")</button>

    <button id="new">.triggerHandler("focus")</button><br/><br/>

    <input type="text" value="To Be Focused"/>

    代码:

    $("#old").click(function(){

     $("input").trigger("focus");

    });

    $("#new").click(function(){

     $("input").triggerHandler("focus");

    });

    $("input").focus(function(){   $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });

    unbind(type,data):bind()的反向操作,从每一个匹配的元素中删除绑定的事件

    把所有段落的所有事件取消绑定

    $("p").unbind()

    将段落的click事件取消绑定

    $("p").unbind( "click" )

    删除特定函数的绑定,将函数作为第二个参数传入

    var foo = function () {

     // code to handle some kind of event

    };

    $("p").bind("click", foo);

    $("p").unbind("click", foo);

    交互处理
    hover(over,out):
    一个模仿悬停事件的方法(修正了使用mouseout事件的一个常见错误)。

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

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

    鼠标悬停的表格加上特定的类

    $("td").hover(

     function () {

        $(this).addClass("hover");

     },

     function () {

        $(this).removeClass("hover");

     }

    );

    toggle(fn,fn):每次点击时切换要调用的函数

    fn (Function) : 第奇数次点击时要执行的函数。

    fn (Function) : 第偶数次点击时要执行的函数。

    对表格的切换一个类

    $("td").toggle(

     function () {

        $(this).addClass("selected");

     },

     function () {

        $(this).removeClass("selected");

     }

    );

    ALL事件
    blur()/blur(fn)

    说明:触发每一个匹配元素的blur事件/或者绑定一个事件处理函数

    使用:$("p").blur(); /$("p").blur( function () { alert("Hello World!"); } );

    change()/change(fn)

    click()/click(fn)

    dblclick()/dblclick(fn)

    error()/error(fn)

    focus()/focus(fn)

    keydown()/keydown(fn)

    keypress()/keypress(fn)

    keyup()/keyup(fn)

    load(fn)

    mousedown(fn)

    mousemove(fn)

    mouserout(name)/blur(fn)

     

    mouseover(fn)

    mouseup(fn)

    rasize(fn) 当文档窗口改变大小时触发

    $(document).resize(function(){

     alert("Stop it!");

    });

    scroll(fn) 当滚动条发生变化时触发

    $(document).scroll( function() { /* ...do something... */ } );

    select()/select(fn)

    submit()/submit(fn)

    $("form").submit( function () {

     return false;

    } );

    upload(fn)

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

  • 相关阅读:
    Java实现 LeetCode 56 合并区间
    JQuery实现对html结点的操作(创建,添加,删除)
    JQuery实现对html结点的操作(创建,添加,删除)
    JQuery实现对html结点的操作(创建,添加,删除)
    Java实现 LeetCode 55 跳跃游戏
    Java实现 LeetCode 55 跳跃游戏
    Java实现 LeetCode 55 跳跃游戏
    Java实现 LeetCode 54 螺旋矩阵
    Java实现 LeetCode 54 螺旋矩阵
    Java实现 LeetCode 54 螺旋矩阵
  • 原文地址:https://www.cnblogs.com/astar/p/1330238.html
Copyright © 2011-2022 走看看