1. 创建元素
- $("")
2. 内部插入
- append()
- appendTo()
- prepend()
- prependTo()
demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM操作</title>
<style>
#box {
width: 800px;
padding: 20px;
border: 2px dashed orange;
}
#box img {
width: 200px;
}
</style>
</head>
<body>
<h1>DOM 操作</h1>
<hr>
<div id="box">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
</div>
<br>
<h3>内部插入</h3>
<button id="appendBtn">append</button>
<button id="appendToBtn">appendTo</button>
<button id="prependBtn">prepend</button>
<button id="prependToBtn">prependTo</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// appendTo 追加
$("#appendBtn").click(function () {
// // 创建一个新的元素
// var $img = $("<img>")
// console.log($img);
// $img.prop("src", "http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg");
//
// $("#box").append($img);
// 上下相等
$("#box").append("<img src='#'>");
});
$("#appendToBtn").click(function () {
$("<img src='#'>").appendTo("#box");
});
// 前插
$("#prependBtn").click(function () {
$("#box").prepend("<img src='#'>");
});
$("#prependToBtn").click(function () {
$("<img src='#'>").prependTo("#box");
});
});
</script>
</body>
</html>
3. 外部插入
- after()
- insertAfter()
- before()
- insertBefore()
demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM操作</title>
<style>
#box {
width: 800px;
padding: 20px;
border: 2px dashed orange;
}
img {
width: 200px;
}
</style>
</head>
<body>
<h1>DOM 操作 -- 外部插入</h1>
<hr>
<div id="box">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
</div>
<br>
<button id="afterBtn">after</button>
<button id="insertAfterBtn">insertAfter</button>
<button id="beforeBtn">before</button>
<button id="insertBeforeBtn">insertBefore</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#afterBtn").click(function () {
$("#box").after("<img src='#'>")
});
// after与insertAfter和append与appendTo的区别一样
$("#insertAfterBtn").click(function () {
$("<img src='#'>").insertAfter("#box");
});
$("#beforeBtn").click(function () {
$("#box").before("<img src='#'>");
});
$("#insertBeforeBtn").click(function () {
$("<img src='#'>").insertBefore("#box");
});
});
</script>
</body>
</html>
4. 包裹
- wrap()
- wrapAll()
- wrapInner()
- unwrap()
demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM操作</title>
<style>
#box {
width: 800px;
padding: 20px;
border: 2px dashed orange;
}
img {
width: 200px;
}
</style>
</head>
<body>
<h1>DOM 操作 -- 包裹</h1>
<hr>
<div id="box">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
</div>
<br>
<button id="wrapBtn">wrap</button>
<button id="wrapAllBtn">wrapAll</button>
<button id="wrapInnerBtn">wrapInner</button>
<button id="unWrapBtn">unWrap</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#wrapBtn").click(function () {
// 每个img外套一个li标签
$("#box img").wrap("<li>");
});
$("#wrapAllBtn").click(function () {
// 所有img标签外套一个li标签
$("#box img").wrapAll("<li>");
});
$("#wrapInnerBtn").click(function () {
// 原先子元素的父元素
$("#box").wrapInner("<li>");
});
$("#unWrapBtn").click(function () {
// 去掉最外面一层
$("#box img").unwrap();
})
});
</script>
</body>
</html>
5. 替换
- replaceWith()
- replaceAll()
demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM操作</title>
<style>
#box {
width: 800px;
padding: 20px;
border: 2px dashed orange;
}
img {
box-sizing: border-box;
width: 200px;
}
img.active{
border: 2px solid red;
}
</style>
</head>
<body>
<h1>DOM 操作 -- 替换</h1>
<hr>
<img id="newImg" src="https://cdn.duitang.com/uploads/item/201507/27/20150727084803_cLrJP.thumb.700_0.jpeg">
<div id="box">
<div>点击替换</div>
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
</div>
<br>
<button id="replaceWithBtn">replaceWith</button>
<button id="replaceAllBtn">replaceAll</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 选中图片
$("#box img").click(function () {
$(this).toggleClass("active").siblings("img").removeClass("active");
})
$("#replaceWithBtn").click(function () {
// $("img.active").replaceWith("<img src='https://cdn.duitang.com/uploads/item/201507/27/20150727084803_cLrJP.thumb.700_0.jpeg'>");
// 将id为mewImg的图片覆盖选中的图片
$("img.active").replaceWith($("#newImg"));
});
// replaceAll和replaceWith的区别和append与appendTo的区别一样
$("#replaceAllBtn").click(function () {
$("<img src='https://cdn.duitang.com/uploads/item/201507/27/20150727084803_cLrJP.thumb.700_0.jpeg'>").replaceAll("img.active");
})
});
</script>
</body>
</html>
6. 删除
- empty()
- remove()
- detach()
remove和detach的区别,remove删了之后恢复时,原先绑定的事件没有了,而detach删了恢复后,事件还在。
demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM操作</title>
<style>
#box {
width: 800px;
padding: 20px;
border: 2px dashed orange;
}
img {
box-sizing: border-box;
width: 200px;
}
img.active{
border: 2px solid red;
}
</style>
</head>
<body>
<h1>DOM 操作 -- 删除</h1>
<hr>
<img id="newImg" src="https://cdn.duitang.com/uploads/item/201507/27/20150727084803_cLrJP.thumb.700_0.jpeg">
<div id="box">
<div>点击替换</div>
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
</div>
<br>
<button id="emptyBtn">empty</button>
<button id="removeBtn">remove</button>
<button id="detachBtn">detach</button>
<button id="backBtn">恢复到后面</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var removeEle = null;
// 选中图片
$("#box img").click(function () {
$(this).toggleClass("active").siblings("img").removeClass("active");
});
$("#emptyBtn").click(function () {
// 清空里面所有内容
$("#box").empty();
});
$("#removeBtn").click(function () {
// 清空选中的内容
removeEle = $("img.active").remove();
});
$("#detachBtn").click(function () {
removeEle = $("img.active").detach();
});
$("#backBtn").click(function () {
$("#box").append(removeEle);
})
});
</script>
</body>
</html>
7. 克隆
- clone()
demo
<button id="cloneBtn">clone</button>
<script>
$("#cloneBtn").click(function () {
// 克隆出来的内容也没有事件绑定
$("img.active").clone().appendTo("#box");
});
</script>