第七章 DOM 编程 ① 笔记
回顾
本章目标
理解文档对象模型
熟练掌握document对象访问页面元素
熟练掌握动态添加页面元素
通过DOM操作html页面中的标签，属性，样式等。
第一节：DOM编程概述
1.1 什么是DOM编程
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中。
使用js代码来操作文档中的元素（标签元素，文本，属性）。
1.2 为什么要学习DOM编程
学习DOM操作 就是 操作页面中的标签/节点/元素的。
增删改
新增：新增什么？ 各种标签 本来不存在，但是我们又想用， 无中生有！
- 造标签 此时没有样式 创建
- 美化（设置样式，添加内容） 美化
- 将造好的标签 添加到 该添加的地方！添加
删除：删除标签
修改：1.修改样式 2.内容 3. 替换 4.属性
第二节：节点操作
对节点的操作 增删改查
2.1 节点概述
什么是节点？
文档是一个文档节点。（页面中的汉字，空格符，特殊符号）
所有的HTML元素都是元素/标签节点。 **
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。
2.2 标签节点对象的获取
想操作页面中的某一个标签，要先拿到这个标签。
2.3 节点的操作
增加操作
删除操作
修改操作
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
#con{
width:300px;
height:300px;
border:2px solid red;
}
</style>
</head>
<body>
<!--onclick="addYS()" 通过标签事件属性绑定函数-->
<input type="button" value="添加元素" id="btnAdd" />
<input type="button" value="删除元素" id="btnDelete" />
<hr/>
<div id="con">
</div>
<script type="text/javascript">
//通过js方式绑定元素的事件函数
//var btn = document.getElementById("btnAdd");
// 为按钮的单击事件绑定一个函数
// 改函数并不会马上运行，只有按钮点击的时候才会触发
// btnAdd:通过id名获取元素对象
btnAdd.onclick = function(){
// 创建一个p元素，并添加到div中
var myp = document.createElement("p");
// 设置p元素的内容
myp.innerHTML="这是一个P";
// 将p元素添加到页面的div中，这样新加的元素才会显示出来
con.appendChild(myp);
}
btnDelete.onclick=function(){
//删除div中的元素
//1.通过父删除子元素
// con.lastElementChild:div中的最后一个元素
//con.removeChild(con.lastElementChild);
//2.通过子元素删除自己
con.lastElementChild.remove();
}
</script>
</body>
</html>
2.4 节点具有的属性
属性中包含Node关键字，获取都是节点(html标签,文本)
属性中包含Element关键字的，获取的都是元素(html元素/标签)
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
</head>
<body>
<div id="con">
<h1>这是标题</h1>
<span>这是span</span>
<p>这是p元素</p>
</div>
<script type="text/javascript">
//获取div
var mydiv = document.getElementById("con");
//firstElementChild:找父元素的第一个子元素
var myh1 = mydiv.firstElementChild;
//nodeName: 元素名字
//alert(myh1.nodeName);
//tagName :标签名
//alert(myh1.tagName);
//innerHTML:元素内部内容
//alert(myh1.innerHTML);
//outerHTML:元素包含自己标签的内容
alert(myh1.outerHTML);
</script>
</body>
</html>
修改本身就有的属性 只要能直接 . 出来 就表示 . 出来的属性都是本身就有的（系统规定的）
2.5 常用查询节点方法
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
</head>
<body>
<div class="c1">这是一个div1</div>
<p>这是一个p1</p>
<p class="c1">这是一个p2</p>
<div>这是一个div2</div>
<p>这是一个p3</p>
<script type="text/javascript">
//var ary = [1,2,3,4];
//获取当前页面中所有的p元素
var pAry = document.getElementsByTagName("p");
//pAry[0].innerHTML:访问第一个p元素的innerHTML属性
//alert(pAry[0].innerHTML);
//pAry[1].innerHTML:访问第二个p元素的innerHTML属性
//alert(pAry[1].innerHTML);
//alert(pAry[2].innerHTML);
//获取class名字为c1的所有元素
var ary = document.getElementsByClassName("c1");
//遍历获取的元素数组
/*for(var i=0;i<ary.length;i++){
//获取其中的一个元素
var ys = ary[i];
//ys.innerHTML:获取遍历的元素的内部内容
alert(ys.innerHTML);
}*/
//div元素
//div元素.innerHTML: 显示的div元素的内容
//对象:具有一系列的属性和行为
</script>
</body>
</html>
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
</head>
<body>
爱好:
<input type="checkbox" name="hobby" value="奋斗"/>奋斗
<input type="checkbox" name="hobby" value="运动"/>运动
<input type="checkbox" name="hobby" value="看B站"/>看B站
<input type="checkbox" name="hobby" value="读唐诗"/>读唐诗
<input type="checkbox" name="hobby" value="练习毛笔字"/>练习毛笔字
<input type="button" value="你的爱好是哪些?" id="btnShow1"/>
<hr/>
你喜欢的水果?
<input type="checkbox" name="fruit" value="苹果"/>苹果
<input type="checkbox" name="fruit" value="香蕉"/>香蕉
<input type="checkbox" name="fruit" value="橘子"/>橘子
<input type="checkbox" name="fruit" value="榴莲"/>榴莲
<input type="button" value="你喜欢的水果是哪些?" id="btnShow2"/>
<script type="text/javascript">
//练习:获取选中的复选框
//绑定按钮的单击事件
btnShow1.onclick=function(){
//1.获取所有的爱好复选框
var ckAry = document.getElementsByName("hobby");
//2.判断复选框是否处于选中状态
//遍历获取的所有复选框
for(var i=0;i<ckAry.length;i++){
//获取当前遍历到的复选框
var ck = ckAry[i];
//判断这个复选框的状态
// ck.checked:复选框的选中状态 true/false
if(ck.checked==true){
//这个复选框选中了，则提示它的值
alert(ck.value);
}
}
//一次性弹出所有选中内容
}
</script>
</body>
</html>
querySelector,querySelectorAll
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
</head>
<body>
<div class="c1">这是一个div1</div>
<p>这是一个p1</p>
<p class="c1">这是一个p2</p>
<div id="mydiv">这是一个div2</div>
<p>这是一个p3</p>
<script type="text/javascript">
//使用querySelector，根据选择器(标签,.类,#id)获取单个元素
//var d = document.querySelector("#mydiv");
//alert(d.innerHTML);
//使用querySelectorAll,根据选择器(标签,.类,#id)获取元素元素
var ary = document.querySelectorAll(".c1");
for(var i=0;i<ary.length;i++){
alert(ary[i].innerHTML);
}
</script>
</body>
</html>
第三节：案例练习
3.1 发表说说
分析：
1.首先需要一个div装所有的评论。
2.当点击发表按钮时 将评论添加到div中
3.添加之前 先创建标签 < span>放名字 在创建一个span放内容 在将创建的两个span 添加到一个P标签中
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<style type="text/css">
fieldset{
width:500px;
height:300px;
border:1px solid red;
margin:0px auto;
text-align:center
}
#con{
border:2px dashed gray;
height:200px;
margin:10px;
padding:10px;
text-align:left;
}
</style>
<script type="text/javascript">
function send(){
var xm = txtName.value;
var nr = txtMsg.value;
//var str = xm+"说:"+nr+"<br/>";
//con.innerHTML +=str;
var span1 = document.createElement("span");
span1.innerHTML=xm+"说:";
span1.style.backgroundColor="#ffff66";
var span2 = document.createElement("span");
span2.innerHTML=nr;
span2.style.backgroundColor="lightblue";
var p = document.createElement("p");
p.style.border="1px solid gray";
p.appendChild(span1);
p.appendChild(span2);
con.appendChild(p);
}
// 扩展，添加删除按钮删除说说
</script>
</head>
<body>
<fieldset>
<legend>发表说说</legend>
<div>
姓名:
<input type="text" id="txtName"/>
内容:
<input type="text" id="txtMsg"/>
<input type="button" value="发表" onclick="send()"/>
</div>
<div id="con">
</div>
</fieldset>
</body>
</html>
扩展功能，添加删除按钮
掌握事件函数绑定的各种方式
<body>
<!--标签事件绑定方式
<input type="button" value="按钮1" id="btn1" onclick="test1()"/>
<input type="button" value="按钮2" id="btn2" onclick="test2()"/>
<input type="button" value="按钮3" id="btn3" onclick="test3()"/>
-->
<input type="button" value="按钮1" id="btn1" />
<input type="button" value="按钮2" id="btn2" />
<input type="button" value="按钮3" id="btn3" />
<script type="text/javascript">
function test1(){
alert("1111");
}
function test2(){
alert("2222");
}
function test3(){
alert("3333");
}
//通过元素对象绑定事件/js方式绑定事件
/*btn1.onclick=test1;
btn2.onclick=test2;
btn3.onclick=test3;*/
//事件绑定匿名函数
btn1.onclick=function(){
//this：当前触发事件的元素
alert(this.value);
}
btn2.onclick=function(){
alert(this.value);
}
btn3.onclick=function(){
alert(this.value);
}
</script>
</body>
完成说说删除功能
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
fieldset{
width:500px;
border:2px solid gray;
margin:0px auto;
text-align:center;
}
#con{
margin:10px;
padding:10px;
border:2px dashed gray;
height:300px;
text-align:left;
}
#con p{
border:1px solid gray;
padding:10px;
/*变为相对定位*/
position:relative;
}
#con .s1{
background-color:#ffff99;
}
#con .s2{
background-color:#6699ff;
}
#con .close{
border:2px solid red;
width:20px;
height:20px;
/*变为圆形*/
border-radius:10px;
text-align:center;
line-height:20px;
/*元素设置绝对定位:可以变为块状*/
position:absolute;
right:-10px;
top:-10px;
background-color:#cccc33;
/*让鼠标放到span上时，变为手型*/
cursor:pointer;
}
</style>
</head>
<body>
<!--发表说说-->
<fieldset>
<legend>发表说说</legend>
<div>
姓名:
<input type="text" name="xm" id="xm"/>
内容:
<input type="text" name="msg" id="msg"/>
<input type="button" value="发表说说" onclick="sendMsg()"/>
</div>
<div id="con">
</div>
</fieldset>
<script type="text/javascript">
//定义函数，发表说说
function sendMsg(){
//获取姓名文本框的内容
var name = xm.value;
//获取内容框中的信息
var xinxi = msg.value;
//创建p元素
var myp = document.createElement("p");
//创建span元素
var myspan1 = document.createElement("span");
myspan1.innerHTML=name+"说:";
//设置元素的行内样式
//myspan1.style.backgrounColor="yellow";
//设置元素的类样式
myspan1.className="s1";
//创建span元素
var myspan2 = document.createElement("span");
myspan2.innerHTML=xinxi;
//设置元素的类样式
myspan2.className="s2";
//创建span元素，作为关闭按钮
var myspanClose = document.createElement("span");
myspanClose.innerHTML="x";
myspanClose.className="close";
//为元素绑定单击事件
myspanClose.onclick=function(){
//alert(123);
//this:表示当前发生点击事件的span元素,固定写法
//this.parentElement:当前元素的爹
//remove():删除自己
this.parentElement.remove();
}
//将两个span添加到p元素中
myp.appendChild(myspan1);
myp.appendChild(myspan2);
myp.appendChild(myspanClose);
//将p元素添加到div中
con.appendChild(myp);
}
</script>
</body>
</html>
3.2 购物车
分析：
1.先搭建ui
2.新增
新增基操：（没有任何限定条件）
添加条件：
1.新增商品时要先判断购物车中是否为空，如果为空直接新增，否则就判断该商品在购物车中是否存在，如果不存在就新增，如果存在就让数量++；
抛出问题：我要怎么做才能取出 购物车中的每一个商品名称？
可以看出 购物车中的每一个商品名称 都是所属tr的第二个子标签，那么我们可以通过取出所有的tr,然后在去tr的第二个td子标签。
3.+ - 按钮
4.计算总价，和数量
5.删除一行
6.全选和全不选
7.删除多行
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="gbk"/>
<script type="text/javascript">
// 1.创建购物车UI(user interface)用户界面
// 2.功能实现
/*
a. 添加商品
a1: 直接添加
a2: 如果添加商品存在的时候，进行数量累加
b. 调整数量,计算小计
b1: 通过"+","-"调整数量
b2: 通过文本框输入调整数量(数据校验)，通过文本框的onblur(失焦)事件处理
c. 汇总合计(汇总选择商品的总价)
d. 删除(单行删除)
e. 选择部分商品(全选/部分选择/反选)
f. 批量删除多个商品
*/
</script>
</head>
<body>
<div style="width:800px;height:500px;margin:10px auto;border:1px solid bla
<!--商品信息部分-->
<fieldset>
<legend>商品信息</legend>
<form name="frmGoods">
<!--
name属性用于向服务器传值的时候，做数据标识
id属性用于在js中获取元素的查找条件
使用元素名访问元素对象:frmGoods(表单名).goodsName(元素名)
使用元素的id名访问元素对象: goodsName(元素id)
-->
品名:<input type="text" name="goodsName" id="goodsName"/>
单价:<input type="text" name="goodsPrice" id="goodsPrice"/>
数量:<input type="text" name="qty" id="qty"/>
<input type="button" value="添加商品" onclick="addGoods()"/>
</form>
</fieldset>
<fieldset>
<legend>购物车</legend>
<table border="1" width="100%" >
<thead>
<tr>
<th>
全选
<input type="checkbox" name="ckAll" id="ckAll"/>
</th>
<th>品名</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tby">
</tbody>
</table>
合计:<span id="total"></span>
</fieldset>
</div>
<script type="text/javascript">
// 点击按钮添加商品
/*
1.获取商品信息表单填写的数据:品名,单价,数量
2.拼接6个td的字符串，添加tr对象中,最终将tr添加到tbody中
*/
function addGoods(){
//1. 获取商品信息
// goodsName.value:通过id属性直接获取对象，并访问对象的value属性
var gname = goodsName.value;
var gprice = goodsPrice.value;
var gqty = qty.value;
//alert(gname+" "+gprice+" "+gqty);
//2 拼接表格行中的6个td字符串
var str = ""; //定义变量，累加拼接每个td字符串
// 第1个td:复选框
str += "<td><input type='checkbox' name='ckgoods'/></td>";
// 第2个td:品名
str += "<td>" + gname + "</td>";
// 第3个td:单价
str += "<td>"+gprice+"</td>";
// 第4个td:数量(两个按钮和一个文本框)
str += "<td>" +
"<input type='button' value='+' onclick='addQty(this)' /
"<input type='text' value='"+gqty+"' onblur='changeQty(t
"<input type='button' value='-' onclick='subQty(this)' /
"</td>";
// 第5个td：小计
str += "<td>"+gqty*gprice+"</td>";
// 第6个td
str += "<td><input type='button' value='删除' onclick='del(this)'/><
// 创建tr元素对象
var tr = document.createElement("tr");
// 设置tr的内容为拼接的td字符串
tr.innerHTML=str;
// 将tr添加到tbody中
// append(添加)Child(子元素)
tby.appendChild(tr);
//更新总计
sum();
}
// 点击加号按钮调整数量
function addQty(btnQty){
// 1.通过点击的按钮对象找到数量文本框，获取文本框的数据
var txtQty = btnQty.nextElementSibling;
txtQty.value++; // 文本框的值自增
// 2.数量变化引起小计变化: 获取单价，计算小计
var price = Number(btnQty.parentNode.previousElementSibling.innerTex
alert(price);
var money = price*txtQty.value;
// 设置小计内容
btnQty.parentNode.nextElementSibling.innerText=money;
//更新总计
sum();
}
// 点击减号按钮调整数量
// 点击加号按钮调整数量
function subQty(btnQty){
// 1.通过点击的按钮对象找到数量文本框，获取文本框的数据
var txtQty = btnQty.previousElementSibling;
txtQty.value--; // 文本框的值自增
// 2.数量变化引起小计变化: 获取单价，计算小计
var price = Number(btnQty.parentNode.previousElementSibling.innerTex
//alert(price);
var money = price*txtQty.value;
// 设置小计内容
btnQty.parentNode.nextElementSibling.innerText=money;
//更新总计
sum();
}
// 文本框输入数量之后，光标离开时(失焦)，调整数量
// onblur:触发失焦事件 onfoucs:获得焦点
function changeQty(txt){
// 将文本框的内容转为数值
var qty = Number(txt.value);
// 如果转换后不是一个数值
if(isNaN(qty)){
//提示错误
alert("输入的数据不是数值");
// 终止方法执行
return;
}
//如果数值超出范围要提示错误
if(qty<=0 || qty>100){
alert("数值必须是1-100");
return;
}
// 测试文本框的数据
//alert(txt.value);
// 1.获取单价
var price= txt.parentNode.previousElementSibling.innerText;
// 2.计算小计
var money = price*qty; //单价*文本框的数量
// 3.将金额设置到小计单元格中
txt.parentNode.nextElementSibling.innerText=money;
//更新总计
sum();
}
// 删除一行
function del(btnQty){
// 判断是否确定删除
if(confirm('确定删除?')){
//btnQty.parentNode:父级元素td .parentNode td的父级元素tr
btnQty.parentNode.parentNode.remove();
//更新总计
sum();
}
}
// 合计:汇总所有的小计
function sum(){
// 获取所有的tr行
//tby.children :通过tbody元素获取下面的tr数组
var trAry = tby.children;
// 遍历tr，找到tr中的小计td单元格，取出数据
var zongji = 0;
for(var i=0;i<trAry.length;i++){
// 取出当前遍历到的数组中的一个tr
var tr = trAry[i];
// 通过tr，获取tr中下标为4的小计单元格，取出数据
// tr.children: tr这一行的td数组(子元素数组)
// tr.children[4]:取出数组中下标为4的元素:小计单元格元素
var xj = Number(tr.children[4].innerText);
// 累加小计到zongji变量
zongji+=xj;
}
// 将累加后的数据设置到汇总标签上
total.innerText = zongji;
}
</script>
</body>
</html>
3.3 模板法
简化代码，比jQuery的DOM操作还要简单。
1.创建模板
2.读取模板，并替换模板中的内容
3.模板法购物车（新增）
第四节 JSON对象
JSON ( JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
核心:
json是一个具有特定格式的js数据对象
用于在系统间交互数据(传递数据)
4.1 js对象,json对象,json字符串
js对象语法:
{
属性1:数据1,
属性2:数据2,
属性3:数据3,
...
方法名:function(){
//函数体
}
}
js对象的特点:
js对象的属性不用加双引号
js对象中可以有函数
可以通过.访问属性，或者属性下标访问属性
<script type="text/javascript">
//js数据对象
//请存储学生的姓名，性别，年龄，身高
//使用单独变量表示对象数据，无法体现数据的关联性，而且比较繁琐.
/*
var stuName = "张三";
var sex = "男";
var age = 20;
var tall = 1.7;
*/
//定义js对象表示学生数据
var stu = {
stuName:"张三", //对象的属性(描述特征 属性:值)
sex :"男",
age :20,
tall:1.7,
zwjs:function(){ //对象的方法(描述行为)
//this:当前的数据对象
alert(this.stuName+" "+this.sex+" "+this.age+" "+this.tall);
}
};
//访问学生对象的属性
/*alert(stu.stuName);
alert(stu.sex);
alert(stu.age);
alert(stu.tall);*/
//访问学生对象的方法
//stu.zwjs();
</script>
json对象语法
{
"属性1":数据1,
"属性2":数据2,
"属性3":数据3,
...
"属性n":数据n
}
json对象的特点:
属性名都要用双引号括起来，必须是双引号，不能用单引号
json对象中不能定义函数，主要作用就是传递数据
可以通过.访问属性，或者属性下标访问属性
//json格式的数据对象
var car = {
"brand":"宝马",
"color":"红色",
"price":2000000,
"speed":180
}
//返回的是对象
//alert(typeof(car));
//访问汽车的属性
//使用.操作符访问对象属性，此时属性不能加引号
//alert(car.brand+" "+car.color+" "+car.price+" "+car.speed);
//使用属性文本下标的方式，访问对象属性。属性要加引号
//alert(car["brand"]+" "+car["color"]+" "+car["price"]);
json格式字符串
'{"属性1":值1,"属性2":值2}'
特点:
首先数据本身是字符串类型的数据
字符串的内容复合json格式
如果要访问其中的属性数据，需要转为json对象
将json字符串转为json对象
JSON.parse(json对象)
将json对象转为json字符串
JSON.stringify(json字符串)
<script type="text/javascript">
//json格式的数据对象
var car = {
"brand":"宝马",
"color":"红色",
"price":2000000,
"speed":180
}
//返回的是对象
//alert(typeof(car));
//访问汽车的属性
//使用.操作符访问对象属性，此时属性不能加引号
//alert(car.brand+" "+car.color+" "+car.price+" "+car.speed);
//使用属性文本下标的方式，访问对象属性。属性要加引号
//alert(car["brand"]+" "+car["color"]+" "+car["price"]);
//json格式字符串
//json格式的对象
//var stu = {"name":"张三","age":20};
//json格式的字符串
var stu = '{"name":"张三","age":20}';
//alert(typeof(stu));
//字符串没有name属性和age属性
//alert(stu.name+" "+stu.age);
//将json格式的字符串转为json对象，从而愉快的访问其中的属性
//JSON.parse("json字符串")
//使用JSON工具类对象的parse方法，将stu这个json字符串转为json对象
// 并存储到mystu这个变量中
var mystu = JSON.parse(stu);
//alert(mystu.name+" "+mystu.age);
//扩展: JSON.stringify(json对象) 将json对象转为json字符串
var dog = {"kind":"牧羊犬","hobby":"骨头"};
//alert(typeof(dog));
//alert(dog); //对象数据，弹窗显示的时候，不会显示属性信息
//console.log(dog);
var dogStr = JSON.stringify(dog);
alert(typeof(dogStr));
alert(dogStr);
</script>
4.2 案例: 定义json对象数组生成表格数据，扩展购物车功能
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
fieldset{
width:500px;
margin:0px auto;
}
</style>
</head>
<body>
<fieldset>
<legend>水果商品列表</legend>
<table border="1" width="100%">
<thead>
<tr>
<th>编号</th>
<th>名字</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody id="fbody">
<!--
<tr>
<td>1001</td>
<td>苹果</td>
<td>3.5</td>
<td>
<input type="button" value="添加"/>
</td>
</tr>
-->
</tbody>
</table>
</fieldset>
<fieldset>
<legend>购物车</legend>
<table border="1" width="100%">
<thead>
<tr>
<th>编号</th>
<th>名字</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="mybody">
<!--
<tr>
<td>1001</td>
<td>苹果</td>
<td>3.5</td>
<td>
<input type="button" value="+"/>
<input type="text" value="3"/>
<input type="button" value="-"/>
</td>
<td>10.5</td>
<td>
<input type="button" value="删除"/>
</td>
</tr>
-->
</tbody>
</table>
</fieldset>
<script type="text/javascript">
//水果数组
var fruitAry = [
{"id":1001,"name":"苹果","price":3.5},
{"id":1002,"name":"香蕉","price":6.5},
{"id":1003,"name":"榴莲","price":9},
{"id":1004,"name":"橘子","price":2}
];
//遍历水果数组，将数据添加到表格中
for(var i=0;i<fruitAry.length;i++){
//获取当前遍历的水果对象
var f = fruitAry[i];
//console.log(f);
//将数据填充到表格行中
var tds = "";
tds +="<td>"+f.id+"</td>";
tds +="<td>"+f.name+"</td>";
tds +="<td>"+f.price+"</td>";
tds +="<td><input type='button' value='添加' onclick='addGoods(this)'></td>";
//创建tr对象
var tr = document.createElement("tr");
tr.innerHTML=tds;
//将tr添加到tbody中
fbody.appendChild(tr);
}
//点击添加按钮，将按钮对应行的水果信息，添加购物车表格的行中
function addGoods(btnObj){
//通过点击的按钮找到tr行对象
var tr = btnObj.parentElement.parentElement;
//通过tr行对象，分别获取各个单元格的数据
//编号
var fid = tr.children[0].innerText;
//水果名字
var fname = tr.children[1].innerText;
//水果价格
var fprice = Number(tr.children[2].innerText);
//判断重复
if(mybody.children.length>0){
for(var i=0;i<mybody.children.length;i++){
var tr = mybody.children[i];
//tr.children[0].innerText:找到本行第一个单元格的id数据是否重复
if(tr.children[0].innerText==fid){
//让文本框数量++
tr.children[3].children[1].value++;
//计算小计
tr.children[4].innerText =
Number(tr.children[3].children[1].value)*Number(fprice);
//返回函数，不执行后面的代码
return;
}
}
}
//alert(fname+" "+fprice+" "+fqty);
//拼接td单元格
var tds = "";
tds +="<td>"+fid+"</td>";
tds +="<td>"+fname+"</td>";
tds +="<td>"+fprice+"</td>";
tds +="<td>"+
"<input type='button' value='+'/>"+
"<input type='text' value='1'/>"+
"<input type='button' value='-'/>"+
"</td>";
tds +="<td>"+fprice*1+"</td>";
tds +="<td><input type='button' value='删除'/></td>";
//创建tr对象
var tr = document.createElement("tr");
tr.innerHTML=tds;
//将tr添加到tbody中
mybody.appendChild(tr);
}
</script>
</body>
</html>
第五节 模板字符串
<script type="text/javascript">
//请假条模板字符串
var qjtTemp = "本人XM,因为SQ,特请假TS天,从KSRQ开始到JSRQ结束。望批准!";
var lsqjt = qjtTemp.replace("XM","李四")
.replace("SQ","要去见女朋友")
.replace("TS","3")
.replace("KSRQ","2022-3-16")
.replace("JSRQ","2022-3-19");
document.write(lsqjt+"<br/>");
var wwqjt = qjtTemp.replace("XM","王五")
.replace("SQ","要去相亲")
.replace("TS","1")
.replace("KSRQ","2022-3-16")
.replace("JSRQ","2022-3-17");
document.write(wwqjt+"<br/>");
</script>
<!--使用script标签来定义模板字符串-->
<script type="text/html" id="temp">
<td>ID</td>
<td>NAME</td>
<td>PRICE</td>
<td>
<input type="button" value="+"/>
<input type="text" value="1"/>
<input type="button" value="-"/>
</td>
<td>XJ</td>
<td><input type="button" value="删除"/></td>
</script>
<!--定义js代码-->
<script type="text/javascript">
//alert(temp.innerHTML);
var tds = temp.innerHTML.replace("ID","1001")
.replace("NAME","苹果")
.replace("PRICE",3.5)
.replace("XJ",3.5)
</script>
完成购物车的改进
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
fieldset{
width:500px;
margin:0px auto;
}
</style>
</head>
<body>
<fieldset>
<legend>水果商品列表</legend>
<table border="1" width="100%">
<thead>
<tr>
<th>编号</th>
<th>名字</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody id="fbody">
<!--
<tr>
<td>1001</td>
<td>苹果</td>
<td>3.5</td>
<td>
<input type="button" value="添加"/>
</td>
</tr>
-->
</tbody>
</table>
</fieldset>
<fieldset>
<legend>购物车</legend>
<table border="1" width="100%">
<thead>
<tr>
<th>编号</th>
<th>名字</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="mybody">
<!--
<tr>
<td>1001</td>
<td>苹果</td>
<td>3.5</td>
<td>
<input type="button" value="+"/>
<input type="text" value="3"/>
<input type="button" value="-"/>
</td>
<td>10.5</td>
<td>
<input type="button" value="删除"/>
</td>
</tr>
-->
</tbody>
</table>
</fieldset>
<!--使用script标签来定义模板字符串-->
<script type="text/html" id="temp">
<td>ID</td>
<td>NAME</td>
<td>PRICE</td>
<td>
<input type="button" value="+"/>
<input type="text" value="1"/>
<input type="button" value="-"/>
</td>
<td>XJ</td>
<td><input type="button" value="删除"/></td>
</script>
<script type="text/javascript">
//水果数组
var fruitAry = [
{"id":1001,"name":"苹果","price":3.5},
{"id":1002,"name":"香蕉","price":6.5},
{"id":1003,"name":"榴莲","price":9},
{"id":1004,"name":"橘子","price":2}
];
//遍历水果数组，将数据添加到表格中
for(var i=0;i<fruitAry.length;i++){
//获取当前遍历的水果对象
var f = fruitAry[i];
//console.log(f);
//将数据填充到表格行中
var tds = "";
tds +="<td>"+f.id+"</td>";
tds +="<td>"+f.name+"</td>";
tds +="<td>"+f.price+"</td>";
tds +="<td><input type='button' value='添加' onclick='addGoods(this)'></td>";
//创建tr对象
var tr = document.createElement("tr");
tr.innerHTML=tds;
//将tr添加到tbody中
fbody.appendChild(tr);
}
//点击添加按钮，将按钮对应行的水果信息，添加购物车表格的行中
function addGoods(btnObj){
//通过点击的按钮找到tr行对象
var tr = btnObj.parentElement.parentElement;
//通过tr行对象，分别获取各个单元格的数据
//编号
var fid = tr.children[0].innerText;
//水果名字
var fname = tr.children[1].innerText;
//水果价格
var fprice = Number(tr.children[2].innerText);
//判断重复
if(mybody.children.length>0){
for(var i=0;i<mybody.children.length;i++){
var tr = mybody.children[i];
//tr.children[0].innerText:找到本行第一个单元格的id数据是否重复
if(tr.children[0].innerText==fid){
//让文本框数量++
tr.children[3].children[1].value++;
//计算小计
tr.children[4].innerText =
Number(tr.children[3].children[1].value)*Number(fprice);
//返回函数，不执行后面的代码
return;
}
}
}
//alert(fname+" "+fprice+" "+fqty);
//拼接td单元格
var tds = temp.innerHTML.replace("ID",fid)
.replace("NAME",fname)
.replace("PRICE",fprice)
.replace("XJ",fprice*1);
//创建tr对象
var tr = document.createElement("tr");
tr.innerHTML=tds;
//将tr添加到tbody中
mybody.appendChild(tr);
}
</script>
</body>
</html>
总结:
节点的操作(增删改查)
节点的属性掌握
购物车的搭建（思路分析清楚）
模板法学会
作业：
1.今天案例敲2遍
2. 购物车整好
使用模板法改进购物车
1.使用模板法写购物车（主要新增功能）（30分钟）
2.预习表单验证和正则表达式
637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
