效果-为操作添加艺术性

修改内联CSS

jQuery提供.css()方法修改样式,这个方法是集获取方法(getter)和设置方法(setter)于一体,对于多个单词构成的属性名,既可以使用连字符版的CSS表示法( 如:.css('background-color') ),也可以使用大小写形式的DOM表示法,在设置样式属性时,有以下方式:

.css('propertyname','value');

.css({'property-1','value1','property-2','value2'});

 

$(document).ready(function(){
    $('#switch').click(function(){
        var $speech = $('div.speech');                        //获得要修改字体尺寸的元素
         var currentSize = $speech.css('fontSize');            //获得fontSize属性值(类似12px)
        var num = parseFloat(currentSize, 10);                //获得fontSize属性值数值部分,缺省为10
        var unit = currentSize.slice(-2);                     //获得fontSize属性值单位部分
    

        //更新新的fontSize值
        $speech.css('fontSize', num * 1.5 + unit);
    });
});

基本的隐藏和显示

.hide()方法将元素的style属性设置为display:none,但它的聪明之处在于,能够在把display设置为none之前,记住原先的display值.恰好相反,.show()方法会交匹配的元素集合的display属性,恢复为display:none之前的可见属性

$(document).ready(function(){
    $('p:eq(1)').hide();

    $('span.more').click(function(){
        $('p:eq(1)').show();
        $(this).hide();
    });
});

 

使用CSS设置定位

css对改变元素位置的限制,在元素的css定位没有设置成relative或abstract的情况下,调整left或者top属性对元素毫无作用.所有块级元素的缺省css定位属性都是static,这个值精确的表明,在改变元素定位属性前试图移动他们,它们只会静止不动.