江苏福彩快三:JQuery中DOM事件绑定用法详解,j

作者:江苏福彩快三计算机网络

本文实例讲述了JQuery中DOM事件绑定用法。分享给大家供大家参考。具体分析如下:

JQuery中DOM事件绑定用法详解,jquerydom

本文实例讲述了JQuery中DOM事件绑定用法。分享给大家供大家参考。具体分析如下:

在文档加载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法的调用格式为:

bind( type [, data] , fn);

bind()方法有3个参数,说明如下。

第1个参数是事件类型,类型包括:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等,当然也可以是自定义名称。
第2个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象。
第3个参数则是用米绑定的处理函数。

可以发现,jQuery中的事件绑定类型比普通的JavaScript事件绑定类型少了“on”。例如鼠标单击事件在jQuer中对应的是click事件,而在JavaScript中对应的是onclick()函数。

按照需求,需要完成以下几个步骤。

  1. 等待DOM加载完毕。
  2. 找到“标题”所在的元素,绑定click事件。
  3. 找到“内容”元素,将“内容”元素显示。

    $(function(){ $("#panel h5.head").bind("click",function(){

    var $content = $(this).next();
    if($content.is(":visible")){
       $content.hide();
     }else{
       $content.show();
     }
    

    }) })

与ready()方法一样,bind()方法也可以多次调用。

上面jQuery代码中有一个关键字this,与在JavaScript中的作用一样,this引用的是携带相应行为的DOM元素。为了使该DOM元素能够使用jQuery中的方法,可以使用$(this)将其转换为jQuery对象。

为了判断元素是否显示,可以使用jQuery中的is()方法来完成。在代码中,发现$(this).next("div.content")被多次使用,因此可以为它定义一个局部变量:$content。

上面的例子中,给元素绑定的事件类型是click,当用户单击的时候会触发绑定的事件,然后执行事件的函数代码。现在把事件类型换成mouseover和mouseout,即当光标滑过的时候,就触发事件。需要进行以下几步操作。

  1. 等待DOM加载完毕。
  2. 找到“标题”所在的元素,绑定mouseover事件。
  3. 找到“内容”元素,显示“内容”。
  4. 找到“标题”所在的元素,绑定mouseout事件。
  5. 找到“内容”元素,隐藏“内容”。

代码运行后,当光标滑过“标题”链接后,相应的“内容”将被显示。当光标滑出“标题”链接后,相应的“内容”则被隐藏。

代码如下:

$(function(){ 
 $("#panel h5.head").bind("mouseover",function(){ 
  $(this).next().show(); 
 }); 
  $("#panel h5.head").bind("mouseout",function(){ 
   $(this).next().hide(); 
 }) 
})

在上面几个例子中,分别用bind()方法给“标题”绑定了click事件、mouseover事件和mouseout事件,绑定方法都一样。除此之外,bind0方法还能绑定其他所有的JavaScript事件。

像click、mouseover和mouseout这类事件,在程序中经常会使用到,jQuery为此也提供了一套简写的方法。简写方法和bind()方法的使用类似,实现的效果也相同,惟一的区别是能够减少代码量。

例如把上面的例子改写成使用简写绑定事件的方式,代码如下:

$(function(){
 $("#panel2 h5.head").mouseover(function(){
   $(this).next().show();
  });
  $("#panel2 h5.head").mouseout(function(){
    $(this).next().hide();
  })
})

希望本文所述对大家的jQuery程序设计有所帮助。

本文实例讲述了JQuery中DOM事件绑定用法。分享给大家供大家参考。具体分析如下: 在文档加载完成后...

jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力

jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力

在文档加载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法的调用格式为:

一. jQuery的事件

一. jQuery的事件

bind( type [, data] , fn);

1. $(document).ready(function(){})加载方式

再次回到window.onload和$(document).ready(function(){})的比较中,后者是jQuery最重要的事件函数。

1. $(document).ready(function(){})加载方式

再次回到window.onload和$(document).ready(function(){})的比较中,后者是jQuery最重要的事件函数。

bind()方法有3个参数,说明如下。

(1)执行时机

$(document).ready(function(){})是待DOM就绪时马上可以执行。不一位置这些元素已经完全下载完成。一个简单的例子就是:图片可能没下载完毕,但是jq就可以调用了。

另外,诸如图片未加载完毕,导致涉及图片宽高的属性无法被jq调用,可以使用load()方法。

1
$(window).load(function(){})

以上在用法和执行时机方面等价于window.onload。

(1)执行时机

$(document).ready(function(){})是待DOM就绪时马上可以执行。不一位置这些元素已经完全下载完成。一个简单的例子就是:图片可能没下载完毕,但是jq就可以调用了。

另外,诸如图片未加载完毕,导致涉及图片宽高的属性无法被jq调用,可以使用load()方法。

1
$(window).load(function(){})

以上在用法和执行时机方面等价于window.onload。

第1个参数是事件类型,类型包括:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等,当然也可以是自定义名称。
第2个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象。
第3个参数则是用米绑定的处理函数。

(2)多次使用

window.onload在一个js文件中只能用一次,后面的会覆盖掉前面的。

但是$(document).ready(function(){})可以多次调用,按照顺序执行。

(2)多次使用

window.onload在一个js文件中只能用一次,后面的会覆盖掉前面的。

但是$(document).ready(function(){})可以多次调用,按照顺序执行。

可以发现,jQuery中的事件绑定类型比普通的JavaScript事件绑定类型少了“on”。例如鼠标单击事件在jQuer中对应的是click事件,而在JavaScript中对应的是onclick()函数。

(3)简写

$(document).ready(function(){})的简写就是$(function(){})。

(3)简写

$(document).ready(function(){})的简写就是$(function(){})。

按照需求,需要完成以下几个步骤。

2. 事件的绑定——bind方法。

某个元素需要绑定一个事件时,需要bind方法。

1
bind(type,[.data],fn);

bind方法三个参数:

第一个是事件类型(包括blur、focus、load、resize.....)——JavaScript的事件把on去掉就是jQuery的事件

第二个参数可选作为event.data。

第三个是处理函数

2. 事件的绑定——bind方法。

某个元素需要绑定一个事件时,需要bind方法。

1
bind(type,[.data],fn);

bind方法三个参数:

第一个是事件类型(包括blur、focus、load、resize.....)——JavaScript的事件把on去掉就是jQuery的事件

第二个参数可选作为event.data。

第三个是处理函数

  1. 等待DOM加载完毕。
  2. 找到“标题”所在的元素,绑定click事件。
  3. 找到“内容”元素,将“内容”元素显示。

(1)效果

(1)效果

本文由江苏福彩快三发布,转载请注明来源

关键词: 江苏福彩快三