jQuery学习:prop方法/基本动画/自定义动画/动态创建、

2019-05-06 本文已影响0人 Merbng

prop

对于布尔类型的属性，不要用attr方法，应该用prop方法，跟attr方法一样

Demo

demo.png

<input type="button" value="选中">
<input type="button" value="不选中">
<input type="checkbox" id="ck">
<script src="jquery-1.12.4.js"></script>

$(function () {
        $("input").eq(0).click(function () {
            $("#ck").prop("checked", true);
        });
        $("input").eq(1).click(function () {
            $("#ck").prop("checked", false);
        })
    })

案例：表格全选

表格全选.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
            text-align: center;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll"/>
            </th>
            <th>菜名</th>
            <th>饭店</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>红烧肉</td>
            <td>田老师</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>西红柿鸡蛋</td>
            <td>田老师</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>红烧狮子头</td>
            <td>田老师</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>日式肥牛</td>
            <td>田老师</td>
        </tr>

        </tbody>
    </table>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("#j_cbAll").click(function () {
            $("#j_tb input").prop("checked", $(this).prop("checked"));
        });
        $("#j_tb input").click(function () {
            if ($("#j_tb input:checked").length === $("#j_tb input").length) {
                $("#j_cbAll").prop("checked", true);
            } else {
                $("#j_cbAll").prop("checked", false);
            }
        });
    });
</script>
</body>
</html>

基本动画

$("div").show([speed],[callback])
这两个参数都是可选参数
speed：动画的持续时间，可以是毫秒值，还可以是固定字符串（fast,normal,slow）
//fast:200ms
//normal:400ms
//slow:600ms
callback:动画执行完毕的回调
$("div").hide([speed],[callback])

            $("div").hide(function () {
                console.log("动画执行完毕了");
            })

案例：滑入滑出动画

滑入滑出动画.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 600px;
            height: 600px;
            background-color: #ff3b4a;
        }
    </style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("input").eq(0).click(function () {
            $("div").slideDown(1000,function () {
                console.log("动画执行完毕");
            });
        }) ;
        $("input").eq(1).click(function () {
            $("div").slideUp(2000,function () {
                console.log("动画执行完毕");
            });
        }) ;
        $("input").eq(2).click(function () {
            //如果是滑入状态就执行滑出状态
            $("div").slideToggle();
        }) ;
    });
</script>
</body>
</html>

案例：淡入淡出动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 600px;
            height: 600px;
            background-color: #ff3b4a;
        }
    </style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("input").eq(0).click(function () {
            $("div").fadeIn(1000,function () {
                console.log("动画执行完毕");
            });
        }) ;
        $("input").eq(1).click(function () {
            $("div").fadeOut(2000,function () {
                console.log("动画执行完毕");
            });
        }) ;
        $("input").eq(2).click(function () {
            //如果是滑入状态就执行滑出状态
            $("div").fadeToggle();
        }) ;
    });
</script>
</body>
</html>

自定义动画

$("#box2").animate(param1,param2,param3,param4,)
参数1：对象，需要动画的样式
参数2：speed 动画执行的时间
参数3：动画执行效果（线性动画，加速）
参数4：回调函数

动画队列

    $(function () {
        $("#btn").click(function () {
            $("div").animate({left: 800})
                .animate({top: 400})
                .animate({width: 300, height: 300})
                .animate({top: 0})
                .animate({left: 0})
                .animate({width: 100, height: 100});
        });
    });

停止动画

.stop([clearQueue],[jumpToEnd])
clearQueue:是否清除动画队列 true false
jumpToEnd：是否跳转到当前动画的最终效果

    $(function () {
        $("input").eq(0).click(function () {
            $("div").slideDown(1000).slideUp(1000);
        });
        $("input").eq(1).click(function () {
            //停止当前正在执行的动画
            //clearQueue:是否清除动画队列 true false
            //jumpToEnd：是否跳转到当前动画的最终效果
            $("div").stop(true,false);
        })
    });

动态创建节点
js方式创建

/*    var box = document.getElementById("box");
    var a = document.createElement("a");
    box.append(a);
    a.setAttribute("href", "http://www.baidu.com");
    a.setAttribute("target", "_blank");
    a.innerHTML = "打开百度";*/

jquery方式创建

    $(function () {
        $("#box").append('<a href="http://www.baidu.com" target="_blank">打开百度</a>')
    });

创建与添加节点

