DOM操作和節(jié)點操作

一 樣式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .divItem{
            background: #000;
            color: #ffffff;
        }
        .divItem1{
            background: red;
            color: black;
        }
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            /**
             * 給所有的li元素添加樣式
             * 給選定的元素添加類樣式，注意：樣式名字沒有    點.
             * */
            $("li").addClass("divItem");
            /**
            * 給指定的元素刪除某種樣式
             * 有參數(shù)移除指定樣式，沒有參數(shù)移除所有樣式
            * */
            $("li").eq(2).removeClass("divItem");
            /**
             *切換
             * */
            $("button:first").click(function () {
               $("li").eq(1).toggleClass("divItem1");
            });
            /**
             * 判斷有沒有樣式
             * */
            $("button:last").click(function () {
               var st=$("li").eq(0).hasClass("divItem");
               //獲取返回值類型，并輸出
                // alert(st);
               if (st == true){
                   $("li").eq(0).removeClass("divItem");
               }else {
                   $("li").eq(0).addClass("divItem1")
               }
            });

        });
    </script>
</head>
<body>
<button>切換</button>
<button>判斷</button>
<ul>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
    <li>444444</li>
    <li>555555</li>
    <li>666666</li>
    <li>777777</li>
    <li>888888</li>


</ul>
</body>
</html>

總結(jié)
添加樣式

$("li").addClass("divItem");

移除樣式

$("li").eq(2).removeClass("divItem");

判斷有無樣式

$("li").eq(0).hasClass("divItem"); 返回值為布爾類型

二 tab切換欄案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
            border: 0px;
            list-style: none;
        }
        .wrapper{
            width: 1000px;
            height: 475px;
            margin: 100px auto ;
        }
        .tab{
            border: 1px solid #dddddd;
            height: 36px;
            width: 320px;
            border-bottom: 0px;
        }
        .wrapper li{
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top:4px solid #ffffff;
            position: relative;
        }
        .products{
            width: 1002px;
            border:1px solid #ddd;
            height: 476px;
        }
        .products .main{
            float: left;
            display: none;
        }
        .products .main.selected{
            display: block;
        }
        .tab li.active{
            border-color: red;
            border-bottom: 0;
        }

    </style>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
           $(".tab li").mouseenter(function () {
               //給當前元素添加active這個樣式
               //給當前這個元素的所有兄弟元素移除active這個樣式  siblings
               $(this).addClass("active").siblings().removeClass("active");
               //讓下面的div內(nèi)容，根據(jù)上面tab欄菜單展示相應(yīng)的內(nèi)容
               //index（）獲取當前元素序號
               var index=$(this).index();
               $(".products div").eq(index).addClass("selected").siblings().removeClass("selected");
           }) ;
        });
    </script>
</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li>國際大牌</li>
        <li>國妝名牌</li>
        <li>清潔用品</li>
        <li>男士精品</li>
    </ul>
    <div class="products">
        <div class="main selected">
        <a href="#">![](imgs/guojidapai.jpg)</a>
        </div>
        <div class="main">
        <a href="#">![](imgs/guozhuangmingpin.jpg)</a>
        </div>
        <div class="main">
        <a href="#">![](imgs/qingjieyongpin.jpg)</a>
        </div>
        <div class="main">
        <a href="#">![](imgs/nanshijingpin.jpg)</a>
        </div>
    </div>
</div>
</body>
</html>

總結(jié)
1 樣式書寫

  • div布局
  • 導航欄，內(nèi)容書寫
  • 清空樣式
  • div大小定位
  • 導航欄邊框設(shè)置，大小，顏色，邊框?qū)挾?，去掉下邊?/li>
  • 導航欄樣式設(shè)置，左浮動，大小，文字行高，文字位置，光標樣式，上邊距以及顏色，定位
  • 設(shè)置內(nèi)容div的大小，邊框?qū)挾纫约邦伾?/li>
  • 設(shè)置子內(nèi)容div屬性為左浮動，且塊級不顯示
  • 設(shè)置主內(nèi)容頁屬性為塊級顯示（元素前后會帶有換行符）
    2 jQuery實現(xiàn)效果
