jQuery学习:prop方法/基本动画/自定义动画/动态创建、添加、清空、删除节点

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>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,036评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,046评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,411评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,622评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,661评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,521评论 1赞 304
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,288评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,200评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,644评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,837评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,953评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,673评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,281评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,889评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,011评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,119评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,901评论 2赞 355

jQuery学习:prop方法/基本动画/自定义动画/动态创建、添加、清空、删除节点

prop

基本动画

自定义动画

动画队列

停止动画

创建与添加节点

清空节点与删除节点

推荐阅读更多精彩内容