JQuery文档处理
1、内部插入
A.append(B) 将B插入到A的内部后面（之后的串联操作，操作A）
....
A.prepend(B) 将B插入到A的内部前面
....
A.appendTo(B) 将A插入到B的内部后面 （之后的串联操作，操作A）
A.prependTo(B) 将A插入到B的内部前面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03_内部插入节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星际</li>
</ul>
<div id="foo1">Hello1</div>
</body>
<script type="text/javascript">
//将 tj 插入 到 love 内部 前 或后
var $tj = $("#tj");
var $love = $("#love");
//后
// $love.append($tj);
// $tj.appendTo($love);
//前
// $love.prepend($tj);
$tj.prependTo($love);
</script>
</html>
2、外部插入
A.after(B) , 将B插入到A后面（同级）
A.before(B) ，将B插入到A前面
A.insertAfter(B) , 将A插入到B后面（同级）
A.insertBefore(B) 将A插入到B前面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>04_外部插入节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p id="p3">I would like to say: p3</p>
<p id="p2">I would like to say: p2</p>
<p id="p1">I would like to say: p1</p>
</body>
<script type="text/javascript">
// 将 city 插入 到 p2 前或后
var $city = $("#city");
var $p2 = $("#p2");
// 后
// $p2.after($city);
// $city.insertAfter($p2);
//前
// $p2.before($city);
$city.insertBefore($p2);
</script>
</html>
3、删除
empty() 清空标签体
remove() 删除当前对象。如果之后再使用，元素本身保留，绑定事件或 绑定数据 都会被移除
detach() 删除当前对象。如果之后再使用，元素本身保留，绑定事件或 绑定数据 都保留
l 绑定数据
data(name)获得
data(name,value)设置
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>05_删除节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京<p>海淀区</p></li>
<li id="tj" name="tianjin">天津<p>河西区</p></li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>
<script type="text/javascript">
// 将city移除，再追加body后面
//#1 绑定事件
$("#city").click(function(){
alert("O(∩_∩)O~");
});
//#2 绑定数据
$("#city").data("itheima","就是屌");
//1 移除
var $city = $("#city").remove(); //移除绑定的事件、移除绑定的数据
// var $city = $("#city").detach(); //保留绑定的事件、保留绑定的数据
//2 追加
$("body").append($city);
//#3获得绑定的数据
alert($("#city").data("itheima"));
</script>
</html>
4、复制
clone() 克隆
even：指示事件处理函数是否会被复制。V1.5以上版本默认值是：false
<body>
<button class="save">保存</button><br>
<p>段落</p>
</body>
<script type="text/javascript">
$(".save").click(function(){
var $new = $(this).clone(true);
$("body").append($new);
});
</script>
5、替换
A.replaceWith(B) ，使用A将B替换掉
A.replaceAll(B) ，使用B将A替换掉
<html>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<button>保存</button>
</html>
<script type="text/javascript">
// $("p").replaceWith("<a>xxx</a> <br/>");
$("<a>xxx</a> <br/>").replaceAll("p");
</script>
6、包裹
A.wrap(B) ，使用B将每一个A进行包裹（多个B）
A.wrapAll(B) ，使用B将所有A进行包裹（一个B）
A.wrapInner(B) ,使用B将每一个A的标签体包裹。
A.unwrap() ，将A的父元素删除，自己留着
<body>
<strong title="jQuery">jQuery</strong>
<strong title="jQuery">jQuery</strong>
</body>
<script type="text/javascript">
//每一个包
// $("strong").wrap("<div></div>");
//一个包
// $("strong").wrapAll("<div></div>");
//标签体
$("strong").wrapInner("<div></div>");
</script>
浙公网安备 33010602011771号