jQuery-DOM操作2

01-樣式操作（css方法）.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {

            //樣式操作方法1(設(shè)置樣式)：  css(json);
//            $("div").css({"width":100,"height":100,"background-color":"pink"});

            //樣式操作方法2(設(shè)置樣式)：  css(屬性，值);
            $("div").css("background-color","red");

            //樣式操作方法2(獲取樣式)：  css(屬性);
            //獲取的時候如果有很多，那么獲取jquery對象中的第一個
            alert($("div").css("width"));

        })
    </script>
</head>
<body>
<div></div>
<div style="width: 200px;height:300px;background: yellow"></div>
<div style="width: 200px;height:300px;background: yellow"></div>
<div style="width: 200px;height:300px;background: yellow"></div>
</body>
</html>

02-類操作（添加刪除切換判斷）.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .current {
            background-color: red;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                //添加類
                $("div").addClass("current");
                //判斷類
                alert($("div").hasClass("current"));//has是have的單三
            });

            $("button").eq(1).click(function () {
                //刪除類
                $("div").removeClass("current");
                //判斷類
                alert($("div").hasClass("current"));//has是have的單三
            });
            //alert($("div").hasClass("current"));//jquery對象中有一個帶有類名的也是true，所有都不帶才是false；
        })
    </script>
</head>
<body>
<button>添加</button>
<button>刪除</button>
<div></div>
<div></div>
<div></div>
<div class="current"></div>
</body>
</html>

03-切換背景.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .current {
            background-color: green;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                //需求：點(diǎn)擊按鈕 ，切換背景
//                if($("div").hasClass("current")){
//                    //如果有類名，那么刪除
//                    $("div").removeClass("current")
//                }else{
//                    //如果沒有類名，那么添加
//                    $("div").addClass("current")
//                }
                //切換類（toggleCLass）
                $("div").toggleClass("current");
            });
        })
    </script>
</head>
<body>
<button>切換</button>
<div></div>
</body>
</html>

04-動畫之顯示和隱藏.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            display: none;
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //點(diǎn)擊按鈕后產(chǎn)生動畫
            $("button:eq(0)").click(function () {
//                //顯示動畫用法1:   show();   不加參數(shù)
                $("div").show();  //通過這個方法實(shí)現(xiàn)的：display: block;

//                //顯示動畫用法2:   show(2000);   毫秒值
//                $("div").show(2000);  //通過這個方法實(shí)現(xiàn)的：display: block;
//                //通過控制  寬高透明度和display

                //顯示動畫用法3:   show(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").show("slow");
//                $("div").show("fast");
//                $("div").show("normal");

                //顯示動畫用法4:   show(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);
//                $("div").show(5000,function () {
//                    alert("動畫執(zhí)行完畢！");
//                });
            })

            //隱藏動畫
            $("button:eq(1)").click(function () {
//                //顯示動畫用法1:   hide();   不加參數(shù)
                $("div").hide();  //通過這個方法實(shí)現(xiàn)的：display: none;

//                //顯示動畫用法2:   hide(2000);   毫秒值
//                $("div").hide(2000);  //通過這個方法實(shí)現(xiàn)的：display: none;
//                //通過控制  寬高透明度和display

                //顯示動畫用法3:   hide(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").hide("slow");
//                $("div").hide("fast");
//                $("div").hide("normal");

                //顯示動畫用法4:   hide(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);
//                $("div").hide(2000,function () {
//                    alert("動畫執(zhí)行完畢！");
//                });
            })

            $("button:eq(2)").click(function () {
                //顯示隱藏切換
                //同樣有四種用法
                $("div").toggle(2000);
            })
        })
    </script>
</head>
<body>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div></div>

</body>
</html>

