jQuery学习之八---文档处理
Hi~ o( ̄▽ ̄)ブ,大家好,好久不见啊,萍子近两个星期专心做了一个前后台合作的电商网站的项目,好累啊,但是又有点想念CSDN上的你们了,所以萍子马上马立刻立的就过来了,嘿嘿~有没有一点小感动啊。
好了,不扯闲篇了,我们今天来一起看看jQuery文档处理的内容吧,虽然项目期大部分用了jq的知识点,但是咋也老感觉一边学习一边忘呢,好尴尬啊真的是,唉~
内部插入
1、append[content/fn]
向每个匹配的元素内部追加内容。这个方法与js的DOM操作中的appendChild方法类似。
*注意:是在内部追加哦,也就是说插入到元素最后方的位置。
参数分析:
content:要追加到目标中的内容
function(index,html):这个函数会返回一个字符串,用于追加到每一个匹配元素的里边。接收两个参数,index为对象在这个集合中的索引值,html为这个对象原先的html值。
<div>Hello,</div>
$("div").append("<p>everyone</p>");
结果:<div>Hello,<p>everyone</p></div>
2、appendTo[content]
把所有匹配的元素追加到另一个指定的元素集合中。
注意:这个也是追加哦,也是加在元素内部最后。
实际上,这个方法的使用颠倒了append的操作。$(A).append(B),是把B添加到A的最后方,而appendTo,是把前者插入到后者内部最后
参数分析:
content:用于被追加的内容
<p>哈哈</p>
<div>啦啦啦</div>
$("p").appendTo("div");
结果:<div>啦啦啦<p>哈哈</p></div>
以上两种方法是把内容添加到元素内部的最后方。
3、prepend[content/fn]
向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。
参数分析:
content:要插入到目标元素内部前端的内容
function(index,html):返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。
<div>Hello,</div>
$("div").prepend("<p>everyone</p>");
结果:<div><p>everyone</p>Hello,</div>
4、prependTo[content]
把所有匹配的元素前置到另一个、指定的元素元素集合中。
实际上,这个方法的使用颠倒了prepend的操作。$(A).append(B),是把B添加到A的最前方,而appendTo,是把前者插入到后者内部最前
参数分析:
content:用于匹配元素的jQuery表达式
<p>哈哈</p>
<div>啦啦啦</div>
$("p").prependTo("div");
结果:<div><p>哈哈</p>啦啦啦</div>
以上两种方法是把content添加到匹配元素的最前方。
外部插入
5、after[content/fn]
在每个匹配元素之后插入内容
参数分析:
content:插入到每个目标后的内容
function:函数必须返回一个html字符串
<div>Hello,</div>
$("div").after("<p>everyone</p>");
结果:<div>Hello,</div><p>everyone</p>
6、before[content/fn]
在每个匹配的元素之前插入内容。
参数分析:
content:插入到每个目标后的内容
function:函数必须返回一个html字符串
<div>Hello,</div>
$("div").before("<p>everyone</p>");
结果:<p>everyone</p><div>Hello,</div>
7、insertAfter[content]
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面。
参数分析:
content:用于匹配元素的jQuery表达式
<div>Hello,</div>
$("div").insertAfter("<p>everyone</p>");
结果:<p>everyone</p><div>Hello,</div>
8、insertBefore[content]
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
实际上,使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。
参数分析:
content:用于匹配元素的jQuery表达式
<div>Hello,</div>
$("div").insertBefore("<p>everyone</p>");
结果:<div>Hello,</div><p>everyone</p>
包裹
9、wrap[html/ele/fn]
把所以匹配的元素用其他元素的结构化标记包裹起来
需要注意的是:当被匹配的元素中包含文本时,无法使用这个函数,因此要添加文本应该在包裹完成之后再进行添加。
参数分析:
html:HTML标记代码字符串,用于动态生成元素并包裹目标元素
elem:用于包裹目标元素的DOM元素
fn:生成包裹结构的函数
用一个新建div包裹所有的p标签
$("p").wrap("<div></div>");用id名为content的div包裹p标签
$("p").wrap(document.getElementById("content"));
10、unwrap()
这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。
把一组用div包裹的p标签移除
<div><p>Hello</p><p>cruel</p><p>World</p>
</div>
$("p").unwrap()
结果:<p>Hello</p><p>cruel</p><p>World</p>
替换
11、replaceWith[content/fn]
将所有匹配的元素替换成指定的html或dom元素
参数分析:
content:用于将匹配元素替换掉的内容。
fn:返回html字符串,用来替换的内容。
这个函数需要注意的是,匹配到的元素是移动过来替换,而不是复制一份过来替换。也就是说替换的移动过来替换了被替换的,结果是替换的在被替换的位置上存在,别替换的已经不在了,不在了~~~
比如:
<div class="container"><div class="inner first">Hello</div><div class="inner second">And</div><div class="inner third">Goodbye</div>
</div>
$('.third').replaceWith($('.first'));
结果:
<div class="container"><div class="inner second">And</div><div class="inner first">Hello</div>
</div>
12、replaceAll[selector]
用匹配的元素替换掉所有 selector匹配到的元素。
参数分析:
selector:用于查找所要被替换的元素
<div><p>哈哈</p></div>
$("<span>嘿嘿</span>").replaceAll("p");
结果:<div><span>嘿嘿</span></div>
删除
13、empty()
删除匹配的元素集合中所有的子节点
把所有div的子节点删掉
<div><p>哈哈</p></div>
$("div").empty();
结果:<div></div>
14、remove[expr]
从DOM中删除所有匹配的元素
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。
参数分析:
expr:用于筛选元素的jQuery表达式
<p class="hello">Hello</p> how are <p>you?</p>
从DOM中把所有段落删掉
$("p").remove();
结果:how are从DOM中删除带有hello类的段落
$("p").remove(".hello");
结果:how are <p>you?</p>
15、detach[expr]
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
参数分析:
expr:用于筛选元素的jQuery表达式
例子同上。
复制
16、clone()
克隆匹配的DOM元素并且选中这些克隆的副本,进行操作
克隆所有的span标签,并且选中这些克隆副本,然后将他们插入到所有段落后方
<span>哈哈</span><p>嘿嘿</p>
$("span").clone().appendTo("p");
结果:<span>哈哈</span><p>嘿嘿<span>哈哈</span></p>
好了,以上就是jQuery中大部分对文档的处理方法,敬请笑纳,有疑问的萍子随时恭候,呼呼~加油!
jQuery学习之八---文档处理相关推荐
- jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档。
jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...
- day-16 jquery的DOM文档操作及bootstrap
1. jquery的DOM文档操作 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 关于Jquery导出word文档
通常情况下,我们在开发过程中会遇到,导出网页上的内容保存至word文档中,类似这样的需求.前人早已为我们中下树,我们只需要乘凉即可.百度 Jquery 导出文档插件!我们会看到好多 资源,随便找一个引 ...
- 深度学习在文档矫正中的应用
深度学习在文档矫正中的应用 一.扫描文稿 在日常生活中,我们经常会使用到扫描文稿的功能.包括IOS备忘录自带的扫描功能.扫描全能王等,文稿扫描给我们带来了许多便利.文稿扫描可以应对的范围非常广.包括身 ...
- (六)MkDocs学习——部署文档
mkdocs学习笔记系列 (一)MkDocs 学习--快速开始 (二)MkDocs学习笔记--撰写文档 (三)MkDocs学习--配置主题 (四)MkDocs学习--自定义主题 (五)MkDocs学习 ...
- 今天的码农女孩学习了关于jQuery中的文档处理的内容
文档处理 内添加(孩子) 1.append()在父类尾部添加孩子(新) 2.appendTo()在父类尾部添加孩子(指定) 3.prepend( ...
- java学习资料文档和视频(转)
JAVA: FreeMarker应用指导(中文PDF电子书) http://www.hztraining.com/bbs/showtopic-708.aspx JSP动态网站技术入门与提高(PDF电子 ...
- Jquery对象的文档处理,CSS和事件
文档处理 append:向每个匹配的元素内部追加内容.这个操作与对指定的元素执行appendchild方法,将它们添加到文档中的情况类似 <p>i would like to say< ...
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
在ajax中经常需要对元素的位置进行精确的定位,此时不仅需要获取元素自身的大小位置等属性.还需要知道页面.浏览器.滚动条等的长度和宽度.因为浏览器的兼容问题,如果使用javascript获取这些数值是 ...
最新文章
- sqlalchemy数据库中的offset偏移查询的使用
- CSW是怎样用极端化来分裂BCH社区的
- nginx 重写 隐藏index.php
- JAVA 利用SimpleDateFormat将String转换为格式化的日期
- opcclient远程连接opc服务器_软件 | 服务器远程连接软件MobaXterm
- [CF487E]Tourists
- 关于wordpress中更换CKEditor编辑器
- (史上最全)104个实用网络爬虫合集。
- 计算机网络阅读报告,计算机网络实验二报告
- Win7系统提示NVIDIA显示设置不可用怎么办
- vscode编写go没有代码提示
- python征程1.4(初识python)
- 3项目里面全局用less变量 cli vue_Vue实战14——抽离全局less变量与Vuex持久化、多模块构建...
- 读书笔记_打开量化投资的黑箱01
- 卡巴斯基称发现美国中情局CIA 开发的新恶意软件
- 推荐一款基于bootstrap的漂亮的前端模板——inspinia_admin(国内翻译的叫 H+后台主题UI框架)
- systrace打印
- 修改网页标题前面的logo
- java-获取上个月的第一天和最后一天
- Windows——插件:动态主题(轻量级 每日自动换壁纸)