DOM操作 属性操作 对class属性操作
1 addClass(); 添加属性值
2 prepend 父元素将子元素增加到开头
3 appendTo(); 在末尾添加
4 preparedTo() 在头部添加
5 before()/insertBefore() 放在指定位置的前面
6 after()/insertAfter() 放在指定位置的后面
7 .remove();删除指定内容
8 .empty() 删除所有
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.min.js"></script>
<style>
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #999ccc;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: roman;
}
div.visible{
display:none;
}
</style>
<script type="text/javascript">
$(function () {
// 将吃鸡放置到city 的后面 append/appendTo
$("#b1").click(function () {
// 方法1
// $("#city").append($("#cj"));
// 后面添加方法2
$("#cj").appendTo($("#city"));
});
// 将吃鸡放置到city 的最前面 语法prepend/prependTo
$("#b2").click(function () {
// 方法1
// $("#cj").prependTo($("#city"));
// 方法2
$("#city").prepend($("#cj"));
});
// 放在指定位置后面
// 将吃鸡放置到上海的的后面 语法 after()/insertAfter()
$("#b3").click(function () {
// 方法1
// $("#sh").after($("#cj"));
// 方法2
$("#cj").insertAfter($("#sh"));
});
// 放在指定位置前面
// 将吃鸡放置到上海的的前面 语法 before()/insertBefore()
$("#b4").click(function () {
// 方法1
// $("#sh").before($("#cj"));
// 方法2
$("#cj").insertBefore($("#sh"));
});
// 删除li 北京 语法 .remove();
$("#b5").click(function () {
$("#bj").remove();
});
// 删除city下面的所有内容 语法 .empty()
$("#b6").click(function () {
$("#city").empty();
});
});
</script>
</head>
<body>
<input type="button" value="save" class="mini" name="ok" class="mini"/>
<input type="button" value="将吃鸡放置到city 的后面" id="b1" />
<input type="button" value="将吃鸡放置到city 的最前面" id="b2"/>
<input type="button" value="将吃鸡放置到上海的的后面" id="b3"/>
<input type="button" value="将吃鸡放置到上海的的前面" id="b4"/>
<input type="button" value="删除<li>北京</li>" id="b5"/>
<input type="button" value="删除所有的子节点" id="b6"/>
<ul id="city">
<li id="bj" name="beijign">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="zz" name="chongqing">郑州</li>
</ul>
<ul id="love">
<li id="cj" name="chiji">吃鸡</li>
<li id="wz" name="wangzhe">王者农药</li>
</ul>
<div id="fool">hellod</div>
</body>
</html>