创建节点
$("<p>创建的哈</p>")
添加到子元素的最后面
$("div").append($("p"));
$("p").appendTo($("div"));
添加到子元素的最上面
$("div").prepend($("p"));
$("p").prependTo($("div"));
作为兄弟元素

//添加到自己的后面
$("div").after($("p"));
//添加到自己的前面
$("div").before($("p"));

案例：城市选择

城市选择.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select {
            width: 200px;
            background-color: teal;
            height: 200px;
            font-size: 20px;
        }

        .btn-box {
            width: 30px;
            display: inline-block;
            vertical-align: top;
        }
    </style>

</head>
<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">广州</option>
    <option value="5">西红柿</option>
</select>
<div class="btn-box">
    <!--实体字符-->
    <button id="btn1"> &gt;&gt;</button>
    <button id="btn2"> &lt;&lt;</button>
    <button id="btn3"> &gt;</button>
    <button id="btn4"> &lt;</button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("#btn1").click(function () {
            $("#src-city>option").appendTo($("#tar-city"));
        });
        $("#btn2").click(function () {
            $("#src-city").append($("#tar-city>option"));
        });
        $("#btn3").click(function () {
            $("#src-city>option:selected").appendTo($("#tar-city"));
        });
        $("#btn4").click(function () {
            $("#src-city").append($("#tar-city>option:selected"));
        });
    });
</script>
</body>
</html>

清空节点与删除节点

$("div").empty();//清空一个元素的内容
$("div").remove(); 移除这个节点
$(".des").clone(false)克隆，
clone(参数) false:不传参数也是深度复制，不会复制事件

案例：微博发布

微博发布.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }

        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }

        ul {
            width: 450px;
            padding-left: 80px;
        }

        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
        }

        input {
            float: right;
        }


    </style>

</head>
<body>
<div class="box" id="weibo">
    <span>微博发布</span>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
    <button id="btn">发布</button>
    <ul id="ul">

    </ul>

</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("#btn").click(function () {
            var value = $("#txt").val();
            if (value.trim().length == 0) {
                return;
            }
            $("<li></li>").text(value).prependTo("#ul");
            $("#txt").val("");
        });
    });
</script>
</body>
</html>

案例：弹幕效果

弹幕效果.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html, body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            font-family: "微软雅黑";
            font-size: 62.5%;
        }

        .boxDom {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .idDom {
            width: 100%;
            height: 100px;
            background: #666;
            position: fixed;
            bottom: 0px;
        }

        .content {
            display: inline-block;
            width: 430px;
            height: 40px;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
        }

        .title {
            display: inline;
            font-size: 4em;
            vertical-align: bottom;
            color: #fff;
        }

        .text {
            border: none;
            width: 300px;
            height: 30px;
            border-radius: 5px;
            font-size: 2.4em;
        }

        .btn {
            width: 60px;
            height: 30px;
            background: #f90000;
            border: none;
            color: #fff;
            font-size: 2.4em;
        }

        span {
            width: 300px;
            height: 40px;
            position: absolute;
            overflow: hidden;
            color: #000;
            font-size: 4em;
            line-height: 1.5em;
            cursor: pointer;
            white-space: nowrap;
        }

    </style>

</head>
<body>

<div class="boxDom" id="boxDom">
    <div class="idDom" id="idDom">
        <div class="content">
            <p class="title">吐槽:</p>
            <input type="text" class="text" id="text"/>
            <button type="button" class="btn" id="btn">发射</button>
        </div>
    </div>

</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        var colors = ["red", "yellow", "green", "pink", "cyan", "blue", "yellowgreen", "hotpink"];
        $("#btn").click(function () {
            var randomColor = parseInt(Math.random() * colors.length);
            var randomY = parseInt(Math.random() * 400);
            //创建span
            $("<span></span>")
            /*设置内容*/
                .text($("#text").val())
                /*设置字体颜色*/
                .css("color", colors[randomColor])
                /*设置left值*/
                .css("left", "2000px")
                .css("top", randomY + "px")
                /*添加动画*/
                .animate({left: -500}, 3000, "linear", function () {
                    /*到了终点需要删除*/
                    $(this).remove();
                }).appendTo("#boxDom");
            $("#text").val("");
        });
        $("#text").keyup(function (e) {
            if (e.keyCode == 13) {
                $("#btn").click();
            }
        });
    });
</script>
</body>
</html>

案例：京东轮播图

