理解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. Google code: Why ‘Everything up-to-date’ when pushing (git)

    原文链接:http://blog.rexzhao.com/2011/11/28/google-code-git-everything-up-to-date-when-push.html 第一次在Goo ...

  2. random note

    今天才慢慢意识到,什么才是学习,(以思考解决问题为驱动),埋头刷分只是方法,不是目的和原动力. 既然准备读研,就要慢慢去了解研究生的生活学习方式是什么样的,涉及到哪些方面. 读研之前要选好方向,但是现 ...

  3. WinForm控件选择器

    jQuery和Css的控件选择器用起来非常畅快,相信用过的人都会有这种感觉,而WinForm则是通过Name来实现窗体中控件的选择,在选择单个控件的时候是很方便,但是当选择具有一类特征的控件时,则显得 ...

  4. SQL Server 和 Oracle 以及 MySQL 有哪些区别？

    SQL,在这里我理解成SQL Server.三者是目前市场占有率最高(依安装量而非收入)的关系数据库,而且很有代表性.排行第四的DB2(属IBM公司),与Oracle的定位和架构非常相似,就不赘述了. ...

  5. BeanFactory和FactoryBean

    BeanFactory和FactoryBean 1.BeanFactory BeanFactory定义了 IOC 容器的最基本形式,并提供了 IOC 容器应遵守的的最基本的接口,也就是Spring I ...

  6. uva 825

    这个......小学生就会的  坑在输入输出了  两个数之间可能不止一个空格....wa了好几遍啊 #include <cstdio> #include <cstring> # ...

  7. Unity3D 自动打包整个项目（以AssetBundle实现）

    原地址:http://blog.csdn.net/huang7jiao/article/details/18370653 需求: 在移动开发中,手动控制资源的加载.释放和热更新,是很有必要的. 而Un ...

  8. HDU4607+BFS

    /* bfs+求树的直径 关键:if k<=maxs+1 直接输出k-1: else: k肯定的是包括最长路.先从最长路的起点出发,再走分支,最后到达最长路的终点. 因此是2*(k-(maxs+ ...

  9. ORA-12704 字符集不匹配

  10. 函数flst_add_last

    /********************************************************************//** Adds a node as the last no ...