概念：DOM 文檔對象模型（必考），jQuery Dom應該是之前的DOM加了個jQuery的封裝。
分類：DOM操作分爲三類： DOM Core：任何一種支持DOM的編程語言都可以使用它，如getElementById()，js。 HTML-DOM：用於處理HTML文檔，如document.forms CSS-DOM：用於操作CSS，如element.style.color="green"
jQuery對JavaScript中的DOM操作進行了封裝。
jQuery中的DOM操作
4.1 樣式操作
之前的樣式設置： 選擇器對象.css('屬性','值') 比如：
$("p").css("color",'red')
增加樣式：
$("p").addClass('bgStyle')
toggle:模擬連續點擊;
toggleClass:如果存在就刪除一個類,如果不存在，則添加這個樣式。
4.2 追加節點
| 語法 | 功能 |
|---|---|
| append(content) | $(A).append(B)表示將子元素B追加到A中 |
| prepend(content) | $(A). prepend (B)表示將子元素B前置插入到A中 |
| before(content) | $(A). before (B)表示將B插入至A之前 |
| after(content) | $(A).after (B)表示將B插入到A之後 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>追加節點</title>
<style>
@import url("css/games.css")
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//在按鈕上單擊的時候，進行操作;
$("#app").click(function(){
//操作的選擇器對象是ul無序列表;
//後置：$(".gameList").append("<li>王者範.</li>")
//加到了ul的子元素li列表的後面；
//$(".gameList").prepend("<li>雨鑫戰神</li>")
//before after
//before:在當前節點之前，增加一個元素，不屬於當前節點。
//$(".gameList").before("<ul><li>海文澤拉斯</li></ul>")
$(".gameList").after("<ul><li>海文澤拉斯</li></ul>")
})
})
</script>
</head>
<body>
<div class="cont">
<ul class="gameList">
<li>三星老船長</li>
<li>艾澤拉斯</li>
<li>起拉希姆</li>
</ul>
</div>
<button id="app">追加</button><!--用一個按鈕來做測試，更簡單-->
</body>
</html>
4.3 節點操作函數
選取的是比較重要的節點操作函數。
| 語法 | 功能 |
|---|---|
| remove() | 刪除節點 |
| empty() | 清空節點內容 |
| replaceWith() | 替換節點 |
| clone() | 複製節點 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作節點</title>
<style>
@import url("css/games.css")
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//在按鈕上單擊的時候，進行操作;
$("#app").click(function(){
//1.刪除節點的操作;刪除某個節點：現在要刪除艾澤拉斯;
//$(".gameList li:eq(1)").remove();
//2.清空節點內容：是刪除嗎？？？相當於設置了html('')
// $(".gameList li:eq(1)").empty();
//3.replaceWith：需要注意一下;如果不成可以加$("<li>四星小船長</li>")
// $(".gameList li:eq(1)").replaceWith("<li>四星小船長</li>")
//4.克隆：clone(),我們使用的時候就不加參數了.
//首先$(".gameList li:eq(1)").clone()：克隆;
//第二步：追加到$(".gameList")最後；
$(".gameList").prepend($(".gameList li:eq(1)").clone());
})
})
</script>
</head>
<body>
<div class="cont">
<ul class="gameList">
<li>三星老船長</li><!--li序號:0-->
<li><a href='#'>艾澤拉斯</a></li><!--li序號:1-->
<li>起拉希姆</li><!--li序號:2-->
</ul>
</div>
<button id="app">克隆</button><!--用一個按鈕來做測試，更簡單-->
</body>
</html>
4.4屬性節點
首先要了解什麼是屬性節點。
<img src='圖片路徑' title='超級炫圖片'/
src，title就是img的屬性，在DOM裏面就是屬性節點。
| 語法 | 功能 |
|---|---|
| attr() | 獲取屬性節點 |
| attr({name1:value1，..n,nameN:valueN}) | 設置屬性節點的多個屬性的值 |
| removeAttr(屬性名) | 刪除指定的屬性節點 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作節點</title>
<style>
@import url("css/games.css")
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//在按鈕上單擊的時候，進行操作;
$("#app").click(function(){
//來獲取一下src,這個圖片的路徑信息;好處：可以得到路徑信息，
//將來可以修改.
alert($("img").attr('src'));
//設置圖片的路徑信息;attr('屬性','值')
//$("img").attr('src','img/2aa.jpg');
//升級：男變女了，加樣式:
$("img").attr('src','img/2aa.jpg').addClass('mm');
//刪除樣式：這個需要在查看器來看一下。
$("img").removeAttr('title');
})
})
</script>
</head>
<body>
<div class="cont">
<img src="img/men.jpg" title="純爺們"/>
<ul class="gameList">
<li>三星老船長</li><!--li序號:0-->
<li><a href='#'>艾澤拉斯</a></li><!--li序號:1-->
<li>起拉希姆</li><!--li序號:2-->
</ul>
</div>
<button id="app">屬性節點的操作</button><!--用一個按鈕來做測試，更簡單-->
</body>
</html>
4.5 遍歷函數
實際它屬性節點的查找：
複習：first() last() sibings()都是查找；
| 語法 | 功能 |
|---|---|
| each() | 遍歷節點 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>追加節點</title>
<style>
@import url("css/games.css")
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//在按鈕上單擊的時候，進行操作;
/* $("#app").click(function(){
//當我們在這個按鈕上進行單擊的時候，逐個獲取li的信息內容
//然後打印輸出;
//each的前面是需要逐個遍歷的選擇器對象；當前是li,所以：$("li")
$("li").each(function(){
let str=$(this).text();//text（）注意;
//alert(str);
//變了：追加到span
$("span").append(str);
})
}) */
//each前面的選擇器一定是有好幾個的元素對象；
$("#app").click(function(){
//下面要遍歷+-* /四個按鈕，得到其內容;
$(".calc").each(function(){
alert($(this).text());//就可以根據得到+-*/來完善之前的計算器了;
// let op=$(this).text();
// switch(op){
// case '+':加操作;break;
}
})
})
})
</script>
</head>
<body>
<div class="cont">
<ul class="gameList">
<li>三星老船長</li>
<li>艾澤拉斯</li>
<li>起拉希姆</li>
</ul>
</div>
<span></span>
<button id="app">遍歷按鈕</button><!--用一個按鈕來做測試，更簡單-->
<button class="calc">+</button class="calc"><button>-</button>
<button class="calc">*</button><button class="calc">/</button>
</body>
</html>
總結：
1.toggleClass():有樣式，則刪除，沒有則增加樣式；
2.追加節點有4個，2個子元素街邊；2個兄弟元素級別；
3.節點操作就是刪除、清空、複製、替換（刪改）
4.屬性節點：attr() attr('name','name)
5.節點的遍歷，注意使用：$("選擇器").each()