jQuery 效果——为操作添加艺术性

修改内联CSS：

不得不说，jQ的CSS方法真的很棒，集getter与setter于一身，呵呵。

jQuery既可以解释连字符版的CSS表示法（如background-color），也可以解释驼峰大小写形式的 DOM表示法（如backgroundColor）。在设置样式属性时，.css()方法能够接受的参数有两种，一种是为它传递一个单独的样式属性和值， 另一种是为它传递一个由属性——值对构成的映射。

.css(‘property’,'value’)
.css({‘property1′:’value1′,’property2′:’value2′})
一般来说，数字值不需要加引号，而字符串值需要加引号。但是，当使用映射表示法时，如果属性名使用驼峰大小写形式的DOM表示法，则可以省略引号。
PS:呃，一定要注意这个大括号啊，我刚才找错误找了半天，残念啊。。

<script src="jquery.js" type="text/javascript"></script>
<div>
这只是第一个段落

这是第二个段落</div>
<script type="text/javascript">// <![CDATA[
       $(document).ready(function(){
           $("p:eq(0)").css({"color":"green","background":"blue"});
           $("p:eq(1)").css("color","red");
       });

// ]]></script>

虽然使用驼峰DOM法时，可以省略property的引号，但是我个人不建议这么做。。

书中介绍了一个好的习惯，那就是在jQuery对象名的前面采用”$”为前缀，这样可以瞬间确定其为jQuery对象，程序方便他人阅读。。

书中还介绍了一种改变对象象素值的方法，因为我们都知道，比如说width属性为”100px”，如果我想使其变为”180px”怎么做呢？

这里面的”px”这个字符串怎么处理呢？别急。呵呵。

<script src="jquery.js" type="text/javascript"></script>
<div>
这只是第一个段落

这是第二个段落</div>
<script type="text/javascript">// <![CDATA[
       $(document).ready(function(){
           var    $p_first = $("p:eq(0)");
           var fir_width = $p_first.css("width");
           var width_num = parseFloat(fir_width,10);
           var width_unit = fir_width.slice(-2);
           width_num *= 1.8;
           $p_first.css("width",width_num + width_unit);
           $p_first.css("border","1px solid");
       });

// ]]></script>

看一下firebug的截图吧，这最能说明问题了。呵。。

firebug查看代码截图

其实，用到的是js的方法“parseFloat,和slice”

另外，再次强调一点，(其实是书中在反复强调)，this指向的是DOM元素，而$(this)指向的是jQuery对象，如果仅测试属性的值，this要更有效一些。

基本的隐藏和显示：

这个没啥说的了，就这么两个函数：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′)

我之前写过的用jQuery模拟本皮肤右侧RSS订阅效果就是用的这两个函数啦，不过模拟的不好，就不再给出链接丢人了。呵。。

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

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

多重效果：

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

• fadeIn()和fadeOut()：不透明度
• fadeTo()：不透明度
• slideDown()和slideUp()：高度

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

1. 一个包含样式属性及值的映射－－与前面的.css()方法中的映射类似
2. 可选的速度参数－－既可以是前面提到的的字符串，也可以是一个毫秒数
3. 可选的缓动（easing）－－呃，书中说第十章讲这个
4. 可选的回调函数

嗯，因为本人对CSS蠢笨如牛（不过我要开始学CSS了，如果有时间的话我会学些皮毛的 ），所以animate的示例就不写了。

只给个简单的例子算了

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

呃，好吧，我承认，这个是书中给的现成的例子。呵呵。。

并发与排队效果：
.animate()方法在为一组元素创建并发效果时非常有用。这里再说两句，所谓的并发效果就是同时发生。例如show()方法就是同时改变的宽高及透明度。但是有时候我们需要的则是排队效果，即让效果一个接一个地发生。

处理一组元素：

要排队效果，可以将多个效果连缀起来，例如

//原效果代码为
$('div.button').animate({left:650,height:38},'slow'};

//新效果代码为
$('div.button')
.animate({left:650},'slow')
.animate({height:38},'slow');

处理多组元素：

对于不同元素的效果实现排队就应该使用回调函数了，要不然比如书中的例子，要第3段文字和第4段文字分别添加浅蓝色和淡紫色（颜色还真是鲜艳）的北京。同时在DOM就绪时立即隐藏第4段。最后为第3段添加向上滑出视图，同时第4段向下滑出视图。

//这里的next是指其下面的兄弟节点的jQuery对象
$(document).ready(function(){
$('p:eq(3)').css('backgroundColor','#fcf').hide();
$('p:eq(2)').css('backgroundColor','#cff').click{function(){
$(this).slideUp('slow').next().slideDown('slow');
});
});

这时真正出现的效果是，原来可见的浅蓝色段落，正牌向上滑到一半的状态；与此同时，原来隐藏的淡紫色段落，正处于向下滑出一半的状态。。

而我们解决此问题的方法就是使用回调函数，回调函数是指当我做完这个事情的时候我紧接着去做啥？呃，这是我自己的理解。呵呵，我引用里的文字可不全是书上的哦～～

//呃，书中说连缀太长的话可以折下来写，我也认为这样更好理解。呵呵。。
$(document).ready(function(){
$('p:eq(3)')
.css('backgroundColor','#fcf')
.hide();
$('p:eq(2)')
.css('backgroundColor','#cff')
.click{function(){
var $thisPara = $(this);
$thisPara.next().slideDown('slow',function(){
$thisPara.slideUp('slow');
});
});
});

呃，这节终于写完了，印象中我写了将近一个小时，因为还要调代码，还要写链接。。还要保证代码的正确性。。

呵呵。虽然我知道不会有几个人看完它，甚至看都不会看。不过，有什么呢？当我用到的时候不至于抓瞎，不是吗？哈。

GOOD GOOD STUDY，DAY DAY UP！！