jquery的链式调用与动画

1.jQuery链式调用

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

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

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery链式调用</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #box_01{
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }
        #box_02{
            width: 100px;
            height: 100px;
            background-color: thistle;
        }
        ul{
            display: none;
        }
        span{
            display: none;
        }
    </style>
    <script>
        //入口函数
        $(function(){
            $("#wrap").children("ul").slideDown(5000).siblings().show(2000).parent().siblings().css("background","plum")
        })
    </script>
</head>
<body>
    <div id="wrap">
        <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>
                <div id="box_01">a</div>
                <div id="box_02">b</div>
            </li>
        </ul>
        <span>hhhhhh</span>
    </div>
    <div>
        gggggg
    </div>
</body>
</html>

我们可以通过其中的一个元素，对整个html页面的元素进行操作，节约JS代码，使代码看起来更优雅

2.jquery动画

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

animate有四个参数：
1.对象，里面穿需要动画的样式（必填）
2.speed执行动画时间
3.执行动画效果
4.回调函数

举例：
2.1在body内创建元素

<div class="wrap" style="width: 50px;height: 50px; background-color: tomato;"></div>

2.2搭建环境

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

2.3编写jquery代码

$(function(){
            $(".wrap").animate({
                width:200,
                height:200,
            },2000,function(){
                alert("就这？")
            })
        })

注意：在jquery动画中，只能设置带有属性值为数值的属性，例如width、height等，属性值不为数值的不可以设置，例如background等

jquery的链式调用与动画

1.jQuery链式调用

2.jquery动画

猜你喜欢