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()下一个同辈元素

 

View Code

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

 

小结: