第四章 jQuery 样式与动画

通过jQuery可以轻松地为页面操作添加简单的视觉效果，甚至能创建更精致的动画

// 取得单个属性的值

.css('property')

//返回 "value"

//取得多个属性的值

.css ( [ ' property1 ' , '  property-2 ' ] )

// 返回 { " property1 " : " value1 " , " property-2" : " value2" }

在设置样式属性时， .css () 方法能够接受的参数有两种，一种是为了它传递一个单独的样式属性和值，另一种是为它传递一个属性-值对构成的对象：

// 单个属性及其值

.css ( ' property ' , ' value ')

// 属性- 值对构成的对象

.css ( { 

 property1 : ' value1 ',

' property-2 ' , ' value2'

})

这些键值的集合叫做对象字面量，是在代码中直接创建JavaScript对象

对象字面量

一般来说，数字值不需要加引号而字符串值需要加引号。由于属性名是字符串，所以属性通常需要加引号。但是，如果对象字面量中的属性名是有效的JavaScript标识符，比如使用驼峰大小写形式的DOM表示时，则可以忽略引号。

$ 符号在jQuery或JavaScript没有特殊的含义

JavaScript parseFloat()函数 与 parseInt() 函数的区别

parseFloat() 函数可解析一个字符串，并返回一个浮点数。

该函数指定字符串的首个字符串是否是数字，如果是，则对字符串进行解析，直到到达数字的末端为止，然后数字返回该数字，而不是作为字符串。如果首个字符串不是数字，则返回NaN。

parseInt() 函数可解析一个字符串，并返回一个整数

parseInt ( "19",10 );  //返回 19 （1+9+10）；

parseInt ( "1f" ,16); //返回 32 (16+16)

$( ' div.speech ' ).css( ' fontSize '); //可获得当前字体大小

带厂商前缀的样式属性

浏览器厂商在引入实验性的样式属性时，通常会再实现达到CSS规范要求之前，在属性名前面添加一个前缀。等到实现和规范都稳定之后，这些属性前缀就会别去掉，让开发人员使用标准的名称。

-webkit-property-name:value;

-moz-property-name:value;

-ms-property-name:value;

-o-property-name:value;

property-name:value;

在jQuery中，可以直接使用这些标准的属性名，比如 .css('propertyName','value')。如果样式对象中不存在这个属性，jQuery就会依次检查所有带有前缀（Webkit、o、Moz、ms）的属性，然后使用第一个找到的那个属性

隐藏和显示元素

.hide() 和 .show() 方法不带任何参数。类似.css('display','string')方法的简写方式，其中string是适应的显示值。

4.3 效果和时长

.show('slow') 会在600毫秒（0.6）秒内完成效果，而.show('fast')则是200毫秒内完成效果。如果传入的是其他字符串，jQuery就会在默认的400毫秒内完成效果。要指定更加精准的速度，可以用毫秒数值，例如.show(850);

event.preventDefault()；阻止元素默认的行为（例如点击提交按钮时阻止对表单的提交）

4.7 练习

(1) 修改样式表，一开始先隐藏页面内容，当页面加载后，慢慢地淡入内容

$(document).ready(function () {
    $('body').hide().fadeIn(3000);
});

(2) 在鼠标悬停到段落上面时，给段落应用黄色背景；

$(document).ready(function () {
   var style1= $("p").css('backgroundColor');
    $('p').mouseover(function () {
        $(this).css('backgroundColor','yellow');
    })
    $('p').mouseout(function () {
        $(this).css('backgroundColor',style1);
    })
})

(3) 单击标题 ( <h2>)使其不透明度变为25%，同时添加20px的左外边距，当这两个效果完成后，把讲话文本变成50%的不透明度；

(1)

$(document).ready(function () {
    $('#container h2').click(function () {
        $('#container h2').fadeTo('slow',0.25).css('marginLeft','20px');
        $('.speech').fadeTo('slow',0.50);
    })
});

(2)

$(document).ready(function () {
    $('#container h2').click(function () {
        $('#container h2').animate({
            opacity : 0.25,
            marginLeft : '20px'
        },"slow");
        $('.speech').animate({
            opacity : 0.5
        },"slow")
    })
});

(3)$(document).ready(function () {
    $('#container h2').click(function () {
        $('#container h2').animate({
            opacity : 0.25,
            marginLeft : '20px'
        },"slow")
            .queue(function (next) {
            $('div.speech').fadeTo('slow',0.5);
        })
    })
});

(4) 挑战：按下方向键时，使样式转换器向相应的方向平滑移动20像素；四个方向键的键码分别是37（左）、38（上）、39（右）和40（下）。

$(document).keyup(function (event) {
    var $switcher=$('#switcher');
    $switcher.css('position','relative');
    switch(event.which){
        case 37:
            $switcher.animate({'left':'-=20px'});
            break;
        case 38:
            $switcher.animate({'top':'-=20px'});
            break;
        case 39:
            $switcher.animate({'left':'+=20px'});
            break;
        case 40:
            $switcher.animate({'top':"+=20px"});
    }
})