[随记]锋利的jQuery 第四章 jQuery中的动画和事件

yeshaoting

浏览: 684125 次
性别:
来自: 北京

最近访客更多访客>>

lengrenhanbing

goldtoad

天涯a海角

yinbangmin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery/javascript

4.1 jQuery中的事件

4.1.1 加载DOM

1. 执行时机

在常规的JavaScript代码中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。$(document).ready()方法是事件模块中重要的一个函数，可以极大地提高Web应用程序的响应速度。jQuery就是用$(document).ready()方法来代替传统JavaScript的window.onload方法的。通过使用该方法，可以在DOM载入就绪时就对其进行操纵并调用执行它所绑定的函数。

window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。

例如：

为网页中所有图片添加单击后隐藏或显示行为，使用window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以调用。此时，网页的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。

优点：window.onload需要所有文件加载完毕后才可以进行操作，而$(document).ready()则只要DOM就绪就可以操作。很显然，把网页解析为DOM树的速度比把页面中的所有关联文件加载完毕的速度快得多。

缺点：图片还未加载完毕，所有图片的高度和宽度这样的属性些时不一定有效，若对其进行操作则无效，甚至出错。

解决这个问题，可以使用jQuery页面加载的方法load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

例如：

$(window).load(function()

{

//编写代码

})

等价于JavaScript中的以下代码：

window.onload = function()

{

//编写代码

}

2. 多次执行

JavaScript的onload事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数，因此不能在现有的行为上添加新的行为。而jQuery的$(document).ready()方法能够被多次调用，每次调用该方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。

3. 简写方式

$(document).ready(function()

{

//编写代码

})

等价于以下的代码：

$(function()

{

//编写代码

})

由于$(document)也可以简写为$()。当$()不带参数时，默认参数就是"document"，因此上面的代码也可以简写为：

$().ready(function()

{

//编写代码

})

4.1.2 事件绑定

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

第1个参数是事件类型，包括：blur、focus、load、mouseover等，也只可以是自定义名称。

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

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

注：jQuery中的事件绑定类型比普通的JavaScript事件绑定类型少了"on"。

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

4.1.3 合成事件

jQuery有两个合成事件——hover()方法和toggle()方法。

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

1)CSS中有伪类选择符，例如：:hover，当用户光标悬停在元素上时，会改变元素的外观。在大多数符合规范的浏览器中，伪类选择符可以用于任何元素。然而在IE 6浏览器中，伪类选择符仅可用于超链接元素。对于其他元素，可以使用jQuery的hover()方法。

2)hover()方法准确来说是替代jQuery中的bind("mouseleave")和bind("mouseenter")，而不是替代bind("mouseleave")和bind("mouseenter")。因此当需要触发hover()方法的第2个函数时，需要trigger("mouseleave")来触发，而不是trigger("mouseout")。

2. toggle()方法用来模拟鼠标单击事件。

toggle()方法在jQuery中还有另一个作用：切换元素的可见状态。如果元素是可见的，单击切换后则为隐藏；如果元素是隐藏的，单击切换后则为可见的。

4.1.4 事件冒泡

<body>

外层div元素

<span>内层span元素</span>

外层div元素

</div>

</boyd>

如果<body>、<div>和<span>都绑定了click事件时，将单击<span>，会依次触发<span>单击事件、<div>单击事件、<body>单击事件。

在单击<span>元素的同时，也单击了包含<span>元素的元素<div>和包含<div>元素的元素<body>，并且每一个元素都会按照特定的顺序响应click事件。这就会引发问题：只想触发元素本身的单击事件，包含该元素的元素单击事件依次被触发。

之所以称为冒泡，是因为事件会按照DOM的层次结构像水泡一样不断向上直至顶端。

1)事件对象

由于IE-DOM和标准DOM实现事件对象的方法各不相同，导致在不同浏览器中获取事件对象变得比较困难。针对这个问题，jQuery进行了必要的扩展和封装，从而使得在任何浏览器中都能轻松地获取事件对象以及事件的一些属性。

2)停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法停止事件冒泡。

例如：

$("span").click(function(event) //event是事件对象

{

$("#msg").html($("#msg").html() + "<b>span<b>被单击!<br/>");

event.stopPropagation();

});

3)阻止默认行为

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

在jQuery中，提供了preventDefault()来阻止元素的默认行为。

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对在事件对象上同时调用stopPropagation()方法和preventDefault()方法的一种简写方式。

4)事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始触发。很显然，事件捕获是从最外层元素开始，然后再到最里层元素。遗憾的是，并非所有主流浏览器都支持事件捕获，并且这个缺陷无法通过JavaScript来修复。jQuery不支持事件捕获

4.1.5 事件对象的属性

jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断。

1)event.type属性

该属性的作用是可以获取到事件的类型。

2)event.preventDefault()方法

该方法的作用是阻止默认的事件行为。

3)event.stopPropagation()方法

该方法的作用是阻止事件的冒泡。JavaScript中符合W3C规范的stopPropagation()方法在IE浏览器中却无效。jQuery对其进行了封装，使之能兼容各种浏览器。

4)event.target属性

该属性的作用是获取到触发事件的元素。jQuery对其封装后，避免了W3C、IE和safari浏览器不同标准的差异。

