我是辰兮，很高興你能來閱讀，本章jQuery進階，用案例詳細的講解了jQuery的DOM操作，每一個操作都有詳細的案例以及截圖，希望對你有幫助，分享獲取新知，大家一起進步。
上一篇文章：初識jQuery-DOM
一、 序言
本篇文章繼續補充：使用jQuery提供的函數完成節點的操作
給你我寫這篇文章的調試代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
//1.添加子節點
$("#container").append("<img src='img/1.jpg' style='width: 100px;'/>");
//child.appendTo("#container");
$("#myImg").appendTo("#container");
})
$("#btn2").click(function() {
//2.插入節點
$("#container").prepend("<img src='img/2.jpg' style='width: 100px;'/>");
//3.插入節點
$("#photo").prependTo("#container");
});
$("#btn3").click(function() {
//4.將新節點插入到舊節點之前
$("#myImg").before("<img src='img/3.jpg' height='150' />")
});
$("#btn4").click(function() {
//5.移除節點
$("#container").remove();
});
});
</script>
</head>
<body>
<input type="button" value="測試" id="btn1" />
<input type="button" value="測試" id="btn2" />
<input type="button" value="測試" id="btn3" />
<input type="button" value="測試" id="btn4" />
<div id="container" style="width: 300px; height: 300px;border: 1px deeppink solid ;position: absolute; top: 15%; left: 10%;">
</div>
<img src="img/2.jpg" height="50" id="myImg" />
<img src="img/3.jpg" height="50" id="photo" />
</body>
</html>
圖片1.jpg
圖片2.jpg
圖片3.jpg
- ps : 自己一定要記得導入jQuery哦
二、添加子節點
| 函數 | 含義 |
|---|---|
| append() | 向匹配元素集合中的每個元素結尾插入由參數指定的內容。 |
| appendTo() | 向目標結尾插入匹配元素集合中的每個元素。 |
初始的樣板圖如下所示
$("#btn1").click(function() {
//1.添加子節點
$("#container").append("<img src='img/1.jpg' style='width: 100px;'/>");
//child.appendTo("#container");
$("#myImg").appendTo("#container");
})
執行第一個測試按鈕，顯示如圖所示，將兩個圖片加入到容器中
對應的div塊中添加了兩個元素
三、插入子節點（在容器的最前面添加子節點）
| 函數 | 含義 |
|---|---|
| append() | 向匹配元素集合中的每個元素結尾插入由參數指定的內容。 |
| prepend() | 在被選元素的開始插入內容。 |
$("#btn2").click(function() {
//2.插入節點
$("#container").prepend("<img src='img/2.jpg' style='width: 100px;'/>");
//3.插入節點
$("#photo").prependTo("#container");
});
執行後我們查看對應的HTML頁面元素變化
四、插入節點
$("#btn3").click(function() {
//4.將新節點插入到舊節點之前
$("#myImg").before("<img src='img/3.jpg' height='150' />")
});
執行後我們查看對應的HTML頁面元素變化，發現多出來了一行
五、移除節點
$("#btn4").click(function() {
//5.移除節點
$("#container").remove();
});
執行後我們查看對應的HTML頁面元素變化，發現對應的容器已經移除
六、html([str]) 函數
實例的參考代碼如下可以自行運行
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5</title>
<style></style>
<!--不需要再次引用jquery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
var v = $("#p標籤").html();
alert(v)
})
})
</script>
</head>
<body>
<input type="button" value="屬性操作" id="btn1" />
<div id="container" style=" height: 100px;border: 2px solid blue;margin: 2px auto;width: 200px;">
<p id="p標籤">這是一個div塊</p>
</div>
</body>
</html>
初始界面圖
使用函數獲取標籤內的文字，爲了驗證獲取成功我們將文字彈出框打印了出來
七、text([str]) 函數
//container.text(str) : 參數字符直接作爲文本設置到容器中（會覆蓋容器中原有的內容）
$("#container").text("<input type='button' value='動態按鈕'/>");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
var v = $("#container").text();
console.log(v);
alert(v);
})
$("#btn2").click(function() {
$("#container").text("<input type='button' value='動態按鈕'/>");
})
});
</script>
</head>
<body>
<input type="button" value="按鈕1" id="btn1" />
<input type="button" value="按鈕2" id="btn2" />
<hr />
<div id="container">文本的內容</div>
</body>
</html>
首先初識的頁面如圖
然後執行第一個函數獲取文本內容
$("#btn1").click(function() {
var v = $("#container").text();
console.log(v);
alert(v);
})
再執行第二個函數，直接覆蓋掉容器的內容，解放如圖所示
$("#btn2").click(function() {
$("#container").text("<input type='button' value='動態按鈕'/>");
})
The best investment is to invest in yourself
2020.05.07 記錄辰兮的第63篇博客