DOM操作和節(jié)點(diǎn)操作

一 樣式操作

<!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元素添加樣式
             * 給選定的元素添加類樣式炕置，注意：樣式名字沒(méi)有    點(diǎn).
             * */
            $("li").addClass("divItem");
            /**
            * 給指定的元素刪除某種樣式
             * 有參數(shù)移除指定樣式铅匹，沒(méi)有參數(shù)移除所有樣式
            * */
            $("li").eq(2).removeClass("divItem");
            /**
             *切換
             * */
            $("button:first").click(function () {
               $("li").eq(1).toggleClass("divItem1");
            });
            /**
             * 判斷有沒(méi)有樣式
             * */
            $("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");

判斷有無(wú)樣式

$("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 () {
               //給當(dāng)前元素添加active這個(gè)樣式
               //給當(dāng)前這個(gè)元素的所有兄弟元素移除active這個(gè)樣式  siblings
               $(this).addClass("active").siblings().removeClass("active");
               //讓下面的div內(nèi)容自脯，根據(jù)上面tab欄菜單展示相應(yīng)的內(nèi)容
               //index（）獲取當(dāng)前元素序號(hào)
               var index=$(this).index();
               $(".products div").eq(index).addClass("selected").siblings().removeClass("selected");
           }) ;
        });
    </script>
</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li>國(guó)際大牌</li>
        <li>國(guó)妝名牌</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布局
  • 導(dǎo)航欄尔崔，內(nèi)容書寫
  • 清空樣式
  • div大小定位
  • 導(dǎo)航欄邊框設(shè)置，大小冗尤，顏色，邊框?qū)挾龋サ粝逻吙?/li>
  • 導(dǎo)航欄樣式設(shè)置类嗤，左浮動(dòng)，大小辨宠，文字行高遗锣，文字位置，光標(biāo)樣式嗤形，上邊距以及顏色精偿，定位
  • 設(shè)置內(nèi)容div的大小，邊框?qū)挾纫约邦伾?/li>
  • 設(shè)置子內(nèi)容div屬性為左浮動(dòng)赋兵，且塊級(jí)不顯示
  • 設(shè)置主內(nèi)容頁(yè)屬性為塊級(jí)顯示（元素前后會(huì)帶有換行符）
    2 jQuery實(shí)現(xiàn)效果
