JavaWeb学习笔记——jquery中的dom操作
来源:互联网 发布:北京奥运会体测数据 编辑:程序博客网 时间:2024/05/17 01:02
jquery中的dom操作
废话不说:直接上例子:
1.添加节点-html页面
Append:向每个匹配的元素内部追加内容。
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<br>
<input type="button" value="添加">
</body>
Js代码
<script language="JavaScript">
/**
* 创建一个li节点<li id="tj" name="tianjing">天津</li>,追加到最后的li节点的后面
*/
$("input[type='button']").click(function(){
/**
* 1、创建一个节点li
* 2、设置两个属性
*/
var $li = $("<li/>").attr("id","tj").attr("name","tianjing").attr("aaa","bbbb").text("天津");
$("ul").append($li);//在<ul>内部添加元素
});
</script>
appendTo:把所有匹配的元素追加到另一个指定的元素元素集合中。
实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。
代码示例:
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>
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> ]
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>
返回值:jQueryafter(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>
返回值:jQuerybefore(content)在每个匹配的元素之前插入内容。
示例
描述:
在所有段落之前插入一些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> ]
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>
替换:
replaceWith(content) 返回值jQuery将所有匹配的元素替换成指定的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() 删除匹配的元素集合中所有的子节点。 返回值:jQuery
示例
描述:
把所有段落的子元素(包括文本节点)删除
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>
返回值:jQueryremove([expr]) 用于筛选元素的jQuery表达式、
示例
描述:
从DOM中把所有段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove();
结果:
how are
返回值:jQuerydetach([expr])从DOM中删除所有匹配的元素。
示例
描述:
从DOM中把所有段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach();
结果:
how are
- JavaWeb学习笔记——jquery中的dom操作
- jQuery学习笔记 — jQuery中的DOM操作
- jQuery学习笔记-----jQuery中的DOM操作
- jQuery中的DOM操作学习笔记
- 学习笔记《锋利的jQuery》-jQuery中的DOM操作
- jQuery学习笔记(二)—— 操作DOM元素
- jQuery学习笔记:DOM操作(一)——文档
- jQuery 学习笔记 (jQuery DOM的操作)
- JQuery学习笔记-JQuery的DOM操作
- jQuery学习笔记——jQuery中DOM操作(1)
- jQuery学习笔记——jQuery中DOM操作(2)
- jquery学习笔记之DOM操作
- JQuery之DOM操作学习笔记
- 【jQuery学习笔记---------DOM操作复制元素】
- jQuery学习笔记(二) DOM操作
- jQuery学习笔记之Dom操作
- jQuery学习笔记之DOM节点操作
- jQuery学习笔记之DOM操作
- 3.3后端请求规范
- 寻找直方图中面积最大的矩形
- UVA 1201 - Taxi Cab Scheme(二分图匹配+最小路径覆盖)
- 数据结构-4-Trie树:应用于统计、排序与搜索 原理详解
- C++11 thread::get_id(3)
- JavaWeb学习笔记——jquery中的dom操作
- OSX10.9.3 eclipse关于JAVA版本的问题
- codeHaus XFire实现WebService开发
- ios/iphone NSArray和NSMutableArray的常用方法
- Tuxedo Domain连接不稳定
- Android TextView中文字通过SpannableString来设置超链接、颜色、字体等属性
- hdu4121 神模拟
- Sublime Text 3 相关使用方法
- java开发常用工具类