jQuery-jQuery文档处理
Posted hedger-lee
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery-jQuery文档处理相关的知识，希望对你有一定的参考价值。
jQuery文档处理
append 内部后插入
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>
prepend 内部前插入
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>
after 外部后插入
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>
before 外部前插入
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>
empty 删除标签内部的标签
HTML代码：
<div class="d1">
<span>波多</span>
</div>
jQuery代码：
$(‘.d1‘).empty()
结果：
<div class="d1">
</div>
remove 删除标签
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>
以上是关于jQuery-jQuery文档处理的主要内容，如果未能解决你的问题，请参考以下文章
Asp.net入门3-02使用jQuery-jQuery 入门
[ jquery 文档处理 insertBefore(content) before(content|fn) ] 此方法用于把所有匹配的元素插入到另一个指定的元素元素集合的前面,实现外部插入(代码片段