jQuery基礎(二)—DOM篇(慕課網)

第一章 課程介紹

此課程主要講的是利用jq對節點的操作,以及一些其他新的功能。

第二章 DOM節點的創建

2-1 DOM創建節點及節點屬性

如果我們通過AJAX獲取到數據之後然後才能確定結構的話,這種情況就需要動態的處理節點了。
創建節點元素流程比較簡單,大體如下:
  創建節點(常見的:元素、屬性和文本)
  添加節點的一些屬性
  加入到文檔中

流程中涉及的一點方法:
  創建元素:document.createElement
  設置屬性:setAttribute
  添加文本:innerHTML
  加入文檔:appendChild

2-2 jQuery節點創建與屬性的處理
$("<div class='right'><div class='aaron'>動態創建DIV元素節點</div></div>")

這就是jQuery創建節點的方式,讓我們保留HTML的結構書寫方式,非常的簡單、方便和靈活
例題:

 <script type="text/javascript">
    var $body = $('body');
    $body.on('click', function() {
        //通過jQuery生成div元素節點
        var div = $("<div class='right'><div class='aaron'>動態創建DIV元素節點</div></div>")
        $body.append(div)
    })

    </script>

第三章 DOM節點的插入

3-1 DOM內部插入append()與appendTo()

  動態創建的元素是不夠的,它只是臨時存放在內存中,最終我們需要放到頁面文檔並呈現出來。那麼問題來了,怎麼放到文檔上?
  這裏就涉及到一個位置關係,常見的就是把這個新創建的元素,當作頁面某一個元素的子元素放到其內部。針對這樣的處理,jQuery就定義2個操作的方法


  .append()和.appendTo()兩種方法功能相同,主要的不同是語法——內容和目標的位置不同
  append()前面是被插入的對象,後面是要在對象內插入的元素內容
  appendTo()前面是要插入的元素內容,而後面是被插入的對象

3-2 DOM外部插入after()與before()

  節點與節點之前有各種關係,除了父子,祖輩關係,還可以是兄弟關係。之前我們在處理節點插入的時候,接觸到了內部插入的幾個方法,這節我們開始講外部插入的處理,也就是兄弟之間的關係處理,這裏jQuery引入了2個方法,可以用來在匹配I的元素前後插入內容。


注意點:
  after向元素的後邊添加html代碼,如果元素後面有元素了,那將後面的元素後移,然後將html代碼插入
  before向元素的前邊添加html代碼,如果元素前面有元素了,那將前面的元素前移,然後將html代碼插

3-3 DOM內部插入prepend()與prependTo()

  在元素內部進行操作的方法,除了在被選元素的結尾(仍然在內部)通過append與appendTo插入指定內容外,相應的還可以在被選元素之前插入,jQuery提供的方法是prepend與prependTo


append就是在最後添加,prepend在最前添加

3-4 DOM外部插入insertAfter()與insertBefore()

  與內部插入處理一樣,jQuery由於內容目標的位置不同,然增加了2個新的方法insertAfter與insertBefore


這些功能一樣,語法不同的,如果以後自己寫的時候再慢慢區分吧,現在先做一個大致瞭解……

第四章 DOM節點的刪除

4-1 DOM節點刪除之empty()的基本用法

  要移除頁面上節點是開發者常見的操作,jQuery提供了幾種不同的方法用來處理這個問題,這裏我們開仔細瞭解下empty方法
  empty 顧名思義,清空方法,但是與刪除又有點不一樣,因爲它只移除了 指定元素中的所有子節點。
  這個方法不僅移除子元素(和其他後代元素),同樣移除元素裏的文本。因爲,根據說明,元素裏任何文本字符串都被看做是該元素的子節點。
例題:

<body>
    <h2>通過empty移除元素</h2>
    <div id="test">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <button>點擊通過jQuery的empty移除元素</button>
    <script type="text/javascript">
    $("button").on('click', function() {
        //通過empty移除了當前div元素下的所有p元素
        //但是本身id=test的div元素沒有被刪除
        $("#test").empty()
    })
    </script>
</body>

移除節點及裏面的內容。

4-2 DOM節點刪除之remove()的有參用法和無參用法

  remove與empty一樣,都是移除元素的方法,但是remove會將元素自身移除,同時也會移除元素內部的一切,包括綁定的事件及與該元素相關的jQuery數據。
  如果不通過remove方法刪除這個節點其實也很簡單,但是同時需要把事件給銷燬掉,這裏是爲了防止"內存泄漏",所以前端開發者一定要注意,綁了多少事件,不用的時候一定要記得銷燬
