创建元素节点
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>