jQuery中的文档操作处理（五）：append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文档操作处理</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body{
font-family: "Microsoft YaHei"
}
.cGreen{color: #4CA902}
.cPink{color: #ED4A9F}
.cBlue{color: #0092E7}
.cCyan{color: #01A6A2}
.cYellow{color: #DCA112}
.cRed{color: #B7103B}
.cPurple{color: #792F7C}
.cBlack{color: #110F10}
.cOrange{color: #FF4500}
.cGray{color: #A9A9A9}
.hide{display: none;}
span {
float:left;
}
ul li {
width:120px;
float: left;
margin-left: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
/*
content代表一串html文本；也可以是jQuery中的选择规则！
下面讲到的fn，是一个js的方法；
意思是可以接收一个返回值为字符串的js方法！
ele是element：标签
append(content|fn) and appendTo(content)：
x.append(y)：往x中加入y；
$("p").append("<b>hello</b>");
y.appendTo(x)：把y加入到x中去；把一个匹配元素追加到另一个指定的元素中；
$("<b>hello</b>").appendTo("p"); 这样也是可以的！
$("p").appendTo("div");
把所有的p标签的append到所有的div中
下面pre同！
如果x中原本有其他标签内容和，append和appendTo，是加在最后面。
prepend(content|fn) and prependTo(content)：
x.prepend(y)：往x中加入y；
y.prependTo(x)：把y加入到x中去；
同append一样是往里加内容，但是区别是；
假如x中有内容的话，会把新加的内容发在最前面；
不像append是接在最后面！
after(content|fn)：
在每个匹配的元素之后插入一些html文本。
$("p").after("<b>hello</b>");
before(content|fn)：
在每个匹配元素之前插入。
$("p").before("<b>hello</b>")
insertAfter(content)：
又是倒置：
$("p").insertAfter("#foo");
等同：
$("#foo").after("p");
insertBefore(content)：
又是倒置：
$("p").insertBefore("#foo");
等同：
$("#foo").before("p");
wrap(html|ele|fn)：
为 每一个匹配项都包裹一次！！！
比较有用 {把所有匹配元素用其他结构包裹起来}
$("p").wrap("<div class='wrap'></div>");
把所有的段落用这个div包裹起来！
unwrap()：
{把所有匹配元素的父标签移除，可以快速消除wrap的效果}
$("p").unwrap();
把所有段落的父标签给消除咯。
wrapAll(html|ele)：
只会包裹一次，把所有匹配的包裹进一个里面！！！
将所有匹配的元素包裹进一个div中！
$("p").wrapAll("<div></div>");
将所有的p标签包裹进同一个div中。
原理是：
如果有相同有匹配的，找到他们
的共同的最小父标签！在上一层
加上div。
wrapInner(html|ele|fn)：
这里讲一讲wrapInner和wrapAll和wrap的区别：
^o^：
example:
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
$("li").wrap("<div></div>");
$("li").wrapAll("<div></div>");
$("li").wrapInner("<div></div>");
wrap之后：
<ul>
<div><li>aaa</li></div>
<div><li>bbb</li></div>
<div><li>ccc</li></div>
</ul>
wrapAll之后：
<ul>
<div>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</div>
</ul>
wrapInner之后：
<ul>
<li><div>aaa</div></li>
<li><div>bbb</div></li>
<li><div>ccc</div></li>
</ul>
可以看出所谓inner就是在里面！
replaceWith(content|fn)：
将所有匹配元素替换成指定的HTML元素。
replaceAll(selector):
将所有匹配元素替换成选择器匹配的元素。
[
replaceWith和replaceAll的区别：
replaceWith后面只能跟html或者文本。
replaceAll只能跟选择器选择到的。
]
empty()：
删除清空所有的子节点和文本。
$("p").empty();
删除所有p标签的内容！
remove([expr])：
expr代表的是jQuery中的选择(选择器)规则！
删除所有匹配的元素。
$("p").remove();
删除所有p标签！
clone([Even[, deepEven]])：
$("b").clone().prependTo("p");
克隆所有b并且将它们前置到所有段落中去！
克隆可以加参数：true为深复制、false为浅复制。
clone里面如果设置为true的话则会将匹配到的元素的事件等一同复制;
否则只能复制DOM元素，不能克隆事件等。
clone之后要通过append之类的赋值到某个地方。
*/
// append(content|fn)
$("#btn1").click(function(){
//获取到每个城市，后加内容
$("ul li").append("，你喜欢这个城市？").css("width", "220px");
});
// appendTo(content)
$("#btn2").click(function(){
// 获取到德国，追加 法兰克福
// $("#ger").appendTo("<li>法兰克福</li>");
$("<li>法兰克福</li>").appendTo("#ger");
});
// prepend(content|fn)
$("#btn3").click(function(){
//获取到每个城市，前加内容
$("ul li").prepend("你好，").css("width", "210px");
});
// prependTo(content)
$("#btn4").click(function(){
//获取到德国，城市列表中前加 柏林
$("<li>柏林</li>").prependTo("#ger");
});
// after(content|fn)
$("#btn5").click(function(){
// $("span:contains('城市')").after("<span>列表</span>");
$("span").after("<span>列表</span>");
});
// before(content|fn)
$("#btn6").click(function(){
// $("span:contains('城市')").before("<span>请看</span>");
$("span").before("<span>请看</span>");
});
// insertAfter(content)
$("#btn7").click(function(){
//获取到美国的城市列表，后加入德国城市列表之后
//jQuery 方法的连缀，当调用方法后返回的对象还是其本身；除find()、parent()两个方法以为
//style里面的color没有cGray
$("#usa li").css("color", "#A9A9A9").insertAfter("#ger li");
});
// insertBefore(content)
$("#btn8").click(function(){
//获取到美国的城市列表，后加入德国城市列表之后
//jQuery 方法的连缀，当调用方法后返回的对象还是其本身；除find()、parent()两个方法以为
//style里面的color没有cGray
$("#usa li").css("color", "#A9A9A9").insertBefore("#ger li");
});
// wrap(html|ele|fn)
$("#btn9").click(function(){
$("ul li").wrap("<span class='cBlue'></span>");
});
// unwrap()
$("#btn10").click(function(){
$("ul li").unwrap();
});
// wrapAll(html|ele)
$("#btn11").click(function(){
$("#chn li").wrapAll("<span class='cGreen'></span>");
});
// wrapInner(html|ele|fn)
$("#btn12").click(function(){
$("#chn li").wrapInner("<span class='cGreen'></span>");
});
// replaceWith(content|fn)
$("#btn13").click(function(){
$("#chn li").replaceWith("<span class='cOrange'>city</span>");
});
// replaceAll(selector)
$("#btn14").click(function(){
$("<span class='cGreen'>所有的城市被替换了</span>").replaceAll("#usa li");
});
// empty()
$("#btn15").click(function(){
// 始终牢记empty()是清空当前选择出来的标签的子元素，如果你写的是#usa li
// 那么被清空的就是li中的text内容，而li标签本身还是会被留下来！
// $("#usa li").empty();
$("#usa").empty();
});
// remove([expr])
$("#btn16").click(function(){
// 只有remove才是删除自己。
$("#usa li").remove("#ny,#scg");
});
// clone([Even[, deepEven]])
$("#btn17").click(function(){
/*
clone里面如果设置为true的话则会将匹配到的元素的事件等一同复制;
否则只能复制DOM元素，不能克隆事件等。
*/
$("#usa li").clone(true).css("color", "#A9A9A9").appendTo("#ger");
});
});
</script>
</head>
<body>
<span>中国城市</span>：<br>
<ul id="chn">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="gz">广州</li>
<li id="sz">深圳</li>
<li id="hk">香港</li>
</ul>
<br><br>
<span>美国城市</span>：<br>
<ul id="usa">
<li id="wst">华盛顿特区</li>
<li id="ny">纽约</li>
<li id="la">洛杉矶</li>
<li id="scg">芝加哥</li>
</ul>
<br><br>
<span>德国城市</span>：<br>
<ul id="ger">
<li id="mnh">慕尼黑</li>
</ul>
<div style="clear:both;"></div>
<br><br>
<hr>
<input type="button" id="btn1" value="append()向每个城市(li元素内)追加 ，你喜欢吗？">
<input type="button" id="btn2" value="appendTo()向德国追加一个城市 法兰克福">
<input type="button" id="btn3" value="prepend()向每个城市(li元素内)追加 你好，">
<input type="button" id="btn4" value="prependTo()向德国追加一个城市 柏林">
<input type="button" id="btn5" value="after()向xx城市之后追加 列表">
<input type="button" id="btn6" value="before()向xx城市之前追加 请看 ">
<input type="button" id="btn7" value="insertAfter()将美国的所有城市置入德国的城市之后">
<input type="button" id="btn8" value="insertBefore()将美国的所有城市置入德国的城市之前">
<input type="button" id="btn9" value="wrap()将每个城市(li元素)用span包裹起来">
<input type="button" id="btn10" value="unwrap()将每个城市(li元素)的父元素移除">
<input type="button" id="btn11" value="wrapAll()将中国的所有城市(li元素)用一个span包裹起来">
<input type="button" id="btn12" value="wrapInner()将中国的所有城市(li元素内)每个城市内容用span包裹起来">
<input type="button" id="btn13" value="replaceWith()将中国的所有城市(li元素)替换为span元素">
<input type="button" id="btn14" value="replaceAll()将美国的所有城市(li元素)替换为span元素">
<input type="button" id="btn15" value="empty()清空美国的所有城市">
<input type="button" id="btn16" value="remove()删除美国的纽约和芝加哥两个城市">
<input type="button" id="btn17" value="clone()复制美国的城市到德国的城市之后">
</body>
</html>jQuery中的文档操作处理（五）：append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等的更多相关文章
- jQuery中的文档处理（五）
1. append(content|fn), 向每个匹配的元素内部追加内容 在内部结尾添加. 参数说明: content:String, Element, jQuery,要追加到目标中的内容 func ...
- jquery-7 jquery中的文档处理方法有哪些（方法的参数表示功能增强）
jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强) 一.总结 一句话总结:多看参考文档,多看主干目录.一般的功能分两个方法来实现,一个对应标签,一个对应标签和事情,比如克隆 ...
- ExtJs4 笔记（1） ExtJs大比拼JQuery：Dom文档操作
现在主流的JS框架要数ExtJs和JQuery应用的比较广泛.JQuery属于轻量级的,一般做网站应用比较常见,可见块头小的优势.ExtJs比较庞大,它除了对基本的JS语法和HTML DOM操作方式的 ...
- [转载]ExtJs4 笔记（1） ExtJs大比拼JQuery：Dom文档操作
出处:[Lipan] (http://www.cnblogs.com/lipan/) 现在主流的JS框架要数ExtJs和JQuery应用的比较广泛.JQuery属于轻量级的,一般做网站应用比较常见,可 ...
- jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度
在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...
- 关于js与jquery中的文档加载
jquery中的$(document).ready()类似于javascript中的window.onload(),但是其中还是有很大区别的 1.jquery中的可以简化为$().ready(),$( ...
- (转载) ExtJs大比拼JQuery：Dom文档操作
此次不生产水,做一次搬运工. http://www.cnblogs.com/lipan/archive/2011/12/07/2269815.html
- jQuery 参考手册 - 文档操作
上传图片时页面崩溃..全部付之东流 addClass() after() append() appendTo() attr() before() clone() detach() empty() ha ...
- jQuery 文档操作 - prependTo() ，appendTo()方法
其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...
随机推荐
- ESP8266 NodeMCU小白手把手入门（实操篇）以土壤湿度和DHT传感器为例讲解读取传感器的值
物联网使得现实世界中的实体和数字世界比以往任何时候都更紧密地联系在一起.NodeMCU作为其中的一个重要设备,作用之一就是与传感器相连以实现万物互联通讯.这篇关于NodeMCU的实操篇以土壤湿度传感器 ...
- PAT乙级：1090危险品装箱(25分)
PAT乙级:1090危险品装箱(25分) 题干 集装箱运输货物时,我们必须特别小心,不能把不相容的货物装在一只箱子里.比如氧化剂绝对不能跟易燃液体同箱,否则很容易造成爆炸. 本题给定一张不相容物品的清 ...
- MySQL检查与性能优化示例脚本
最近在玩python,为了熟悉一下python,写了个mysql的检查与性能优化建议的脚本. 虽然,真的只能算是一个半成残次品.也拿出来现眼一下. 不过对于初学者来说,还是有一定的参考价值的.比如说如 ...
- SpringBoot+Redis 实现消息订阅发布
什么是 Redis Redis 是一个开源的使用 ANSI C语言编写的内存数据库,它以 key-value 键值对的形式存储数据,高性能,读取速度快,也提供了持久化存储机制. Redis 通常在项目 ...
- LC-322. 零钱兑换
322. 零钱兑换 给你一个整数数组 coins ,表示不同面额的硬币:以及一个整数 amount ,表示总金额. 计算并返回可以凑成总金额所需的 最少的硬币个数 .如果没有任何一种硬币组合能组成总金 ...
- 第五十三篇 -- MFC美化界面2
IDC_STATIC 1. 设置字体样式 方法1:在OnInitDialog()函数中使用以下语句 CFont * f; f = new CFont; f->CreateFont(50, // ...
- Go语言基础知识总结(持续中)
Go基础知识总结 变量声明 Go语言中的变量需要声明以后才可以使用(需要提前定义变量)并且声明后必须使用(不适用会报错) 标准声明 var 变量名 变量类型 example: var name str ...
- 面试问题记录 三 (JavaWeb、JavaEE)
前言 这块还是比较关键的,考察你对整个业务流程的熟练度吧,虽然企业级的项目没有接触过,但像最基本的内容必须得融会贯通,这一点我感觉自己还是处于浅层,没有深入的去思考以及练习过,其实就像那句话,&quo ...
- sqli-labs靶机
第一关 1' 第二关 1 第三关 1') 第四关 1'') 第五关 1' + extractvalue报错注入 第六关 1 " + ...
- 2020年度钻石C++C学习笔记（2）--《博学谷》
2020年度钻石C++C--<博学谷> 1．以下标示符中命名合法的是A A.__A__ B.ab.c C.@rp D.2Y_ 2．设 a 和 b 均为 double 型变量,且a=5.5. ...