例題:

<body>
    <h2>通過jQuery remove方法移除元素</h2>
    <div class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <div class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </div>
    <button>通過點擊jQuery的empty移除元素</button>
    <button>通過點擊jQuery的empty移除指定元素</button>
    <script type="text/javascript">
    $("button:first").on('click', function() {
        //刪除整個 class=test1的div節點
        $(".test1").remove()
    })

    $("button:last").on('click', function() {
        //找到所有p元素中,包含了3的元素
        //這個也是一個過濾器的處理
        $("p").remove(":contains('3')")
    })
    </script>
</body>
4-3 DOM節點刪除之empty和remove區別

  要用到移除指定元素的時候,jQuery提供了empty()與remove([expr])二個方法,兩個都是刪除元素,但是兩者還是有區別
empty方法
  嚴格地講,empty()方法並不是刪除節點,而是清空節點,它能清空元素中的所有後代節點
empty不能刪除自己本身這個節點
remove方法
  該節點與該節點所包含的所有後代節點將同時被刪除
  提供傳遞一個篩選的表達式,刪除指定合集中的元素
例題:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .left,
    .right {
        width: 300px;
    }
    
    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left div {
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>通過empty與remove移除元素</h2>
    <div class="left">
        <button id="bt1">點擊通過jQuery的empty移除內部P元素</button>
        <button id="bt2">點擊通過jQuery的remove移除整個節點</button>
    </div>
    <div class="right">
        <div id="test1">
            <p>p元素1</p>
            <p>p元素2</p>
        </div>
        <div id="test2">
            <p>p元素3</p>
            <p>p元素4</p>
        </div>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //刪除了2個p元素,但是本着沒有刪除 
        $("#test1").empty()
    })

    $("#bt2").on('click', function() {
        //刪除整個節點
        $("#test2").remove()
    })
    </script>
</body>

</html>
4-4 DOM節點刪除之保留數據的刪除操作detach()

  如果我們希望臨時刪除頁面上的節點,但是又不希望節點上的數據與事件丟失,並且能在下一個時間段讓這個刪除的節點顯示到頁面,這時候就可以使用detach方法來處理
  detach從字面上就很容易理解。讓一個web元素託管。即從當前頁面中移除該元素,但保留這個元素的內存模型對象。

4-5 DOM節點刪除之detach()和remove()區別

  remove()和detach()可能就是其中的一個,可能remove()我們用得比較多,而detach()就可能會很少了

remove:移除節點
  無參數,移除自身整個節點以及該節點的內部的所有節點,包括節點上事件與數據
  有參數,移除篩選出的節點以及該節點的內部的所有節點,包括節點上事件與數據

detach:移除節點
  移除的處理與remove一致
  與remove()不同的是,所有綁定的事件、附加的數據等都會保留下來
  例如:$("p").detach()這一句會移除對象,僅僅是顯示效果沒有了。但是內存中還是存在的。當你append之後,又重新回到了文檔流中。就又顯示出來了。
例題:

<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    p{
        border: 1px solid red;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h3>給頁面2個p元素節點綁定點擊事件,點擊後彈出自己本身的節點內容</h3>
    <p>元素p1,同時綁定點擊事件</p>
    <p>元素p2,同時綁定點擊事件</p>
    <h3>通過點擊2個按鈕後觀察方法處理的區別</h3>
    <button>點擊通過remove處理元素p1</button>
    <button>點擊通過detach處理元素p2</button>
</body>
<script type="text/javascript">
    //給頁面上2個p元素都綁定時間
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })

    $("button:first").click(function() {
        var p = $("p:first").remove();
        p.css('color','red').text('p1通過remove處理後,點擊該元素,事件丟失')
        $("body").append(p);
    });

    $("button:last").click(function() {
        var p = $("p:first").detach();
        p.css('color','blue').text('p2通過detach處理後,點擊該元素事件存在')
        $("body").append(p);
    });
</script>
</script>

</html>

第五章 DOM節點的複製與替換

5-1 DOM拷貝clone()

  .clone()方法深度 複製所有匹配的元素集合,包括所有匹配元素、匹配元素的下級元素、文字節點。
  clone方法比較簡單就是克隆節點,但是需要注意,如果節點有事件或者數據之類的其他處理,我們需要通過clone(ture)傳遞一個布爾值ture用來指定,這樣不僅僅只是克隆單純的節點結構,還要把附帶的事件與數據給一併克隆了
