理解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. Python socket模拟HTTP请求

    0x00 起 最近在做一个对时间要求比较高的扫描器,需要封装一下SOCKET模拟HTTP发包的一些常用函数.简单的说,就是重写一下requests中的get.post方法. 今天在写的时候,遇到一枚很 ...

  2. poj 2186 Popular Cows (强连通分量+缩点)

    http://poj.org/problem?id=2186 Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissi ...

  3. 使用Yeoman搭建 AngularJS 应用 (9) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/install-packages.html 列出当前程序包 我们现在查看一下我们已经安装的程序包,输入下面的命令 bower list 查找 ...

  4. Web网站架构设计

    目录 [隐藏/显示] 1 - Web负载均衡   1.1 - 使用商业硬件实现   1.2 - 使用开源软件   1.3 - 使用windows自带的互载均衡软件   1.4 - 总结2 - 静态网站 ...

  5. Recommender Systems协同过滤

    第一部分是学习ID3时候积累的. 一.以前写的基础知识 1.信息:是用来消除不确定性的度量,信息量的大小,由所消除的不确定性的大小来计量(香农). 2.由于不确定性是由随机性引起的,所以用概率来描述和 ...

  6. BZOJ 1710: [Usaco2007 Open]Cheappal 廉价回文

    Description 为了跟踪所有的牛,农夫JOHN在农场上装了一套自动系统. 他给了每一个头牛一个电子牌号 当牛走过这个系统时,牛的名字将被自动读入. 每一头牛的电子名字是一个长度为M (1 &l ...

  7. 算法导论_ch2

    Ch2算法基础 whowhoha@outlook.com 2.1 插入排序 输入:n个数的一个序列〈a1,a2,…,an〉. 输出:输入序列的一个排列〈a′1,a′2,…,a′n〉,满足a′1≤a′2 ...

  8. linux踢人命令 pkill踢人用法

    首先使用who命令查看在线用户,然后踢人. 强制踢人命令格式:pkill -kill -t tty 解释: pkill -kill -t 踢人命令 tty 所踢用户的TTY或者pts/x(x代表数字) ...

  9. 服务器部署_linux下部署jprofiler简单备忘

    1.windows安装jprofiler 2.linux下安装jprofiler服务端,记好安装路径.假设是安装在/ex/bin/下 3. 配置tomcat的启动sh文件,在后面加入以下参数:  -a ...

  10. 第一个C语言代码

    #include<stdio.h> void main() {     int g1,g2,g3,r1,r2,r3,n;     int m=0;     float ave;     i ...