JS基础(6)

其他 2020-04-15 20:37:03 阅读次数: 0

JS基础(6)

一，DOM

1.1 概念

文档对象模型，定义了访问和操作文档的模型

DOM操作：对元素进行获取、创建、删除的操作

1.2 元素对象的获取

document.getElementById(id值)
document.getElementsByTagName(标签名)
document.getElementsByName(name值)
document.getElementsByClassName(class值)

1.3 元素的创建、添加

createElement()：创建元素节点
appendChild()：向标签内末尾添加新的子元素
createTextNode()：创建文本节点

1.4 元素的删除

removeChild()

1.5 标签体的设置和获取

innerHTML
innerText

1.innerText和innerHTML都可以为双标签的标签体进行内容的设置，
而innerText只能设置文本内容，innerHTML可以设置html结构
value只能对本身就具有value属性的标签设置内容
	
2.innerText和innerHTML都可以获取标签体的内容，
而innerText只能获取文本内容，innerHTML可以获取内部结构，
value只能获取本身就具有value属性的标签的value值

二，全选和反选的案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			onload = function(){
				cb = document.getElementById("cb");
				cs = document.getElementsByClassName("c");
				cb.onclick = function(){
					for(var i = 0;i<cs.length;i++){
						cs[i].checked = cb.checked;						
					}
				}
			}
			function reverse(){
				var flag = true;
				for(var i = 0; i < cs.length ;i++){
					cs[i].checked = !cs[i].checked;
					if(!cs[i].checked){
						flag = false;
					}
				}
				if(flag){
					cb.checked = true;
				}else{
					cb.checked = false;
				}
			}
			/*
			 * 小弟控制大哥
			 * 只要有一个小弟没勾，就要取消大哥的勾选状态
			 * 只要有一个小弟勾了，就要判断其他小弟是否也都勾了，
			 * 		只要存在有一个其他小弟没勾，大哥就不应该被勾选
			 * 		所有小弟都勾了，就要让大哥也勾
			 */
			function check(state){
				// 取消大哥的勾选状态
				if(!state){
					cb.checked = false;
				}else{
					for(var i = 0; i < cs.length ;i++){
						if(!cs[i].checked){
							cb.checked = false;
							return;
						}
					}
					cb.checked = true;
				}
			}
		</script>
	</head>
	<body>
		<input type="checkbox" id="cb"/>
		<button onclick="reverse()">反选</button>
		<br />
		<input type="checkbox" class="c" onclick="check(this.checked)"/>
		<input type="checkbox" class="c" onclick="check(this.checked)"/>
		<input type="checkbox" class="c" onclick="check(this.checked)"/>
	</body>
</html>

三，元素的创建，添加案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			onload = function(){
				books = new Array(4);
				books[0] = new Array("送浆","大郎","金莲","时迁");
				books[1] = new Array("小乔","周瑜","张飞","庞统");
				books[2] = new Array("薛宝钗","贾母","王熙凤","刘姥姥");
				books[3] = new Array("二郎神","菩提老祖","哪吒","白龙马");
			}
			function select(index){
				var persons = books[index];
				var per = document.getElementById("per");
				per.innerHTML = "<option>----请-选-择-人-物----</option>";
				for(var i = 0;i <= persons.length - 1;i++){
					var person = persons[i];
					// 创建option元素
					var option = document.createElement("option");
					// 创建文本节点，并将每一个人名（小数组中的元素）放入该文本节点中
					var textNode = document.createTextNode(person);
					// 将文本节点放入option中
					option.appendChild(textNode);
					per.appendChild(option);
				}
			}
		</script>
	</head>
	<body>
		<select onchange="select(this.value)">
			<option>----请-选-择-书-籍----</option>
			<option value="0">水浒</option>
			<option value="1">三国</option>
			<option value="2">红楼梦</option>
			<option value="3">西游记</option>
		</select>
		
		
		
		<select id="per">
			<option>----请-选-择-人-物----</option>
		</select>
	</body>
</html>