05-動畫之滑入和滑出.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            display: none;
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //點(diǎn)擊按鈕后產(chǎn)生動畫
            $("button:eq(0)").click(function () {
//                //滑入動畫用法1:   slideDown();   不加參數(shù)
                $("div").slideDown();

//                //滑入動畫用法2:   slideDown(2000);   毫秒值
//                $("div").slideDown(2000);
//                //通過控制  高和display

                //滑入動畫用法3:   slideDown(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").slideDown("slow");
//                $("div").slideDown("fast");
//                $("div").slideDown("normal");

                //滑入動畫用法4:   slideDown(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);
//                $("div").slideDown(5000,function () {
//                    alert("動畫執(zhí)行完畢！");
//                });
            })

            //滑出動畫
            $("button:eq(1)").click(function () {
//                //滑出動畫用法1:   slideUp();   不加參數(shù)
//                $("div").slideUp();

//                //滑出動畫用法2:   slideUp(2000);   毫秒值
//                $("div").slideUp(2000);  //通過這個方法實(shí)現(xiàn)的：display: none;
//                //通過控制  高和display

                //滑出動畫用法3:   slideUp(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").slideUp("slow");
//                $("div").slideUp("fast");
//                $("div").slideUp("normal");

                //滑出動畫用法1:   slideUp(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);
                $("div").slideUp(2000,function () {
                    alert("動畫執(zhí)行完畢！");
                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切換
                //同樣有四種用法
                $("div").slideToggle(1000);
            })
        })
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切換</button>
<div></div>

</body>
</html>

06-動畫之淡入和淡出.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            display: none;
            /*opacity: 1;*/
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //點(diǎn)擊按鈕后產(chǎn)生動畫
            $("button:eq(0)").click(function () {
//                //淡入動畫用法1:   fadeIn();   不加參數(shù)
                $("div").fadeIn();

//                //淡入動畫用法2:   fadeIn(2000);   毫秒值
//                $("div").fadeIn(2000);
//                //通過控制  透明度和display

                //淡入動畫用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeIn("slow");
//                $("div").fadeIn("fast");
//                $("div").fadeIn("normal");

                //淡入動畫用法4:   fadeIn(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);
//                $("div").fadeIn(5000,function () {
//                    alert("動畫執(zhí)行完畢！");
//                });
            })

            //滑出動畫
            $("button:eq(1)").click(function () {
//                //滑出動畫用法1:   fadeOut();   不加參數(shù)
//                $("div").fadeOut();

//                //滑出動畫用法2:   fadeOut(2000);   毫秒值
//                $("div").fadeOut(2000);  //通過這個方法實(shí)現(xiàn)的：display: none;
//                //通過控制  透明度和display

                //滑出動畫用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeOut("slow");
//                $("div").fadeOut("fast");
//                $("div").fadeOut("normal");

                //滑出動畫用法1:   fadeOut(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);
//                $("div").fadeOut(2000,function () {
//                    alert("動畫執(zhí)行完畢！");
//                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切換
                //同樣有四種用法
                $("div").fadeToggle(1000);
            })

            $("button:eq(3)").click(function () {
                //改透明度
                //同樣有四種用法
                $("div").fadeTo(1000,0.5, function () {
                    alert(1);
                });
            })
        })
    </script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切換</button>
<button>改透明度為0.5</button>
<div></div>

</body>
</html>

07-自定義動畫.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
                var json = {"width":500,"height":500,"left":300,"top": 300,"border-radius":100};
                var json2 = {"width":100,"height":100,"left":100,"top": 100,"border-radius":100,"background-color":"red"};

                //自定義動畫
                $("div").animate(json,1000, function () {
                    $("div").animate(json2,1000, function () {
                        alert("動畫執(zhí)行完畢！");
                    });
                });


//                //自定義動畫
//                $("div").animate({"display":"none","opacity":0,"width":0,"height":0},2000);
//                $("div").animate({"height":0},2000);
//                $("div").animate({"opacity":0},2000);

            })
        })
    </script>
</head>
<body>
<button>動畫</button>
<div></div>
</body>
</html>

