理解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. 长安CS15_手动——16款

    一.输入数据 1.CAN总线描述:位置,颜色,速率,总线类型 1)位置:OBD 2)颜色:3) 速率:500k 4)总线类型:HSCAN 5)测试时间:2016.5.4 2.车辆特征 1)排量:1.5 ...

  2. 有关hadoop分布式配置详解

    linux配置ssh无密码登录 配置ssh无密码登录,先要安装openssh,如下: yum install openssh-clients 准备两台linux服务器或虚拟机,设置两台linux的ho ...

  3. Linq语句基础

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. python学习笔记10（函数一）： 函数使用、调用、返回值

    一.函数的定义 在某些编程语言当中,函数声明和函数定义是区分开的(在这些编程语言当中函数声明和函数定义可以出现在不同的文件中,比如C语言),但是在Python中,函数声明和函数定义是视为一体的.在Py ...

  5. Contest2037 - CSU Monthly 2013 Oct(中南大学2013年10月月赛水题部分题解)

    Problem A: Small change 题解:http://www.cnblogs.com/crazyapple/p/3349469.html Problem B: Scoop water 题 ...

  6. maven eclipse web项目流程（简化内容）

    1.maven eclipse 环境搭建 1.1 下载解压配置环境变量(解压.环境变量maven目录到bin.setting.xml 改本地仓库) 1.2 eclipse插件安装配置(link安装.加 ...

  7. log4j日志输出到web项目指定文件夹

    感谢 eric2500 的这篇文章:http://www.cxyclub.cn/n/27860/ 摘要:尝试将log4j的文件日志输出到web工程制定目录,遇到了很多问题,最终在eric2500的指导 ...

  8. Google 面经 09/26

    http://www.mitbbs.com/article_t/JobHunting/32539885.html 狗家面经发信站: BBS 未名空间站 (Thu Sep 26 01:20:54 201 ...

  9. POJ2528+线段树

    见代码. /* 线段树+Lazy 题意:有一面墙,被等分为1QW份,一份的宽度为一个单位宽度. 现在往墙上贴N张海报,每张海报的宽度是任意的,但是必定是单位宽度的整数倍,且<=1QW. 后贴的海 ...

  10. 获取Android系统时间

    目的: 输入 2014-09-09 14:02:03    输出 等待:1小时20分 注意: HH:mm:ss 为获取手机 24小时格式的时间  15:03    hh:mm:ss 为12小时模式的时 ...