理解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. Unity3d 如何找到游戏对象并改变其颜色

    //游戏对象 private var obj:GameObject; //渲染器 private var render:Renderer; //贴图 private var texture:Textu ...

  2. Oracle 常用操作

    修改数据库表名:rename [old-table] to [new-table]; while循环添加测试数据: declare     i int:=1;     begin     while ...

  3. query specified join fetching, but the owner of the fetched association was not present in the select list

    报标题的错误,是因为在 select count的时候,不需要fetch 所以在取完count以后,再把fetch加进去,变成left join  fetch /** * 请把jhql以o为返回对象, ...

  4. C#中结构体与字节流互相转换

    1.定义与C++对应的C#结构体 在c#中的结构体不能定义指针,不能定义字符数组,只能在里面定义字符数组的引用. C++的消息结构体如下: //消息格式 4+16+4+4= 28个字节 struct ...

  5. What the hell is Rotate?

  6. 【图说】Eclipse与Unity 3D协同工作

    原地址:http://blog.csdn.net/h570768995/article/details/9355313 Eclipse开发过程中总会碰到很多的难题,如何利用好工具帮助我们更快捷的开发也 ...

  7. web页面浮动回到顶部功能和浮动广告

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

  8. 吐槽C++

    个人感觉,在c++ 道路的学习路上,遇到很多的坎坷,现在回想起来,最关键一点就是 c++知识点繁杂很多,教科书很多知识点都没有提到. 但是在实际工作中,这些没有提到的知识点,却又经常会用到(或者看开源 ...

  9. 关于PHP写APP接口的安全问题探讨(一)

    在探讨这个问题之前,先要确认一点的是,作为一名互联网Coder,无论你是前端或者后端你都要对http请求要有一定的了解,知道http特性,要清楚的了解http里面的Request与Response是什 ...

  10. orm框架的学习mybatis

    1.数据库中的每张表,对应代码 中一个pojo类. 2.or映射是在mapper.xml文件中,指定resultType.可以指定已经定义的pojo类. 3.可以利用paramaterType指定sq ...