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>

转载于:https://www.cnblogs.com/mzywucai/p/11053377.html

jQuery中的文档操作处理（五）：append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等...相关推荐

day-16 jquery的DOM文档操作及bootstrap
1. jquery的DOM文档操作 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
Python3-word文档操作（五）：利用python修改word文档中的表格数据
1. 简介: 本篇继续学习python操作word文档的相关知识.本篇主要学习: 1)如何获取一个已经存在文档中的表格的内容: 2)如何修改一个已经存在文档中的表格的内容: 2. 获取word文档中的 ...
今天的码农女孩学习了关于jQuery中的文档处理的内容
文档处理内添加(孩子) 1.append()在父类尾部添加孩子(新) 2.appendTo()在父类尾部添加孩子(指定) 3.prepend( ...
通过电脑向 Iphone 的 WPS 中传递文档
通过电脑向 Iphone 的 WPS 中传递文档操作步骤第一步: 第二步第三步第四步
jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
为什么80%的码农都做不了架构师?>>> 原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例使 ...
jquery.cookie 使用文档，$.cookie() 文档教程， js 操作 cookie 教程文档。
jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...
孤荷凌寒自学python第五十四天使用python来删除Firebase数据库中的文档
孤荷凌寒自学python第五十四天使用python来删除Firebase数据库中的文档 (完整学习过程屏幕记录视频地址在文末) 今天继续研究Firebase数据库,利用google免费提供的这个数据库 ...
jQuery 属性，css，文档操作
dom对象与jQuery对象的区别 $(function() {// dom 与 jQuery对象间的转换var $txt = $(":input");// jQuery -> ...
tensorflow 读取cifar_对tensorflow中cifar-10文档的Read操作详解
前言在tensorflow的官方文档中得卷积神经网络一章,有一个使用cifar-10图片数据集的实验,搭建卷积神经网络倒不难,但是那个cifar10_input文件着实让我费了一番心思.配合着官方文 ...

jQuery中的文档操作处理（五）：append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等...

jQuery中的文档操作处理（五）：append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等...相关推荐

最新文章

热门文章