jQuery第四章

Posted 2020-06-09

jQuery中的事件和动画

一、jQuery中的事件

1.加载DOM

（1）执行时机

         $(document).ready()方法和window.onload方法有相似的功能，但是在执行时机方面是有区别的。window.onload方法是在网页中所有元素完全加载到浏览器后才执行，而$(document).ready()是在DOM完全就绪时就可以被调用。另外需要注意的是，假设在DOM就绪时调用了$(document).ready()方法，有可能此时元素的关联文件还未下载完。例如与图片有关的html下载完毕，并且已经解析DOM树了，但是图片还未加载完毕，就无法获取图片的高度和宽度这些属性。因此可以使用另一个关于页面加载的方法：load()来解决这个问题。load()方法会在onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。代码如下：

$(window).load(function(){

         //编写代码

})

等价于

window.onload = function(){

         //编写代码

}

（2）多次使用

         假设网页中有2个函数，javascript代码如下：

         function one(){

                  alert(“one”) ;

}

function two(){

         alert(“two”) ;

}

当网页加载完毕后，通过如下javascript代码来分别调用one函数和two函数：

window.onload = one ;

window.onload = two ;

然而当运行代码后，发现只弹出字符串“two”对话框。字符串“one”对话框不能被弹出的原因是javascript的onload事件一次只能保存一个函数的引用，它会自动用后面的函数覆盖前面的函数，因此不能在现有的行为上添加新的行为。但是jQuery的$(document).ready()方法可以处理两个行为按顺序触发。例如下列jQuery代码：

function one(){

         alert(“one”) ;

}

function two(){

         alert(“two”) ;

}

$(“document”).ready(function(){

         one() ;

})

$(“document”).ready(function(){

         two() ;

});

运行代码后，会先弹出字符串“one”对话框，然后弹出字符串“two”对话框。

（3）简写方式

$(document).ready(function(){

         //编写代码

})

可以简写成：

$(function(){

         //编写代码

})

另外，$(document)也可以简写为$()。当$()不带参数时，默认参数就是“document”因此可以简写为：

$().ready(function(){

         //编写代码

})

2.事件绑定

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

         bind(type [,data] , fn) ;

bind()方法有3个参数：

         第1个是事件类型。

         第2个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象。

         第3个参数是用来绑定的处理函数。

（1）基本效果

下面通过一个示例来了解bind()方法的用法。假设网页中有一个FAQ，单击“标题”链接将显示内容。HTML代码如下：

<div id = “panel”>

         <h5 class = “head”>什么是jQuery？</h5>

         <div class = “content”>

                  jQuery是继Prototype之后有一个优秀的……

         </div>

</div>

jQuery代码：

$(function(){

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

                  $(this).next().show();

         })

});

运行代码，单击标题“链接”，“内容”就展开了。与ready()一样，bind()也可以多次调用。

（2）加强效果

         让上面的例子中实现效果：单击一次“标题”，显示“内容”，再单击一次“标题”，隐藏“内容”。

jQuery代码如下：

$(function(){

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

                  var $content = $(this).next();

                  if ($content.is(":visible")) {

                          $content.hide();

                  } else {

                  $content.show();

                  }

         })

})

 

（3）改变绑定事件的类型

         上面的例子中，给元素绑定的事件类型时click，当用户单击的时候会触发绑定事件，然后执行事件的函数代码。现在把事件类型换成mouseover和mouseout，jQuery代码如下：

$(function(){

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

                  $(this).next().show();

         }).bind("mouseout",function(){

                  $(this).next().hide();

         })

})

运行代码后，当鼠标滑过“标题”就会显示“内容”，当鼠标移出“标题”就隐藏“内容”。

（4）简写绑定事件

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

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

         $(function(){

                  $("#panel h5 .head").mouseover(function(){

                           $(this).next().show();

                  }).mouseout(function(){

                           $(this).next().hide();

                  })

})

3.合成事件

         jQuery有两个合成事件——hover()方法和toggle()方法，类似前面讲过的ready()方法，hover()方法和toggle()方法都属于jQuery自定义的方法

（1）hover()方法

         hover()方法的语法结构为：

         hover(enter.leave) ;

         hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数（enter）;当光标移出这个函数时，会触发指定的第2个函数(leave) ;

将上面的例子改写成使用hover()方法，jQuery代码如下：

$(function(){

         $("#panel h5.head").hover(function(){

                  $(this).next().show();

         },function(){

                  $(this).next().hide();

         })

})

