今天开始学习Jquery文本处理,在使用Jquery进行文本处理时,总共分为6种模式:内部插入、外部插入、包裹、替换、删除、复制。下面我们对它进行一一分析。
1.内部插入:对匹配的对象元素进行内容的追加(内部)
关键字:append appendTo prepend prependTo
append-->在匹配对象元素(后面)追加指定内容
格式:$("element").append("content")
格式解释:$("element")为选中的匹配对象元素,content为我们所要追加的内容
举例:html代码 --> <p>Jquery文本处理学习</p> Jquery代码:$("p").append("<span>大家好</span>")
结果:<p>Jquery文本处理学习<span>大家好</span></p>
Jquery代码解释:$("p").append("<span>大家好</span>") 查找p标签,并把<span>大家好</span>插入到p标签内的后面
appendTo -->把所有匹配的元素追加到另一个指定的元素元素集合中
格式:$("element").appendTo("content")
格式解释:$("element")为选中的匹配对象元素,content为被追加的内容
举例:html代码 --><div></div><p>我在学习Jquery</p> Jquery代码:$("p").appendTo("div")
结果:<div><p>我在学习Jquery</p></div>
Jquery代码解释:$("p").appendTo("div") 查找p标签,并把p标签的内容插入到div标签中
prepend -->在匹配对象元素(前面)追加指定内容
说明:此关键字与append关键字一样,所不同的是,它将内容插入到匹配对象元素内的前面。
prependTo -->把所有匹配的元素前置到另一个、指定的元素集合中。
说明:此关键字与appendTo关键字一样,所不同的是,它将匹配到的元素前置到另一个元素集合中。
2.外部插入:对匹配的对象元素进行内容的追加(外部)
关键字:after before inserAfter inserBefore
after -->在每个匹配的元素之后插入内容.
格式:$("element").after("content")
格式解释:$("element")为选中的匹配对象元素,content为我们所要追加的内容
举例:html代码 --><div>大家好</div> Jquery代码:$("div").after("<p>我正在学习Jquery</p>")
结果:<div>大家好</div><p>我正在学习Jquery</p>
Jquery代码解释:把<p>我正在学习Jquery</p>插入到每个div标签的后面,比较简单。
before -->在每个匹配的元素之前插入内容
说明:此关键字与after关键字一样,所不同的是,它将内容插入到了匹配对象元素的前边
inserAfter -->把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
举例:html代码 --><div>abc</div><p>我在学习Jquery</p> Jquery代码:$("p").inserAfter("div")
结果:<div>abc</div><p>我在学习Jquery</p>
Jquery代码解释:$("p").inserAfter("div") 查找p标签,并把p标签的内容插入到div标签后面
inserBefore -->把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
举例:html代码 --><div>abc</div><p>我在学习Jquery</p> Jquery代码:$("p").inserBefore("div")
结果:<p>我在学习Jquery</p><div>abc</div>
Jquery代码解释:$("p").inserAfter("div") 查找p标签,并把p标签的内容插入到div标签前面
3.包裹
关键字:wrap unwrap wrapAll wrapInner
wrap -->把所有匹配的元素用其他元素的结构化标记包裹起来。
说明:wrap有两种参数 1:html代表结构化html代码 2:elem选择器
举例1: html代码:<div id="wrap">abc</div><p>我在学习Jquery</p> Jquery代码:$("p").wrap("<div id='wrap1'></div>")
结果:<div id="wrap">abc</div><div id='wrap1'><p>我在学习Jquery</p></div>
举例2:html代码:<div id="wrap">abc</div><p>我在学习Jquery</p> Jquery代码:$("p").wrap($("#wrap"))
结果:<div id="wrap">abc</div><div id="wrap">abc<p>我在学习Jquery</p></div>
unwrap -->移出元素的父元素
举例:html代码:<div id='wrap1'><p>我在学习Jquery</p></div> Jquery代码:$("p").unwrap()
结果:<p>我在学习Jquery</p>
wrapAll -->将所有匹配的元素用单个元素包裹起来
举例:html代码:<p>Hello</p><div id="warp"><p>我在学习Jquery</p></div>
Jquery代码:$("p").wrapAll("<div class='wrap1'></div>")
结果:<div class="wrap1"><p>Hello</p><p>我在学习Jquery</p></div><div id="warp"></div>
举例2:html代码:<div class="warp">abc</div><p>Hello</p><div id="warp"><p>我在学习Jquery</p></div>
Jquery代码:$("p").wrapAll($(".warp"))
结果:<div class="warp">abc</div><div class="warp">abc<p>Hello</p><p>我在学习Jquery</p></div><div id="warp"></div>
wrapInner -->将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
举例:html代码:<p>Hello</p><p>cruel</p><p>World</p> Jquery代码:$("p").wrapInner("<b></b>");
结果:<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
4.替换
关键字:replaceWith replaceAll
replaceWith -->将所有匹配的元素替换成指定的HTML或DOM元素。
举例:<p>Hello</p><p>cruel</p><p>World</p> Juqery代码:$("p").replaceWith("<b>Paragraph. </b>");
结果:<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
replaceAll -->用匹配的元素替换掉所有 selector匹配到的元素。
举例:<p>Hello</p><p>cruel</p><p>World</p> Jquery代码:$("<b>Paragraph. </b>").replaceAll("p");
结果:<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
replaceWith与replaceAll比较:replaceWith是先找匹配对象,再设置值,replaceAll是先设置值,再找匹配对象
5.删除
关键字:empty remove detach
empty -->删除匹配的元素集合中所有的子节点。
举例:<p>Hello, <span>Person</span> <a href="#">and person</a></p> Jquery代码:$("p").empty();
结果:<p></p>
remove -->从DOM中删除所有匹配的元素。
举例:<p>Hello</p> how are <p>you</p> Jquery代码:$("p").remove();
结果:how are
说明:这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。
detach -->从DOM中删除所有匹配的元素。
举例:<p class="hello">Hello</p> how are <p>you</p> Jquery代码:$("p").detach(".hello");
结果:how are <p>you</p>
说明:这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
6.复制
关键字:clone clone(true)
clone -->克隆匹配的DOM元素并且选中这些克隆的副本
举例:<b>Hello</b><p>, how are you</p> Jquery代码:$("b").clone().prependTo("p");
结果:<b>Hello</b><p><b>Hello</b>, how are you</p>
clone(true) -->元素以及其所有的事件处理并且选中这些克隆的副本
举例:<button>Clone Me!</button> Jquery代码:$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
结果:<button>Clone Me!</button><button>Clone Me!</button>
说明:clone()方法是复制一个元素,不包含其所有事件,
clone(true)方是复制一个元素及其所有事件
jquery文件是必要的吗
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
AE中的遮罩与蒙版是一个概念吗?
本文分析AE中的遮罩与蒙版的概念,并给出二者的区别、联系及基本应用实例操作。
遮罩层 AE 蒙版 AfterEffects -
zepto和jquery有必要学习吗 jquery一定要学吗
1. 使用jQuery简化Ajax开发 简介: jQuery 是一个JavaScript 库,它有助于简化 JavaScript™ 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同,jQuery 具有独特的基本原理,可以简洁地表示常见的复杂代码。学习 jQuery 基本原理,探索其特性和功能,执行一
zepto和jquery有必要学习吗 jquery javascript ajax asynchronous