码迷,mamicode.com
首页 > Web开发 > 详细

jQuery开发之DOM操作二

时间:2015-06-16 17:04:25      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:jquery   dom   节点   

接上篇文章

3,插入节点
插入节点的方法如下图:
技术分享
技术分享

4,删除节点
(1) remove()方法
作用是从DOM中删除所有匹配的元素。示例代码如下:

var $li =$("ul li:eq(1)").remove();       //获取第二个<li>节点后,将它从网页中删除。

注意:当某个节点用remove()删除后,该节点包含的所有后代节点将同时被删除。这个方法的返回值是一个指向被删除节点的引用,因此可以在以后继续使用这些元素。

(2) detach()方法
detach() 和remove()方法一样,也是从DOM中去掉匹配的元素,但需要注意的是,这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件,附加的数据都会保留下来。
示例代码如下:

 var $li =$("ul li:eq(1)").detach();  //获取第二个<li>节点后,将它从网页中删除。

(3) empty()方法
严格来说empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点。
示例代码如下:

var $li = $("ul li:eq(1)").empty();  //获取第二个<li>节点后,清空元素里的内容。

5,复制节点

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>css ajax </title>
<script type ="text/javascript" src ="jquery.js" ></script>

<script type ="text/javascript">
$(document).ready(function(){
    $("ul li:eq(2)").click(function(){
        $(this).clone().appendTo("ul");  //复制当前单击的节点,并将它追加到<ul>元素中。
    });
});

</script>
</head>
<body>
<p title ="选择最喜欢的水果">选择最喜欢的水果</p>
<ul>
<li title ="苹果">苹果</li>
<li title ="橘子">橘子</li>
<li title ="菠萝">菠萝</li>
</ul>
</body>
</html>

6,节点替换
如果要替换某个节点,jQuery提供了相应的方法,即replaceWith()和replaceAll();
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML活着DOM元素。
示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>jQuery test </title>
<script type ="text/javascript" src ="jquery.js" ></script>

<script type ="text/javascript">
$(document).ready(function(){
    $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>")
});

</script>
</head>
<body>
<p title ="选择最喜欢的水果">选择最喜欢的水果</p>
<ul>
<li title ="苹果">苹果</li>
<li title ="橘子">橘子</li>
<li title ="菠萝">菠萝</li>
</ul>
</body>
</html>

运行结果如下:
技术分享

replaceAll()方法的示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>jQuery test </title>
<script type ="text/javascript" src ="jquery.js" ></script>

<script type ="text/javascript">
$(document).ready(function(){
    $("<li>荔枝</li>").replaceAll("li")
});

</script>
</head>
<body>
<p title ="选择最喜欢的水果">选择最喜欢的水果</p>
<ul>
<li title ="苹果">苹果</li>
<li title ="橘子">橘子</li>
<li title ="菠萝">菠萝</li>
</ul>
</body>
</html>

运行结果如下:

技术分享

7,包裹节点
(1) wrap()方法
jQuery代码示例如下:

$("strong").wrap("<br></br>"); //用<br>标签将<strong>元素包裹起来

运行结果如下:

<br><srong>something</strong></br>

(2) wrapAll()方法
该方法会将所有匹配的元素用一个元素来包裹,它不同于wrap()方法,wrap() 方法是将所有的元素进行包裹。
jQuery示例代码如下:

$("strong").wrapAll("<br></br>");

运行结果如下:

<br>
<strong>你最喜欢的水果</strong>
<strong>你最不喜欢的水果</strong>
</br>

(3) wrapInner()方法
该方法将每一个匹配的元素的字内容包括(文本节点) 用其结构化的标记包裹起来。jQuery示例代码如下:

$("strong").wrapInner("<br></br>");

运行结果如下:

<strong><br>最喜欢的水果</br></strong>

jQuery开发之DOM操作二

标签:jquery   dom   节点   

原文地址:http://blog.csdn.net/hanhailong18/article/details/46506441

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!