jQuery基礎（二）DOM篇

DOM節點的建立

先介紹下須要用到的瀏覽器提供的一些原生的方法（這裏不處理低版本的IE兼容問題）
建立流程比較簡單，大致以下：

1. 建立節點(常見的：元素、屬性和文本)

2. 添加節點的一些屬性

3. 加入到文檔中
   流程中涉及的一點方法：

• 建立元素：document.createElement

• 設置屬性：setAttribute

• 添加文本：innerHTML

• 加入文檔：appendChild

建立元素節點：能夠有幾種方式。常見的就是直接把這個節點的結構給經過HTML標記字符串描述出來，經過$()函數處理，$("html結構")

$("<div id='test' class='aaron'>我是文本節點</div>") ​

DOM節點的插入

（一）DOM內部插入

append()與appendTo()在結尾處，在開頭處DOM內部插入prepend()與prependTo()

動態建立的元素是不夠的，它只是臨時存放在內存中，最終咱們須要放到頁面文檔並呈現出來。那麼問題來了，怎麼放到文檔上？
這裏就涉及到一個位置關係，常見的就是把這個新建立的元素，看成頁面某一個元素的子元素放到其內部。針對這樣的處理，jQuery就定義2個操做的方法
.append()和.appendTo()兩種方法功能相同，主要的不一樣是語法——內容和目標的位置不一樣

$(".content").append('<div class="append">經過append方法添加的元素</div>')
$('<div class="appendTo">經過appendTo方法添加的元素</div>').appendTo($(".content"))

在元素內部進行操做的方法，除了在被選元素的結尾（仍然在內部）經過append與appendTo插入指定內容外，相應的還能夠在被選元素以前插入，jQuery提供的方法是prepend與prependTo

（二）DOM外部插入

after()與before()，insertAfter()與insertBefore()

外部插入的處理，也就是兄弟之間的關係處理，這裏jQuery引入了2個方法，能夠用來在匹配I的元素先後插入內容。

• before與after都是用來對相對選中元素外部增長相鄰的兄弟節點

• 2個方法都是均可以接收HTML字符串，DOM 元素，元素數組，或者jQuery對象，用來插入到集合中每一個匹配元素的前面或者後面

• 2個方法都支持多個參數傳遞after(div1,div2,....) 能夠參考右邊案例代碼

  • .before()和.insertBefore()實現一樣的功能。主要的區別是語法——內容和目標的位置。 對於before()選擇表達式在函數前面，內容做爲參數，而.insertBefore()恰好相反，內容在方法前面，它將被放在參數裏元素的前面
    $(".test1").before('before,在匹配元素以前增長', '多參數')

    })

    $('測試insertBefore方法增長', '多參數').insertBefore($(".test1"))

DOM節點的刪除

（一）empty()的基本用法

empty 顧名思義，清空方法，可是與刪除又有點不同，由於它只移除了 指定元素中的全部子節點。

$("button").on('click', function() {
        //經過empty移除了當前div元素下的全部p元素
        //可是自己id=test的div元素沒有被刪除
        $("#test").empty()
    })

（二）remove()的有參用法和無參用法

remove會將元素自身移除，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery數據。
remove表達式參數：
remove比empty好用的地方就是能夠傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，能夠選擇性的刪除指定的節點

$("button:first").on('click', function() {
        //刪除整個 class=test1的div節點
        $(".test1").remove()
    })
    $("button:last").on('click', function() {
        //找到全部p元素中，包含了3的元素
        //這個也是一個過濾器的處理
        $("p").remove(":contains('3')")
    })

（三）保留數據的刪除操做detach()

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

DOM節點的複製與替換

（一）拷貝clone()

.clone()方法深度 複製全部匹配的元素集合，包括全部匹配元素、匹配元素的下級元素、文字節點。​
clone方法比較簡單就是克隆節點，可是須要注意，若是節點有事件或者數據之類的其餘處理，咱們須要經過clone(ture)傳遞一個布爾值ture用來指定，這樣不只僅只是克隆單純的節點結構，還要把附帶的事件與數據給一併克隆了

$('.left').append($('.aaron2').clone(true).css('color','blue'))

（二）替換replaceWith()和replaceAll()

