一、添加/洗掉/替換/克隆
1.添加新元素
（1）DOM三步
//a.創建新的空物件
var 元素=document.createElement("標簽名")
//b.添加必要屬性
元素.屬性名=屬性值
//c.將新元素添加到DOM樹
//末尾追加新元素
父元素.appendChild(新元素)
//插入到現有元素之前
父元素.insertBefore(新元素, 現有元素)
//替換現有元素:
父元素.replaceChild(新元素, 現有元素)
（2）jQuery兩步
//a.用HTML片段批量創建多個元素，同時設定元素的屬性和內容
var $新元素=$(`HTML片段`)
//b.將新元素添加到DOM樹，有10個函式
//在父元素末尾追加新元素
$父元素.append($新元素) //return $父元素
$新元素.appendTo($父元素) //return $新元素
//在父元素下開頭插入一個新元素
$父元素.prepend($新元素) //return $父元素
$新元素.prependTo($父元素) //return $新元素
//插入到一個現有元素之前
$現有元素.before($新元素) //return $現有元素
$新元素.insertBefore($現有元素) //return $新元素
//插入到一個現有元素之后
$現有元素.after($新元素) //return $現有元素
$新元素.insertAfter($現有元素) //return $新元素
//替換現有元素
$現有元素.replaceWith($新元素) //return $現有元素
$新元素.replaceAll($現有元素) //return $新元素
2.洗掉元素
$元素.remove()3.克隆元素
$元素.clone()舉例：點按鈕添加方塊，點×洗掉方塊；
<head>
<style>
.container {
border: 1px solid #aaa;
overflow: hidden;
}
.block {
float: left;
margin: 10px;
border: 1px solid #aaa;
background: #faa;
width: 150px;
height: 150px;
}
.block:hover {
box-shadow: 0 5px 6px #000;
}
.close {
float: right;
padding: 5px;
font-weight: bold;
opacity: .2;
cursor: pointer;
}
.close:hover {
opacity: .5;
}
</style>
</head>
<body>
<h1>添加/洗掉節點</h1>
<button id="add-block">添加區塊</button>
<div class="container"></div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//一、點擊按鈕，添加新方塊
//DOM 4步
//1. 查找觸發事件的元素
//點擊按鈕觸發事件，因為多個方塊中的×都可點擊，所以用事件委托優化，事件應該只系結在父元素上一份即可
$("button")
//2. 系結事件處理函式
.click(function () {
//3. 查找要修改的元素
//4. 修改元素
//4.1創建一個新的方塊
$(`<div class="block"><span class="close">×</span></div>`)
//4.2設定隨機背景色
.css(
"background-color",
`rgb(${
parseInt(Math.random()*256)
},${
parseInt(Math.random()*256)
},${
parseInt(Math.random()*256)
})`
)
//4.3將新方塊追加到container div下的開頭位置
.prependTo(".container")
})
//二、洗掉之前添加的方塊
//DOM 4步
//1. 查找觸發事件的元素
//點擊按鈕觸發事件，因為多個方塊中的×都可點擊，所以用事件委托優化，事件應該只系結在父元素上一份即可
//事件委托第1步:
$(".container")
//2. 系結事件處理函式
.click(function (e) {
//判斷如果當前點擊的元素有class close，才能繼續執行操作
//事件委托第2步: e.target代替this
var $tar = $(e.target);
//3. 查找要修改的元素
//事件委托第3步: 判斷當前元素
if ($tar.html() == "×") {
$tar.parent()
//4. 修改元素
.remove();
}
})
</script>
</body>如圖所示，點擊”添加區塊“按鈕會在下方添加一個隨機顏色的方塊，點擊”ד即可洗掉當前方塊，
二、事件
1.事件系結
（1）DOM中有三種方法
a.在HTML中手工系結，但該方法很繁瑣且不便于維護；
b.在js中用賦值方式系結，但一個事件上只能系結一個處理函式；
c.在js中添加事件監聽物件；
元素.addEventListener("事件名",事件處理函式(){ ... })
元素.removeEventListener("事件名",原事件處理函式(){ ... })
（2）jQuery中有一種方法
$元素.on("事件名",事件處理函式(){ ... })
$元素.off("事件名",原事件處理函式) //移除一個事件監聽
//簡寫
$元素.事件名(事件處理函式)
可以使用簡寫的常用事件串列：
| 事件 | 含義 | 事件 | 含義 |
| blur | 失去焦點 | mousemove | 滑鼠移動 |
| click | 單擊 | mouseout | 滑鼠移出(dom) |
| dblclick | 雙擊 | mouseover | 滑鼠進入(dom) |
| focus | 獲得焦點 | mouseup | 滑鼠按鍵抬起 |
| keydown | 鍵盤按鍵按下 | resize | 視窗大小改變 |
| keyup | 鍵盤按鍵抬起 | scroll | 網頁滾動 |
| mousedown | 滑鼠按鍵按下 | mouseleave | 滑鼠移出(jq) |
| mouseenter | 滑鼠進入(jq) |
應注意在jQuery中系結和移除事件需要用有名稱的函式，可以同時系結多個事件監聽物件，但移除時，所有同名的事件處理函式會被一次性全部移除，
舉例：點按鈕發射子彈，可發射多種子彈，也可移除子彈；
<body>
<h1>事件系結</h1>
<button id="btn1">發射子彈</button>
<button id="btn2">獲得獎勵</button>
<button id="btn3">失去獎勵</button>
<script src="js/jquery-1.11.3.js"></script>
<script>
//點btn1時，發射普通子彈
$("#btn1").click(function () {
console.log(`發射普通子彈！`);
})
var shoot2 = function () {
console.log(`獲得獎勵+1`);
}
//點btn2時，給btn1多加一種跟蹤導彈
$("#btn2").click(function () {
$("#btn1").click(shoot2);
})
//點btn3時，從btn1移除跟蹤導彈
$("#btn3").click(function () {
$("#btn1").off("click", shoot2)
})
</script>
</body>2.jQuery中的事件委托
當多個平級子元素都要系結相同的事件時，就需要用到事件委托，
（1）DOM事件委托三步（重點）
a.事件只系結在父元素上一份;
b.e.target代替this ；
c.判斷當前目標元素是不是想要的，
（2）jQuery事件委托三步（了解）
a.事件系結在父元素上一份，必須用on()方式系結;
b.不用e.target代替this，jQuery中this指向最初實際點擊的目標元素；
c.$父元素.on("click","選擇器條件",事件處理函式)，
3.頁面加載后自動執行
由于網頁是順序執行的，所以放在外部js檔案中的js代碼，在結尾引入時是有效的，三在網頁開頭引入就無效，
如果想要js初始化操作，必須在網頁內容加載完成后才能執行，不要提前執行，就要用window.οnlοad=function(){ }；凡是放在window.οnlοad=function(){ }中的代碼，無論寫在哪兒都會在整個網頁內容加載完成(觸發load事件)后，才自動執行，
如下舉例：
<body>
<button id="btn1">click me 1</button>
<button id="btn2">click me 2</button>
</body>
<script>
window.onload = function () {
console.log(`當頁面加載完成后自動執行，`);
$("#btn1").click(function () {
console.log(`別點了！`);
})
$("#btn2").click(function () {
console.log(`再次警告！！！`);;
})
})
</script>但是，如果兩個js檔案中都有window.οnlοad=function(){ }，則只有最后引入的一個js檔案中的window.οnlοad=function(){ }會保存下來，造成覆寫，所以用到新寫法，該將所有window.οnlοad=function(){ }都換為window.addEventListener("load",function(){ })；
還應注意，load事件必須等待所有網頁內容（HTML+JS+CSS+圖片）都加載完才能觸發，在網頁加載程序中，有兩次加載完成事件：
（1）首先僅DOM內容(HTML+JS)加載完成：DOMContentLoaded
（2）然后才是所有網頁內容加載完成（load）
今后只要不依賴與css和圖片的初始化操作，都應該系結到DOMContentLoaded事件上，如下：
window.addEventListener(
"DOMContentLoaded",
function(){ ... }
)
簡寫：
$(document).ready(function(){ ... })
$().ready(function(){ ... })
$(function(){ ... }) //常用
$(()=>{ ... })
舉例：僅DOM內容加載完成時，就提前給按鈕系結單擊事件；
<body>
<button id="btn1">click me 1</button>
<button id="btn2">click me 2</button>
</body>
<script>
//window.onload = function () {
//window.addEventListener("load", function () {
$(function () {
console.log(`當頁面加載完成后自動執行，`);
$("#btn1").click(function () {
console.log(`別點了！`);
})
$("#btn2").click(function () {
console.log(`再次警告！！！`);;
})
})
// }
//})
</script>4.滑鼠事件
（1）DOM
| mouseover | 滑鼠進入 |
| mouseout | 滑鼠離開 |
以上兩種即使反復進出子元素，也會反復觸發父元素上的滑鼠進出事件，存在一定的問題，新的事件為：
| mouseenter | 滑鼠進入 |
| mouseleave | 滑鼠離開 |
簡化寫法：如果同時系結滑鼠進入和滑鼠離開兩個事件，只需要系結一個hover()即可，但只在jQuery中適用，格式如下：
$元素.hover( //等同于滑鼠進入mouseenter和滑鼠移出mouseleave
function(){ ... }, //給mouseenter
function(){ ... }, //給mouseleave
)
舉例：使用mouseenter和mouseover系結滑鼠進出事件，并使用hover簡化滑鼠進出事件；
<body>
<div id="target">
<p>Lorem ipsum dolor sit amet</p>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//當滑鼠進入#target時，添加class hover；當滑鼠離開#target時，移除class hover
// $("#target").mouseenter(function () {
// $(this).addClass("hover")
// })
// $("#target").mouseleave(function () {
// $(this).removeClass("hover")
// })
//簡寫
$("#target").hover(function () {
$(this).toggleClass("hover")
//替換函式toggleClass，表示mouseenter與mouseleave切換
})
</script>
</body>5.模擬觸發
即使沒有點在按鈕上，也能觸發按鈕上的單擊事件處理函式，
$元素.trigger("事件名")如果要觸發的事件屬于常見事件串列，還可以省略trigger()，簡寫為：
$元素.事件名()轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304986.html
標籤：其他
上一篇：原碼、反碼、補碼&浮點型別的存盤