08-停止動畫.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            display: none;
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //點(diǎn)擊按鈕后產(chǎn)生動畫
            $("button:eq(0)").click(function () {
                $("div").slideDown(2000);
            })

            //滑出動畫
            $("button:eq(1)").click(function () {
                $("div").slideUp(2000);
            })

            $("button:eq(2)").click(function () {
                $("div").stop();   //都不寫，默認(rèn)兩個都是false;

                // 第一個參數(shù)表示后續(xù)動畫是否要執(zhí)行
                //（true:后續(xù)動畫不執(zhí)行  ;false:后續(xù)動畫會執(zhí)行）
                // 第二個參數(shù)表示當(dāng)前動畫是否執(zhí)行完
                //（true:立即執(zhí)行完成當(dāng)前動畫  ;false:立即停止當(dāng)前動畫）

                //四種情況：情況1：true,true
                //（后續(xù)動畫不執(zhí)行，立即執(zhí)行完成當(dāng)前動畫）
//                $("div").stop(true,true);

                //四種情況：情況2：false,true
                //（后續(xù)動畫會執(zhí)行，立即執(zhí)行完成當(dāng)前動畫）
//                $("div").stop(false,true);

                //四種情況：情況3：true,false
                //（后續(xù)動畫不執(zhí)行，立即停止當(dāng)前動畫`）
//                $("div").stop(true,false);

                //四種情況：情況4：true,false
                //（后續(xù)動畫會執(zhí)行，立即停止當(dāng)前動畫`）
//                $("div").stop(false,false);
            })
        })
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>停止</button>
<div></div>

</body>
</html>

09-下拉菜單案例（children+this）

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

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(imgs/bg.jpg);
        }

        .wrap li{
            background-image: url(imgs/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        //入口函數(shù)
        $(document).ready(function () {
            //需求：鼠標(biāo)放入一級li中，讓他里面的ul顯示。移開隱藏。
            var jqli = $(".wrap>ul>li");

            //綁定事件
            jqli.mouseenter(function () {
                $(this).children("ul").stop().slideDown(1000);
            });

            //綁定事件(移開隱藏)
            jqli.mouseleave(function () {
                $(this).children("ul").stop().slideUp(1000);
            });
        });
    </script>

</head>
<body>
    <div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">二級菜單1</a></li>
                <li><a href="javascript:void(0);">二級菜單2</a></li>
                <li><a href="javascript:void(0);">二級菜單3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">二級菜單1</a></li>
                <li><a href="javascript:void(0);">二級菜單2</a></li>
                <li><a href="javascript:void(0);">二級菜單3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">二級菜單1</a></li>
                <li><a href="javascript:void(0);">二級菜單2</a></li>
                <li><a href="javascript:void(0);">二級菜單3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

10-右下角的彈出廣告（slideDown+slideUp+fadeIn+fadeOut）

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .ad {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 230px;
            height: 120px;
            background-image: url(imgs/ad.jpg);
            display: none;
        }

        .ad span {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 18px;
            background-image: url(imgs/h.jpg);
            cursor: pointer;
        }
    </style>
    <script src="../jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //需求：然廣告ad部分，先滑入，在滑出，在淡入。然后綁定事件，點(diǎn)擊span彈出
            //步驟：
            $(".ad").slideDown(1000).slideUp(1000).fadeIn(1000).children("span").click(function () {
                $(this).parent().fadeOut(1000);
            });

//            $(".ad").slideDown(1000, function () {
//                $(".ad").slideUp(1000, function () {
//                    $(".ad").fadeIn(1000, function () {
//                        $(".ad").children("span").click(function () {
//                            $(this).parent().fadeOut(1000, function () {
//                                alert("執(zhí)行完畢！");
//                            });
//                        });
//                    });
//                });
//            })
        })
    </script>
</head>

<body>

    <div class="ani">我是內(nèi)容</div>
    <div class="ad">
        <span></span>
    </div>


</body>
</html>

11-節(jié)點(diǎn)的操作之創(chuàng)建JQ對象.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<ul></ul>


<script src="jquery-1.11.1.js"></script>
<script>


    //創(chuàng)建節(jié)點(diǎn)1:      $("標(biāo)簽")             :類比于js中的document.createElement("li");
    console.log($("<li class='aaa'>我是li標(biāo)簽</li>"));


    //創(chuàng)建節(jié)點(diǎn)2:      $("ul").html("");     :類比innerHTML屬性。因?yàn)榇藢傩裕R別標(biāo)簽。
    $("ul").html("<li>我是html方法穿件出來的li標(biāo)簽</li>")




</script>
</body>
</html>