（2）toggle()方法

         toggle()方法的语法结构为：

         toggle(fn1,fn2,…fnN) ;

         toggle()方法用于模拟鼠标连续单击事件。第1个单击元素，触发指定的第1个函数（fn1）；当再次单击同一个元素时，则触发指定的第2个函数(fn2)；如果有更多函数，则依次触发，直到最后一个。

         使用toggle()方法来改写上面的例子，jQuery代码如下：

$(function(){

         $("#panel h5.head").toggle(function(){

                  $(this).next().show();

         },function(){

                  $(this).next().hide();

         })

})

（3）再次加强效果

         如果要让用户单击“标题”之后高亮“标题”，实现方法是：首先在CSS中定义一个高亮的样式，CSS代码如下：

.highlight{ background:#FF3300;}

然后编写下面的jQuery代码：

$(function(){

         $("#panel h5.head").toggle(function(){

                  $(this).addClass("highlight");

                  $(this).next().show();

         },function(){

                  $(this).removeClass("highlight");

                  $(this).next().hide();

         })

})

4.事件冒泡

（1）事件冒泡按照DOM的层次结构像水泡一样不断上升直至顶端。

（2）事件冒泡会导致触发本不想触发的元素事件，阻止事件冒泡就要限制事件的作用范围。

         在程序中使用事件对象非常简单，只需要为函数添加一个参数，jQuery代码如下：

         $(“element”).bind(“click”,function(event){

                  //……

}) ;

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行，在jQuery中可以使用stopPropagation()方法来停止事件冒泡。代码如下：

$(function(){

         $(‘span‘).bind("click",function(event){

                  var txt = $(‘#msg‘).html()+"<p>内层span元素被单击</p>";

                  $(‘#msg‘).html(txt);

                  event.stopPropagation();

         });

})

         网页中的元素都由自己的默认行为，例如，单击超链接之后会跳转、单击“提交”按钮后表单会提交，有时需要阻止元素的默认行为。

         在jQuery中，提供了preventDefault()方法来阻止元素的默认行为。代码如下：

5.事件对象的属性

         （1）event.type

         该方法的作用是可以获取到事件的类型

         $(“a”).click(function(event){

                  alert(event.type) ;

         return false ;

})

以上代码运行后会输出：

“click”

（2）event.preventDefault()方法

该方法的作用是阻止默认行为，在IE中无效。

（3）event.stopPropagation()方法

该方法的作用是停止事件冒泡。在IE中无效。

（4）event.target

该方法时获取触发事件元素。

$(“a[href = ‘http://google.com’]”).click(function(){

         var tg = event.target ;

         alert(tg.href) ;

         return false ;

})

以上代码运行后会输出：

“http://google.com”

（5）event.relatedTarget

该方法获取触发事件元素的相关元素。

（6）event.pageX和event.pageY

该方法获取到光标相对于页面X坐标和Y坐标。

（7）event.which

该方法的作用是在鼠标单击实践中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。

（8）event.metaKey

该方法获取键盘中<ctrl>键。

6.移除事件

（1）移除按钮元素上以前注册的事件

         unbind()方法，语法结构：unbind([type],[data]) ;

（2）移除<button>元素的其中一个事件

         $(‘#btn’).unbind(“click”,myFun2) ;

对于只需要触发一次，随后就要立即解除绑定的情况，jQuery提供了一种简写的方法——one()方法。语法结构：

one(type,[data],fn) ;

二、jQuery中的动画

1.show()方法和hide()方法

         这两种方法可以控制“内容”的显示和隐藏。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。

2.show()方法和hide()方法让元素动起来。如果希望在调用show()方法时，元素慢慢地显示出来，可以为show()方法指定一个速度参数，例如：$(“element”).show(“slow”) ;

         运行该代码后，元素将在600毫秒内慢慢地显示出来，其它速度关键字还有“normal”、“fast”。（长度分别是400毫秒和200毫秒）

         除了使用速度关键字之外，还可以指定一个数字，单位是毫秒。例如：

$(“element”).show(“1000”) ;

2.fadeIn()方法和fadeOut()方法

         这两种方法改变元素的不透明度。fadeOut()方法在一定时间内降低元素的不透明度知道元素完全消失。fadeIn()方法相反。

3.slideUp()方法和slideDown()方法

         这两种方法只会改变元素的高度。slideUp()方法缩短元素的高度，直到隐藏。slideDown()方法刚好相反。