• jQuery中的事件


           JavaScript是一种事件驱动型的语言,也就是说,javaScript和HTML之间的交互是通过用户在浏览器上触发事件来驱动的。jQuery扩展了JavaScript的事件处理机制。

    jquery函数
    ready     (  [  [data],fn    ]  ) 页面加载完毕后发生的事件
    blur     (  [  [data],fn    ]  ) 元素失去焦点时发生的事件
    change     (  [  [data],fn    ]  ) 元素的值发生改变时发生的事件
    dblcikc   (  [  [data],fn    ]  ) 鼠标双击时发生的事件
    focus     (  [  [data],fn    ]  ) 元素获得焦点时发生的事件
    keydown       (  [  [data],fn    ]  ) 按下键盘时发生的事件
    keyup     (  [  [data],fn    ]  ) 松开键盘时发生的事件
    keypress     (  [  [data],fn    ]  ) 按下并松开键盘是发生的事件
    mousdown     (  [  [data],fn    ]  ) 按下鼠标按钮时发生的事件
    mouseover (  [  [data],fn    ]  ) 鼠标移动时发生的事件
    mouseout     (  [  [data],fn    ]  ) 鼠标离开某个元素时发生的事件
    mouseover     (  [  [data],fn    ]  ) 鼠标浮到某个元素上时发生的事件
    mouseup     (  [  [data],fn    ]  ) 松开鼠标按钮时发生的事件
    scroll     (  [  [data],fn    ]  ) 页面滚动时发生的事件
    select     (  [  [data],fn    ]  ) 页面input元素的选取事件
    submit     (  [  [data],fn    ]  ) 表单提交事件
    unload     (  [  [data],fn    ]  ) 页面卸载时发生的事件
       
       
       

    1.页面载入和卸载事件

        $(document).ready()和window.onload():

      $(document).ready()是在页面的DOM元素加载完毕后触发而window.onload()是在页面将所有元素(包括页面所关联的资源)加载完毕后再触发。

      2.鼠标相关的事件

      ag:      $(document).mousedown(

          function(e){

              $("#begin").html("起始位置:"+e.pageX+","+e.pageY);

               }

          )

        $(document).mousedown(

           function(e){

            $("#now").html("现在的位置:"+e.pageX+","+e.pageY);

            } 

          )

        $(document).mouseup(

        function(e){

      $("#end").html("结束的位置:"+e.pageX+","+e.pageY);

              }

          )

    3.键盘相关的事件

    $("#word").keypress(

    function(){

    $("#copy").html($("#word").val());

    }

    )

    4.焦点相关的事件

    5.其他相关事件

    6.事件对象

    属性 说明
    type 获取事件类型
    target 获取触发事件的元素
    result 获取上一个元素处理函数的返回值
    which 获取在鼠标单击事件中获取鼠标按键1表示左键2表示中键3表是右键
    pageX/Y 获取事件发生时相对于页面的坐标
    keyCode 获取在键盘事件中键盘对应的键值
    screenX/Y 获取在键盘事件发生时相对于屏幕的坐标
    data

    事件发生时传递的参数信息都保留在这个属性种

    $("#btn").click(

    function(e){

    var str="事件发生的类型是:"+e.type+"事件发生的对象是:"+e.target.type;

    if(e.which==1){

    str=str+"单击的是鼠标左键";

    $("#content").html(str);

    }})

        二.     jQuery的合成事件

      (1.) hover 事件

      $("#id").hover(

    function(){

    $("#a").css("display","none");

    },function(){

    $("#a").css("display","block");

    }

    );

        (2.)toggle事件

      jQuery选择器.toggle(fn1,fn2fn3,,,,,,,)

      三. jQuery 事件绑定

      (1).bind和unbind

    $("#id").bind(

    {

    事件名:fn(),

    事件名:fn(),

    ......

    }

    )

    $("p").unbind();//移除段落元素的所有事件;

    $("P").unibind("click");//移除段落元素的鼠标单击事件

      (2).live和die

    live是对bind的增强,如果对某个元素绑定了某个事件,然后再复制这个元素,如果是bind的话则新的元素不能执行bind 绑定的方法

    而live则可以复制live绑定的方法。

      (3).on和off

    on和off 要比以上的方法更加优秀。

    $("#btn").on("click",{sfz:$("#txt").val()},function(e){

    if(e.data.sfz==""){

    alert("身份证号不能为空!");

    }else{

    var y=e.data.sfz.substr(6,4);

    var m=e.data.sfz.substr(10,2);

    var d=e.data.sfz.substr(12,2);

    alert("出生日期是:"+y+"年"+m+"月"+d+"日");

    }

    })

      四.模拟触发事件

    $("#btn").click();

    $("#btn").trigger("click");

  • 相关阅读:
    祝师傅新婚快乐 :)
    NetBeans IDE 6.8 里程碑 2 已经可用!
    GRETA库在VS 2005环境下的编译经验
    祝师傅新婚快乐 :)
    NetBeans 时事通讯(刊号 # 74 Sep 30, 2009)
    忆父亲
    NetBeans 时事通讯(刊号 # 74 Sep 30, 2009)
    Miss Nev great app
    订阅我不会怀孕
    数据结构排序: 两路归并排序算法 子逸 博客园
  • 原文地址:https://www.cnblogs.com/murong/p/5123270.html
Copyright © 2020-2023  润新知