例題:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }
    
    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }
    </style>
</head>

<body>
    <h2>通過clone克隆元素</h2>
    <div class="left">
        <div class="aaron1">點擊,clone淺拷貝</div>
        <div class="aaron2">點擊,clone深拷貝,可以繼續觸發創建</div>
    </div>
    <script type="text/javascript">
        //只克隆節點
        //不克隆事件
        $(".aaron1").on('click', function() {
            $(".left").append( $(this).clone().css('color','red') )
        })
    </script>

    <script type="text/javascript">
        //克隆節點
        //克隆事件
        $(".aaron2").on('click', function() {
            console.log(1)
            $(".left").append( $(this).clone(true).css('color','blue') )
        })
    </script>
</body>

</html>

5-2 DOM替換replaceWith()和replaceAll()

總結:

.replaceAll()和.replaceWith()功能類似,主要是目標和源的位置區別
.replaceWith()與.replaceAll() 方法會刪除與節點相關聯的所有數據和事件處理程序
.replaceWith()方法,和大部分其他jQuery方法一樣,返回jQuery對象,所以可以和其他方法鏈接使用
.replaceWith()方法返回的jQuery對象引用的是替換前的節點,而不是通過replaceWith/replaceAll方法替換後的節點

例題:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style>

    .right div {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>replaceWith()和replaceAll()</h2>
    <div class="left">
        <button class="bt1">點擊,通過replaceWith替換內容</button>
        <button class="bt2">點擊,通過rreplaceAll替換內容</button>
    </div>
    <div class="right">
        <div>
            <p>第一段</p>
            <p>第二段</p>
            <p>第三段</p>
        </div>
        <div>
            <p>第四段</p>
            <p>第五段</p>
            <p>第六段</p>
        </div>
    </div>
    <script type="text/javascript">
    //只克隆節點
    //不克隆事件
    $(".bt1").on('click', function() {
        //找到內容爲第二段的p元素
        //通過replaceWith刪除並替換這個節點
        $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替換第二段的內容</a>')
    })
    </script>
    <script type="text/javascript">
    //找到內容爲第六段的p元素
    //通過replaceAll刪除並替換這個節點
    $(".bt2").on('click', function() {
        $('<a style="color:red">replaceAll替換第六段的內容</a>').replaceAll('.right > div:last p:last');
    })
    </script>
</body>

</html>

5-3 DOM包裹wrap()方法---被包

注意:
  .wrap()函數可以接受任何字符串或對象,可以傳遞給$()工廠函數來指定一個DOM結構。這種結構可以嵌套了好幾層深,但應該只包含一個核心的元素。每個匹配的元素都會被這種結構包裹。該方法返回原始的元素集,以便之後使用鏈式方法。

5-4 DOM包裹unwrap()方法(刪除5-3方法的方法)
5-5 DOM包裹wrapAll()方法-----由一個元素代替全體元素,發出請求被包
5-6 DOM包裹wrapInner()方法-----主動去包別人

第六章 JQuery遍歷

6-1 jQuery遍歷之children()方法

children()無參數
  允許我們通過在DOM樹中對這些元素的直接子元素進行搜索,並且構造一個新的匹配元素的jQuery對象
  注意:jQuery是一個合集對象,所以通過children是匹配合集中每一給元素的第一級子元素
.children()方法選擇性地接受同一類型選擇器表達式
$("div").children(".selected")
  同樣的也是因爲jQuery是合集對象,可能需要對這個合集對象進行一定的篩選,找出目標元素,所以允許傳一個選擇器的表達式
例題:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>
    .left {
        width: auto;
        height: 120px;
    }
    
    .left div {
        width: 150px;
        height: 70px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    
    a {
        display: block;
    }
    </style>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>

<body>
    <h2>children方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-1">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button id="bt1">點擊:children無參數</button>
    <button id="bt2">點擊:children傳遞表達式</button>
    <script type="text/javascript">
    $("#bt1").click(function() {
        $(".div").children().css("border","1px solid red");
    })
    </script>

    <script type="text/javascript">
    $("#bt2").click(function() {
        //找到所有class=div的元素
        //找到其對應的子元素ul,然後篩選出最後一個,給邊寬加上顏色
        $('.div').children(':last').css('border', '3px solid blue')
    })
    </script>

</body>

</html>

6-2 jQuery遍歷之find()方法

  jQuery是一個合集對象,如果想快速查找DOM樹中的這些元素的後代元素,此時可以用find()方法,這也是開發使用頻率很高的方法。這裏要注意 children與find方法的區別,children是父子關係查找,find是後代關係(包含父子關係)

.find()方法要注意的知識點:
  find是遍歷當前元素集合中每個元素的後代。只要符合,不管是兒子輩,孫子輩都可以。
與其他的樹遍歷方法不同,選擇器表達式對於 .find() 是必需的參數。如果我們需要實現對所有後代元素的取回,可以傳遞通配選擇器 '*'。
find只在後代中遍歷,不包括自己。
  選擇器 context 是由 .find() 方法實現的;因此,('.item-ii').find('li') 等價於('li', '.item-ii')(找到類名爲item-ii的標籤下的li標籤)。

注意重點:
  .find()和.children()方法是相似的
  1.children只查找第一級的子節點
  2.find查找範圍包括子節點的所有後代節點
例題:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>
    .left {
        width: auto;
        height: 200px;
    }
    
    .left div {
        width: 150px;
        height: 70px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    
    span {
        color: blue;
    }
    </style>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>

<body>
    <h2>find方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-1">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <li class="item-1">1</li>
                <li class="item-2 test">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button>點擊:find傳遞表達式</button>
    <br/>
    <br/>
    <h3>find表達式</h3>
    <div style="border:1px solid red;">
        <p>
            <span>測試1</span>
            <a>測試2</a>
        </p>
        <p>
            <span>慕課網1</span>
            <a>慕課網2</a>
        </p>
        <div>
            <span>Aaron1</span>
            <a>Aaron2</a>
        </div>
    </div>
    <br/>
    <br/>
    <button>點擊:find傳遞$對象</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        $(".left").find("li:last").css("border","1px solid red");
    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
        //找到所有p元素,然後篩選出子元素是span標籤的節點
        //改變其字體顏色
        var $spans = $('span');
        $("p").find($spans).css('color', 'red');
    })
    </script>
</body>

</html>

6-3 jQuery遍歷之parent()方法

  因爲是父元素,這個方法只會向上查找一級

6-4 jQuery遍歷之parents()方法

  其實也類似find與children的區別,parent只會查找一級,parents則會往上一直查到查找到祖先節點

6-5 jQuery遍歷之closest()方法

.parents()和.closest()是有點相似的,都是往上遍歷祖輩元素,但是兩者還是有區別的,否則就沒有存在的意義了
  起始位置不同:.closest開始於當前元素 .parents開始於父元素
  遍歷的目標不同:.closest要找到指定的目標,.parents遍歷到文檔根元素,closest向上查找,直到找到一個匹配的就停止查找,parents一直查找到根元素,並將匹配的元素加入集合
   結果不同:.closest返回的是包含零個或一個元素的jquery對象,parents返回的是包含零個或一個或多個元素的jquery對象

6-6 jQuery遍歷之next()方法

  jQuery是一個合集對象,如果想快速查找指定元素集合中每一個元素緊鄰的後面同輩元素的元素集合,此時可以用next()方法

6-7 jQuery遍歷之prev()方法

  jQuery是一個合集對象,如果想快速查找指定元素集合中每一個元素緊鄰的前面同輩元素的元素集合,此時可以用prev()方法

6-8 jQuery遍歷之siblings()

  jQuery是一個合集對象,如果想快速查找指定元素集合中每一個元素的同輩元素,此時可以用siblings()方法

6-9 jQuery遍歷之add()方法

處理一:傳遞選擇器

$('li').add('p')

處理二:傳遞dom元素

$('li').add(document.getElementsByTagName('p')[0])

還有一種方式,就是動態創建P標籤加入到合集,然後插入到指定的位置,但是這樣就改變元素的本身的排列了

$('li').add('< p >新的p元素< /p >').appendTo(目標位置)

6-10 jQuery遍歷之each()

  .each() 方法就是一個for循環的迭代器,它會迭代jQuery對象合集中的每一個DOM元素。每次回調函數執行時,會傳遞當前循環次數作爲參數(從0開始計數
使用方式:

<script type="text/javascript">
    $("button:first").click(function() {
        //遍歷所有的li
        //修改每個li內的字體顏色
        $("li").each(function(index, element) {
            $(this).css('color','red')
        })

    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
        //遍歷所有的li
        //修改偶數li內的字體顏色
        $("li").each(function(index, element) {
            if (index % 2) {
                $(this).css('color','blue')
            }
        })
    })
    </script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章