.replaceAll()和.replaceWith()功能相似，主要是目標和源的位置區別
.replaceWith()與.replaceAll() 方法會刪除與節點相關聯的全部數據和事件處理程序
.replaceWith()方法，和大部分其餘jQuery方法同樣，返回jQuery對象，因此能夠和其餘方法連接使用
.replaceWith()方法返回的jQuery對象引用的是替換前的節點，而不是經過replaceWith/replaceAll方法替換後的節點。分離DOM元素

".right > div:first p:last").replaceWith('replaceWith替換第二段的內容')
$('replaceAll替換第六段的內容').replaceAll('.right > div:last p:last');

（三）包裹wrap()方法

.wrap( wrappingElement )：在集合中匹配的每一個元素周圍包裹一個HTML結構
.wrap( function ) ：一個回調函數，返回用於包裹匹配元素的 HTML 內容或 jQuery 對象

$('p').wrap('<div></div>')
$('p').wrap(function() {
    return '<div></div>';   //與第一種相似，只是寫法不同
})​

（四）包裹unwrap()方法

jQuery提供了一個unwarp()方法 ，做用與wrap方法是相反的。將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，若是存在）在原來的位置。

$('p').unwrap('<div></div>')

（五）wrapAll()方法

wrap是針對單個dom元素處理，若是要將集合中的元素用其餘元素包裹起來，也就是給他們增長一個父元素，針對這樣的處理，JQuery提供了一個wrapAll方法
.wrapAll( wrappingElement )：給集合中匹配的元素增長一個外面包裹HTML結構
.wrapAll( function ) ：一個回調函數，返回用於包裹匹配元素的 HTML 內容或 jQuery 對象

（六）wrapInner()方法

.wrapInner( wrappingElement )：給集合中匹配每個的元素的內部，增長包裹的HTML結構
.wrapInner( function ) ：容許咱們用一個callback函數作參數，每次遇到匹配元素時，該函數被執行，返回一個DOM元素，jQuery對象，或者HTML片斷，用來包住匹配元素的內容

<p>p元素</p>
<p>p元素</p>
$('p').wrapInner('<div></div>')
<p>
    <div>p元素</div>
</p>
------
<p>
    <div>p元素</div>
</p>

jQuery遍歷

children()方法：快速查找合集裏面的第一級子元素
find()方法：快速查找DOM樹中的這些元素的後代元素
find是遍歷當前元素集合中每一個元素的後代。只要符合，不論是兒子輩，孫子輩均可以。
與其餘的樹遍歷方法不一樣，選擇器表達式對於 .find() 是必需的參數。若是咱們須要實現對全部後代元素的取回，能夠傳遞通配選擇器 '*'。
find只在後代中遍歷，不包括本身。
選擇器 context 是由 .find() 方法實現的；所以，$('.item-ii').find('li') 等價於 $('li', '.item-ii')(找到類名爲item-ii的標籤下的li標籤)。
parent()方法：快速查找合集裏面的每個元素的父元素，由於是父元素，這個方法只會向上查找一級。
parents()方法：查找合集裏面的每個元素的全部祖輩元素。
注意事項：
1 .parents()和.parent()方法是類似的，但後者只是進行了一個單級的DOM樹查找
2 $( "html" ).parent()方法返回一個包含document的集合，而$( "html" ).parents()返回一個空集合。​
closest()方法：查找當前元素的父輩祖輩元素。
parents()和.closest()是有點類似的，都是往上遍歷祖輩元素，可是二者仍是有區別的，不然就沒有存在的意義了
起始位置不一樣：.closest開始於當前元素 .parents開始於父元素
遍歷的目標不一樣：.closest要找到指定的目標，.parents遍歷到文檔根元素，closest向上查找，直到找到一個匹配的就中止查找，parents一直查找到根元素，並將匹配的元素加入集合
結果不一樣：.closest返回的是包含零個或一個元素的jquery對象，parents返回的是包含零個或一個或多個元素的jquery對象

next()方法: 查找指定元素集合中每個元素緊鄰的後面同輩元素的元素集合。
prev()方法：查找指定元素集合中每個元素緊鄰的前面同輩元素的元素集合。
Sibling()方法：查找指定元素集合中每個元素的同輩元素。
add()方法：用來建立一個新的jQuery對象 ，元素添加到匹配的元素集合中。
each()方法：就是一個for循環的迭代器，它會迭代jQuery對象合集中的每個DOM元素。每次回調函數執行時，會傳遞當前循環次數做爲參數(從0開始計數。

$('li').each(function(index,element){
            $(this).css('color','red');
        })