JQuery基础教程 学习笔记(三)

1, 设置css样式属性 .css('property','value'); 或 .css('property1':'value1','property2':'value2');

　　获取css样式属性值 .css('property');

2, 函数parseFloat(str,n):　　会在str中查找第一个浮点数,转换成n进制

　 方法currentSize.slice(n):　　返回字符串中从指定的字符开始的子字符串（n<0表示倒数第n个)

3, 定义变量和名时以$开头表明是一个JQuery对象

4, 在字符串中#不属于的id名的一部分，必须去掉

5, this的取法应该写成$(this)

6, .fadeIn('slow'): 显示时逐渐增加透明度 .fadeOut()则是隐藏时逐渐减少透明度

7, .show()和.hide()同时改变透明度，高度，宽度

8, animate({param1:'value1',param2:'value2'},speed,function(){alert('The animate is finished.')});

9, padding : 内边距 border 边框

10,.slideUp();方法通过使用滑动效果，隐藏显示的被选元素 .slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。

11,元素效果排队不适用于非效果方法，如.css(); 可使用回调函数解决

12,.next()下一个同辈元素

 

$(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');
        });
  });
});


$(document).ready(function() {
    $('div.label').click(function(){
        $('div.button').fadeTo('slow',0.5)
        .animate({left: 650}, 'slow')
        .fadeTo('slow',1.0,function(){
            $('div.button').css('backgroundColor','#f00');
        });
        //$('div.button').animate({height:38},'slow');
    });
});

$(document).ready(function() {
    $('p:eq(1)').hide();
    $('span.more').click(function(){
        $('p:eq(1)').animate({height:'show',width:'show',opacity:'show'},'slow');
        $(this).hide();
    });
});

$(document).ready(function() {
    $('div.button').click(function(){
        var $speech=$('div.speech');
        var currentSize=$speech.css('fontSize');
        var num = parseFloat(currentSize,10);
        var unit = currentSize.slice(-2);
        if(this.id == 'switcher-large')
            num*=1.4;
        else
            num/=1.4;
        $speech.css('fontSize',num+unit);
    });
});

 

小结: