本文實例講述了jQuery使用之處理頁面元素用法。分享給大家供大家參考。具體分析如下：
對于頁面的元素，在DOM編程中可以通過各種查詢、修改手段進行管理，非常麻煩。jQuery提供了一整套的方法來處理頁面的元素。包括元素的內容、復制、移動和替換等。這里將介紹一些常用的內容。
1.直接獲取、編輯內容。
在jQuery中，主要是通過html()和text()兩個方法來獲取和編輯頁面的內容。其中html()相當于獲取節點的innerHTML屬性，添加參數html(text)，則為設置innerHtml;而text()則用來獲取元素的純文本，text(content)為設置純文本。
這兩種方法有時配合著使用，text()通過用來過濾頁面中的標記，而html(text)用來設置節點中的innerHtml。例如：
var sString = $("p:first").text(); //獲取純文本
$("p:last").html(sString);
});
利用text()的方法獲取第一個P的文本，然后用html()方法賦給最后一個<p>。
text()和html()方法的巧用。
$(function() {
$("p").click(function() {
var sHtmlStr = $(this).html(); //獲取innerHTML
$(this).text(sHtmlStr); //將代碼做為純文本傳入
});
});
</script>
<p><b>文本</b>段 落<em>示</em>例</p>
鼠標一次點擊、二次點擊、三次點擊這些可以用在代碼獲取轉移上。
2.移動和復制元素
在普通的DOM中，如果希望在某個元素后面添加一個元素，通常是使用父元素的appendChild()或者inserBefore()方法，很多時候需要反復需找節點的位置。十分麻煩，jQuery中提供了append()方法，可以直接為某個元素添加新的子元素。
$(function() {
//直接添加HTML代碼
$("p:last").append("<b>直接添加</b>");
});
</script>
<p>11<em style="border-left-color: rgb(0, 153, 204); border-left-width: 1px; border-left-style: solid; padding: 0px 3px; margin: 3px auto 0px; width: 640px; background-color: rgb(242, 246, 251); clear: both; border-top-color: rgb(0, 153, 204); border-top-width: 1px; border-top-style: solid; border-right-color: rgb(0, 153, 204); border-right-width: 1px; border-right-style: solid;"> 復制代碼代碼如下:
這個情況會有一些不同，倘若添加的<p>是唯一的一個元素，那么$("a")就會被移動到該元素的所有子元素的后面，而如果目標<p>，是多個元素，那么$("a")將會以復制的形式，在每個P中都添加一個子元素，而自身保持不變。例：使用append()方法復制和移動元素。
$(function() {
$("p").append($("a:eq(0)")); //添加目標為多個<p>
$("p:eq(1)").append($("a:eq(1)")); //添加目標是唯一的<p>
})
</script>
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
<p>文字1</p>
<p>文字2</p>
以上代碼中設置了兩個超鏈接<a>用于append()調用。對于第1個超鏈接，添加目標$("p")，一共有兩個<p>元素，對于第2個超鏈接，添加目標是唯一的<p>元素。
可以看到第一個超鏈接是以復制的形式添加的，第二個超鏈接則是以移動的方式添加的。
另外從上述可以看出，append()后面的<a>標記被運用了目標<p>的樣式風格，同時也是保持了自身的樣式風格。這是因為append()是將<a>作為<p>的子標記進行添加的，將<a>放到了<p>的所有子標記（文本）節點后面。
除了append()方法，jQuery還提供了appendTo(target)方法，用來將目標元素添加到指定目標的子元素。它的使用方法和運行結果與append()完全類似。
$("img:eq(0)").appendTo($("p")); //添加目標為多個<p>
$("img:eq(1)").appendTo($("p:eq(0)")); //添加目標是唯一的<p>
});
<img src="08.jpg"> <img src="09.jpg">
<hr>
<p><img src="10.jpg"></p>
<p><img src="10.jpg"></p>
<p><img src="10.jpg"></p>
對于第一幅照片，同事將其添加到3個p標記中，對于第二幅圖片則把單獨添加到1個P元素中，從執行結果可以看出，第一幅圖片是以復制的形式添加到3個P元素中的，而第二幅圖片是以移動的方式添加的。
與append()和appendTo()方式對應，JQ還提供了prepend()和prependTo()方法這兩種方法是將元素添加到目標的所有子元素之前，也遵循：復制、移動的添加原則。
除了上述的4種方法之外Jq還提供了before()、insertBefore()、after()、和insertAfter()，用來將元素直接添加到某個節點之前或之后，而不是作為子元素插入。
其中before()與insertBefore()完全相同，after()和insertAfter()也是完全一樣的，這里以after()為例
$(function() {
$("p").after($("a:eq(0)")); //添加目標為多個<p>
$("p:eq(1)").after($("a:eq(1)")); //添加目標是唯一的<p>
});
</script>
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
<p>內容1</p>
<p>內容2</p>
以上代碼運行結果，可以看到after()方法同樣遵循單個目標移動，多個目標復制的原則，并且不再是作為子元素添加。而是緊貼在目標元素之后的兄弟元素。
3.刪除元素。
在DOM編程中，要刪除某個元素往往借助父元素的removeChild()方法，而jQuery提供了remove()方法，可以直擊刪除元素。
例如$("p").remove();是刪除整個頁面中的所有p元素標記。
remove()也接受參數。
$(function() {
$("p").remove(":contains('1')");
//$("p:contains('1')").remove();
});
</script>
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
<p>內容1</p>
<p>內容2</p>
以上代碼中remove()使用了過濾選擇器，文本內容包含1的P元素被刪除掉了。
雖然remove()可以接受參數，但是通常還是建議在選擇器階段就將要刪除的對象確定，然后用remove()一次性刪除。("p:contains('1')").remove();其效果是完全一樣的，并且效果和其它代碼的風格是統一的。
在DOM中，如果希望把某個元素的子元素全部刪除，往往for循環的配合hasChildNodes()來判斷，并用removeChildNode()逐一刪除，Jquery提供了empty()方法直接刪除所有的子元素。
$(function() {
$("p").empty(); //刪除p的所有子元素
});
</script>
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
<p>內容1</p>
<p>內容2</p>
4.克隆元素。
第二節提到元素的復制和移動，但這取決于目標數的個數，很多時候開發者希望即使目標對象只要一個，同樣能執行復制操作。
jQuery提供了clone()方法來完成這項任務。
$(function() {
$("img:eq(0)").clone().appendTo($("p"));
$("img:eq(1)").clone().appendTo($("p:eq(0)"));
});
</script>
<img src="08.jpg"> <img src="09.jpg">
<hr>
<p><img src="10.jpg"></p>
<p><img src="10.jpg"></p>
<p><img src="10.jpg"></p>
同樣完成了上上節中appendTo()方法達到的結果。
另外clone()函數還接受布爾值對象作為參數，的那個參數為true時，除了克隆本身，它所攜帶的時間方法將一塊被復制。
$(function() {
$("input[type=button]").click(function() {
//克隆自己，并且克隆點擊的行為
$(this).clone(true).insertAfter(this);
});
});
</script>
<input type="button" value="Clone Me">
以上代碼在單擊按鈕時克隆按鈕本身，同時克隆單擊事件，克隆出來的按鈕同樣具備有克隆自己的功能。
希望本文所述對大家的jQuery程序設計有所幫助。
