前端-jQuery-操作标签-文档操作
jQuery文档操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文档操作示例</title>
</head>
<body>
<ul id="u1">
<li id="l1">1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="jquery-3.2.1.min.js"></script>
<script>
//添加标签到指定标签的后面
//使用原生的dom
var liEle = document.createElement("li");//创建
liEle.innerText = 0;//设置值
$("#u1").append("liEle");//在最末尾添加
$(liEle).appendTo("#u1");//这是另外一种写法，效果和上面一样
$("#u1").prepend("liEle");//在最前面添加
$(liEle).prependTo("#u1");//这是另外一种写法，效果和上面一样
/*
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
* */
// $("#u1").remove();// 直接把ul标签，和内部的子标签都删除了，
// $("#u1").empty();// 清空内部的子节点
</script>
</body>
</html>
############### jQuery文档操作-添加一行记录 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>点击在表格最后添加一条记录</title>
</head>
<body>
<table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
<tbody>
</thead>
<tr>
<td>1</td>
<td>小强</td>
<td>吃冰激凌</td>
<td>
<button class="delete">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>二哥</td>
<td>Girl</td>
<td>
<button class="delete">删除</button>
</td>
</tr>
</tbody>
</table>
<button id="b1">添加一行数据</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 绑定事件
$("#b1").click(function () {
// 生成要添加的tr标签及数据
var trEle = document.createElement("tr");
$(trEle).html("<td>3</td>" +
"<td>小东北</td>" +
"<td>社会摇</td>" +
"<td><button class='delete'>删除</button></td>");
// 把生成的tr插入到表格中
$("#t1").find("tbody").append(trEle);
});
// 每一行的=删除按钮绑定事件
$(".delete").click(function () {
$(this).parent().parent().remove();
});
</script>
</body>
</html>
############### jQuery-文档操作-替换操作 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>替换操作示例</title>
</head>
<body>
<p><a href="http://www.sogo.com">aaa</a></p>
<p><a href="">bbb</a></p>
<p><a href="">ccc</a></p>
<button id="b1">点我!</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#b1").click(function () {
// 创建一个img标签
var imgEle = document.createElement("img");
$(imgEle).attr("src", "http://img4.imgtn.bdimg.com/it/u=1316130882,2083273552&fm=26&gp=0.jpg");
$("a").replaceWith(imgEle);
// $(imgEle).replaceAll("a");
});
</script>
</body>
</html>
############### jQuery文档操作-克隆操作 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>克隆示例</title>
</head>
<body>
<button id="b1">屠龙宝刀,点我就送!</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#b1").click(function () {
$(this).clone().insertAfter(this);
});
</script>
</body>
</html>
###
###
技术改变命运
浙公网安备 33010602011771号