特殊效果

1. fadeOut() 淡出
2. fadeToggle() 切换淡入淡出
3. hide() 隐藏元素
4. show() 显示元素
5. toggle() 依次展示或隐藏某个元素
6. slideDown() 向下展开
7. slideUp() 向上卷起
8. slideToggle() 依次展开或卷起某个元素

fadeIn() 淡入
    $btn.click(function(){
        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

$('#div1').animate({
    width:300,
    height:300
},1000,swing,function(){
    alert('done!');
});

参数可以写成数字表达式：

$('#div1').animate({
    width:'+=100',
    height:300
},1000,swing,function(){
    alert('done!');
});

$(function(){
            /*
            参数：
            1、什么属性做动画，属性设置{param1: value1, param2: value2}
            2、动画执行的时间，单位毫秒
            3、动画曲线：
                swing（默认值）开始和结束慢，中间快
                linear匀速
                可省略不写
            4、回调函数，动画完成之后要做的事情，可无限嵌套
            */
            $('#div1').animate({
                width: 200,
                height: 200},
                1000,
                function(){
                    // alert('动画完了！');
                    $(this).animate(
                        {marginLeft: 500},
                        1000,
                        function(){
                            $(this).animate(
                                {marginTop: 500},
                                1000
                            )
                        }
                    )
                }
            );
        })

循环

$(function(){
            // //给全部的li设置内容和样式
            // $('.list li').html('111');
            // $('.list li').css({background:'gold'});

            //第一个参数index是索引值
            $('.list li').each(function(index) {
                // alert(index);//弹出索引值
                
                //$(this)是每一个li
                $(this).html(index);
            });
        })