标签：com none ide osi position function query dom order
HTML代码：
<div class="d1">
<span>波多</span>
</div>
jQuery代码：
$(‘#d1‘).append(‘<a href="http://www.jd.com">京东</a>‘);
结果：
<div class="d1">
<span>波多</span>
<a href="http://www.jd.com">京东</a>
</div>
HTML代码：
<div class="d1">
<span>波多</span>
</div>
jQuery代码：
$(‘#d1‘).prepend(‘<a href="http://www.jd.com">京东</a>‘);
结果：
<div class="d1">
<a href="http://www.jd.com">京东</a>
<span>波多</span>
</div>
HTML代码：
<div class="d1">
<span>波多</span>
</div>
jQuery代码：
$(‘#d1‘).after(‘<a href="http://www.jd.com">京东</a>‘);
结果：
<div class="d1">
<span>波多</span>
</div>
<a href="http://www.jd.com">京东</a>
HTML代码：
<div class="d1">
<span>波多</span>
</div>
jQuery代码：
$(‘#d1‘).before(‘<a href="http://www.jd.com">京东</a>‘);
结果：
<a href="http://www.jd.com">京东</a>
<div class="d1">
<span>波多</span>
</div>
HTML代码：
<div class="d1">
<span>波多</span>
</div>
jQuery代码：
$(‘.d1‘).empty()
结果：
<div class="d1">
</div>
HTML代码：
<div class="c1">
<span>波多</span>
</div>
<div>你好</div>
jQuery代码：
$(‘.c1‘).remove()
结果：
<div>你好</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 99;
}
.modal {
width: 300px;
height: 200px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="add">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>金老板</td>
<td>开车</td>
<td>
<button class="fire">开除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>景女神</td>
<td>茶道</td>
<td>
<button class="fire">开除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>苑昊（苑局）</td>
<td>不洗头、不翻车、不要脸</td>
<td>
<button class="fire">开除</button>
</td>
</tr>
</tbody>
</table>
<div class="cover hide"></div>
<div class="modal hide">
<div>
<label>姓名：
<input type="text" id="name">
</label>
</div>
<div>
<label>爱好：
<input type="text" id="hobby">
</label>
</div>
<button id="cancel" type="button">取消</button>
<button id="submit" type="button">提交</button>
</div>
<script src="jquery.js"></script>
<script>
// 开除按钮的功能
$("table").on(‘click‘, function () {
// 把当前行移除掉
//this --> 触发当前点击事件的DOM对象
$(this).parent().parent().remove(); // 链式操作
});
</script>
</body>
</html>
标签：com none ide osi position function query dom order
原文地址：https://www.cnblogs.com/Hedger-Lee/p/13063057.html