京东轮播图.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .slider {
            height: 340px;
            width: 790px;
            margin: 100px auto;
            position: relative;
        }

        .slider li {
            position: absolute;
            display: none;
        }

        .slider li:first-child {
            display: block;
        }


        .arrow {
            display: none;
        }

        .slider:hover .arrow {
            display: block;
        }

        .arrow-left,
        .arrow-right {
            font-family: "SimSun", "宋体";
            width: 30px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
            text-align: center;
            line-height: 60px;
            color: #fff;
            font-weight: 700;
            font-size: 30px;
        }

        .arrow-left:hover,
        .arrow-right:hover {
            background-color: rgba(0, 0, 0, .5);
        }

        .arrow-left {
            left: 0;
        }

        .arrow-right {
            right: 0;
        }

    </style>

</head>
<body>
<div class="slider">
    <ul>
        <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/8.jpg" alt=""></a></li>
    </ul>
    <!--箭头-->
    <div class="arrow">
        <span class="arrow-left">&lt;</span>
        <span class="arrow-right">&gt;</span>
    </div>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
    $(function () {
        var count = 0;
        $(".arrow-right").click(function () {
            count++;
            if (count == $(".slider li").length) {
                count = 0;
            }
            $(".slider li").eq(count).fadeIn().siblings().fadeOut();
        });

        $(".arrow-left").click(function () {
            count--;
            if (count == -1) {
                count = $(".slider li").length - 1;
            }
            $(".slider li").eq(count).fadeIn().siblings().fadeOut();
        });
    });
</script>
</body>
</html>

案例：手风琴效果

手风琴效果.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            width: 1300px;
        }

        #box {
            width: 1200px;
            height: 400px;
            border: 2px solid red;
            margin: 100px auto;
        }

        #box li {
            width: 240px;
            height: 400px;
            /*border: 1px solid #000;*/
            float: left;
        }

    </style>

</head>
<body>
<div id="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
    $(function () {
        var $li = $("#box li");
        for (i = 0; i < $li.length; i++) {
            $li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)")
        }
        $li.mouseenter(function () {
            $(this).stop().animate({width: 800}).siblings().stop().animate({width: 100});

        }).mouseleave(function () {
            $li.stop().animate({width: 240});
        });
    });
</script>
</body>
</html>

案例：音乐导航

音乐导航.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav {
            width: 900px;
            height: 60px;
            background-color: black;
            margin: 0 auto;
        }

        .nav li {
            width: 100px;
            height: 60px;
            /*border: 1px solid yellow;*/
            float: left;
            position: relative;
            overflow: hidden;
        }

        .nav a {
            position: absolute;
            width: 100%;
            height: 100%;
            font-size: 24px;
            color: blue;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
            z-index: 2;
        }

        .nav span {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: yellow;
            top: 60px;
        }
    </style>

</head>
<body>
<div class="nav">
    <ul>
        <li>
            <a href="javascript:void(0);">导航1</a>
            <span></span>
        </li>
        <li><a href="javascript:void(0);">导航2</a><span></span></li>
        <li><a href="javascript:void(0);">导航3</a><span></span></li>
        <li><a href="javascript:void(0);">导航4</a><span></span></li>
        <li><a href="javascript:void(0);">导航5</a><span></span></li>
        <li><a href="javascript:void(0);">导航6</a><span></span></li>
        <li><a href="javascript:void(0);">导航7</a><span></span></li>
        <li><a href="javascript:void(0);">导航8</a><span></span></li>
        <li><a href="javascript:void(0);">导航9</a><span></span></li>
    </ul>

    <div>
        <audio src="mp3/1.ogg"></audio>
        <audio src="mp3/2.ogg"></audio>
        <audio src="mp3/3.ogg"></audio>
        <audio src="mp3/4.ogg"></audio>
        <audio src="mp3/5.ogg"></audio>
        <audio src="mp3/6.ogg"></audio>
        <audio src="mp3/7.ogg"></audio>
        <audio src="mp3/8.ogg"></audio>
        <audio src="mp3/9.ogg"></audio>
    </div>


</div>
<script src="../jquery-1.12.4.js"></script>
<script>
    $(function () {
        $(".nav li").mouseenter(function () {
            $(this).children("span").stop().animate({top: 0});
            var idx = $(this).index();
            $("audio").get(idx).load();
            $("audio").get(idx).play();
            console.log($("audio").get(idx));
        }).mouseleave(function () {
            $(this).children("span").stop().animate({top: 60});
        });
    });
</script>
</body>
</html>

jQuery学习:prop方法/基本动画/自定义动画/动态创建、

prop

基本动画

自定义动画

动画队列

停止动画

创建与添加节点

清空节点与删除节点

猜你喜欢

热点阅读