1 文檔的處理
文檔處理
###1-1把新創(chuàng)建的li標簽添加到ul標簽里面的后面
代碼塊
先創(chuàng)建一個liele標簽
var liele=document.createElement('li');
給空標簽賦值
liele.innerText='哪吒';
將標簽添加到ul
$('#u1').append(liele);
1-2把新創(chuàng)建的li標簽添加到ul標簽里面的前面
代碼塊
var e1ele=document.createElement('li');
e1ele.innerText='樸樹';
$('#u1').prepend(e1ele);
1-3 remove()刪除匹配元素
代碼塊
刪除id=d1的標簽
$('#d1').remove();
刪除u1里面的li
$('#u1').empty();
2 點擊刪除按鈕寨蹋，刪除一行，點擊添加按鈕江咳，添加一行
image.png
代碼塊
<!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</title>
</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>gay in gay out</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 () {
// 在表格的最后添加一行數(shù)據(jù)
// 1. 先有數(shù)據(jù)
var trEle = document.createElement("tr"); // trEle是一個DOM對象
// var tdEle1 = document.createElement("td");
// tdEle1.innerText = "3";
// $(trEle).append(tdEle1);
// var tdEle2 = document.createElement("td");
// tdEle2.innerText = "黃袍哥";
// $(trEle).append(tdEle2);
// var tdEle3 = document.createElement("td");
// tdEle3.innerText = "吹牛逼";
// $(trEle).append(tdEle3);
trEle.innerHTML = `
<td>3</td>
<td>黃袍哥</td>
<td>吹牛逼</td>
<td><button class="delete">開除</button></td>
`;
// 2. 追加到tbody的最后
$("tbody").append(trEle);
})
</script>
</body>
</html>
3：replaceWith()替換標簽
代碼塊
var aele=document.createElement('a');
aele.innerText='baidu';
$(aele).attr('href','http://www.baidu.com');
$('p').replaceWith(aele);
4 clone克隆
代碼塊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<button class="btn">屠龍寶刀逢净，點擊就送</button>
<script src="jquery-3.4.1.min.js"></script>
<script>
$('.btn').click(function(){
<!--$(this).after($('.btn ').clone());-->
$(this).clone().insertAfter(this);
});
</script>
</body>
</html>
5 給標簽綁定事件方式
image.png
6 常用的事件
image.png
7 冒泡事件
7-1 通過JS添加新的按鈕，但是按鈕不會產(chǎn)生效果
代碼塊
<!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</title>
</head>
<body>
<button id="b1">點我</button>
<hr>
<button class="c1">蠅蠅</button>
<script src='../../../../../Users/hello王思雨/Desktop/jquery-3.4.1.min.js'></script>
<script>
// 1. 定義一個函數(shù)
function f() {
alert(123);
}
$("#b1").on("click", function () {
f();
});
$('.c1').click(function(){
alert(123);
});
// 利用事件冒泡的原理歼指，進行事件委托 爹土，把.c1樣式類的事件委托給父標簽body來處理
<!--$("body").on("click", ".c1", function () {
<!-- alert("蠅蠅");-->
<!-- });-->
</script>
</body>
</html>
操作js代碼添加新的BUTTON按鈕
代碼塊
var btn=document.createElement('button');
btn.innerText='進入';
$(btn).addClass('c1');
$('body').append(btn);
7-2 通過冒泡添加新的按鈕。此時新的按鈕也會應(yīng)用之前的樣式生效踩身。
代碼塊
<!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</title>
</head>
<body>
<button id="b1">點我</button>
<hr>
<button class="c1">蠅蠅</button>
<script src='../../../../../Users/hello王思雨/Desktop/jquery-3.4.1.min.js'></script>
<script>
// 1. 定義一個函數(shù)
function f() {
alert(123);
}
$("#b1").on("click", function () {
f();
});
// 利用事件冒泡的原理胀茵，進行事件委托 ，把.c1樣式類的事件委托給父標簽body來處理
$("body").on("click", ".c1", function () {
alert("蠅蠅");
});
</script>
</body>
</html>
8： stopPropagation()阻止事件向上傳遞挟阻。
當(dāng)我們給夫標簽添加點擊事件琼娘，點擊子標簽的時候也會出現(xiàn)綁定事件，點擊的時候附鸽，會一層一層往上找脱拼，逐個執(zhí)行點擊事件。stopPropagation()可以阻止向上傳播坷备。
代碼塊
<!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</title>
</head>
<body>
<div id="d1">
<p id="p1">
<span id="s1">span</span>
</p>
</div>
<script src='../../../../../Users/hello王思雨/Desktop/jquery-3.4.1.min.js'></script>
<script>
$("#d1").click(function () {
alert("div");
});
$("#p1").click(function () {
alert("ppp")
});
$("#s1").click(function (e) {
alert("sss");
// 阻止事件向上級傳遞
e.stopPropagation();
})
</script>
</body>
</html>
