<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery基础4（文档处理）</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>
$(function () {
//append() 在元素内部的后面插入内容
//$("#box").append("<div style='color: red'>内部后面</div>") ;
// //appendTo() 把内容添加到匹配元素的后面
//$("<div style='color: red'>内部后面</div>").appendTo("#box");
//prepend() 在内部的前面插入内容
// $("#box").prepend("<div style='color: red'>内部前面</div>") ;
//prependTo() 把内容添加到匹配元素的前面
//$("<div style='color: red'>不为谁而作的歌</div>").prependTo("#box");
//回调函数写法
// $("#box").append(function (index,html) {
// return html="内部后面"
// })
//after() 在匹配元素的外部后面添加元素
//$("#box").after("<div>外部后面</div>");
//insertAfter() 把内容添加到匹配元素的外部后面
//$("<div>外部后面</div>").insertAfter("#box");
//before()在匹配元素的外部前面添加内容
//$("#box").before("<div style='color: red'>外部前面</div>") ;
//insertBefore()把内容添加到匹配元素的外部前面
//$("<div style='color: red'>外部前面</div>").insertBefore("#box");
//replaceWith() 将匹配的元素替换成指定的html或者dom元素
// $("p").replaceWith("<strong>我要替换了它</strong>")
// $("p").eq(2).replaceWith($("p").first());
//指定的替换内容，是移动到目标位置来替换（而不是复制一份）
// replaceAll() 用匹配的元素替换掉选择器匹配到的元素 (有多个相同元素，逐个全部替换掉)
//$("<span>我是替换的内容</span>").replaceAll("p");
// clone( )克隆匹配的dom元素，并且其他选中这些克隆的副本
// $("#cool").clone(true).css({"background-color":"green"}).appendTo("#box").html("我是新克隆出来的");
//点击 克隆并添加到后面
// $("#btn").click(function () {
// $(this).clone(true).insertAfter(this);//克隆并添加到后面
// })
//empty() 删除匹配关系的所有子元素
//$("#box").empty();
//remove() 删除匹配的元素
// $("#cool").remove();
//detach() 移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。
// var x; //全局变量
// $("#btn1").click(function () {
// x = $("#cool").detach(); // 移除
// });
// $("#btn2").click(function () {//恢复
// $("#box").append(x);
// });
//wrap() 包裹 （给匹配元素添加父元素）
//$("li").wrap("<div></div>")
//unwrap() 不包裹（给匹配元素去除父元素）（ps:在已现有存在的元素的情况下操作）
// $("em").unwrap("#container");
//串联 end() 从end()开始返回上一个对象（元素）
//$("#pox").find("p").css({"background-color":"green"}).end().addClass("nice")
//each() 为每个匹配元素规定要运行的函数。
// $("p").each(function (i,el) {
//el.innerHTML="为每个p都添加1111"
//$(el).html("kkkkkk");
// })
//遍历1
// var index;
// var el;
// $("p").each(function(index,el){
// console.log(index); //显示所匹配元素索引值
// console.log(el);//显示所匹配元素
// });
//遍历2
// $("p").each(function(index,el){
// alert($(this).text())
// });
})
</script>
<style>
</style>
</head>
<body>
<div id="box">
<p>哈哈哈</p>
<p>呵呵呵</p>
<p>嘻嘻嘻</p>
<p>呜呜呜</p>
</div>
<span id="cool">我是被克隆的</span>
<button id="btn">点我O(∩_∩)O</button>
<button id="btn1">点我移除~~~~(>_<)~~~~</button>
<button id="btn2">点我恢复(*^__^*)</button>
<li>我是弱小的li</li>
<div id="container">
<em>我是没人爱的em</em>
</div>
<div id="pox">
<p id="first">你还会遇见我的</p>
</div>
</body>
</html>