12-節(jié)點(diǎn)的操作之添加節(jié)點(diǎn).html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(document).ready(function () {
            $("button").click(function () {
                //創(chuàng)建一個新的jquery對象li
                var jqNewLi = $("<li>我是jquery創(chuàng)建出來的li。用的是append方法添加</li>");
//                append();    在盒子的最末尾添加一個元素。
                //在盒子末尾添加
//                $("ul").append(jqNewLi);    //把新創(chuàng)建的li塞進(jìn)ul中
//                jqNewLi.appendTo($("ul")); //把新創(chuàng)建的li塞進(jìn)ul中

                //在盒子最前面添加
//                $("ul").prepend(jqNewLi);
//                jqNewLi.prependTo($("ul"));


                //下面兩個方法是操作兄弟元素的。放在兄弟元素之后或者之前
                //after();
                $("li").after(jqNewLi);

                //before();
//                $("li").before(jqNewLi);

            })
        });
    </script>
</head>
<body>
    <button>添加li</button>

    <ul>
        <li>我是土著li</li>
    </ul>

</body>
</html>

12-節(jié)點(diǎn)的操作之添加節(jié)點(diǎn).html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(document).ready(function () {
            $("button").click(function () {
                //創(chuàng)建一個新的jquery對象li
                var jqNewLi = $("<li>我是jquery創(chuàng)建出來的li。用的是append方法添加</li>");
//                append();    在盒子的最末尾添加一個元素。
                //在盒子末尾添加
//                $("ul").append(jqNewLi);    //把新創(chuàng)建的li塞進(jìn)ul中
//                jqNewLi.appendTo($("ul")); //把新創(chuàng)建的li塞進(jìn)ul中

                //在盒子最前面添加
//                $("ul").prepend(jqNewLi);
//                jqNewLi.prependTo($("ul"));


                //下面兩個方法是操作兄弟元素的。放在兄弟元素之后或者之前
                //after();
                $("li").after(jqNewLi);

                //before();
//                $("li").before(jqNewLi);

            })
        });
    </script>
</head>
<body>
    <button>添加li</button>

    <ul>
        <li>我是土著li</li>
    </ul>

</body>
</html>

13-節(jié)點(diǎn)的操作之刪除和清空節(jié)點(diǎn).html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(document).ready(function () {
            $("button").eq(0).click(function () {
                //清空li所在的ul
                //方法1：.html("");
//                $("ul").html("");

                //方法1：.empty();
                $("ul").empty();
            })


            $("button").eq(1).click(function () {
                //刪除指定的li。  ---  自殺！
                $("li:eq(0)").remove();
            })
        });
    </script>
</head>
<body>
    <button>清空li</button>
    <button>刪除第一個li</button>

    <ul>
        <li>我是土著li1</li>
        <li>我是土著li2</li>
        <li>我是土著li3</li>
        <li>我是土著li4</li>
    </ul>

</body>
</html>

14-節(jié)點(diǎn)的操作之復(fù)制節(jié)點(diǎn).html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(document).ready(function () {
            $("button").eq(0).click(function () {
                //復(fù)制節(jié)點(diǎn)：  clone();
                var newUl  = $(".box ul").clone();
                $(".box").append(newUl);
            })
        });
    </script>
</head>
<body>
    <button>復(fù)制節(jié)點(diǎn)</button>

    <div class="box">
        <ul>
            <li>我是土著li1</li>
            <li>我是土著li2</li>
            <li>我是土著li3</li>
            <li>我是土著li4</li>
        </ul>
    </div>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • jQuery 能做什么？ jQuery是一個輕量級的javascript庫，可以少寫代碼，做更多的事。1.jQue...
    小囧兔閱讀 466評論 0贊 1
  • 通過jQuery，您可以選?。ú樵儯琿uery）HTML元素，并對它們執(zhí)行“操作”（actions）。 jQuer...
    枇杷樹8824閱讀 713評論 0贊 3
  • jQuery 安裝 把 jQuery 添加到您的網(wǎng)頁 如需使用 jQuery，您需要下載 jQuery 庫（會在下...
    Clover園閱讀 345評論 0贊 0
  • 警告請使用 document.write() 僅僅向文檔輸出寫內(nèi)容。如果在文檔已完成加載后執(zhí)行 document....
    鹿守心畔光閱讀 2,893評論 3贊 104
  • 五六年前的初夏 我們不期而遇 誰也沒有拒絕兩顆悸動的心 有那么兩三年 回憶起來總是很甜 可能年少的心抵不過秋冬 倔...
    安臣閱讀 238評論 0贊 0

友情鏈接更多精彩內(nèi)容