文财神范蠡塑像图片

書名： jQuery即學即用
作者名：王志剛編著
本章字數： 82字
更新時間： 2019-01-09 16:34:29

第6章元素控制

jQuery中提供了多種簡單追加或刪除HTML元素的方法，利用這些方法可以根據需要改變網頁的內容等，這種不用重新刷新網頁即可實現更新的方法是在Ajax技術中不可缺少的功能。

6.1 在元素內部追加內容

在元素的內部追加新的字符串可以使用append方法。

6.1.1 語法

            append(content)

content可以是字符串或HTML代碼，但是必須用雙引號或單引號括起；另外在div標簽中追加p標簽，可以用如下語句：

            $(div).append('<p>追加p標簽</p>');

6.1.2 應用實例

部分HTML代碼

            <div id="content">
            <p>div標簽內部追加新的內容。</p>
            </div>

JavaScript代碼

          $(function(){
                $("#content").append("追加的新文字串。");
            });

JavaScript執行前后顯示的內容分別如圖6-1和圖6-2所示。

圖6-1 執行前顯示的內容

圖6-2 執行后顯示的內容

6.2 在元素中的不同位置追加內容

在元素中追加內容使用appendTo方法。

6.2.1 語法

            appendTo(content)

content為文檔中的已有元素，如果是“$(A).append(B)”形式，則在A元素的最后追加B；如果是“$(A).appendTo(B)”形式，則將A追加到B的最后。

6.2.2 應用實例

部分HTML代碼

            <div id="content">
            <span>在span標簽的下方追加p標簽</span>
            </div>
            <p>追加到div標簽的下方。</p>

JavaScript代碼

            $(function(){
              $("p").appendTo("#content");
            });

JavaScript執行前后顯示的內容分別如圖6-3和圖6-4所示。

圖6-3 執行前顯示的內容

圖6-4 執行后顯示的內容

6.3 在元素的開始位置追加內容

prepend方法可以在元素的開始位置追加內容。

6.3.1 語法

            prepend(content)

content可以是字符串或HTML代碼，但是必須用雙引號或單引號括起；另外在div標簽的頭部追加p標簽，可用如下語句：

            $(div). prepend ('<p>追加p標簽</p>');

6.3.2 應用實例

部分HTML代碼

            <p>在此標簽的頭部追加內容。</p>
            <p>同樣也在此標簽的頭部追加內容。</p>

JavaScript代碼

            $(function(){
                $("p").prepend("<span>追加的新字符串。</span><br/>");
            });

JavaScript執行前后顯示的內容分別如圖6-5和圖6-6所示。

圖6-5 執行前顯示的內容

圖6-6 執行后顯示的內容

6.4 在不同元素的開始位置追加內容

prependTo方法可以在元素的開始位置追加內容。

6.4.1 語法

            prependTo(content)

content為文檔中的已有元素。對該方法來說，如果是“$(A). prepend (B)”形式，則在A元素的開始位置追加B；如果是“$(A).appendTo(B)”形式，則將A追加到B的開始位置。

6.4.2 應用實例

部分HTML代碼

            <div id="content">
            <span>在span標簽的上方追加p標簽</span>
            </div>
            <p>追加到div標簽的起始位置。</p>

JavaScript代碼

            $(function(){
                $("p").prependTo("#content");
            });

JavaScript執行前后顯示的內容分別如圖6-7和圖6-8所示。

圖6-7 執行前顯示的內容

圖6-8 執行后顯示的內容

6.5 在元素后追加兄弟元素

將指定內容作為兄弟元素追加到元素使用after方法。

6.5.1 語法

            after(content)

content為字符串或HTML代碼字符串。append方法將字符串作為元素的子元素來追加到元素尾，而after方法是將字符串作為兄弟元素追加到元素尾。如果指定多個元素，則每一個元素尾都會追加相同的字符串。下面是在p標簽的最后追加字符串的例子：

            $('p').after('<span>追加的新字符串</span>');

