理解jquery设计思想
记住大部分jquery API的使用
 
 
prepend、append、appendTo、prependTo的用法
 
 
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            div.div{border: 1px solid red;}

            p{color:green;}

            h1{color:darkgoldenrod;}

            input{

                display: block;

                margin-bottom: 4px;

            }

        </style>

    </head>

    <body>

        <div class="main">

            <div class="div"><span>div</span></div>

            <p>p标签</p>

        </div>

        <input type="button" value="重置 " id="reset"/>

        <input type="button" value="append--把p标签移动到div标签里  ---实则为移动元素" id="btn1"/>

        <input type="button" value="append--复制p标签到div标签里，原来的标签还保留着(克隆)" id="btn2"/>

        <input type="button" value="appendTo--将p标签追加到div元素   ---实则为移动元素" id="btn3"/>

        <input type="button" value="appendTo--新建元素p追加到div中的元素集合内部的最后面" id="btn4"/>

        <input type="button" value="prependTo--将新建的p元素插入到div中的元素集合内部的最前面" id="btn5"/>

        <input type="button" value="prepend--将新建的h1插入到div中的元素集合内部的最前面" id="btn6"/>

        <input type="button" value="prepend--将已有的p标签插入到div中的元素集合内部的最前面 -- 实则为移动元素" id="btn7"/>

    </body>

    <script src="http://code.jquery.com/jquery.js"></script>

    <script>

        $(function(){

            var str = $('.main').html();

            $("#reset").click(function(){

                $('.main').html(str);

            })

            $("#btn1").click(function(){

                //把p标签移动到div标签里

                $('.div').append( $('p'));

            })

            $("#btn2").click(function(){

                //只是复制一份到div标签里，原来的标签还保留着(克隆)

                $('.div').append( $('p').clone(true))

            })

            $("#btn3").click(function(){

                //将p追加到div元素   ---实则为移动元素

                $('p').appendTo($('.div'));

            })

            $("#btn4").click(function(){

                //新建元素p追加到div元素中

                $('<p>新建元素p追加到div中的元素集合内部的最后面</p>').appendTo($('.div'));

            })

            $("#btn5").click(function(){

                //将新建的p元素插入到div中的元素集合内部的最前面

                $('<p>将新建的p元素插入到div中的元素集合内部的最前面</p>').prependTo($('.div'));

            })

            $("#btn6").click(function(){

                //将新建的h1插入到div中的元素集合内部的最前面

                $('.div').prepend('<h1>将新建的h1插入到div中的元素集合内部的最前面</h1>');     //值得注意的是prepend函数后面的参数是内容，不是对象。而prependTo函数前后都是对象。

            })

            $("#btn7").click(function(){

                //将已有的p元素插入到div中的元素集合内部的最前面 -- 实则为移动元素

                $('.div').prepend($('p'));

            })

        })

    </script>

</html>

jquery的API查看 / prepend、prependTo、append、appendTo的用法的更多相关文章

  1. jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)

    jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...

  2. jquery：after append appendTo三个函数的区别

    1.查找元素节点      var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”);    2.查找元素属性 利用jq ...

  3. 比较jquery中的after(),append(),appendTo()方法

    html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</ ...

  4. JQuery中after() append() appendTo()的区别

    首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").afte ...

  5. JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件

    JQuery 常用API 参考资料:JQuery 官网   jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...

  6. 【jquery】 API讲解 内部培训资料

    资料在百度云盘 一.jquery  API讲解 1.jquery  api如何使用 jquery  api http://www.hemin.cn/jq/ 2.常用api讲解 选择器: 通过$()获取 ...

  7. jquery的api以及用法总结-数据/操作/事件

    数据 .data() 在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值 .data(obj) 一个用于更新数据的键/值对 .data()方法允许我们再dom元素上 ...

  8. jquery 常用api 小结2

    *一)jQuery常用方法API实战 (1)DOM简述与分类 A)DOM是一种标准,它独立于平台,语言,浏览器. B)如果项目中,你完全按照DOM标准写代码,你就能在各大主流的浏览器中操作标准控件. ...

  9. JavaScript强化教程——jQuery UI API 类别

    ---恢复内容开始--- 主要介绍:JavaScript强化教程​—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...

随机推荐

  1. win 7 64位如何安装erdas 9.2

    最主要的就是crack包必须包含这三个文件：erdas.exe、license.dat和lmgrd.exe 将这三个文件都复制到C盘安装目录下bin中，其余安装同win 7 32位系统

  2. mvc简单execl导出

    直接上代码: public static byte[] GetExecl(DataTable dt, List<string> list) { var sbHtml = new Strin ...

  3. velocity语法

    1.声明变量 #set($var = XXX) 右边可以是以下的内容 Variable reference String literal Property reference Method refer ...

  4. 记一次apt-get无法安装git的问题

    解决apt-get安装过程中出现的Size mismatch和Hash Sum mismatch问题. 事情起因 我从单位复制了一个Virtualbox虚拟机(ubuntu 15.04 Desktop ...

  5. 团体程序设计天梯赛-练习集L1-022. 奇偶分家

    L1-022. 奇偶分家 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定N个正整数,请统计奇数和偶数各有多少个? 输入格式 ...

  6. Java将整个文件夹里的文本中的字符串替换成另外一个字符串（可用于项目复制，变成另一个项目）

    import org.junit.Test; import java.io.*; /** * User: HYY * Date: 13-8-18 * Time: 下午8:11 * To change ...

  7. 最短路径算法之二——Dijkstra算法

    Dijkstra算法 Dijkstra算法主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止. 注意该算法要求图中不存在负权边. 首先我们来定义一个二维数组Edge[MAXN][MAXN]来存储 ...

  8. No ongoing transaction. Did you forget to call multi?

    2016-10-21 14:41:47,551 [ERROR] [http-nio-8032-exec-2] TransactionSynchronizationUtils:171 - Transac ...

  9. &&运算符和||运算符的优先级问题

    package priority; public class TestAndOrPriority { /* * &&的优先级高就不代表 他会先运行 ||的右边 而是说会把右边用& ...

  10. Yii CActiveForm

    http://blog.sina.com.cn/s/blog_685213e70101mo4i.html 文档: http://www.yiiframework.com/doc/api/1.1/CAc ...