码迷,mamicode.com
首页 > Web开发 > 详细

jQuery中的事件

时间:2016-01-12 10:02:25      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:

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

 

jQuery中的事件

标签:

原文地址:http://www.cnblogs.com/murong/p/5123270.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!