zoukankan      html  css  js  c++  java
  • juqery 学习之五 文档处理<包裹、替换、删除、复制>

    wrap(html)

    把所有匹配的元素用其他元素的结构化标记包裹起来。
    这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。

    这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包裹元素。

    当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包裹完成之后再行添加。

    返回值

    jQuery

    参数

    html (String) : HTML标记代码字符串,用于动态生成元素并包裹目标元素

    示例

    把所有的段落用一个新创建的div包裹起来

    HTML 代码:

    <p>Test Paragraph.</p>

    jQuery 代码:

    $("p").wrap("<div class='wrap'></div>");

    结果:

    <div class="wrap"><p>Test Paragraph.</p></div>
    -------------------------------------------------------------------------------------------------------------------------------------------------

    wrap(elem)

    把所有匹配的元素用其他元素的结构化标记包装起来。

    返回值

    jQuery

    参数

    elem (Element) : 用于包装目标元素的DOM元素

    示例

    用ID是"content"的div将每一个段落包裹起来

    HTML 代码:

    <p>Test Paragraph.</p><div id="content"></div>

    jQuery 代码:

    $("p").wrap(document.getElementById('content'));

    结果:

    <div id="content"><p>Test Paragraph.</p></div><div id="content"></div>
    -------------------------------------------------------------------------------------------------------------------------------------------------

    wrapAll(html)

    将所有匹配的元素用单个元素包裹起来
    这于 '.wrap()' 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。

    这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。

    这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。

    返回值

    jQuery

    参数

    html (String) : TML标记代码字符串,用于动态生成元素并包装目标元素

    示例

    用一个生成的div将所有段落包裹起来

    HTML 代码:

    <p>Hello</p><p>cruel</p><p>World</p>

    jQuery 代码:

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

    结果:

    <div><p>Hello</p><p>cruel</p><p>World</p></div>
    -------------------------------------------------------------------------------------------------------------------------------------------------

    wrapAll(elem)

    将所有匹配的元素用单个元素包裹起来
    这于 '.wrap()' 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。

    返回值

    jQuery

    参数

    elem (Element) : 用于包装目标元素的DOM元素

    示例

    用一个生成的div将所有段落包裹起来

    HTML 代码:

    <p>Hello</p><p>cruel</p><p>World</p>

    jQuery 代码:

    $("p").wrapAll(document.createElement("div"));

    结果:

    <div><p>Hello</p><p>cruel</p><p>World</p></div>
    -------------------------------------------------------------------------------------------------------------------------------------------------

    wrapInner(html)

    将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
    这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。

    返回值

    jQuery

    参数

    html (String) : HTML标记代码字符串,用于动态生成元素并包装目标元素

    示例

    把所有段落内的每个子内容加粗

    HTML 代码:

    <p>Hello</p><p>cruel</p><p>World</p>

    jQuery 代码:

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

    结果:

    <p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
    -------------------------------------------------------------------------------------------------------------------------------------------------

    wrapInner(elem)

    将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来

    返回值

    jQuery

    参数

    elem (Element) : 用于包装目标元素的DOM元素

    示例

    把所有段落内的每个子内容加粗

    HTML 代码:

    <p>Hello</p><p>cruel</p><p>World</p>

    jQuery 代码:

    $("p").wrapInner(document.createElement("b"));

    结果:

    <p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
    -------------------------------------------------------------------------------------------------------------------------------------------------

    replaceWith(content)

    将所有匹配的元素替换成指定的HTML或DOM元素。

    返回值

    jQuery

    参数

    content (String, Element, jQuery) : 用于将匹配元素替换掉的内容

    示例

    把所有的段落标记替换成加粗的标记。

    HTML 代码:

    <p>Hello</p><p>cruel</p><p>World</p>

    jQuery 代码:

    $("p").replaceWith("<b>Paragraph. </b>");

    结果:

    <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
    -------------------------------------------------------------------------------------------------------------------------------------------------

    replaceAll(selector)

    用匹配的元素替换掉所有 selector匹配到的元素。

    返回值

    jQuery

    参数

    selector (选择器) : 用于查找所要被替换的元素

    示例

    把所有的段落标记替换成加粗标记

    HTML 代码:

    <p>Hello</p><p>cruel</p><p>World</p>

    jQuery 代码:

    $("<b>Paragraph. </b>").replaceAll("p");

    结果:

    <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
    -------------------------------------------------------------------------------------------------------------------------------------------------

    empty()

    删除匹配的元素集合中所有的子节点。

    返回值

    jQuery

    示例

    把所有段落的子元素(包括文本节点)删除

    HTML 代码:

    <p>Hello, <span>Person</span> <a href="#">and person</a></p>

    jQuery 代码:

    $("p").empty();

    结果:

    <p></p>
    -------------------------------------------------------------------------------------------------------------------------------------------------

    remove([expr])

    从DOM中删除所有匹配的元素。
    这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。

    返回值

    jQuery

    参数

    expr (String) : (可选) 用于筛选元素的jQuery表达式

    示例

    从DOM中把所有段落删除

    HTML 代码:

    <p>Hello</p> how are <p>you?</p>

    jQuery 代码:

    $("p").remove();

    结果:

    how are

    从DOM中把带有hello类的段落删除

    HTML 代码:

    <p class="hello">Hello</p> how are <p>you?</p>

    jQuery 代码:

    $("p").remove(".hello");

    结果:

    how are <p>you?</p>
    -------------------------------------------------------------------------------------------------------------------------------------------------

    clone()

    克隆匹配的DOM元素并且选中这些克隆的副本。
    在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

    返回值

    jQuery

    示例

    克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中。

    HTML 代码:

    <b>Hello</b><p>, how are you?</p>

    jQuery 代码:

    $("b").clone().prependTo("p");

    结果:

    <b>Hello</b><p><b>Hello</b>, how are you?</p>
    -------------------------------------------------------------------------------------------------------------------------------------------------

    clone(true)

    元素以及其所有的事件处理并且选中这些克隆的副本
    在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

    返回值

    jQuery

    参数

    true (Boolean) : 设置为true以便复制元素的所有事件处理

    示例

    创建一个按钮,他可以复制自己,并且他的副本也有同样功能。

    HTML 代码:

    <button>Clone Me!</button>

    jQuery 代码:

    $("button").click(function(){
      $(this).clone(true).insertAfter(this);
    });
  • 相关阅读:
    《C语言课程设计与游戏开发实践课程》67章总结
    祖玛(Zuma)
    .net 实现微信公众平台的主动推送信息
    关于ASP与C#的感悟
    不同方面高手的地址。
    ASP中关于全局页面的作用 asax文件
    学习C#,开始了我的第一个进程。
    江苏立方网络科技有限公司招聘PHP工程师
    网上看到的ArcEngine控制地图显示范围的好方法(记下)
    3DS文件结构
  • 原文地址:https://www.cnblogs.com/EWall/p/1950799.html
Copyright © 2011-2022 走看看