$(function () {
           $(".tab li").mouseenter(function () {
               //給當(dāng)前元素添加active這個(gè)樣式
               //給當(dāng)前這個(gè)元素的所有兄弟元素移除active這個(gè)樣式  siblings
               $(this).addClass("active").siblings().removeClass("active");
               //讓下面的div內(nèi)容笔咽，根據(jù)上面tab欄菜單展示相應(yīng)的內(nèi)容
               //index（）獲取當(dāng)前元素序號(hào)
               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","動(dòng)態(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("動(dòng)態(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("動(dòng)態(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","動(dòng)態(tài)設(shè)置屬性");
獲取屬性：var st=$("input[type='button']").eq(0).attr("title");
刪除屬性： $("input[type='button']").eq(0).removeAttr("title");
設(shè)置值：$("#txt").val("動(dòng)態(tài)設(shè)置的值");
獲取值：var txt1=$("#txt").val();
設(shè)置html： $("div").html("<p>我是p元素</p>");
獲取html：alert($("div").html());
設(shè)置文本內(nèi)容：$("div").text("動(dòng)態(tài)創(chuàng)建的文本內(nèi)容");
獲取文本內(nèi)容：alert($("div").text());

四 節(jié)點(diǎn)操作

<!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é)點(diǎn)
           $("div").append("<p>我是動(dòng)態(tài)創(chuàng)建的p元素</p>");
            });

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

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

        $("button").eq(3).click(function () {
            //把前面這個(gè)元素添加給后面這個(gè)$("div")元素的所有子元素的前面
            $("<p>我是動(dòng)態(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é)點(diǎn)關(guān)系
            $("<p>我在哪？</p>").insertBefore($("div"));
            });

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

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

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

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

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

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

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

        });
    </script>

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

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

append追加節(jié)點(diǎn)：

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

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

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

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

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

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

$("<p>我是動(dòng)態(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é)點(diǎn)關(guān)系

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

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

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

remove刪除節(jié)點(diǎn)

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

empty清空節(jié)點(diǎn)元素

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

clone復(fù)制

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

wrap包裹元素

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

wrapAll包裹所有節(jié)點(diǎn)

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

replaceWith替換節(jié)點(diǎn)

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市寺董，隨后出現(xiàn)的幾起案子覆糟，更是在濱河造成了極大的恐慌，老刑警劉巖遮咖，帶你破解...
    沈念sama閱讀 218,858評(píng)論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件滩字，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)麦箍，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門漓藕，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人挟裂，你說(shuō)我怎么就攤上這事享钞。” “怎么了话瞧？”我有些...
    開封第一講書人閱讀 165,282評(píng)論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵嫩与，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我交排，道長(zhǎng)，這世上最難降的妖魔是什么饵筑？ 我笑而不...
    開封第一講書人閱讀 58,842評(píng)論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任埃篓，我火速辦了婚禮，結(jié)果婚禮上根资，老公的妹妹穿的比我還像新娘架专。我一直安慰自己，他們只是感情好玄帕，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開白布部脚。 她就那樣靜靜地躺著，像睡著了一般裤纹。 火紅的嫁衣襯著肌膚如雪委刘。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,679評(píng)論 1贊 305
  • 城市分裂傳說(shuō)
    那天鹰椒，我揣著相機(jī)與錄音锡移，去河邊找鬼。 笑死漆际，一個(gè)胖子當(dāng)著我的面吹牛淆珊，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播奸汇，決...
    沈念sama閱讀 40,406評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼施符，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了擂找？” 一聲冷哼從身側(cè)響起戳吝，我...
    開封第一講書人閱讀 39,311評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎婴洼，沒(méi)想到半個(gè)月后骨坑，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1贊 315
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年欢唾，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了且警。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1贊 350
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡礁遣，死狀恐怖斑芜，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情祟霍，我是刑警寧澤杏头，帶...
    沈念sama閱讀 35,785評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站沸呐，受9級(jí)特大地震影響醇王，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜崭添，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3贊 331
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一寓娩、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧呼渣，春花似錦棘伴、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評(píng)論 0贊 22
  • 一樁弒父案焊夸，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至蓝角，卻和暖如春阱穗，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背帅容。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評(píng)論 1贊 271
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工颇象， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人并徘。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3贊 372
  • 代替公主和親
    正文 我出身青樓遣钳，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親麦乞。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蕴茴，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • //------------------------- 第一章 認(rèn)識(shí)JQuery ----------------...
    米塔塔閱讀 720評(píng)論 0贊 9
  • Attribute： $("p").addClass(css中定義的樣式類型); 給某個(gè)元素添加樣式 $("img...
    撲克臉_457e閱讀 570評(píng)論 0贊 1
  • $(”p”).addClass(css中定義的樣式類型); 給某個(gè)元素添加樣式 $(”img”).attr({sr...
    專注寒冰三千歲閱讀 505評(píng)論 0贊 4
  • 一）jQuery九類選擇器【參見(jiàn)jQueryAPI.chm手冊(cè)】 目的：通過(guò)九類選擇器，能定位web頁(yè)面(HTML...
    奮斗的老王閱讀 1,039評(píng)論 0贊 51
  • 學(xué)會(huì)學(xué)會(huì)，先學(xué)才可能會(huì)声畏。 沒(méi)錯(cuò)撞叽。學(xué)了姻成，也只是可能會(huì)。 因?yàn)樵钙澹椒ㄒ埠苤匾剑?比如科展，你說(shuō)你要學(xué)彈吉他。蘭后糠雨，你買了...
    李爹閱讀 205評(píng)論 7贊 4