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

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

    Jquery函数
    ready     (  [  [data],fn    ]  ) 页面加载完毕后发生的事件
    blur     (  [  [data],fn    ]  ) 元素失去焦点时发生的事件
    change     (  [  [data],fn    ]  ) 元素的值发生改变时发生的事件
    clikc     (  [  [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");

    }afunction(){

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

      

  • 相关阅读:
    angular js模块,angular js控制器
    select ipnut双向数据绑定用法
    ng-repeat循环遍历的用法
    angular js起步
    文件上传(预览2 老师提供的方法)
    设置mui头部(头部与最上面可以设置同样的样子)支持ios (苹果) 安卓不支持
    点击按钮btn 打开(跳转)新的页面
    定位精准 并打印出来
    把原始坐标转化为百度坐标(位置更精确)
    原始地理定位
  • 原文地址:https://www.cnblogs.com/wjn563/p/4034816.html
Copyright © 2011-2022 走看看