jQuery即学即用
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

第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 执行后显示的内容

上一章目录下一章