zoukankan      html  css  js  c++  java
  • jquery的文档处理(部分)

    部分简单测试,工具sublime text ,firebug

    append 向每个匹配的元素内部追加内容。

    eg:

    <p id='p1'>文本</p>
    <script type="text/javascript">
      var text="<h2>这是一个h2</h2>"
        $(function(){
            $("#p1").append($(text));
        });
    </script>

    执行完上述代码后由firebug内存中标签信息变为

    <p id="p1">
    文本
    <h2>这是一个h2</h2>
    </p>

    jquery中append函数是将文本插入指定标签内。

    appendTo:把所有匹配的元素追加到另一个指定的元素元素集合中

    <p id='p2'>文本</p>
        <h2>a</h2>
         <h2>b</h2>
    <script type="text/javascript">
        $(function(){
            $("#p2").appendTo($("h2"));
        });
    </script>

    在页面中显示效果代码如下

    <h2>
    a
    <p id="p2">文本</p>
    </h2>
    <h2>
    b
    <p id="p2">文本</p>
    </h2>

     和append相反的是,appendTo是把原来的标签剪切并复制进指定标签中

    prepend:向每个匹配的元素内部前置内容。

    <p id='p3'>文本</p>
    <h3>a</h3>
    <h3>b</h3>
    <script type="text/javascript">
        $(function(){
            $("#p3").prepend($("h3"));
        });
    </script>

     页面效果

    <p id="p3">
    <h3>a</h3>
    <h3>b</h3>
    文本
    </p>

     得到的结果和append一样

    prependTo:把所有匹配的元素前置到另一个、指定的元素元素集合中。

    <p id='p4'>文本</p>
    <h1>a</h1>
    <h1>b</h1>
    <script type="text/javascript">
        $(function(){
            $("#p4").prependTo($("h1"));
        });
    </script>

     页面效果

    <h1>
    <p id="p4">文本</p>
    a
    </h1>
    <h1>
    <p id="p4">文本</p>
    b
    </h1>

    效果和appendTo一样

    after:在每个匹配的元素之后插入内容。

    <p id='p5'>文本</p>
    <script type="text/javascript">
        $(function(){
            $("#p5").after($("<h2>这是一个after测试</h2>"));
        });
    </script>

    测试结果

    <p id="p5">文本</p>
    <h2>这是一个after测试</h2>

    after是追加到标签体之后,对原来的标签无内容交集

    before:在每个匹配的元素之前插入内容

    <p id='p6'>文本</p>
    <script type="text/javascript">
        $(function(){
            $("#p6").before($("<h2>这是一个before测试</h2>"));
        });
    </script>

    页面效果

    <p id="p5">文本</p>
    <h2>这是一个before测试</h2>

    before插入到标签之前

  • 相关阅读:
    单例模式(singleton)
    Unsupported major.minor version 51.0
    “万能数据库查询分析器”4.03发布,谨以此致我们终将逝去的青春
    和菜鸟一起学linux内核之初始化init篇
    PL/SQL备份oracle数据库
    java.lang.ClassCastException: org.apache.struts.taglib.bean.CookieTei
    DB Query Analyzer 4.03 is upgraded in ZOL
    Android应用程序资源的查找过程分析
    java.lang.IllegalArgumentException: Can't convert argument: null
    Dalvik虚拟机简要介绍和学习计划
  • 原文地址:https://www.cnblogs.com/zqq1234/p/5355953.html
Copyright © 2011-2022 走看看