<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ-DOM操作-2</title>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
<p>我是1p</p>
<p>我是2p</p>
<p>我是3p</p>
<p>我是4p</p>
<div style="border:1px solid #3F0;" id="aaa"></div>
<b id="bbb"><p>哈哈哈</p></b>
<div id="rm">真的能删除我？？？！</div>
<div id="cl">复制我？？我才是真滴！</div>
<script>
$(function(){
//用div包裹每一个p元素
$("p").wrap("<div></div>");
//取消p元素的包裹
$("p").unwrap();
//用div包裹全部p元素，只包裹一次。
$("p").wrapAll("<div></div>");
//把p元素内的内容加粗(b标签)
$("p").wrapInner("<b></b>");
$("p").wrapInner("<div></div>");
//把p元素替换为文字，即 把<p>我是4p</p> 替换为 我是新的4P ，连DOM结构一起替换。
$("p:eq(3)").replaceWith("我是新的4P");
$("<b>Paragraph. </b>").replaceAll("p:eq(0)");
//删除#bbb内的所有内容，包括其内的节点DOM也都删除
$("#bbb").empty();
//删除选中的DOM节点。
$("#rm").remove();
//复制节点至body中。
$("#rm").append($("#cl").clone());
})
</script>
</body>
</html>
JQ-DOM操作-2
最新推荐文章于 2024-07-05 14:21:58 发布
1002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
