jquery的DOM操做

一:DOM的定義:

       是Document Object Model的縮寫,是文檔對象模型，是一種與瀏覽器、平臺、語言無關的接口。使咱們可以輕鬆的獲取和操做網頁中的數據、腳本和表現層對象

二DOM的做用:DOM解決Netscape的JavaScript和Microsoft JScript之間的衝突,給與了web設計師和開發者一套標準的方法。        

三:DOM操做的分類:         

          (1)DOM Core(核心):DOM Core並不專屬於javascript，任何一種支持DOM的程序設計語言均可以使用它，它的用途並不是僅限於處理網頁，也能夠用來處理任何一種使用標記語言編寫出來的文檔。   

         (2)HTML DOM:.HTML_DOM提供一些更簡潔的記號來描述各類HTML元素屬性,能夠獲取某些對像以及屬性，只能用來處理web文檔.

         (3)CSS DOM:CSS_DOM主要用來獲取設置style對象的各類屬性，經過改變style對象的屬性來實現網頁的不一樣效果。

 四:jQuery中的DOM操做:   

       （1)查找節點:  

            查找元素節點:

　　　　　　1. 獲取指定的標籤節點 $(「上級標籤 標籤:eq(「標籤索引」)   

                 2. 獲取標籤節點$(「標籤」)                   

　　　　　   3. 獲取標籤節點文本text()

　　　  查找屬性節點:

　　　　　　利用attr()方法來獲取它的各類屬性的值。Attr()裏的參數是一個時：是要查詢的屬性的名稱，也能夠是兩個。    

　　　　     1. 獲取標籤節點       

　　　　　  2. 獲取標籤節點屬性:方法attr()     

　　　 (2)建立節點:  

　　　　 建立元素節點       

　　　　　　 注意:(1)動態建立的新元素節點不會被自動添加到文檔中，而是須要使用其餘方法將其插入文檔中(須要append()方法)。   

　　　　　　          (2)當建立單個元素時，要注意閉合標籤和使用標準的XHTML格式。  

　　　　  建立文本節點      

　　　　　　  建立文本節點就是在建立元素節點時直接把文本內容寫出來，而後用append()添加到文檔中。

　　　　   建立屬性節點       

　　　　　　 建立屬性節點與建立文本節點相似，也是在建立元素節點時一塊兒建立。

　     (3)插入節點:     

　　　　 方法以下: 

　　　　　　  方法                　　　　　　 描述                                                

　　　　　　 append()         　　　　　　 在每一個匹配的元素的內部追加內容       

　　　　　　 appendTo()       　　　　　　 將全部匹配的元素追加到指定的元素中  

　　　　　　 prepend()   　　　　　　　　 向每一個匹配的元素內部前置內容

　　　　　   prependTo()       　　　　　　將全部匹配的元素前置到指定的元素中   

　　　　　　after()           　　　　　　　 在每一個匹配的元素以後插入內容

　　　　　   insertAfter()     　　　　　　 將全部匹配的元素以後插入到指定元素的後面  

　　　　　　before()         　　　　　　    在每一個匹配的元素以前插入內容  

　　　　　 insertBefore()   　　　　　　   將全部匹配的元素插入到指定的元素的前面     

    (4)刪除節點:   

       方法1:

        remove(), 使用remove()方法刪除後,該節點所包含的全部後代節點將同時被刪除,該方法的返回值是一個指向已被刪除的節點的引用,所以能夠在之後再使用這些元素。  

     方法2:

      empty()方法並非刪除節點,而是清空節點,它能清空元素中的全部後代節點。  

     (5)複製節點:

              複製節點也是經常使用的DOM操做之一,在clone()方法中傳播了一個參數true,它的含義是複製元素的同時複製元素中所綁定的事件。

      (6)替換節點:   

      方法1:

         replaceWith()方法的做用是將全部匹配的元素的替換成指定的HTML 或者 DOM元素.  

      方法2:

        replaceAll()方法與replaceWith()方法的做用相同,只是顛倒了replaceWith()操做。  

         注意:若是在替換以前,已經爲元素綁定事件,替換後原先綁定的事件將會與被替換的元素一塊兒消失,須要在新元素上從新綁定事件。

      (7)包裹節點:

         包裹節點將某一個節點用其餘標記包裹起來.  

       方法1:

        wrap()是將全部的元素進行單獨的包裹(將匹配的元素逐個進行包裹).   

      方法2:

        wrapAll()方法是將全部匹配的元素用一個元素來包裹.  

      方法3

       :wrapInner()方法是將每個匹配的元素的子內容【包括文本節點】用其餘結構化的標記包裹起來(是包裹匹配元素的文本).           

         註釋:wrapAll()與wrapInner()二者的區別在於：前者是將全部匹配元素用一個元素來包裹，後者是將每一匹配的子內容用其餘元素標記起來.

     (8)屬性操做:

      方法1:

       attr()獲取或設置屬性，若是要獲取某一元素的某一屬性，只須要給attr()方法傳遞一個屬性參數便可.     

      方法2:

       removeAtte(),在某些狀況下,須要刪除文檔中的某個元素的特色屬性,使用removeAfter()方法。

     (9)樣式操做:   

    獲取樣式和設置樣式:  

              attr()方法,用於獲取標籤元素的屬性，也能夠用於設置標籤元素的屬性值,是將原來的屬性替換爲新的屬性，而不是追加。

     追加樣式:   

             在jQuary中,使用addClass()方法追加樣式,若是給一個元素添加了多個Class值，那麼就至關於合併了他們的樣式.若是有不一樣的class設定了同同樣式屬性,則後者覆蓋前者。  

    移除樣式:

             removeClass()方法與addClass()方法相反，能夠從匹配的元素中刪除所有或者指定的class.    

    切換樣式:   

            jQuery提供了一個toggleClass()方法控制樣式上的重複切換。若是類名存在則刪除它，若是類名不存在則添加它。   

  判斷是否含有某個樣式:  

            hasClass()能夠用來判斷元素是否含有某個class,若是有,則返回true,不然返回false.

     (10)設置和獲取HTML,文本和值   獲取HTML:   

           html()方法獲取,此方法相似於Javascript中的innerHTML屬性，能夠用來讀取或者設置某個元素中的HTML內容.   文本值:  

           text()方法設置文本的值,此方法相似於Javascript中的innerText屬性，能夠用來讀取或者設置某個元素中的文本元素。   

          獲取值:    val()方法獲取值,此方法相似於JavaScript中的value屬性，能夠用來設置和獲取元素的值，不管元素是文本框、下拉列表仍是單選框，它均可以返回元素的值，若是元素爲多選，則返回一個包含全部選擇的值的數組.

           註釋:Html()、text()、val()區別   

                          (1)HTML:取得第一個匹配元素的html內容。這個函數不能用於XML文檔。但能夠用於XHTML文檔,返回的是一個String 。

                          (2)設置每個匹配元素的html內容。這個函數不能用於XML文檔。但能夠用於XHTML文檔。返回一個jquery對象.  

                          (3)TEXT：取得全部匹配元素的內容。結果是由全部匹配元素包含的文本內容組合起來的文本。返回的是一個String.

                          (4)VAL:得到第一個匹配元素的當前值.   

     (11)遍歷循環   

           方法children(),用於取得匹配元素的子元素集合。註釋:children()方法只考慮子元素而不考慮任何後代元素。         

           方法next(),用於取得元素後面緊鄰的同輩元素(只有一個).   

           方法prev(),用於取得元素前面緊鄰的同輩元素(只有一個).   

           方法siblings(),用於取得匹配元素先後全部的同輩元素.

           方法closest(),用來取得最近的匹配元素。首先檢查當前元素是否匹配，若是匹配則直接返回元素自己。若是不匹配則向上查找父元素，逐級向上直到找到匹配選擇器的元素若是什麼都沒找到則返回一個空的jQuery對象.

           其它遍歷循環的方法:  

            find(),搜索全部與指定表達式匹配的元素.   

            filter(),篩選出與指定表達式匹配的元素集合. 

            not(),刪除與指定表達式匹配的元素.  

            add(),把與表達式匹配的元素添加到jQuery對象中.這個函數能夠用於鏈接分別與兩個表達式匹配的元素結果集.  

            Slice(),選取一個與表達式匹配的子集. 

            nextAll(),選擇一個元素後面全部的兄弟節點.

            prevAll(),選擇一個元素前面全部的兄弟節點.

            parent(),取一個包含着全部匹配元素span的惟一父元素的元素集合 .  

            parents(),取一個包含着全部匹配元素span的祖先元素的元素集合(不包含根元素).  

           注意:這些遍歷DOM方法有一個共同點，均可以使用jQuery表達式做爲它們的參數來篩選元素。

 五.CSS DOM操做     

           (1).CSS()方法,用css()方法獲取元素的樣式屬性.   

                    注意:不管color屬性是外部CSS導入，仍是直接拼接在HTML元素裏(內聯)，css()方法均可以獲取到屬性style裏的其餘屬性的值,也能夠直接利用css（）方法設置某個元素的單個樣式.   

                   做用:1.獲取元素的樣式屬性       

                          2.屬性style裏的其餘屬性的值   

                          3.設置某個元素的單個樣式     

                          4.能夠同時設置多個樣式屬性    

          (2)設置透明度的屬性:opacity      

          (3).獲取某個元素的高度的方法height(),還有獲取某個元素的height屬性。   

                   做用:height()：

                         取得匹配元素當前計算的高度值(px)    

          (4)css()方法與height()方法的區別:  

                         css():獲取的高度值與樣式的設置有關，可能會獲得"auto",也可能獲得"10px"之類的字符串.  

                         height():獲取的高度值則是元素在頁面中的實際高度，與樣式的設置無關，而且不帶單位.          

                         與height()方法對應的還有一個width()方法，它也能夠取得匹配元素的寬度值（px）用法和height()同樣.     

          (5)offset():獲取元素在當前視窗的相對偏移，其中返回的對象包含兩個屬性（top和left），它只對可見元素有效.    

                  做用:offset()：

                       獲取元素在當前視窗的相對偏移.    

          (6)position():獲取元素相對於最近的一個position樣式屬性設置爲relative或者absolute的祖父節點的相對偏移,與offset()同樣,它返回的對象也包括兩個屬性(top和left).                  做用:position():

                      獲取元素相對於最近的一個position樣式屬性設置爲relative或者absolute的祖父節點的相對偏移.   

         (7)scrollTop()方法和scrollLeft()方法:這兩個方法的做用分別是獲取元素的滾動條距頂端的距離和距左側的距離    

                 做用:這兩個方法的做用分別是獲取元素的滾動條距頂端的距離和距左側的距離.