基礎DOM和CSS操作
DOM在JavaScript，它是一種文檔對象模型。方便開發者對HTML結構元素內容進行展示和修改。在JavaScript中，DOM不但內容龐大繁雜，而且我們開發的過程中需要考慮更多的兼容性、擴展性。在jQuery中，已經將最常用的DOM操作方法進行了有效封裝，並且不需要考慮瀏覽器的兼容性。
一.DOM幾個基本概念：
1.D表示的是頁面文檔Document、O表示對象，即一組含有獨立特性的數據集合、M表示模型，即頁面上的元素節點和文本節點。
2.DOM有三種形式，標准DOM、HTML DOM、CSS DOM，大部分都進行了一系列的封裝，在jQuery中並不需要深刻理解它。
3.樹形結構用來表示DOM，就非常的貼切，大部分操作都是元素節點操作，還有少部分是文本節點操作。
二．設置元素及內容
通過前面所學習的各種選擇器、過濾器來得到我們想要操作的元素。這個時候，我們就可以對這些元素進行DOM的操作。那么，最常用的操作就是對元素內容的獲取和修改。
html()和text()方法
<body> <div id="box"> <strong>www.xixi.com</strong> </div> </body>
(1)html()獲取元素中HTML內容
$(function () { alert($('#box').html()); //獲取html內容輸出：<strong>www.xixi.com</strong> });
(2)text()獲取元素中文本內容
$(function () { alert($('#box').text()); //text獲取的是文本，有html會自動被清理輸出：www.xixi.com });
(3)html(value)設置元素中HTML內容
$(function () { $('#box').html('<em>www.xi.cc</em>'); //替換HTML內容，會HTML會自動解析輸出：www.xi.cc });
(4)text(value)設置原生中文本內容
$(function () { $('#box').text('<em>www.li.cc</em>'); //替換文本內容，有HTML會自動轉義輸出：<em>www.li.cc</em> });
(5)val()獲取表單中的文本內容
如果元素是表單的話，jQuery 提供了val()方法進行獲取或設置內部的文本數據
<body> <input type="text" value="西西"/> </body>
獲取表單內容西西
$(function () { alert($('input').val()); //輸出：西西 });
設置表單內容為詩詩
$(function () { $('input').val('詩詩'); //輸出：詩詩 });
如果想設置多個選項的選定狀態，比如下拉列表、單選復選框等等，可以通過數組傳遞操作。
<body> <input type="radio" value="男" /> 男 <input type="radio" value="女" /> 女 <input type="checkbox" value="編程" /> 編程 </body>
把下拉菜單選框默認是選定狀態
$(function () { $('input').val(['男','女','編程']); //value值是這些的將被選定 });
三．元素屬性操作
除了對元素內容進行設置和獲取，通過jQuery也可以對元素本身的屬性進行操作，包括獲取屬性的屬性值、設置屬性的屬性值，並且可以刪除掉屬性。
attr()和removeAttr()
<body> <div id="box"> <strong>www.xixi.com</strong> </div> </body>
(1)attr(key)獲取某個元素key屬性的屬性值
$(function () { alert($('#box').attr('id')); //返回：box });
(2)attr(key,value)設置某個元素key屬性的屬性值
<body> <div id="box"> <strong>www.xixi.com</strong> </div> <div id="box"> <strong>www.xixi.com</strong> </div> </body>
給div里加上title="我是西西"
$(function () { $('div').attr('title','我是西西'); });
(3)attr({key1:value2,key2:value2...})設置某個元素多個key屬性的屬性值
給div里加上title="西西" class="red" data="123"
$(function () { $('div').attr({ 'title' : '西西', 'class' : 'red', //class不建議用attr來設置，后面有功能更強大和更豐富的方法代替 'data' : '123' }); });
(4)attr(key,function(index,value){})設置某個元素key通過fn來設置
<body> <div title="aaa"> <strong>www.xixi.com</strong> </div> <div id="box"> <strong>www.xixi.com</strong> </div> </body>
value得到原來的值，原來沒有值的話value沒用
$(function () { $('div').attr('title', function (index, value) { return '原來的title是：' + value + '，現在的title是：我是' + (index+1) + '號域名'; }); });
最后改變結果：
<div title="原來的title是：aaa，現在的title是：我是1號域名"> <strong>www.xixi.com</strong> </div> <div id="box" title="原來的title是：undefined，現在的title是：我是2號域名"> <strong>www.xixi.com</strong> </div>
注意：jQuery中很多方法都可以使用 function(){}來返回出字符串，比如 html()、text()、val()和is()、filter()方法。而如果又涉及到多個元素集合的話，還可以傳遞index參數來獲取索引值，並且可以使用第二個參數value(並不是所有方法都適合，有興趣可以自己逐個嘗試)。
<body> <div title="aaa"> <strong>www.xixi.com</strong> </div> </body>
追加通過匿名函數賦值，並傳遞index
$(function () { $('div').html($('div').html() + '<em>www.xixi.com</em>'); //結果：www.xixi.com www.xixi.com });
還可以實現追加內容
$(function () { $('div').html(function (index, value) { return value + '<em>www.xixi.com</em>'; //www.xixi.com www.xixi.com }); });
注意：我們也可以使用attr()來創建id屬性，但我們強烈不建議這么做。這樣會導致整個頁面結構的混亂。當然也可以創建class屬性，但后面會有一個語義更好的方法來代替attr()方法，所以也不建議使用。
刪除指定的屬性，這個方法就不可以使用匿名函數，傳遞index和value均無效。
<body> <div title="aaa"> <strong>www.xixi.com</strong> </div> </body>
刪除指定的屬性title
$(function () { $('div').removeAttr('title'); //刪除指定的屬性title });
編譯后的結果是(源代碼不會被刪除)：
<div>
<strong>www.xixi.com</strong>
</div>
四．元素樣式操作
元素樣式操作包括了直接設置CSS樣式、增加CSS類別、類別切換、刪除類別這幾種操作方法。而在整個jQuery使用頻率上來看，CSS樣式的操作也是極高的，所以需要重點掌握。
1.CSS操作方法
<body> <div title="aaa"> <strong>www.xixi.com</strong> </div> </body>
(1)css(name)獲取某個元素行內的CSS樣式
獲取www.xixi.com樣式的顏色
$(function () { alert($('div').css('color')); //rgb(0,0,0) });
(2)css([name1,name2,name3])獲取某個元素行內多個CSS樣式
在CSS獲取上，我們也可以獲取多個CSS樣式，而獲取到的是一個對象數組，如果用傳統方式進行解析需要使用for in遍歷。
獲取某個元素行內多個CSS樣式
方式一：
$(function () { var box = $('div').css(['color', 'width', 'height']); //得到多個CSS樣式的數組對象 for (var i in box) { alert(i + ':' + box[i]); //逐個遍歷出來分別輸出：color:rgb(0,0,0) width:1166px height:18px } });
方式二：jQuery提供了一個遍歷工具專門來處理這種對象數組，$.each()方法，這個方法可以輕松的遍歷對象數組。
遍歷原生態對象數組
$(function () { var box = $('div').css(['color', 'width', 'height']); $.each(box, function (attr, value) { alert(attr + ':' + value); //遍歷JavaScript原生態的對象數組輸出：color:rgb(0,0,0) width:1166px height:18px }); });
使用$.each()可以遍歷原生的JavaScript對象數組，如果是jQuery對象的數組怎么使用.each()方法呢？
遍歷jQuery對象數組
$(function () { var box = $('div').css(['color', 'width', 'height']); $('div').each(function (index, element) { alert(index + ':' + element); //結果：0:[object HTMLDivElement] }); });
(3)css(name,value)設置某個元素行內的CSS樣式
把www.xixi.com設置為紅色
$(function () { $('div').css('color','red'); });
(4)css(name,function (index, value))設置某個元素行內的CSS樣式
如果想設置某個元素的CSS樣式的值，需要計算可以傳遞一個匿名函數。
將全局的操作包裝成局部操作給width原長度為1066減去300
$(function () { $('div').css('width', function (index, value) { //局部操作，很舒服 return parseInt(value) - 300 + 'px'; }) });
最后結果
<div style="width: 866px;">
<strong>www.xixi.com</strong>
</div>
(5)css({name1 : value1, name2 : value2})設置某個元素行內多個CSS樣式
傳遞多個CSS樣式的鍵值對方法
$(function () { //$('div').css('color','red').css('background-color','#ccc'); $('div').css({ 'color' : 'blue', 'background-color' : '#eee', 'width' : '200px', 'height' : '30px' }); });
index.html原頁面：
<body> <div> <strong>www.xixi.com</strong> </div> </body>
style.css代碼:
.red { color:red; } .bg { background-color:#ccc; } .size { font-size:20px; }
(6)addClass(class)給某個元素添加一個CSS類
直接引用style.css給div添加一個class="red"
$(function () { $('div').addClass('red'); //添加一個CSS類 });
添加結果:
<div class="red">
<strong>www.xixi.com</strong>
</div>
(7)addClass(class1 class2 class3...) 給某個元素添加多個 CSS 類
直接引用style.css給div添加多個class="red bg size"
$(function () { $('div').addClass('red bg size'); //添加多個CSS類 });
添加結果
<div class="red bg size">
<strong>www.xixi.com</strong>
</div>
(8)removeClass(class) 刪除某個元素的一個CSS 類
直接引用style.css給div刪除class里的bg
$(function () { $('div').addClass('red bg size'); //添加多個CSS類 $('div').removeClass('bg'); //刪除一個CSS類 });
刪除結果：
<div class="red size">
<strong>www.xixi.com</strong>
</div>
(9)removeClass(class1 class2 class3...)刪除某個元素的多個CSS類
直接引用style.css給div刪除class里的red和size
$(function () { $('div').addClass('red bg size'); //添加多個CSS類 $('div').removeClass('red size'); });
刪除結果：
<div class="bg">
<strong>www.xixi.com</strong>
</div>
(10)toggleClass(class)來回切換默認樣式和指定樣式
點擊www.xixi.com實現默認樣式和指定樣式的切換
$(function () { $('div').click(function () { $(this).toggleClass('red'); //兩個樣式之間的切換，默認樣式和指定樣式的切換 }); });
(11)toggleClass(class1 class2 class3...)多個樣式來回切換默認樣式和指定樣式
點擊www.xixi.com實現默認樣式和指定樣式的切換
$(function () { $('div').click(function () { $(this).toggleClass('red size'); //兩個樣式之間的切換，默認樣式和指定樣式的切換 }); });
(12)toggleClass(class, switch) 來回切換樣式的時候設置切換頻率
$(function () { var count = 0; $('div').click(function () { alert(''); $(this).toggleClass('red size', count++ % 2 == 0); //頻率問題 }); });
(13)toggleClass(function () {}) 通過匿名函數設置切換的規則
默認的CSS類切換只能是無樣式和指定樣式之間的切換，如果想實現樣式1和樣式2之間的切換還必須自己寫一些邏輯。
style.css代碼:
.red { color:red; } .green { color:green; } .bg { background-color:#ccc; } .size { font-size:20px; }
實現指定樣式綠紅切換
$(function () { $('div').click(function () { //這里只是click的局部，而又是toggle的全局 $(this).toggleClass('red'); //一開始切換到樣式2 if ($(this).hasClass('red')) { //判斷樣式2存在后 $(this).removeClass('green'); //刪除樣式1 } else { $(this).toggleClass('green'); //添加樣式1，這里也可以addClass } }); });
另一種寫法：
$(function () { $('div').click(function () { $(this).toggleClass(function () { //局部 if ($(this).hasClass('red')) { $(this).removeClass('red'); return 'green'; } else { $(this).removeClass('green'); return 'red'; } }); }); });
(14)toggleClass(function () {}, switch) 在匿名函數設置時也可以設置頻率
$(function () { var count = 0; $('div').click(function () { $(this).toggleClass(function () { //局部 if ($(this).hasClass('red')) { $(this).removeClass('red'); return 'green'; } else { $(this).removeClass('green'); return 'red'; } }, count++ % 2 == 0); //出現問題 }); });
(15)toggleClass(function (i, c, s) {}, switch) 在匿名函數設置時傳遞三個參數
對於.toggleClass()傳入匿名函數的方法，還可以傳遞 index 索引、class類兩個參數以及頻率布爾值，可以得到當前的索引、class 類名和頻率布爾值。
$(function () { var count = 0; $(document).click(function () { $('div').toggleClass(function (index, className, switchBool) { alert(index + ':' + className + ':' + switchBool); //得到當前值 //局部 if ($(this).hasClass('red')) { $(this).removeClass('red'); return 'green'; } else { $(this).removeClass('green'); return 'red'; } }, count++ % 2 == 0); }); });
五．CSS方法
jQuery不但提供了CSS的核心操作方法，比如.css()、.addClass()等。還封裝了一些特殊功能的CSS操作方法
1.長度width()方法:
<body> <div title="aaa"> <strong>www.xixi.com</strong> </div> </body>
(1)width()獲取某個元素的長度
$(function () { alert($('div').width()); //1166 });
(2)width(value) 設置某個元素的長度
$(function () { $('div').width(500); //設置為500px });
(3)width(function (index, width) {})通過匿名函數設置某個元素的長度
$(function () { $('div').width(function (index, width) { return width - 500 + 'px'; //雖然可以不加，會智能添加，但還是建議加上單位，更加清晰。 }); });
2.高度height()方法:
<body> <div title="aaa"> <strong>www.xixi.com</strong> </div> </body>
(1)height()獲取某個元素的長度
$(function () { alert($('div').height()); // 默認高度是18 });
(2)height(value)設置某個元素的長度
$(function () { $('div').height(500); //設置元素高度，直接傳數值，默認加 px });
(3)height(function (index, width) {})通過匿名函數設置某個元素的長度
$(function () { $('div').height(function (index, value) { //index 是索引，value 是原本值 return value - 1; //無須調整類型，直接計算 }); });
內外邊距和邊框尺寸方法
innerWidth()獲取元素寬度，包含內邊距padding
innerHeight()獲取元素高度，包含內邊距padding
outerWidth()獲取元素寬度，包含邊框border和內邊距padding
outerHeight()獲取元素高度，包含邊框border和內邊距padding
outerWidth(ture)同上，且包含外邊距
outerHeight(true)同上，且包含外邊距
<body> <div title="aaa" style="width:200px;padding:100px"> <strong>www.xixi.com</strong> </div> </body>
當style="width:200px;padding:100px"
$(function () { //padding alert($('div').width()); //200 alert($('div').innerWidth()); //400 alert($('div').outerWidth()); //400 alert($('div').outerWidth(true)); //400 });
~~~~
<body> <div title="aaa" style="width:200px;padding:100px; border:100 solid #ccc;"> <strong>www.xixi.com</strong> </div> </body>
當style="width:200px;padding:100px; border:100 solid #ccc;
$(function () { //padding, border alert($('div').width()); //200 200 alert($('div').innerWidth()); //400 400 alert($('div').outerWidth()); //400 600 alert($('div').outerWidth(true)); //400 600 });
~~~~
<body> <div title="aaa" style="width:200px;padding:100px; border:100 solid #ccc;margin:100px;"> <strong>www.xixi.com</strong> </div> </body>
當style="width:200px;padding:100px; border:100 solid #ccc;margin:100px;"
$(function () { //padding, border, margin alert($('div').width()); //200 200 200 alert($('div').innerWidth()); //400 400 400 alert($('div').outerWidth()); //400 600 600 alert($('div').outerWidth(true)); //400 600 800 });
元素偏移方法
(1)offset()獲取某個元素相對於視口的偏移位置
<body> <div title="aaa" style="position:absolute;top:10px;"> <strong>www.xixi.com</strong> </div> </body>
查看div相對於視口的偏移位置是多少
$(function () { alert($('div').offset().top); //10 });
查看<strong></strong>離<div></div>的偏移位置
$(function () { alert($('strong').offset().top); //11 });
(2)position()獲取某個元素相對於父元素的偏移位置
<body> <div title="aaa" style="position:relative;"> <strong style="position:absolute;top:1px;">www.xixi.com</strong> </div> </body>
查看<strong></strong>相對的<div></div>的像素
$(function () { alert($('strong').position().top); //1 });
(3)scrollTop()獲取垂直滾動條的值
<body> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> </body>
查看目前滾動條的位置和上面點的位置
$(function () { alert($(window).scrollTop()); //318像素 });
(4)scrollTop(value)設置垂直滾動條的值
設置滾動條刷新的值是300像素的位置
$(function () { $(window).scrollTop(300); });
(5)scrollLeft() 獲取水平滾動條的值
(6)scrollLeft(value) 設置水平滾動條的值
DOM節點操作
DOM中有一個非常重要的功能，就是節點模型，也就是DOM中的“M”。頁面中的元素結構就是通過這種節點模型來互相對應着的，只需要通過這些節點關系，可以創建、插入、替換、克隆、刪除等等一些列的元素操作。
一．創建節點
為了使頁面更加智能化，有時我們想動態的在html結構頁面添加一個元素標簽，那么在插入之前首先要做的動作就是：創建節點。
$(function () { var box = $('<div id="box">節點</div>'); //創建節點(在內存中)賦值給變量box $('body').append(box); //將節點插入到<body>元素內部 });
結果：
<body>
<div id="box">節點</div>
</body>
二．插入節點
在創建節點的過程中，其實我們已經演示怎么通過.append()方法來插入一個節點。但除了這個方法之余呢，jQuery提供了其他幾個方法來插入節點。
<body> <div>節點</div> </body>
1.內部插入節點方法
(1)append(content)向指定元素內部后面插入節點content
$(function () { $('div').append('<strong>DOM</strong>'); //向div內部插入strong節點DOM });
(2)append(function(index, html) {})使用匿名函數向指定元素內部后面插入節點
$(function () { $('div').append(function (index, html) { //使用匿名函數插入節點，html return '<strong>DOM</strong>' + index + html; //第一個參數index=0第二個參數html傳值DOM }); });
(3)appendTo(content)將指定元素移入到指定元素content內部后面
<body> <strong>DOM</strong> <div>節點</div> </body>
將<strong>DOM</strong>放到<div>節點</div>同級節點的后面去
$(function () { $('strong').appendTo('div'); //移入操作，不需要創建節點 });
(3)prepend(content)向指定元素 content 內部的前面插入節點
<body> <div>節點</div> </body>
創建<strong>DOM</strong>插入到<div>節點</div>節點前面
$(function () { $('div').prepend('<strong>DOM</strong>'); /將span移入div內部的前面 });
(4)prepend(function(index, html) {}) 使用匿名函數向指定元素內部的前面插入節點
$(function () { $('div').prepend(function (index, html) { return '<strong>DOM</strong>' + index + html; }); });
結果：DOM0節點節點
(5)prependTo(content)將指定元素移入到指定元素 content內部前面
<body> <div>節點</div> <strong>DOM</strong> </body>
將<strong>DOM</strong>放到<div>節點</div>同級節點的前面去
$(function () { $('strong').prependTo('div'); });
2.外部插入節點方法
<body> <div>節點</div> </body>
(1)after(content)向指定元素的外部后面插入節點content
$(function () { $('div').after('<strong>DOM</strong>'); ////向div的同級節點后面插入span });
結果：
節點
DOM
(2)after(function (index, html) {}) 使用匿名函數向指定元素的外部后面插入節點
$(function () { $('div').after(function (index, html) { return '<strong>DOM</strong>' + index + html; }); });
結果：
節點
DOM0節點
(3)before(content)向指定元素的外部前面插入節點content
$(function () { $('div').before('<strong>DOM</strong>'); //向div的同級節點前面插入span });
結果：
DOM
節點
(4)before(function (index, html) {})使用匿名函數向指定元素的外部前面插入節點
$(function () { $('div').before(function (index, html) { return '<strong>DOM</strong>' + index + html; }); });
結果：
DOM0節點
節點
(5)insertAfter(content)將指定節點移到指定元素content外部的后面
<body> <strong>DOM</strong> <div>節點</div> </body>
將<strong>DOM</strong>移入到<div>節點</div>的后面
$(function () { $('strong').insertAfter('div'); //將span元素移到div元素外部的后面 });
(6)insertBefore(content)將指定節點移到指定元素content
<body> <div>節點</div> <strong>DOM</strong> </body>
將<strong>DOM</strong>移入到<div>節點</div>的前面
$(function () { $('strong').insertBefore('div'); });
三．包裹節點
jQuery提供了一系列方法用於包裹節
<body> <div>節點</div> </body>
1.包裹節點
(1)wrap(html)向指定元素包裹一層html代碼
第一種寫法：
$(function () { $('div').wrap('<strong class="xi"></strong>'); //在div外層包裹一層strong });
結果：
<strong class="xi"><div>節點</div></strong>
第二種寫法：自動轉化成雙標簽把div節點包含在里面
$(function () { $('div').wrap('<strong />'); });
結果：
<strong>
<div>節點</div>
</strong>
第三寫法：添加內容
$(function () { $('div').wrap('<strong>西西</strong>'); //包裹的元素可以帶內容 });
結果：
<strong>西西
<div>節點</div>
</strong>
第四種：多個節點包裹
$(function () { $('div').wrap('<strong><em></em></strong>'); });
結果：
<strong>
<em>
<div>節點</div>
</em>
</strong>
(2)wrap(element)向指定元素包裹一層DOM對象節點
<body> <strong></strong> <div>節點</div> </body>
方式1：把<strong></strong>獲取到包裹到div里面
$(function () { $('div').wrap($('strong').get(0)); });
結果：
<strong></strong>
<strong>
<div>節點</div>
</strong>
方式2：
$(function () { $('div').wrap(document.createElement('strong')); //臨時的原生DOM });
(3)wrap(function (index) {})使用匿名函數向指定元素包裹一層自定義內容
$(function () { $('div').wrap(function (index) { return '<strong>' + index + '</strong>' }); });
結果：
<strong>0
<div>節點</div>
</strong>
(4)unwrap() 移除一層指定元素包裹的內容
$(function () { $('div').wrap('<strong><em></em></strong>'); //創建倆層 $('div').unwrap(); //移除一層 });
結果：
<strong>
<div>節點</div>
</strong>
(5)wrapAll(html)用html將所有元素包裹到一起
<body> <div>節點</div> <div>節點</div> </body>
把倆個<div>節點</div>包含在<strong></strong>里
$(function () { $('div').wrapAll('<strong></strong>'); //所有div外面只包一層strong });
結果：
<strong>
<div>節點</div>
<div>節點</div>
</strong>
(6)wrapAll(element)用DOM對象將所有元素包裹在一起
$(function () { $('div').wrapAll(document.createElement('strong')); });
結果：
<strong>
<div>節點</div>
<div>節點</div>
</strong>
(7)wrapInner(html)向指定元素的子內容包裹一層html
$(function () { $('div').wrapInner('<strong></strong>'); ////包裹子元素內容 });
結果：
<body>
<div>
<strong>節點</strong>
</div>
<div>
<strong>節點</strong>
</div>
</body>
(8)wrapInner(element) 向指定元素的子內容包裹一層DOM對象節點
$(function () { $('div').wrapInner(document.createElement('strong')); });
結果：
<body>
<div>
<strong>節點</strong>
</div>
<div>
<strong>節點</strong>
</div>
</body>
(9)wrapInner(function (index) {})用匿名函數向指定元素的子內容包裹一層
$(function () { $('div').wrapInner(function (index) { return '<strong>' + index + '</strong>' }); });
結果：
<body>
<div>
<strong>0節點</strong>
</div>
<div>
<strong>1節點</strong>
</div>
</body>
注意：.wrap()和.wrapAll()的區別在前者把每個元素當成一個獨立體，分別包含一層外層；后者將所有元素作為一個整體作為一個獨立體，只包含一層外層。這兩種都是在外層包含，而.wrapInner()在內層包含。
四．節點操作
除了創建、插入和包裹節點，jQuery還提供了一些常規的節點操作方法：復制、替換和刪除節點。
<body> <div>節點</div> </body>
復制節點：
$(function () { $('div').click(function () { alert('xixi.com'); //事件處理點擊div這個節點彈出xixi.com }); $('div').clone(true).appendTo('body'); //復制一個節點添加到HTML中 });
復制節點后第二個復制出來的節點也可以做到事件處理點擊div這個節點彈出xixi.com
注意：clone(true)參數可以為空，表示只復制元素和內容，不復制事件行為。而加上true參數的話，這個元素附帶的事件處理行為也復制出來。
刪除節點：
$(function () { $('div').click(function () { alert('xixi.com'); }); $('div').remove(); //直接刪除div元素 });
帶參數刪除：
<body> <div class="box">節點</div> <div>節點</div> </body>
只刪除class="box"的div節點
$(function () { $('div').click(function () { alert('xixi.com'); }); $('div').remove('.box'); });
注意：.remove()不帶參數時，刪除前面對象選擇器指定的元素。而.remove()本事也可以帶選擇符參數的，比如：$('div').remove('#box');只刪除 id=box 的 div。
保留事件的刪除節點
$(function () { $('div').click(function () { alert('xixi.com'); }); $('div').detach().appendTo('body'); //保留事件行為的刪除 });
注意：.remove()和.detach()都是刪除節點，而刪除后本身方法可以返回當前被刪除的節點對象，但區別在於前者在恢復時不保留事件行為，后者則保留。
清空節點保留div空標簽
$(function () { $('div').click(function () { alert('xixi.com'); }); $('div').empty(); });
替換節點把<div>節點</div>節點換成<span>DOM</span>
方式一：
$(function () { $('div').click(function () { alert('xixi.com'); }); $('div').replaceWith('<span>DOM</span>'); //將div替換成span元素 });
方式二：
$(function () { $('div').click(function () { alert('xixi.com'); }); $('<span>DOM</span>').replaceAll('div'); //將div替換成span元素 });
注意：節點被替換后，所包含的事件行為就全部消失了。