6.5.2 應用實例

部分HTML代碼

            <p>在此標簽的后面追加內容。</p>
            <p>同樣也在此標簽的后面追加內容。</p>

JavaScript代碼

            $(function(){
              $("p").after("<span>追加的新字符串。</span>");
            });

JavaScript執行前后顯示的內容分別如圖6-9和圖6-10所示。

圖6-9 執行前顯示的內容

圖6-10 執行后顯示的內容

6.6 在元素前追加兄弟元素

在元素的前面追加兄弟元素時使用before方法。

6.6.1 語法

            before(content)

content為單純的字符串或html代碼字符串。prepend方法將字符串作為元素的子元素來追加到開始位置，而before方法是將字符串作為兄弟元素追加到元素的前面。如果指定多個元素，則每一個元素的前面都會追加相同的字符串。下面是在p標簽的前面追加字符串的例子：

            $('p'). before ('<span>追加的新字符串</span>');

6.6.2 應用實例

部分HTML代碼

            <p>在此標簽的前面追加內容。</p>
            <p>同樣也在此標簽的前面追加內容。</p>

JavaScript代碼

            $(function(){
                $("p").before("<span>追加的新字符串。</span>");
            });

JavaScript執行前后顯示的內容分別如圖6-11和圖6-12所示。

圖6-11 執行前顯示的內容

圖6-12 執行后顯示的內容

6.7 用指定結構的元素包含元素

用指定結構的元素包含元素使用wrap方法。

6.7.1 語法

            wrap(html)

在HTML中指定HTML元素，但指定的元素中不可含有兄弟元素；否則不能正確地運行，并且不可含有一般文本字符串。下面的代碼用div標簽包含p標簽：

            $('p').warp('<div></div>');

6.7.2 應用實例

部分HTML代碼

            <span>將span標簽包含進div標簽中。</span><br/>
            <span>同樣將此span標簽包含進div標簽中。</span>

JavaScript代碼

            $(function(){
                $("span").wrap("<div><p></p></div>");
            });

JavaScript執行前后顯示的內容分別如圖6-13和圖6-14所示。

圖6-13 執行前顯示的內容

圖6-14 執行后顯示的內容

6.8 用指定結構的元素包含多個元素的集合

wrapALL方法用指定結構的元素包含多個元素。

6.8.1 語法

            wrapAll(html)

同wrap方法，在HTML中指定html元素。將所有對象標簽都移動到第1對象標簽的位置下，并用指定的結構包括。例如，將多個span標簽用div標簽包含的代碼如下：

            $('span').wrapALl('<div></div>');

6.8.2 應用實例

部分HTML代碼

            …
            div {
              width:280px;
              border: 1px solid #000;
              margin: 0;
              padding: 0;
            }
            …
            </head>
            …
            <p>在此標簽的包含到div標簽中。</p>
            <p>同樣也將此標簽的包含進同一個div標簽。</p>

JavaScript代碼

            $(function(){
              $("p").wrapAll("<div></div>");
            });

JavaScript執行前后顯示的內容分別如圖6-15和圖6-16所示。

圖6-15 執行前顯示的內容

圖6-16 執行后顯示的內容

6.9 用指定標簽包含子元素

使用wrapInner方法可以用指定的標簽包含子元素。

6.9.1 語法

            wrapInner (html)

與wrap方法一樣，在HTML中指定html元素。例如，用b標簽包含p標簽中文字的代碼如下：

            $('p').wrapInner('<b></b>');

6.9.2 應用實例

部分HTML代碼

            <p>將p標簽的文字用b標簽包含起來。</p>
            <p>也將此標簽的文字用b標簽包含起來。</p>

JavaScript代碼

            $(function(){
                $("p").wrapInner("<b></b>");
            });

JavaScript執行前后顯示的內容分別如圖6-17和圖6-18所示。

圖6-17 執行前顯示的內容

圖6-18 執行后顯示的內容

