您的位置：首页 > Web前端 > JQuery

JavaWeb学习笔记——jquery中的dom操作

2014-09-03 23:54 597 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航