欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery使用之處理頁面元素用法實(shí)例

 更新時(shí)間：2015年01月19日 10:32:10   投稿：shichen2014  
這篇文章主要介紹了jQuery使用之處理頁面元素用法,實(shí)例分析了jQuery針對(duì)元素的內(nèi)容、復(fù)制、移動(dòng)和替換等操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery使用之處理頁面元素用法。分享給大家供大家參考。具體分析如下：

對(duì)于頁面的元素，在DOM編程中可以通過各種查詢、修改手段進(jìn)行管理，非常麻煩。jQuery提供了一整套的方法來處理頁面的元素。包括元素的內(nèi)容、復(fù)制、移動(dòng)和替換等。這里將介紹一些常用的內(nèi)容。

1.直接獲取、編輯內(nèi)容。

在jQuery中，主要是通過html()和text()兩個(gè)方法來獲取和編輯頁面的內(nèi)容。其中html()相當(dāng)于獲取節(jié)點(diǎn)的innerHTML屬性，添加參數(shù)html(text)，則為設(shè)置innerHtml;而text()則用來獲取元素的純文本，text(content)為設(shè)置純文本。

這兩種方法有時(shí)配合著使用，text()通過用來過濾頁面中的標(biāo)記，而html(text)用來設(shè)置節(jié)點(diǎn)中的innerHtml。例如：

復(fù)制代碼 代碼如下:
$(function() {
 var sString = $("p:first").text(); //獲取純文本
 $("p:last").html(sString);
});

利用text()的方法獲取第一個(gè)P的文本，然后用html()方法賦給最后一個(gè)<p>。

text()和html()方法的巧用。

復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function() {
 $("p").click(function() {
     var sHtmlStr = $(this).html(); //獲取innerHTML
     $(this).text(sHtmlStr); //將代碼做為純文本傳入
 });
});
</script>
<p><b>文本</b>段 落<em>示</em>例</p>

鼠標(biāo)一次點(diǎn)擊、二次點(diǎn)擊、三次點(diǎn)擊這些可以用在代碼獲取轉(zhuǎn)移上。

2.移動(dòng)和復(fù)制元素

在普通的DOM中，如果希望在某個(gè)元素后面添加一個(gè)元素，通常是使用父元素的appendChild()或者inserBefore()方法，很多時(shí)候需要反復(fù)需找節(jié)點(diǎn)的位置。十分麻煩，jQuery中提供了append()方法，可以直接為某個(gè)元素添加新的子元素。

復(fù)制代碼 代碼如下:
<script type="text/javascript">
    $(function() {
 //直接添加HTML代碼
 $("p:last").append("<b>直接添加</b>");
    });
</script>
<p>11<em title="huge, gigantic">22</em>...</p>
<p>33<em title="running">44</em>...</p>

除了直接添加html代碼，append()方法還可以用來添加固定的節(jié)點(diǎn)，例如

復(fù)制代碼 代碼如下:
$("p").append($("a"));

這個(gè)情況會(huì)有一些不同，倘若添加的<p>是唯一的一個(gè)元素，那么$("a")就會(huì)被移動(dòng)到該元素的所有子元素的后面，而如果目標(biāo)<p>，是多個(gè)元素，那么$("a")將會(huì)以復(fù)制的形式，在每個(gè)P中都添加一個(gè)子元素，而自身保持不變。例：使用append()方法復(fù)制和移動(dòng)元素。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
    $(function() {
 $("p").append($("a:eq(0)")); //添加目標(biāo)為多個(gè)<p>
 $("p:eq(1)").append($("a:eq(1)")); //添加目標(biāo)是唯一的<p>

    })
</script>
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
<p>文字1</p>
<p>文字2</p>

以上代碼中設(shè)置了兩個(gè)超鏈接<a>用于append()調(diào)用。對(duì)于第1個(gè)超鏈接，添加目標(biāo)$("p")，一共有兩個(gè)<p>元素，對(duì)于第2個(gè)超鏈接，添加目標(biāo)是唯一的<p>元素。

可以看到第一個(gè)超鏈接是以復(fù)制的形式添加的，第二個(gè)超鏈接則是以移動(dòng)的方式添加的。

另外從上述可以看出，append()后面的<a>標(biāo)記被運(yùn)用了目標(biāo)<p>的樣式風(fēng)格，同時(shí)也是保持了自身的樣式風(fēng)格。這是因?yàn)閍ppend()是將<a>作為<p>的子標(biāo)記進(jìn)行添加的，將<a>放到了<p>的所有子標(biāo)記（文本）節(jié)點(diǎn)后面。

