JavaScript--jQuery(下)

1.JQ提供的特效函数

①slideDown/slideUp：可以让匹配的元素向下滑动或向上卷起，函数的第一个参数为每一次动画时间，单位为毫秒；第二个参数为回调函数，在动画结束后执行一次。

<script type="text/javascript">
    //匹配第一个按钮，绑定单击事件
    $("button:eq(0)").click(function(){
        //将div进行卷起操作
        $(".cur").slideUp(2000,function(){
            console.log('动画结束');
        });
    });
    //匹配第二个按钮，绑定单击事件
    $("button:eq(1)").click(function(){
        $("div").slideDown(2000,function(){
            //动画结束时，将背景颜色变为红色
            $("div").css({'background':"red"});
        });
    });
</script>

②fadeOut/fadeIn：给匹配的元素添加淡入和淡出特效，同样第一个参数是每次动画的时间，第二个参数是动画结束后执行的回调函数。

<script type="text/javascript">
    //匹配第一个按钮，绑定单击事件
    $("button:eq(0)").click(function(){
        $(".cur").fadeOut(2000,function(){
            console.log('动画结束');
        });
    });
    //匹配第二个按钮，绑定单击事件
    $("button:eq(1)").click(function(){
        $("div").fadeIn(2000,function(){
            //动画结束时，将背景颜色变为红色
            $("div").css({'background':"red"});
        });
    });
</script>

实际上这两个函数底层原理就是修改元素的透明度，从而达到淡入淡出的效果。

2.绑定事件

①通过DOM方法获取节点，并绑定事件的方法：

div.onclick = function(){}

②在JQ中，绑定事件的语法：

$(selector).eventType(callBack)

注意JQ里面绑定事件函数都没有on关键字，回调函数就是事件处理函数。

<script type="text/javascript">
    $("div:eq(0)").click(function (event) {
        //事件处理函数
        $("div:eq(0)").css({"background":"red"});
    });
</script>

单机div模块之后，背景变为红色。

3.jQuery框架常用方法

①addClass/removeClass：可以给匹配节点添加类名或移除类名。

<script type="text/javascript">
    //绑定事件
    $('button:eq(0)').click(function(){
        //给div添加类名
        $('div').addClass('cur');
    })
    $('button:eq(1)').click(function(){
        $('div').removeClass('cur');
    })
</script>

②index()方法：获取某一匹配节点的索引值

<script type="text/javascript">
    console.log($(".cur").index()); //返回索引值1
</script>

③each()方法：可以遍历所有匹配到的节点

<script type="text/javascript">
    $('li').each(function(index,element){
        //函数还设置了参数，分别是索引和元素内容
        $(element).css({'color':'red'});//将元素变为红色
    });
</script>

4.节点关系方法

①patent()方法：可以获取到某个节点的父节点。

<script type="text/javascript">
    //使li的父节点ul背景颜色变为红色
    $('li').parent().css({'background':'red'});
</script>

②函数上下文this：指当前触发这个事件的元素

<script type="text/javascript">
    //使触发单机事件的元素变红
    $('li').click(function(){
        $(this).css({'background':'red'});
    });
</script>

③sibllings：可以获取到某个节点的同级节点

<script type="text/javascript">
    //不传递选择器时匹配的是某个节点的全部同级节点
    console.log($('button').siblings());
    //传递选择器时匹配的是某节点的全部指定同级节点
    console.log($('button').siblings('p'));
</script>

④children：获取某节点的全部子节点，使用方法与上述节点相同。

5.animate动画函数

①animate()函数底层实现原理就是定时器+信号量，语法格式：

$(selector).animate(json,time,callBack);

第一个参数是必须要有的，JOSN数据格式用来提供动画最终完成的样式属性值；第二个参数可有可无，用来设置动画的时间，单位为毫秒；第三个参数也可有可无，当动画执行结束后会立即执行一次。

<script type="text/javascript">
    //改变小滑块的左边距离以及宽度
    $('div').animate({
        "left":500,
        "width":200
    });
</script>

注意：利用animate函数，与颜色有关的样式不能参与动画。这是因为此函数实现原理是属性从初始值一点点累加到最终值，而颜色无法累加。

②一个节点可以添加多个动画，且多个动画按书写顺序依次完成

<script type="text/javascript">
    //第一个动画
    $('div').animate({"left":300},2000);
    //第二个动画
    $('div').animate({'top':300},2000);
    //第三个动画
    $('div').animate({"left":0},2000);
    //第四个动画
    $('div').animate({'top':0},2000);
</script>

6.动画积累问题

问题描述：当用户快速多次点击鼠标启动动画后，动画依次执行。但当用户停止时，动画来不及停止仍在执行，这就是动画积累问题。

解决方法：使用stop(true)

<script type="text/javascript">
    //第一个按钮绑定单机事件
    $("button:eq(0)").click(function(){
        $("div").stop(true).animate({'left':0},2000);
    });
    //第二个按钮绑定单机事件
    $("button:eq(1)").click(function(){
        $("div").stop(true).animate({'left':600},2000);
    });
</script>

这样程序就会清除所有累积动画只执行stop(true)后的animate方法。

注意：stop(true)只能放在animate方法之前。