例如：获取事件发生的元素的标签名，代码如下，

alert(event.target.tagName);

5)event.relatedTarget()方法

在标准DOM中，mouseover和mouseout所发生的元素可以通过event.target()方法来访问，相关元素是通过event.relatedTarget()方法来访问的。event.relatedTarget()方法在mouseover中相当于IE浏览器的event.fromElement()方法，在mouseout中相当于IE浏览器的event.toElement()方法，jQuery对其进行了封装，使之能兼容各种浏览器。

6)event.pageX属性和event.pageY属性

该方法的作用是获取到光标相对于页面的x坐标和y坐标。如果没有使用jQuery时，那么IE浏览器是用event.x，event.y属性，而在Firefox浏览器中是用event.pageX，event.pageY属性。如果页面上有滚动条，则还要加上滚动条的宽度或高度。在IE浏览器中还应该减去默认的2px的边框。

例如：

$(bootstrap);

function bootstrap()

{

$("body").mousemove(getLocation);

}

function getLocation(event)

{

var text = $("#msg").html() + "<br/>X:" + event.pageX + "\tY:" + event.pageY;

$("#msg").html(text);

}

</script>

7)event.which属性

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

例如：

$(function()

{

$("body").mousedown(function(e)

{

//1=鼠标左键；2=鼠标中键；3=鼠标右键

alert(e.which);

});

8)event.metaKey()方法

针对不同浏览器对键盘中的<ctrl>按键解释不同，jQuery也进行了封闭，并规定event.metaKey()方法为键盘事件中获取<ctrl>按键。

9)event.originalEvent()方法

该方法的作用是指向原始的事件对象。

4.1.6 移除事件

jQuery提供unbind()方法移除绑定事件。

移除元素的click事件：

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

$("#btn").unbind("click",fn1); //移除函数1

$("#btn").unbind("click",fn2); //移除函数2

元素绑定的都是是click事件，所以不写参数也可以达到同样的目的：

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

对于只需要触发一次，随后就要立即解除绑定的情况，jQuery提供了一种简写方法——one()方法。One()方法可以为元素绑定处理函数。当处理函数触发一次后，立即被删除。即在每个对象上，事件处理函数只会被执行一次。

One()方法的结构与bind()方法类似，使用方法也与bind()方法相同。

4.1.7 模拟操作

1. 常用模拟

在jQuery中，可以使用trigger()方法完成模拟操作。

例如：

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

也可以直接用简化写法click()：

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

2. 触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。

3. 传递数据

trigger(type,[,data)方法有两个参数。

第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。

4. 执行默认操作

trigger()方法不仅触发元素绑定的事件，还会执行浏览器默认操作。例如：

$("input").trigger("focus")不仅会触发元素得到焦点的事件，还会使得元素本身得到焦点。

triggerHandler()方法则只会触发元素绑定的事件，而不会执行浏览器默认操作。

4.2 jQuery中的动画

4.2.1 show()方法和hide()方法

在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为"none"。

当把元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态("block"或"inline"或其他除了"none"之外的值)。

在jQuery做动画效果要求要在标准模式下，否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

为show()或者hide()添加一个速度参数，使得元素隐藏或显示出现动画。

例如：

hide(600)方法会同时减少内容的高度、宽度和不透明度，直到这3个属性的值为0，最后设置该元素的CSS规则为"display:none"。show(600)同理。

4.2.2 fadeIn()方法和fadeOut()方法

与show()方法和hide()不同的是，fadeIn()方法和FadeOut()方法只改变元素的不透明度。

4.2.3 slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法只会改变元素的高度。

4.2.4 自定义动画方法animate()

在jQuery中，可以使用animate()方法来自定义动画，格式：

animate(params, speed, callback);

累加、累减动画

{left,"+=50px"}

元素透明度设置：

css("opacity","0.5");

{opacity,"0.5"};

4.2.5 动画回调函数

css()方法并不会加入到动画队列中，而是立即执行。可以使用回调函数(callback)对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可。

4.2.6 停止动画和判断是否处于动画状态

stop停止匹配元素正在进行的动画。格式如下：

stop([clearQueue][,gotoEnd]);

参数clearQueue和gotoEnd都是可选的参数。clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。

如果直接使用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。

对于光标移入移出得过快导致动画效果与光标动作不一致的情况，只要在光标的移入、移出动画之前加入stop()方法，就能解决这个问题。

判断元素是否处于动画状态：is(":animated")

如果元素正处于动画状态，则添加新动画；否则不添加。

4.2.7 其他动画方法

toggle可以切换元素的可见性。

slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。

fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会发生变化。

4.2.8 动画方法概括

animate()方法可以用来替代其他所有的动画方法。

1. 一组元素上的动画效果

1)当在一个animate()方法中应用多个属性时，动画是同时发生的。

2)当以链式的写法应用动画方法时，动画是按照顺序发生的。

2. 多组元素上的动画效果

1)默认情况下，动画都是同时发生的。

2)当以回调的形式应用动画方式时，动画是按照回调顺序发生的。

另外，在动画方法中，要注意其他非动画方法会插队，例如css()方法要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中。

查看图片附件

分享到：

This site is running TeamViewer. | jQuery动态设置元素透明度

2011-11-27 17:59
浏览 2169
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论