創建元素節點
var elem = document.createElement("元素名");
elem:表示創建好的DOM元素
增加節點
1.document.body.appendChild(elem);
向body 中追加新元素elem
2.parentNode.appendChild(elem);
parentNode:表示的是一個已存在的元素
將elem追加到parentNode的內部
3.parentNode.insertBefore(newelem,oldElem)
將newElem元素插到parentNode的oldElem之前
刪除節點
刪除節點只能由父元素髮起
1.document.body.removeChild(elem)
刪除body中的elem元素
2.parentNode.removeChild(elem)
在parentNode中刪除elem元素
購物車練習
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
border : 1px solid #000;
width: 500px;
border-collapse:collapse;
}
#container td{
border: 1px solid #000;
text-align:center;
vertical-align:middle;
}
#increase{
width:500px;
}
#increase input{
width:125px;
}
#increase button{
width:97px;
vertical-align:middle;
}
</style>
</head>
<body>
<div id = "increase">
<input type="text" placeholder = "商品名稱">
<input type="text" placeholder = "商品價格">
<input type="text" placeholder = "購買數量">
<button onclick = "btnIncrease()">增加</button>
</div>
<table id = "container">
<tr>
<td>商品名稱</td>
<td>商品價格</td>
<td>購買數量</td>
<td>操作</td>
</tr>
</table>
<script src = "common.js"></script>
<script>
function btnIncrease(){
//1.獲取div 的元素
var elem = $("increase");
//2.創建一個tr
var tr = document.createElement('tr');
//循環遍歷 將 div 中 的 input 的value 值增加到 td 中
for (var i = 0;i<elem.children.length -1 ;i++ )
{
var td = document.createElement("td");
//3.點擊增加獲取input 中的value 值
td.innerHTML = elem.children[i].value;
//將td 增加到tr 中
tr.appendChild(td);
}
//增加 修改跟刪除按鈕
var td_two = document.createElement("td");
var incre = document.createElement("button");
incre.innerHTML = "修改";
var dele = document.createElement("button");
dele.innerHTML = "刪除";
td_two.appendChild(incre);
td_two.appendChild(dele);
//將td 增加到tr 中
tr.appendChild(td_two);
//4.將獲取到的 tr 值增加到table中;
//1 獲取table 的元素對象
var table = $("container");
container.appendChild(tr);
}
</script>
</body>
</html>
事件
#1.什麼是事件
允許通過特殊的行爲來激發的操作
2常用的操作
click:鼠標操作
2.mouseover:鼠標進入元素激發的事件
3.mousemove:鼠標在元素內移動時激發的事件
4.mouseout:鼠標從元素內移出時激發的事件
2.鍵盤操作
keydown:鍵位按下時的操作
keypress:鍵位按下時的操作
keyup:鍵位擡起時的事件
3.狀態改變事件
load:當元素加載完畢時觸發的事件
change:當元素髮生改變時觸發的事件
focus:當元素獲取焦點時觸發的事件
blur: 當元素失去焦點時觸發的事件
submit:當表單被提交時觸發的事件
當爲html 綁定事件時,必須在事件名前加on
1.爲某元素綁定load事件 -> onload
綁定事件的方式
1.在元素中去綁定事件
<button onclick = ""></button>
2.在js中動態的爲元素綁定事件
<script>
var div = $("d1");
div.on事件名 = function(){
}
</script>
load 事件
適用場合 當網頁加載完畢時，要執行的操作
方式1: 在元素中綁定事件
<body onload = "函數()"></body>
方式2:js中動態綁定
<script>
window.onload = funcion(){}
</script>