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定时显示广告代码分享
Mar 02 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
vue 解决文本框被键盘遮住的问题
Nov 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写的采集程序
2007/03/16 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
Python面向对象特殊成员
2017/04/24 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
使用python存储网页上的图片实例
2018/05/22 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
购房意向书范本
2014/04/01 职场文书
关于安全的演讲稿
2014/05/09 职场文书
团队精神口号
2014/06/06 职场文书
女生节标语
2014/06/26 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
小学教师见习总结
2015/06/23 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
一文搞懂python异常处理、模块与包
2021/06/26 Python
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python