jQuery 第四章

1、修改内联CSS

在有些情况下，可能我们要使用的样式没有在样式表中定义，或者通过样式表定义不是那么容易，针对这种情况，jQuery提供.css（）方法。

这个方法集获取方法（getter）和设置方法（setter）于一体。（1）可以为这个方法传递一个字符串形式的属性名，比如.css('backgroundColor')。对于由多个单词构成的属性名，jQuery既可以解释连字符版的CSS表示法（如background-color），也可以解释驼峰大小写形式（camel-cased）的DOM表示法（如backgroundColor）。（2）在设置样式属性为它传递一个由属性-值对构成的映射（map）:

.css('property','value')

.css({‘property1:’value1',‘property-2':’value2'})

一般来说，数字值不需要加引号而字符串值需要加引号。但是当使用映射表示法时，如果属性名使用驼峰大小写形式的DOM表示法，则可以省略引号。

 

2、 基本的隐藏和显示

show() 和 hide()

其实hide()就是将匹配的元素集合的内联style属性设置为display:none。但是它会聪明的在把display变成none之前的原来display的值记下来，让show()函数可以使其恢复到之前的display值。

效果和速度

show() 和 hide()函数都可以指定一个参数，那就是速度参数，这就会产生动画效果了。

对于jQuery提供的任何效果，都可以指定3种速度参数：slow、normal和fast。

使用.show('slow')会在0.6秒内完成效果，.show('normal')是0.4秒，.show('fast')则是0.2秒。当然你也可以直接指定毫秒数，如show('1000')

fadeIn()和 fadeOut()则是有淡入淡出效果，同样也可以指定速度。

fadeIn()和 hide()的区别在于.fadeIn()函数会在一开始设置段落的尺寸，以便内容能够简单的逐渐显示出来。

多重效果：

在绑定到jQuery的效果中，中有show()和hide()会同时修改多个样式属性---高度、宽度和不透明度。其他效果则只能修改一种属性：

1、fadeIn()和fadeOut()：不透明度

2、fadeTo()：不透明度

3、slideDown()和slideUp()：高度

jQuery提供了一个强大的函数animate()方法，通过该方法可以创建包含多重效果的自定义动画。animate()接受4个参数

• 一个包含样式属性及值的映射--与前面的.css()方法中的映射类似
• 可选的速度参数--既可以是前面提到的字符串，也可心是一个毫秒数
• 可选的缓动（easing）
• 可选的回调函数

例：$('p:eq(1)').animate({height:'show',width:'show',opacity:'show'},'slow');

注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。