jQuery之文档处理
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之文档处理的更多相关文章
- jquery获取文档高度和窗口高度的例子
jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...
- js、jQuery 获取文档、窗口、元素的各种值
基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...
- python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax
一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...
- 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 的文档操作
在 js 中也有DOM操作,也可以进行 增删改查 ,但是通过 js 的DOM操作会发现,我的天哪,代码好多.但是 jQuery的文档操作就少了很多. js 中 DOM 的示例 : var box = ...
- jQuery的文档操作方法
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...
- Jquery操作文档标签
1.插入动作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- JQuery fullcalender文档
转载: http://blog.csdn.net/lgg2011. 使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options}); 接受的 ...
随机推荐
- 通用数据库帮助类DBHelper(含log日志信息实时记录)
项目需要,需要一个通用的数据库操作类,增删改查.事务.存储过程.日志记录都要有,于是在已有的帮助类上做了一些改进,并将log4j的.NET版--log4net嵌入其中记录sql的执行环境和状态. 用起 ...
- iOS 按钮连续提交执行一次(如留言提交,多次拍照问题)
在很多项目中暴力测试时会出现多次点击执行一个方法 可以用下面的语句进行解决 //先将未到时间执行前的任务取消. [[self class] cancelPreviousPerformRequests ...
- Android中那些有你不知道的事
在安卓开发中,总有那么一些看似简单,实则绊脚的难题,等你去探索,等你去解决,也许你已经遇见了解决了,也许你还没碰上,写下这篇总结,希望能帮助那行即将遇到的朋友,快速解决这些小问题! 一.activit ...
- Xmpp实现简单聊天系列 --- ①openfire部署
1. 下载最新的openfire安装文件 官方下载站点:http://www.igniterealtime.org/downloads/index.jsp#openfire 2. 下载完成后,执行你的 ...
- 不可不知的 Android strings.xml 那些事
相信 strings.xml 已经是大家在 Android 开发中最熟悉的文件之一了,但其实它也有很多需要注意的地方和一些小技巧,知道了这些可以让你的 Android 应用更加规范易用,大家来看看吧. ...
- 4月5日--课堂笔记--JS内置对象
JavaScript 4.5 一. JS内置对象 1.数组Array a)创建语法1:var arr=new Array(参数); i. 没有参数:创建一个初始容量为0的数组 ii. ...
- vertical-align 与 line-height 傻傻分不清??
要说吧,咱家是个菜鸟,以前遇见垂直居中的东东,也是现查现用,其中最长遇到的东西就是 vertical-align 和 line-height,似乎这俩个兄弟都可以实现居中对齐,不过窃以为二者还是有区别 ...
- 跨web浏览器的IC卡读卡器解决方案
BS结构的程序,如果要与IC卡读卡器通信本身就是件不容易解决的事情.微软的activex ocx技术将这种应用限制在IE浏览器上了,不兼容其它的浏览器.而Chrome使用插件也不兼容IE和其他的浏览器 ...
- firefox上安装selenium ide失败
Selenium 初学者第一步: 最近在学习selenium,但是在安装的时候遇到了问题.我是直接在firefox安装的Selenium IDE ,虽然下载安装之后存在于扩展中,但是工具栏里并没有显示 ...
- ios 苹果手机硬件摘要
IPhone4 * 2010年发布. * A4单核处理器. * 3.5英寸Retina显示屏(视网膜屏幕),960x640像素分辨率. * 后置摄像头500万像素. * 前置摄像头30万像素. IPh ...