JavaScipt

最新推荐文章于 2024-07-09 13:46:29 发布

原创最新推荐文章于 2024-07-09 13:46:29 发布 · 115 阅读

CC 4.0 BY-SA版权

创建元素节点

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>