Jquery 基础学习笔记之文档处理


Posted in Javascript onMay 29, 2009

主要包括以下几部分:(1)内部插入(2)外部插入(3)包裹(4)替换(5)删除(6)赋值。那我们就开始详细地看一下。
1、内部插入:向一些元素的内部插入内容
(1)append(content) :向每个匹配的元素内部追加内容,追加到元素内部的末尾,比如
描述:
向所有段落中追加一些HTML标记。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("<b>Hello</b>");
结果:
[ <p>I would like to say: <b>Hello</b></p> ]

(2)appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中
描述:
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p>
<div></div><div></div>
jQuery 代码:
$("p").appendTo("div");
结果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

(3) prepend(content) 向每个匹配的元素内部前置内容
描述:
向所有段落中前置一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").prepend("<b>Hello</b>");
结果:
[ <p><b>Hello</b>I would like to say: </p> ]

(4) prepend() 把所有匹配的元素前置到另一个、指定的元素元素集合中。
描述:
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
$("p").prependTo("#foo");
结果:
<div id="foo"><p>I would like to say: </p></div>

2、内部插入:向一些元素的外部插入内容
(1)after(content)在每个匹配的元素之后插入内容。
描述:
在所有段落之后插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").after("<b>Hello</b>");
结果:
<p>I would like to say: </p><b>Hello</b>

(2)before() 在每个匹配的元素之前插入内容
描述:
在所有段落之前插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").before("<b>Hello</b>");
结果:
[ <b>Hello</b><p>I would like to say: </p> ]
(3)insertafter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
描述:
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
HTML 代码:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代码:
$("p").insertAfter("#foo");
结果:
<div id="foo">Hello</div><p>I would like to say: </p>

(4)insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面
描述:
把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。
HTML 代码:
<div id="foo">Hello</div><p>I would like to say: </p>
jQuery 代码:
$("p").insertBefore("#foo");
结果:
<p>I would like to say: </p><div id="foo">Hello</div>

3、包裹:把一些元素包裹起来
(1)wrap(html) 把所有匹配的元素用其他元素的结构化标记包裹起来
描述:
把所有的段落用一个新创建的div包裹起来
HTML 代码:
<p>Test Paragraph.</p>
jQuery 代码:
$("p").wrap("<div class='wrap'></div>");
结果:
<div class="wrap"><p>Test Paragraph.</p></div>

(2) wrap(elem) 把所有匹配的元素用其他元素的结构化标记包装起来
描述:
用ID是"content"的div将每一个段落包裹起来
HTML 代码:
<p>Test Paragraph.</p><div id="content"></div>
jQuery 代码:
$("p").wrap(document.getElementById('content'));
结果:
<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>

(3)wrapAll(html) 将所有匹配的元素用单个元素包裹起来
描述:
用一个生成的div将所有段落包裹起来
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").wrapAll("<div></div>");
结果:
<div><p>Hello</p><p>cruel</p><p>World</p></div>

(4) wrapAll(elem)将所有匹配的元素用单个元素包裹起来
描述:
用一个生成的div将所有段落包裹起来
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").wrapAll(document.createElement("div"));
结果:
<div><p>Hello</p><p>cruel</p><p>World</p></div>
(5) wrapInner(html)将每一个匹配的元素的子内容(包括文本节点)用一个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>
(6) wrapInner(elem)
描述:
把所有段落内的每个子内容加粗
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").wrapInner(document.createElement("b"));
结果:
<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
4、替换:用制定的元素替换一些HMTL或者DOM元素
(1)replaceWith(content) 将所有匹配的元素替换成指定的HTML或DOM元素
描述:
把所有的段落标记替换成加粗的标记。
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").replaceWith("<b>Paragraph. </b>");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
(2) repalceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。
描述:
把所有的段落标记替换成加粗标记
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("<b>Paragraph. </b>").replaceAll("p");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

5、删除:删除制定的元素
(1)empty() 删除匹配的元素集合中所有的子节点。
描述:
把所有段落的子元素(包括文本节点)删除
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>
(2)remove([expr]) 从DOM中删除所有匹配的元素
描述:
从DOM中把所有段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove();
结果:
how are
描述:
从DOM中把带有hello类的段落删除
HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove(".hello");
结果:
how are <p>you?</p>
5、复制:克隆匹配的元素
(1)Clone() 克隆匹配的DOM元素并且选中这些克隆的副本。
描述:
克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中。
HTML 代码:
<b>Hello</b><p>, how are you?</p>
jQuery 代码:
$("b").clone().prependTo("p");
结果:
<b>Hello</b><p><b>Hello</b>, how are you?</p>

(2) clone(true) 元素以及其所有的事件处理并且选中这些克隆的副本

描述:
创建一个按钮,他可以复制自己,并且他的副本也有同样功能。
HTML 代码:
<button>Clone Me!</button>
jQuery 代码:
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
终于整理完毕。以上内容参考与Jquery1.3中文参考。
希望此篇对初学者有益。

Javascript 相关文章推荐
使弱类型的语言JavaScript变强势
Jun 22 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
Jquery 基础学习笔记
May 29 #Javascript
javascript AutoScroller 函数类
May 29 #Javascript
关于JavaScript的一些看法
May 27 #Javascript
广告切换效果(缓动切换)
May 27 #Javascript
js 图片缩放(按比例)控制代码
May 27 #Javascript
图片上传即时显示缩略图的js代码
May 27 #Javascript
JavaScript 闭包深入理解(closure)
May 27 #Javascript
You might like
Php header()函数语法及使用代码
2013/11/04 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
Python实现在线音乐播放器
2017/03/03 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
学校文明单位申报材料
2014/05/06 职场文书
人民调解员培训方案
2014/06/05 职场文书
医学专业自荐信
2014/06/14 职场文书
施工安全责任书范本
2014/07/24 职场文书
管理失职检讨书
2015/05/05 职场文书
中秋联欢会主持词
2015/07/04 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers