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!"); } );

  • 相关阅读:
    分享50款 Android 移动应用程序图标【上篇】
    Matter.js – 你不能错过的 2D 物理引擎
    Materialize
    Gulp.js 参考手册,自动化构建利器
    严谨而浪漫!20个来自德国网页设计
    Muzli – 所有你需要的设计灵感都在这
    FormatJS – 让你的 Web 应用程序国际化
    字体大宝库:20款免费的情人节字体
    15个优秀的 Material Design(材料设计)案例
    SpaceBase – 基于 Sass 的响应式 CSS 框架
  • 原文地址:https://www.cnblogs.com/astar/p/1330238.html
Copyright © 2011-2022 走看看