jquery的API查看 / prepend、prependTo、append、appendTo的用法
<!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的用法的更多相关文章
- jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)
jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...
- jquery：after append appendTo三个函数的区别
1.查找元素节点 var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”); 2.查找元素属性 利用jq ...
- 比较jquery中的after(),append(),appendTo()方法
html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</ ...
- JQuery中after() append() appendTo()的区别
首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").afte ...
- JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件
JQuery 常用API 参考资料:JQuery 官网 jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...
- 【jquery】 API讲解 内部培训资料
资料在百度云盘 一.jquery API讲解 1.jquery api如何使用 jquery api http://www.hemin.cn/jq/ 2.常用api讲解 选择器: 通过$()获取 ...
- jquery的api以及用法总结-数据/操作/事件
数据 .data() 在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值 .data(obj) 一个用于更新数据的键/值对 .data()方法允许我们再dom元素上 ...
- jquery 常用api 小结2
*一)jQuery常用方法API实战 (1)DOM简述与分类 A)DOM是一种标准,它独立于平台,语言,浏览器. B)如果项目中,你完全按照DOM标准写代码,你就能在各大主流的浏览器中操作标准控件. ...
- JavaScript强化教程——jQuery UI API 类别
---恢复内容开始--- 主要介绍:JavaScript强化教程—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...
随机推荐
- 2016022601 - redis入门了解
今天开始学习redis,先从网页上学习,主要学习地址是:易百中的redis和redis中国网站. 此片章学习来自于自:http://www.yiibai.com/redis/redis_quick_g ...
- 九、mysql触发器的概念
.所谓触发器,就是指设置好某个表的某个操作(insert ,update ,delete)时候,同时触发的一个操作: 一般用来,比如说删除文章主栏目,那么可以利用触发器删除这个文章栏目下的所有文章 . ...
- 微软职位内部推荐-SENIOR PRODUCER
微软近期Open的职位: Role Based in Shanghai, ChinaTitle: ProducerWe are seeking a Senior Producer to lead Pr ...
- iOS工程中的info.plist文件
我们建立一个工程后,会在Supporting files下面看到一个"工程名-Info.plist"的文件,这个是对工程做一些运行期配置的文件,很重要,不能删除. 如果你在网上下载 ...
- Microsoft.Web.Administration in IIS
http://blogs.msdn.com/b/carlosag/archive/2006/04/17/microsoftwebadministration.aspx 最好使用在IIS8中,因为为每一 ...
- Partition an array around an interger
Partition an array of integers around a value such taht all elements less than x come before element ...
- [转载]html5直接在网页上播放视频音频兼容所有浏览器
文章给大家分享一个html5直接在网页上播放视频兼容所有浏览器,有需要的同学可参考. HTML5可以用video标签来播放视频 当前,video 元素支持三种视频格式: 格式 IE Firefox O ...
- 常用汇编命令&&OD命令总结
汇编32位CPU所含有的寄存器有: 4个数据寄存器(EAX.EBX.ECX和EDX)对低16位数据的存取,不会影响高16位的数据.这些低16位寄存器分别命名为:AX.BX.CX和DX,它和先前的CPU ...
- appserv在哪修改服务器名
修改服务器名,需要修改httpd.conf文件中的第233行 ServerName 192.168.1.104:8080. 这个文件位于 AppServ\Apache2.2\conf\ 下.
- select下拉框选择触发事件
我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...