jQuery之第3章 jQuery中的DOM操做

DOM操做分爲3個方面：

　　DOM Core（核心）、HTML-DOM 和 CSS-DOM

一、查找節點：

　　查找元素節點：

　　　　var $li = $("ul li:eq(1)");

　　　　var li_txt = $li.text();

　　查找屬性節點：

　　　　var $p = $("p");

　　　　var p_title = $p.attr("title");

　　　　注意： attr() 獲取指定元素節點屬性的值。

二、建立節點：

　　建立元素節點：

　　　　var $li = $("<li></li>");

　　建立文本節點：

　　　　var $li = $("<li>香蕉</li>");

　　建立屬性節點：

　　　　var $li = $("<li title="香蕉">香蕉</li>");

三、插入節點：

　　（1）append() ：向每一個匹配的內部追加內容

　　（2）appendTo()

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

　　（4）prependTo()

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

　　（6）insertAfter()

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

　　（8）insertBefore()

　　注意：這些插入節點的方法，不只能夠插入新的節點，也能夠對存在的節點進行移動。

四、刪除節點：

　　（1）remove()

　　（2）detach()

　　（3）empty()

五、複製節點：

$("ul li").click(function(){
    $(this).clone().appendTo("ul") ;
})

　　注意：複製節點使用 clone() 方法，clone()：做用是複製新元素並不具備任何的行爲。參數true，clone(true)：做用是複製元素的同時，複製元素中所綁定的事件。

六、替換節點：

　　（1）replaceWith() ：將全部匹配的元素都替換成指定的HTML或者DOM元素。

　　（2）replaceAll() ：該方法和上述方法做用相同，只是顛倒了replaceWith()的操做。

七、包裹節點：

　　（0）wrap() ：將全部匹配的元素進行單獨包裹。

　　（1）wrapAll() ：將因此匹配的元素用一個元素來包裹。

　　　　注意：若是被包裹的元素中有其餘元素，其餘元素會被放到包裹元素以後。

　　（2）wrapInner() ：將每個匹配的元素的子內容（包含文本節點）用其餘結構化的標記包裹起來。

八、屬性操做：

　　attr() ：獲取或設置元素屬性。

　　removeAttr() ：刪除元素屬性。

　　注意：jQuery1.6中新增了prop(),removeProp()，分別用來獲取匹配的元素集中的第一個元素的屬性值和刪除設置的屬性值。

　九、樣式操做：

　　（1）attr() ：獲取或設置樣式。

　　（2）addClass() ：追加樣式。

　　（3）removeClass() :移除樣式，做用是從匹配的元素中刪除所有或指定的class。

　　（4）切換樣式：

　　　　toggle() ：交替執行代碼；主要是控制行爲上的重複切換。

　　　　toggleClass() ：主要是控制樣式上的重複切換，若是類名存在，則刪除它，若是類名不存在則添加它。

　　（5）判斷是否含有某個樣式：

　　　　hasClass() ：判斷元素中是否含有指定的class，若是有返回true,不然返回false。

　　　　注意：$("p").hasClass("abc"); 等價於 $("p").is("abc");

十、設置和獲取HTML、文本和值：

　　（1）html() ：設置和獲取指定的元素的中的HTML內容。（相似於JavaScirptz中的innerHTML屬性）

　　　　注意：html()方法能夠用於XHTML文檔，但不能用於XML文檔。

　　（2）text() ：設置和獲取指定元素中的文本內容。（相似於JavaScirptz中的innerText屬性）

　　　　注意：JavaScirptz中的innerText屬性並不能在Firefox瀏覽器下運行，而jQuery的text()方法支持因此的瀏覽器。

　　　　　　   text()方法對HTML文檔和XML文檔都有效。

　　（3）val() ：設置或獲取元素的值。（文本框、下拉列表、單選框）均可以返回元素的值；若是元素爲多選，則返回一個包含全部選擇的值的數組。（相似於JavaScirptz中的　　　　　　　　value 屬性）

　　　　注意：this 指向當前的文本框，「this.defaultValue」 就是當前文本框的默認值。

　　　　　　　focus() ：處理得到焦點時的事件。

　　　　　　　blur() ：處理失去焦點時的事件。

十一、遍歷節點：

　　（1）children() ：用於取得匹配元素的子元素集合。（只考慮子元素，不考慮後代元素）

　　（2）next() ：用於取得匹配元素後面緊鄰的同輩元素。

　　（3）prev() ：用於取得匹配元素前面緊鄰的同輩元素。

　　（4）siblings() ：用於取得匹配元素先後全部的同輩元素。

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

　　（6）pareat()、pareats()、closest() 的區別：

　　　　注意：jQuery中遍歷節點的方法還有不少，如：find()、filter()、nextAll()、prevAll()，可查閱jQuery文檔或手冊得到更多。

十二、CSS-DOM操做：

　　$("p").css("opacity" , "0.5");　　//設置半透明

　　$("p").css("height");　　//設置或獲取高度，和css設置有關，多是「auto」，也有多是字符串「10px」。

　　$("p").height(100);　　//設置p元素的高度爲100px

　　$("p").height("100em");　　//設置p元素的高度爲100em

　　注意：jQuery1.2以後的height()方法能夠用來獲取widows或document的高度。

　　區別：css() 得到的高度值和css的設置有關，多是「auto」，也有多是字符串「10px」。而height()得到的高度則是元素在頁面中的實際高度，與樣式的設置無關，而且不帶　　　　  單位。

　　此外，在CSS-DOM中，關於元素定位有幾個常用的方法，以下：

　　（1）offset() ：獲取元素在當前視窗中的相對偏移。返回的對象有兩個屬性，即 top 和 left，只對可見元素有效。

　　　　var offset = $("p").offset();

　　　　var left = offset.left;

　　　　var top = offset.top;

　　（2）position() ：獲取元素相對於最近的一個position樣式屬性設置爲relative或者absolute的祖父節點的相對偏移，與offset同樣，返回包括兩個屬性，即 top 和 left。

　　　　var position = $("p").position();

　　　　var left = position.left;

　　　　var top = position.top;

　　（3）scrollTop() ：得到元素的滾動條距離頂端的距離。

　　　　  scrollLeft() ：得到元素的滾動條距離左側的距離。

　　　　var $p = $("p");

　　　　var scrollTop = $p.scrollTop();

　　　　var scrollLeft = $p.scrollLeft();

 

　　　　$("textarea").scrollTop(300);

　　　　$("textarea").scrollLeft(300);