$(function () {
           $(".tab li").mouseenter(function () {
               //給當前元素添加active這個樣式
               //給當前這個元素的所有兄弟元素移除active這個樣式  siblings
               $(this).addClass("active").siblings().removeClass("active");
               //讓下面的div內(nèi)容，根據(jù)上面tab欄菜單展示相應(yīng)的內(nèi)容
               //index（）獲取當前元素序號
               var index=$(this).index();
               $(".products div").eq(index).addClass("selected").siblings().removeClass("selected");
           }) ;
        });

三 常用DOM操作（屬性和值的內(nèi)容）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            background: gray;
            color: red;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
           //設(shè)置屬性
            $("input[type='button']").eq(0).click(function () {
               $(this).attr("title","動態(tài)設(shè)置屬性");
            });
            //獲取屬性
            $("input[type='button']").eq(1).click(function () {
               var st=$("input[type='button']").eq(0).attr("title");
               alert(st);
            });
            //刪除屬性
            $("input[type='button']").eq(2).click(function () {
               $("input[type='button']").eq(0).removeAttr("title");
            });
            //設(shè)置值
            $("input[type='button']").eq(3).click(function () {
               $("#txt").val("動態(tài)設(shè)置的值");
            });
            //獲取值
            $("input[type='button']").eq(4).click(function () {
                var txt1=$("#txt").val();
                alert(txt1);
            });
            //設(shè)置html
            $("input[type='button']").eq(5).click(function () {
                //$("div").html("我是html內(nèi)容");
                $("div").html("<p>我是p元素</p>");
            });
            //獲取html
            $("input[type='button']").eq(6).click(function () {
                alert($("div").html());
            });
            //設(shè)置文本內(nèi)容
            $("input[type='button']").eq(7).click(function () {
                $("div").text("動態(tài)創(chuàng)建的文本內(nèi)容");
            });
            //獲取文本內(nèi)容
            $("input[type='button']").eq(8).click(function () {
                alert($("div").text());
            });
        });
    </script>
</head>
<body>
<input type="button" value="設(shè)置屬性">
<input type="button" value="獲取屬性">
<input type="button" value="刪除屬性">
<input type="button" value="設(shè)置值">
<input type="button" value="獲取值">
<input type="button" value="設(shè)置html">
<input type="button" value="獲取html">
<input type="button" value="設(shè)置文本內(nèi)容">
<input type="button" value="獲取文本內(nèi)容">
<div>
    <input type="text" id="txt">
</div>
</body>
</html>

總結(jié)

設(shè)置屬性： $(this).attr("title","動態(tài)設(shè)置屬性");
獲取屬性：var st=$("input[type='button']").eq(0).attr("title");
刪除屬性： $("input[type='button']").eq(0).removeAttr("title");
設(shè)置值：$("#txt").val("動態(tài)設(shè)置的值");
獲取值：var txt1=$("#txt").val();
設(shè)置html： $("div").html("<p>我是p元素</p>");
獲取html：alert($("div").html());
設(shè)置文本內(nèi)容：$("div").text("動態(tài)創(chuàng)建的文本內(nèi)容");
獲取文本內(nèi)容：alert($("div").text());

