鸡西网—微信标志
  • 鸡西网站制作
  • 鸡西网客服热线已更改为”400-0467-004“,请广大客户周知。
  • 鸡西网站设计为您提供免费技术问答.如有您有计算机的相关问题欢迎前来咨询!
  • 敢不敢在鸡西网High一下
  • 网站地图

JQuery文本处理的六种元素使用方法

JQuery&Js Danny.✔ 2569浏览 0评论 百度收否

今天开始学习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文本处理的六种元素使用方法

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. 这个东西不是很容易记啊这个东西不是很容易记啊
    这个东西不是很容易记啊2013-11-30 23:44 回复