除了append()方法，jQuery還提供了appendTo(target)方法，用來將目標(biāo)元素添加到指定目標(biāo)的子元素。它的使用方法和運(yùn)行結(jié)果與append()完全類似。

復(fù)制代碼 代碼如下:
$(function() {
 $("img:eq(0)").appendTo($("p")); //添加目標(biāo)為多個(gè)<p>
 $("img:eq(1)").appendTo($("p:eq(0)")); //添加目標(biāo)是唯一的<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>

對(duì)于第一幅照片，同事將其添加到3個(gè)p標(biāo)記中，對(duì)于第二幅圖片則把單獨(dú)添加到1個(gè)P元素中，從執(zhí)行結(jié)果可以看出，第一幅圖片是以復(fù)制的形式添加到3個(gè)P元素中的，而第二幅圖片是以移動(dòng)的方式添加的。

與append()和appendTo()方式對(duì)應(yīng)，JQ還提供了prepend()和prependTo()方法這兩種方法是將元素添加到目標(biāo)的所有子元素之前，也遵循：復(fù)制、移動(dòng)的添加原則。

除了上述的4種方法之外Jq還提供了before()、insertBefore()、after()、和insertAfter()，用來將元素直接添加到某個(gè)節(jié)點(diǎn)之前或之后，而不是作為子元素插入。

其中before()與insertBefore()完全相同，after()和insertAfter()也是完全一樣的，這里以after()為例

復(fù)制代碼 代碼如下:
<script type="text/javascript">
    $(function() {
 $("p").after($("a:eq(0)")); //添加目標(biāo)為多個(gè)<p>
 $("p:eq(1)").after($("a:eq(1)")); //添加目標(biāo)是唯一的<p>

    });
</script>
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
<p>內(nèi)容1</p>
<p>內(nèi)容2</p>

以上代碼運(yùn)行結(jié)果，可以看到after()方法同樣遵循單個(gè)目標(biāo)移動(dòng)，多個(gè)目標(biāo)復(fù)制的原則，并且不再是作為子元素添加。而是緊貼在目標(biāo)元素之后的兄弟元素。

3.刪除元素。

在DOM編程中，要?jiǎng)h除某個(gè)元素往往借助父元素的removeChild()方法，而jQuery提供了remove()方法，可以直擊刪除元素。

例如$("p").remove();是刪除整個(gè)頁面中的所有p元素標(biāo)記。

remove()也接受參數(shù)。

復(fù)制代碼 代碼如下:
<script type="text/javascript">
    $(function() {
 $("p").remove(":contains('1')");
 //$("p:contains('1')").remove();
    });
</script>
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
<p>內(nèi)容1</p>
<p>內(nèi)容2</p>

以上代碼中remove()使用了過濾選擇器，文本內(nèi)容包含1的P元素被刪除掉了。

雖然remove()可以接受參數(shù)，但是通常還是建議在選擇器階段就將要?jiǎng)h除的對(duì)象確定，然后用remove()一次性刪除。("p:contains('1')").remove();其效果是完全一樣的，并且效果和其它代碼的風(fēng)格是統(tǒng)一的。

在DOM中，如果希望把某個(gè)元素的子元素全部刪除，往往for循環(huán)的配合hasChildNodes()來判斷，并用removeChildNode()逐一刪除，Jquery提供了empty()方法直接刪除所有的子元素。

復(fù)制代碼 代碼如下:
<script type="text/javascript">
    $(function() {
    $("p").empty();    //刪除p的所有子元素
    });
</script>
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
<p>內(nèi)容1</p>
<p>內(nèi)容2</p>

4.克隆元素。

第二節(jié)提到元素的復(fù)制和移動(dòng)，但這取決于目標(biāo)數(shù)的個(gè)數(shù)，很多時(shí)候開發(fā)者希望即使目標(biāo)對(duì)象只要一個(gè)，同樣能執(zhí)行復(fù)制操作。

jQuery提供了clone()方法來完成這項(xiàng)任務(wù)。

復(fù)制代碼 代碼如下:
<script type="text/javascript">
    $(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>

同樣完成了上上節(jié)中appendTo()方法達(dá)到的結(jié)果。

另外clone()函數(shù)還接受布爾值對(duì)象作為參數(shù)，的那個(gè)參數(shù)為true時(shí)，除了克隆本身，它所攜帶的時(shí)間方法將一塊被復(fù)制。

復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function() {
 $("input[type=button]").click(function() {
     //克隆自己，并且克隆點(diǎn)擊的行為
     $(this).clone(true).insertAfter(this);
 });
});
</script>
<input type="button" value="Clone Me">

以上代碼在單擊按鈕時(shí)克隆按鈕本身，同時(shí)克隆單擊事件，克隆出來的按鈕同樣具備有克隆自己的功能。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論