jQuery3动画+创建元素

你的名字 2021-03-18 15:11 456阅读 0赞

一、jQuery的动画

1、jQuery自带的动画

1》变化的是width height opacity display

$("button:eq(2)").click(function () \{

$("div").toggle();

\});

});
        </script>
    </body>
    </html>

2》变化的是height

//第二个动画，变化的是opacity display
            $(function () {
                $("button:eq(0)").click(function () {
                    $("div").slideUp("slow");//卷起 fast normal slow
                });
                $("button:eq(1)").click(function () {
                    $("div").slideDown(1000);//放下
                });
                $("button:eq(2)").click(function () {
                    $("div").slideToggle(1000);
                });
            });

3》淡入淡出

//第三个动画：淡入淡出
            $(function () {
                $("button:eq(0)").click(function () {
                    $("div").fadeOut(1000);
                });
                $("button:eq(1)").click(function () {
                    $("div").fadeIn(1000);
                });
                $("button:eq(2)").click(function () {
                    $("div").fadeToggle(1000);
                });
                $("button:eq(3)").click(function () {
                    $("div").fadeTo(1000,0.3);//时间，定值，回调函数
                });
            })

2、自定义动画

//自定义动画,该方法是异步的，因为底层使用了定时器
            //animation(json,时间,回调函数);
            $(function () {
                $("button:eq(0)").click(function () {
                    $("div").animate({
                        "width": 0
                    }, 100, function () {
                        alert("运行完成");
                    });
                });
    
            });

二、创建对象

1、回顾原生js中是如何创建对象

//原生js中创建对象
            //第一种方式：
            // var p = document.createElement("p");
            // p.innerHTML = "我是一个p";
            // document.getElementsByTagName("div")[0].appendChild(p);
            //第二种方式
            // document.getElementsByTagName("div")[0].innerHTML = "<p>我是第二个p</p>";
            //第三种方式
            document.write("<p>我是第三个P</p>");

2、jQuery中创建元素的方式

//jQuery中创建元素的方式
            var $p = $("<p>我是jquery生成的第一个标签</p>");
            //放到div中，在div末尾追加
            // $("div").append($p);//在div的末尾追加p
            // $p.appendTo($("div"));//追加到div,也是在末尾加
            //放在div中，在div的开头追加
            // $("div").prepend($p);//在开头追加
            // $p.prependTo($("div"));//在开头加
            //在div的外边
            // $("div").before($p);//前面
            // $("div").after($p);//后边
            //替换div内部
            $("div").html($p);

3、注意：添加的已有元素相当于剪切。

案例：选中左边的，移动到右边，选中右边的，移动到左边

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>选中移动</title>
        <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 400px;
            background-color: #ccc;
            float: left;
            margin-right: 10px;
            text-align: center;
        }
        button{
            width: 50px;
            height: 50px;
            margin: 10px;
        }
        select{
            width: 50px;
            height: 200px;
        }
        </style>
    </head>
    <body>
        <div>
            <p>水果摊</p>
            <select name="" id="sel1" multiple="multiple">
                <option value="">苹果</option>
                <option value="">香蕉</option>
                <option value="">鸭梨</option>
                <option value="">橙子</option>
                <option value="">黄瓜</option>
            </select>
        </div>
        <div>
            <button>></button>
            <button><</button>
            <button>>></button>
            <button><<</button>
        </div>
        <div>
            <p>购物车</p>
            <select name="" id="sel2" multiple="multiple">
    
            </select>
        </div>
        <script src="jQuery1-12-4.js"></script>
    <script>
        $(function () {
            //移动到右边
            $("button:eq(0)").click(function () {
                $("#sel2").append($("#sel1>option:selected"));
            });
            //移动到左边
            $("button:eq(1)").click(function () {
                $("#sel1").append($("#sel2>option:selected"));
            });
            //全部移动到右边
            $("button:eq(2)").click(function () {
                $("#sel1>option").appendTo($("#sel2"));
            });
            //全部移动到左边
            $("button:eq(3)").click(function () {
                $("#sel1").append($("#sel2>option"));
            });
        });
    </script>
    </body>
    </html>

的