jQuery

文档处理

1)内部插入
2)外部插入
3)包裹
4)替换
5)删除
6)复制

1.内部插入

append(content|fn)

向每个匹配的元素内部追加内容。

向所有段落中追加一些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> ]

appendTo(content)

把所有匹配的元素追加到另一个指定的元素元素集合中。

新建段落追加div中并加上一个class
HTML 代码:
<div></div><div></div>
jQuery 代码:
$("<p/>")
.appendTo("div")
.addClass("test")
.end()
.addClass("test2");
结果:
<div><p class="test test2"></p></div>
<div><p class="test"></p></div>

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> ] 将一个DOM元素前置入所有段落
HTML 代码:
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
jQuery 代码:
$("p").prepend( $(".foo")[0] );
结果:
<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Good Bye</b> 向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").prepend( $("b") );
结果:
<p><b>Hello</b>I would like to say: </p>

prependTo(content)

把所有匹配的元素前置到另一个、指定的元素元素集合中。

把所有段落追加到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.外部插入

after(content|fn)

在每个匹配的元素之后插入内容。

在所有段落之后插入一些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> 在所有段落之后插入一个DOM元素。
HTML 代码:
<b id="foo">Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("#foo")[0] );
结果:
<p>I would like to say: </p><b id="foo">Hello</b> 在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<b>Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("b") );
结果:
<p>I would like to say: </p><b>Hello</b>

before(content|fn)

在每个匹配的元素之前插入内容。

在所有段落之前插入一些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> ] 在所有段落之前插入一个元素。
HTML 代码:
<p>I would like to say: </p><b id="foo">Hello</b>
jQuery 代码:
$("p").before( $("#foo")[0] );
结果:
<b id="foo">Hello</b><p>I would like to say: </p> 在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").before( $("b") );
结果:
<b>Hello</b><p>I would like to say: </p>

insertAfter(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

把所有段落插入到一个元素之后。与 $("#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>

insertBefore(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

把所有段落插入到一个元素之前。与 $("#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>

包裹

wrap(html|element|fn)

把所有匹配的元素用其他元素的结构化标记包裹起来。

用原先div的内容作为新div的class,并将每一个元素包裹起来
HTML 代码:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
jQuery 代码:
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
结果:
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>

unwrap()

这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。

用ID是"content"的div将每一个段落包裹起来
HTML 代码:
<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
jQuery 代码:
$("p").unwrap()
结果:
<p>Hello</p>
<p>cruel</p>
<p>World</p>

wrapAll(html|ele)

将所有匹配的元素用单个元素包裹起来

html描述:
用一个生成的div将所有段落包裹起来
jQuery 代码:
$("p").wrapAll("<div></div>"); elem描述:
用一个生成的div将所有段落包裹起来
jQuery 代码:
$("p").wrapAll(document.createElement("div"));

wrapInner(htm|element|fnl)

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

用原先div的内容作为新div的class,并将每一个元素包裹起来
HTML 代码:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
jQuery 代码:
$('.inner').wrapInner(function() {
return '<div class="' + $(this).text() + '" />';
});
结果:
<div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>
<div class="inner">
<div class="Goodbye">Goodbye</div>
</div>
</div>

替换

replaceWith(content|fn)

将所有匹配的元素替换成指定的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> 用第一段替换第三段,你可以发现他是移动到目标位置来替换,而不是复制一份来替换。
HTML 代码:
<div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
jQuery 代码:
$('.third').replaceWith($('.first'));
结果:
<div class="container">
<div class="inner second">And</div>
<div class="inner first">Hello</div>
</div>

replaceAll(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>

删除

empty()

删除匹配的元素集合中所有的子节点。

把所有段落的子元素(包括文本节点)删除
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>

:has(selector)

匹配含有选择器所匹配的元素的元素

给所有包含 p 元素的 div 元素添加一个 text 类
HTML 代码:
<div><p>Hello</p></div>
<div>Hello again!</div>
jQuery 代码:
$("div:has(p)").addClass("test");
结果:
[ <div class="test"><p>Hello</p></div> ]

detach([expr])

从DOM中删除所有匹配的元素。

从DOM中把所有段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach();
结果:
how are 从DOM中把带有hello类的段落删除
HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach(".hello");
结果:
how are <p>you?</p>

复制

clone([Even[,deepEven]])

克隆匹配的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> 创建一个按钮,他可以复制自己,并且他的副本也有同样功能。
HTML 代码:
<button>Clone Me!</button>
jQuery 代码:
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});

jQuery之文档处理的更多相关文章

  1. jquery获取文档高度和窗口高度的例子

    jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  2. js、jQuery 获取文档、窗口、元素的各种值

    基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...

  3. python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  4. python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

  5. 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery 的文档操作

    在 js 中也有DOM操作,也可以进行 增删改查 ,但是通过 js 的DOM操作会发现,我的天哪,代码好多.但是 jQuery的文档操作就少了很多. js 中 DOM 的示例 : var box = ...

  7. jQuery的文档操作方法

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...

  8. Jquery操作文档标签

    1.插入动作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. JQuery fullcalender文档

    转载: http://blog.csdn.net/lgg2011. 使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options});  接受的 ...

随机推荐

  1. 反射实现 Data To Model

    调用 : public ActionResult Index() { DataTable dt = new DataTable(); dt.Columns.Add("Name"); ...

  2. 深入分析Java单例模式的各种方案

    单例模式 Java内存模型的抽象示意图: 所有单例模式都有一个共性,那就是这个类没有自己的状态.也就是说无论这个类有多少个实例,都是一样的:然后除此者外更重要的是,这个类如果有两个或两个以上的实例的话 ...

  3. Android敏感词过滤主要类

    package com.tradeaider.app.utils; import com.tradeaider.app.activity.MyApplication;import java.util. ...

  4. https证书申请流程和简介

    HTTPS证书是什么 HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安 ...

  5. BootstrapBootbox居中

    /* 模态框居中样式 */ .bootbox-container { position: fixed; ; ; ; ; ; overflow-y: auto; } .bootbox-container ...

  6. Mysql清理二进制日志的技巧

    1:二进制日志 二进制日志记录了所有的DDL(数据定义语言)语句和DML(数据操作语言)语句,但是不记录包括数据查询的语句.语句以"事件"的形式保存,它描述了数据的更改过程,此日志 ...

  7. JS实现轻量级计算器

    想尝试做一个网页版计算器后,参考了很多博客大神的代码,综合归纳.总结修改,整理如下文. 附:   Demo    源码 一.HTML+CSS 具体结构样式如下图,基本参照手机计算器界面.按钮功能可以查 ...

  8. JQ实现选中以后就左右移动

    <head> <meta charset="utf-8" /> <title>select_option移动</title> < ...

  9. T-SQL语句中的转换函数

    书接上回 前面讲了聚合函数.字符串函数 今天一起来看下转换函数 首先是 值类型转换 ),degree) 在C#里面是convert,现在在SQL中也是他,convert(转换类型,被转换列)from ...

  10. java复习(4)---数字处理类

    java本身自带一些封装好的类方便数字问题的处理,review下方便以后使用 DecimalFormat类 可格式化数字格式,控制输出格式 Math类 提供三角函数.指数函数.取整函数.最大最小函数. ...