四 節(jié)點操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button").eq(0).click(function () {
            //追加節(jié)點
           $("div").append("<p>我是動態(tài)創(chuàng)建的p元素</p>");
            });

            //把前面這個元素追加給$("div")元素
        $("button").eq(1).click(function () {
            $("<p>我是動態(tài)創(chuàng)建的p元素</p>").appendTo($("div"));
            });

        $("button").eq(2).click(function () {
           //把前面這個元素在所有子元素的前面添加一個子元素
            $("div").prepend("<p>我是動態(tài)prepend創(chuàng)建的p元素</p>");
            });

        $("button").eq(3).click(function () {
            //把前面這個元素添加給后面這個$("div")元素的所有子元素的前面
            $("<p>我是動態(tài)prepend創(chuàng)建的p元素</p>").prependTo($("div"));
            });

        $("button").eq(4).click(function () {
            //往div的后面添加元素，他們是兄弟關(guān)系
            $("div").after("<p>我是div后面的p元素</p>");
            });

        $("button").eq(5).click(function () {
           //往div前面添加元素，他們是兄弟關(guān)系
            $("div").before("<p>我是div前面的p元素</p>");
            });

        $("button").eq(6).click(function () {
            //把前面的元素放到后面div元素的前面，他們是兄弟節(jié)點關(guān)系
            $("<p>我在哪？</p>").insertBefore($("div"));
            });

        $("button").eq(7).click(function () {
            //把前面的元素放到后面div元素的后面，他們是兄弟節(jié)點關(guān)系
            $("<p>我在哪？</p>").insertAfter($("div"));
            });

        $("button").eq(8).click(function () {
            //刪除節(jié)點
            //$("div").remove();
            $(this).remove();//自殺
            });

        $("button").eq(9).click(function () {
            //清空節(jié)點元素
            // $("div").html("");清空子元素  推薦使用方法
            $("div").empty();
            });

        $("button").eq(10).click(function () {
            //復制
            //參數(shù)如果為true的話，那么之前的時間也會復制一份
            $("div").append($("p").clone());
            });

        $("button").eq(11).click(function () {
            //包裹元素
            $("span").wrap($("div"));
            });

        $("button").eq(12).click(function () {
            //包裹所有節(jié)點
            $("span").wrapAll($("div"));
            });

        $("button").eq(13).click(function () {
            //替換節(jié)點
            $("span").replaceWith("#d");
            });

        });
    </script>

</head>
<body>
<button>append 追加</button>
<button>appendTo 追加</button>
<button>prepend 往前面添加節(jié)點</button>
<button>prependTo 往前面添加節(jié)點</button>
<button>after 往后面添加節(jié)點</button>
<button>before 往前面添加節(jié)點</button>
<button>insertBefore</button>
<button>insertAfter</button>
<br>
<br>
<button>remove 刪除選中元素</button>
<button>empty 清空子元素</button>
<button>clone 復制節(jié)點</button>
<button>warp 單個包裹</button>
<button>warpAll 所有包裹在一個node中</button>
<button>replaceWidth 替換</button>

<div>
    <h1>標題標題</h1>
    <h1>標題1標題</h1>
</div>
<p>我是外面的p元素，不是冬天添加的</p>
<span>小小小span
    <h2>小小span</h2>
</span>
<div id="d">
<h1>replaceWidth替換</h1>
</div>
</body>
</html>

append追加節(jié)點：

$("div").append("<p>我是動態(tài)創(chuàng)建的p元素</p>");

appendTo把前面這個元素追加給$("div")元素：

$("<p>我是動態(tài)創(chuàng)建的p元素</p>").appendTo($("div"));

prepend把前面這個元素在所有子元素的前面添加一個子元素:

$("div").prepend("<p>我是動態(tài)prepend創(chuàng)建的p元素</p>");

prependTo把前面這個元素添加給后面這個$("div")元素的所有子元素的前面

$("<p>我是動態(tài)prepend創(chuàng)建的p元素</p>").prependTo($("div"));

after往div的后面添加元素，他們是兄弟關(guān)系

$("div").after("<p>我是div后面的p元素</p>");

before往div前面添加元素，他們是兄弟關(guān)系

$("div").before("<p>我是div前面的p元素</p>");

insertBefore把前面的元素放到后面div元素的前面，他們是兄弟節(jié)點關(guān)系

$("<p>我在哪？</p>").insertBefore($("div"));

insertBefore把前面的元素放到后面div元素的后面，他們是兄弟節(jié)點關(guān)系

$("<p>我在哪？</p>").insertAfter($("div"));

remove刪除節(jié)點

//$("div").remove();
$(this).remove();//自殺

empty清空節(jié)點元素

// $("div").html("");清空子元素 推薦使用方法
$("div").empty();

clone復制

//參數(shù)如果為true的話，那么之前的時間也會復制一份
$("div").append($("p").clone());

wrap包裹元素

$("span").wrap($("div"));

wrapAll包裹所有節(jié)點

$("span").wrapAll($("div"));

replaceWith替換節(jié)點

$("span").replaceWith("#d");

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

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

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