四，动态的添加，删除元素案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 添加：
			 * 	1.点击添加按钮获取输入框中的内容
			 * 	2.创建td将内容设置到td中，创建按钮也放到td中
			 * 	3.创建tr将td放到tr中
			 * 	4.将tr放到table中
			 * 删除：
			 *  1.明确点击的是哪一个删除按钮
			 * 		this
			 * 	2.删除动作需要通过父元素删除子元素
			 * 	  因此要获取所点击按钮所在是tr
			 *   获取点击按钮的table
			 * 	 通过table删除指定的tr
			 */
			 //复杂代码
			/*function add(){
				var num = document.getElementById("num").value;
				var name = document.getElementById("name").value;
				var price = document.getElementById("price").value;
				
				var num_td = document.createElement("td");
				var num_node = document.createTextNode(num);
				num_td.appendChild(num_node);
				
				var name_td = document.createElement("td");
				var name_node = document.createTextNode(name);
				name_td.appendChild(name_node);
				
				var price_td = document.createElement("td");
				var price_node = document.createTextNode(price);
				price_td.appendChild(price_node);
				
				var button_td = document.createElement("td");
				var del_btn = document.createElement("button");
				del_btn.setAttribute("onclick","delTr(this)");
				var btn_node = document.createTextNode("删除");
				del_btn.appendChild(btn_node);
				button_td.appendChild(del_btn);
				
				var tr = document.createElement("tr");
				tr.appendChild(num_td);
				tr.appendChild(name_td);
				tr.appendChild(price_td);
				tr.appendChild(button_td);
				
				var tab = document.getElementById("tab");
				tab.appendChild(tr);
			}*/
			//简单代码
			function add(){
				var num = document.getElementById("num").value;
				var name = document.getElementById("name").value;
				var price = document.getElementById("price").value;
				var tab = document.getElementById("tab");
				tab.innerHTML += "<tr>\n"+
									"	<td>"+ num +"</td>\n"+
									"	<td>"+ name +"</td>\n"+
									"	<td>"+ price +"</td>\n"+
									"	<td><button onclick='delTr(this)'>删除</button></td>\n"+
									"</tr>";
			}
			
			function delTr(obj){
				var tr = obj.parentNode.parentNode;
				var table = tr.parentNode;
				table.removeChild(tr);
			}
		</script>
	</head>
	<body>
		
		<div>
			<input type="text" id="num"/>
			<input type="text" id="name"/>
			<input type="text" id="price"/>
			<input type="button" value="添加" onclick="add()"/>
		</div>
		
		<table border="1" style="margin-top: 50px;" cellspacing="0" id="tab">
			<tr>
				<td width="100px">编号</td>
				<td width="100px">商品名</td>
				<td width="100px">价格</td>
				<td width="100px">操作</td>
			</tr>
			<tr>
				<td>A</td>
				<td>apple</td>
				<td>10</td>
				<td>
					<button onclick="delTr(this)">删除</button>
				</td>
			</tr>
			<tr>
				<td>B</td>
				<td>orange</td>
				<td>12</td>
				<td>
					<button onclick="delTr(this)">删除</button>
				</td>
			</tr>
		</table>
		
	</body>
</html>

五，购物车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			td{
				width: 120px;
				height: 40px;
				text-align: center;
				font-weight: bold;
			}
		</style>
		<script type="text/javascript">
			function add(){
				var pname = document.getElementById("pname").value;
				var price = document.getElementById("price").value;
				if(pname == "" || price == ""){
					alert("请输入内容");
					return;
				}
				var tab = document.getElementById("tab");
				tab.innerHTML += "<tr><td>"+ pname +"</td><td>"+ price +"</td><td><input type='text' maxlength='3' style='width:23px;text-align:center' value='1' onblur='getSum(this)' /></td><td >"+ price +"</td><td><button onclick='delTr(this)'>删除</button></td></tr>";
			}
			function delTr(obj){
				var tr = obj.parentNode.parentNode;
				var table = tr.parentNode;
				table.removeChild(tr);
			}
			function getSum(obj){
				var tr = obj.parentNode.parentNode;
				var price = tr.childNodes[1].innerHTML;
				var count = obj.value;
				var sum = price * count;
				tr.childNodes[3].innerHTML = sum;
			}
		</script>
	</head>
	<body>
		<div>
			<input type="text" id="pname" placeholder="商品名"/>
			<br />
			<input type="text" id="price" placeholder="单价"/>
			<br />
			<input type="button" value="添加到购物车" onclick="add()"/>
		</div>
		
		<table border="1" cellspacing="0" id="tab">
			<tr>
				<td>商品名</td>
				<td>单价</td>
				<td>数量</td>
				<td>小计</td>
				<td>操作</td>
			</tr>
		</table>
	</body>
</html>
风~叶～草
发布了41 篇原创文章 · 获赞 0 · 访问量 1730
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_39544980/article/details/105519585
今日推荐
周排行
小程序的背景图片
SpringBoot项目架构小实例
[多线程] Wait和Notify方法解析
第五章 绘图基础（ALTWIND）
HDU 6386 Age of Moyu 【bfs】【spfa】
如何在windows上搭载PHP环境并编写运行第一个PHP代码
CF1006C 【Three Parts of the Array】
FastAdmin 增删改查在哪里？
区块链安全吗？
docker Dockerfile实战
每日归档
更多
2024-06-16(0)
2024-06-15(0)
2024-06-14(0)
2024-06-13(0)
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022