（jQuery中的DOM操作

　　看看DOM操作都有哪些

逐一來看

先寫一份HTML代碼，後面的代碼將操作這份HTML代碼

<p title="選擇你最喜歡的水果">你最喜歡的水果？</p> <ul> <li title="蘋果">蘋果</li> <li title="橘子">橘子</li> <li title="菠蘿">菠蘿</li> </ul>

▓▓▓▓▓▓ 查找節點

1、查找元素節點

查找節點可以用各種各樣的選擇器來查找

$("ul li");

2、查找屬性節點

可以用attr()方法，參數是一個的時候是查找屬性，兩個的時候是設置屬性

console.log($("li:eq(2)").attr("title"));//菠蘿

▓▓▓▓▓▓ 查找節點

1、創建元素節點

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

2、創建文本節點

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

3、創建屬性節點

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

▓▓▓▓▓▓ 插入節點

1、向每個匹配的元素追加內容

$("li:eq(1)").append("<p>香蕉</p>");

2、將匹配的元素追加到指定元素中

$("<p>香蕉</p>").appendTo("li:eq(1)");

這兩種方法都是進行同一個操作，prepend()和prependTo()與上述方法類似，不同之處就是在元素內部前插入內容

3、在每個匹配的元素之後插入內容

$("li:eq(1)").after("<p>香蕉</p>");

4、將匹配的元素插入到指定的元素後面

$("<p>香蕉</p>").insertAfter("li:eq(1)");

這兩種方法都是進行同一個操作，before()和insertBefore()與上述方法類似，不同之處就是在元素前插入內容

▓▓▓▓▓▓ 刪除節點

1、remove()方法

當某個節點用了remove()方法之後，該節點所包含的所有後代節點都將同時刪除。這個方法的返回值是一個指向已被刪除的節點的引用，因此可以在後面再使用這些元素

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

remove（）方法也可以選擇性的刪除元素

$("ul li").remove("li[title="菠蘿"]");

2、detach()方法

detach()方法和remove()方法用法一樣，不同點是detach()方法，所有綁定的事件、附加的數據等都會保留下來

$("ul li").click(function(){ alert($(this).html());}); var $li = $("ul li:eq(1)").detach();$li.appendTo("ul");//點擊事件會保存下來

3、empty()方法

empty()方法並不是刪除節點而是清空節點

$("ul li:eq(2)").empty();

▓▓▓▓▓▓ 複製節點

1、clone()方法

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

傳入參數true時，會複製元素中所綁定的事件

▓▓▓▓▓▓ 替換節點

1、replaceWith()和replaceAll()

replaceWith()方法的作用是將所有匹配的元素都替換成指定的元素

$("p").replaceWith("<p>香蕉</p>");

replaceAll()方法只是將replaceWith()方法翻過來了

$("<p>香蕉</p>").replaceAll("p");

▓▓▓▓▓▓ 包裹節點

1、wrap()方法

將某個節點用其他的標記包裹起來，如果是一組節點，那麼就會包裹這一組節點裡的每個節點

$("li").wrap("<b></b>");

2、wrapAll()方法

與wrap()方法不同的是，即使是一組節點，也只會用一個節點包裹

$("li").wrapAll("<b></b>");

3、wrapInner()方法

將匹配的元素的子內容（包括文本節點）用其他結構化的標記包裹

▓▓▓▓▓▓ 屬性操作

1、獲取屬性和設置屬性

attr()方法傳遞一個參數的時候是獲取屬性，傳遞兩個參數的時候是設置屬性

$("p").attr("title","you title");

2、刪除屬性

removeAttr()方法

$("p").removeAttr("title");

▓▓▓▓▓▓ 樣式操作

1、獲取樣式和設置樣式

可以用attr()方法

2、追加樣式

addClass()是在原有的樣式上添加樣式

$("p").addClass("another");

3、移除樣式

removeClass()方法可以刪除class屬性，如果有多個需要刪除要用空格將他們分隔，如果不傳入參數則表示移除全部class

$("p").removeClass("another");

4、切換樣式

toggle()方法是交替執行代碼

$("p").toggle(function(){ // 函數1 },function(){ // 函數2 });

toggleClass()方法控制樣式上的重複切換，如果類名存在就刪除它，如果不在就添加它　　

$("p").toggleClass("another");

5、判斷是否含有某個樣式

hasClass()可以用來判斷元素中時候含有某個class，如果有，返回true，否則，返回false

$("p").hasClass("another");

▓▓▓▓▓▓ 設置和獲取HTML、文本和值

1、html()方法

此方法類似於innerHTML，可以用來讀取或者設置某個元素中的HTML內容

$("p").html("<b>香蕉</b>");

2、text()方法

類似於innerText,可以用來讀取或者設置某個元素中的文本內容

$("p").text("hello");

3、val()方法

類似於value屬性，可以用來設置和獲取元素的值。如果元素為多選，則返回一個包含所有選擇的值的數組

▓▓▓▓▓▓ 遍歷節點

1、children()方法

該方法用於取得匹配元素的子元素集合，值考慮子元素不考慮其他後代元素

$("ul").children();

2、next()方法

匹配元素後面緊鄰的同輩元素

$("ul").next();

3、prev()方法

匹配元素前面緊鄰的同輩元素

4、siblings()方法

匹配元素前後所有的同輩元素

5、closest()方法

該方法用於取得最近的匹配元素，首先檢查當前元素是否匹配，如果匹配直接返回該元素，否則向上查找父級元素，逐級向上查找，如果什麼都沒有找到則返回一個空的jQuery對象。

6、parent()與parents()方法

parent()方法獲得集合中每個匹配元素的父級元素

parents()方法獲得集合中每個元素的祖先元素

▓▓▓▓▓▓ CSS-DOM操作

1、css()方法

可以獲取元素的屬性也可以設置元素的屬性

$("p").css({fontSize:"20px",backgroundColor:"green"});

2、height()方法、innerHeight()方法和outerHeight()方法

height()方法是獲取width屬性，innerHeight()方法獲取的是width + padding,outerHeight()方法獲取的是width + padding + border

3、offset()方法

獲取元素在當前可視區的相對偏移

4、position()方法

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

5、scrollTop和scrollLeft()方法

獲取元素的滾動條距離頂端的距離和左側的距離

推薦閱讀：