6.10 替換元素

使用replacWith與replaceAll方法替換指定的元素。

6.10.1 語法

            replacWith(content)
            replaceAll(selector)

使用replacWith方法，“$(A).replaceWith(B)”用B元素替換A元素；使用replaceAll方法，“$(A).replaceAll(B)”將B元素替換成A元素。

6.10.1 應用實例

部分HTML代碼

            <p id="replaceWith">準備替換，使用replaceWith方法。</p>
            <p id="replaceAll">準備替換，使用replaceAll方法。</p>

JavaScript代碼

            $(function(){
          $("#replaceWith").replaceWith("<div>已經替換，使用replaceWith方
    法。</div>");
              $("<div>已經替換，使用replaceAll方法。</div>").
    replaceAll("#replaceAll");
            });

JavaScript執行前后顯示的內容分別如圖6-19和圖6-20所示。

圖6-19 執行前顯示的內容

圖6-20 執行后顯示的內容

6.11 刪除元素

jQuery提供了兩種刪除元素的方法，使用empty方法刪除元素的子元素；使用remove方法刪除元素。

6.11.1 語法

            empty()
            remove([expr])

empty方法刪除指定元素的子元素，remove方法刪除元素；另外，還可以在指定的元素中設定細化條件執行刪除處理。下面分別是刪除div標簽的子元素及刪除div標簽的代碼。

6.11.2 應用實例

部分HTML代碼

            <p id="emptyTest">此標簽的使用empty方法進行刪除。</p>
            <p >以下的標簽被刪除。</p>
            <p class="emptyTest">準備使用remove方法刪除。</p>
            <p class="emptyTest">準備使用remove方法刪除。</p>

JavaScript代碼

            $(function(){
                $("#emptyTest").empty();
                $("p").remove(".emptyTest");
            });

JavaScript執行前后顯示的內容分別如圖6-21和圖6-22所示。

圖6-21 執行前顯示的內容

圖6-22 執行后顯示的內容

6.12 復制元素

使用clone方法可以復制元素。

6.12.1 語法

            clone()
            clone(true)

在jQuery中分別管理DOM與事件屬性，如果需要復制設定的事件，則必須在參數中指定true；另外clone方法只完成復制，插入到指定位置必須使用appendTo或者prependTo等方法。

6.12.2 應用實例

部分HTML代碼

            <p id="cloneTest">復制對象標簽。</p>
            <div class="cloneTest">
            <p>p標簽將復制到本標簽的前面。</p>
            </div>

JavaScript代碼

            $(function(){
              $("#cloneTest").clone().prependTo(".cloneTest");
            });

JavaScript執行前后顯示的內容分別如圖6-23和圖6-24所示。

圖6-23 執行前顯示的內容

圖6-24 執行后顯示的內容

官术网_书友最值得收藏!

jQuery即學即用

第6章 元素控制

6.1 在元素內部追加內容

6.1.1 語法

6.1.2 應用實例

6.2 在元素中的不同位置追加內容

6.2.1 語法

6.2.2 應用實例

6.3 在元素的開始位置追加內容

6.3.1 語法

6.3.2 應用實例

6.4 在不同元素的開始位置追加內容

6.4.1 語法

6.4.2 應用實例

6.5 在元素后追加兄弟元素

6.5.1 語法

6.5.2 應用實例

6.6 在元素前追加兄弟元素

6.6.1 語法

6.6.2 應用實例

6.7 用指定結構的元素包含元素

6.7.1 語法

6.7.2 應用實例

6.8 用指定結構的元素包含多個元素的集合

6.8.1 語法

6.8.2 應用實例

6.9 用指定標簽包含子元素

6.9.1 語法

6.9.2 應用實例

6.10 替換元素

6.10.1 語法

6.10.1 應用實例

6.11 刪除元素

6.11.1 語法

6.11.2 應用實例

6.12 復制元素

6.12.1 語法

6.12.2 應用實例

第6章元素控制