jQuery 是一个优秀的JavaScript框架,可以很好的解决不同浏览器兼容的问题,尤其是在ASP.NET MVC下,它的作用更加的凸显。
jQuery 在制作动态酷效果的时候有很强的优势,以下是笔者总结的一些最常用到的方法。
1.修改内联 CSS
jQyery 提供 .css() 方法来供我们获取或修改内联的 css
.css() 方法能够接收的参数由两种,一种是为它单独传递一个单独的样式属性和值,另一种是为它传递一个由“属性 - 值”对构成的映射:
.css ('property','value');
.css ({'property1':'value1','property-2':'value2'});
一般来说,数字值不需要加引号,而字符串值需要加引号。但是,当使用映射表示法时,如果属性名使用驼峰大小写形式的 DOM 表示法,则可以省略引号。
2.基本的隐藏和显示,不带动画效果
.hide()
.show()
这两个方法的作用就是立即隐藏或显示匹配的元素集合。
3.指定显示速度的隐藏和显示
在 .hide() 和 .show() 方法的基础上,可以制定隐藏或显示的速度。它的表示方法为: .hide('speed') 或 .show('speed') 。 speed 的值可以为:
4.淡入淡出效果
.fadein() 为匹配元素指定淡入效果
.fadeout() 为匹配元素指定淡出效果
使用 .fadein() 或 .fadeout() 同样可以制定 speed 值,如: slow 、 normal 、 fast 、毫秒数
淡入淡出的实现方式其实是增加或减少匹配元素的不透明度来实现的。
5.制作动画效果
jQuery 提供了一个强大的 .animate() 方法,通过该方法可以创建包含多重效果的自定义动画。 . animate() 方法接受以下四个参数:
6.使用 .animate() 制作动画的时候应当考虑的问题
例如,在元素的 css 定位没有设置成 relative 或 absolute 的情况下,调整 left 属性对于匹配的元素毫无作用。所有块级元素默认的 css 定位属性都是 static ,这个值精切地表明:在改变元素的定位属性之前试图移动它们,它们只会保持静止不动。
jQuery 中无论是处理一组还是多组元素,默认都是同时发生的,因此,并发问题就成为了我们值得考虑的一个问题。概括起来有以下两点:
如果是处理一组元素,可以根据代码的书序进行控制;
如果是处理多组元素, 则可以通 过回调函数进行控制;