前端-part9-jQuery操作样式二：元素追加+事件冒泡
原创前端-part9-jQuery操作样式二：元素追加+事件冒泡
原创
少年包青菜
修改于 2022-05-28 16:27:43
修改于 2022-05-28 16:27:43
1.添加到指定元素 内部 的后面
$(A).append(B); // 把 B 追加到 A
$(A).appendTo(B); // 把 A 追加到 B2.添加指定元素 内部 的前面
$(A).preappend(B); // 把 B 前置到 A
$(A).preappendTo(B); // 把 A 前置到 B3.添加到指定元素的 外部 的后面
$(A).after(B); // 把 B 放到 A 的后面
$(A).insertAfter(B); // 把 A 放到 B 的后面4.添加到指定元素 外部 的前面
$(A).before(B); // 把 B 放到 A 的前面
$(A).insertBefore(B); // 把 A 放到 B 的前面5.移除和清空元素
remove() // 从 DOM 中删除所有匹配的元素
empty() // 删除匹配的元素集合中所有的子节点6.关于登录时验证用户名或者密码不能为空的例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>我的登录验证</title>
<style>
</style>
</head>
<body>
<form action="" id="f1">
<p>
<label>用户名：
<input type="text" name="username" id="i1">
<span></span>
</label>
</p>
<p>
<label>密码：
<input type="password" name="password" id="i2">
<span></span>
</label>
</p>
<button type="button" id="b1">登录</button>
</form>
<script src="jquery-3.3.1.js"></script>
<script>
$("#b1").click(function () {
var $inputEle_s = $("#f1 input"); // 首先找到 input 元素
for (var i = 0; i < $inputEle_s.length; i++) {
var tmp = $inputEle_s[i];
if ($(tmp).val().length === 0) { // 如果 value 为空
console.log($(tmp).parent().text().trim().slice(0, -1));
// .当前标签.父标签.文本.去空格.截取去冒号的文本串
var s = $(tmp).parent().text().trim().slice(0, -1);
$(tmp).next().text(s + "不能为空").css("color", "red");
}
}
});
</script>
</body>
</html>8.关于全选和取消全选以及反选的例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>全选和反全选</title>
<style>
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>二哈</td>
<td>食屎</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>金毛</td>
<td>撸管</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>柴柴</td>
<td>装逼</td>
</tr>
</tbody>
</table>
<hr>
<button id="b1">全选</button>
<button id="b2">反选</button>
<button id="b3">取消</button>
<script src="jquery-3.3.1.js"></script>
<script>
$("#b1").click( //定位到 "全选"
function () {
$(":checkbox").prop("checked", true); // 将 "checked" 属性设置为 true，即全选上
}
);
$("#b3").click( //定位到 "取消"
function () {
$(":checkbox").prop("checked", false);// 将 "checked" 属性设置为 false，即全不选
}
);
$("#b2").click(function() {
var $check_s = $(":checkbox");
for (var i = 0; i < $check_s.length; i++) {
var tmp = $check_s[i]; // 遍历所有的 "checkbox"
var s = $(tmp).prop("checked"); // 依次获得他们的 "checked" 属性值
$(tmp).prop("checked", !s); // 设置为 ！属性，即全部为对应反属性
}
}
)
</script>
</body>
</html>9.文件操作之添加操作 ( 设置 PyCharm 的 JavaScript 的 language version 为 ECMAScript 6 )
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>我的文件操作</title>
<style>
</style>
</head>
<body>
<button id="b1">添加</button>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>二哈</td>
<td>食屎</td>
<td>
<button class="delete">开除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>金毛</td>
<td>装逼</td>
<td>
<button class="delete">开除</button>
</td>
</tr>
</tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
$("#b1").click(function () { // 定位到 "添加" 这个按钮
var trEle = document.createElement("tr"); // 创造一个元素
trEle.innerHTML = `
<td>2</td>
<td>柴犬</td>
<td>切糕</td>
<td><button class="delete">开除</button></td>
`;
$("tbody").append(trEle) // 添加一行
})
</script>
</body>
</html>10.文件操作之复制操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>我的操作</title>
<style>
</style>
</head>
<body>
<button id="i1">屠龙宝刀，点击就送</button>
<script src="jquery-3.3.1.js"></script>
<script>
$("#i1").click(
function () {
$(this).clone(true).insertAfter(this)
// clone 为 jQuery 的复制方法
// 内部设置为 true 即代表复制出来的元素同样具备初始标签的 clone 方法
// 如果后面遗忘了，可是把 this 去掉，点击其他生成按钮
// 妈的，学你妈的前端啊，心真累...
}
);
setInterval(f, 10)
</script>
</body>
</html>11.关于事件的冒泡
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>我的事件冒泡</title>
<style>
</style>
</head>
<body>
<div id="grandfather">
<div id="father">
<div id="son">儿子</div>
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$("#grandfather").click(
function(){
alert("爷爷辈的")
}
);
$("#father").click(
function(){
alert("爸爸辈的")
}
);
$("#son").click(
function(event){
alert("儿子辈的");
event.stopPropagation()
// 阻止事件向上级冒泡，不然上面的 alert 会都弹出来的
// 如果后面忘了，可以试着去掉 event.stopPropagation() 这句话
}
)
</script>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录