Unit07： document 对象 、 自定义对象 、 事件
知识点：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> window.onload = function() { //1.根据ID查询一个节点 //2.根据标签名查询一组节点 //3.根据NAME查询一组节点 var inputs = document.getElementsByName("sex"); console.log(inputs); //4.根据层次查询节点 //查询某节点的亲属(父亲、孩子、兄弟) //4.1查询节点的父亲 var gz = document.getElementById("gz"); var ul = gz.parentNode; console.log(ul); //4.2查询节点的孩子 //带空格 console.log(ul.childNodes); //不带空格 console.log(ul.getElementsByTagName("li")); //4.3查询节点的兄弟 //节点.parentNode.getElementsByTagName("")[i] var li = gz.parentNode.getElementsByTagName("li")[4]; console.log(li); } function f1() { //1.创建节点li var li = document.createElement("li"); li.innerHTML = "杭州"; //2.追加节点 var ul = document.getElementById("city"); ul.appendChild(li); } function f2() { //1.创建节点 var li = document.createElement("li"); li.innerHTML = "苏州"; //2.插入节点 var ul = document.getElementById("city"); var gz = document.getElementById("gz"); ul.insertBefore(li,gz); } function f3() { //获取要删除的节点的父亲 var ul = document.getElementById("city"); //获取要删除的节点 var gz = document.getElementById("gz"); //根据父亲删除孩子 ul.removeChild(gz); } </script> </head> <body> <p> <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女 </p> <p> <input type="button" value="追加" onclick="f1();"/> <input type="button" value="插入" onclick="f2();"/> <input type="button" value="删除" onclick="f3();"/> </p> <ul id="city"> <li>北京</li> <li>上海</li> <li id="gz">广州</li> <li>深圳</li> <li>天津</li> </ul> </body> </html>
下拉框选择案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> var cities; window.onload = function() { //模拟加载所有的城市 cities = [ ["石家庄","保定","廊坊"], ["济南","青岛","威海"], ["南京","苏州","无锡"] ]; } function chg() { console.log(1); //获取选择的省份(序号) var s1 = document.getElementById("province"); var index = s1.value; //获取该省份对应的城市 var pcities = cities[index]; //删除旧的城市 var s2 = document.getElementById("city"); //var options = // s2.getElementsByTagName("option"); //for(var i=options.length-1;i>=1;i--) { // s2.removeChild(options[i]); //} s2.innerHTML = "<option>请选择</option>"; //追加新的城市 if(pcities) { for(var i=0;i<pcities.length;i++) { var option = document.createElement("option"); console.log(pcities[i]); option.innerHTML = pcities[i]; s2.appendChild(option); } } } </script> </head> <body> 省: <select onchange="chg();" id="province"> <option value="-1">请选择</option> <option value="0">河北省</option> <option value="1">山东省</option> <option value="2">江苏省</option> </select> 市: <select id="city"> <option>请选择</option> </select> </body> </html>
购物车案例
<!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table { margin:0 auto; width:60%; border:2px solid #aaa; border-collapse:collapse; } table th, table td { border:2px solid #aaa; padding:5px; } th { background-color:#eee; } </style> <script> //加入购物车 function add_shoppingcart(btn) { console.log(btn); //获取按钮的爷爷(tr) var tr = btn.parentNode.parentNode; //获取爷爷的孩子们(tds) var tds = tr.getElementsByTagName("td"); //获取第1个td的内容(商品名) var name = tds[0].innerHTML; //获取第2个td的内容(单价) var price = tds[1].innerHTML; //创建一个新的行 var ntr = document.createElement("tr"); //给这个行设置内容 ntr.innerHTML = '<td>'+name+'</td>'+ '<td>'+price+'</td>'+ '<td align="center">'+ '<input type="button" value="-"/>'+ '<input type="text" size="3" readonly value="1"/>'+ '<input type="button" value="+" onclick="increase(this);"/>'+ '</td>'+ '<td>'+price+'</td>'+ '<td align="center"><input type="button" value="x"/></td>'; //将这个行追加到tbody下 var tbody = document.getElementById("goods"); tbody.appendChild(ntr); } //增加 function increase(btn) { //获取按钮的哥哥(文本框) var td3 = btn.parentNode; var text = td3.getElementsByTagName("input")[1]; //文本框内的值(数量)+1 text.value++; //获取td3的哥哥(td2) var tr = td3.parentNode; var td2 = tr.getElementsByTagName("td")[1]; //获取td2的内容(单价) var price = td2.innerHTML; //计算金额 var money = price*text.value; //获取td3的弟弟(td4) var td4 = tr.getElementsByTagName("td")[3]; //写入金额 td4.innerHTML = money; } </script> </head> <body> <h1>真划算</h1> <table> <tr> <th>商品</th> <th>单价(元)</th> <th>颜色</th> <th>库存</th> <th>好评率</th> <th>操作</th> </tr> <tr> <td>罗技M185鼠标</td> <td>80</td> <td>黑色</td> <td>893</td> <td>98%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>微软X470键盘</td> <td>150</td> <td>黑色</td> <td>9028</td> <td>96%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>洛克iphone6手机壳</td> <td>60</td> <td>透明</td> <td>672</td> <td>99%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>蓝牙耳机</td> <td>100</td> <td>蓝色</td> <td>8937</td> <td>95%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>金士顿U盘</td> <td>70</td> <td>红色</td> <td>482</td> <td>100%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> </table> <h1>购物车</h1> <table> <thead> <tr> <th>商品</th> <th>单价(元)</th> <th>数量</th> <th>金额(元)</th> <th>删除</th> </tr> </thead> <tbody id="goods"> </tbody> <tfoot> <tr> <td colspan="3" align="right">总计</td> <td id="total"></td> <td></td> </tr> </tfoot> </table> </body> </html>
计算器案例
<!DOCTYPE html> <html> <head> <title>计算器</title> <meta charset="utf-8" /> <style type="text/css"> .panel { border: 4px solid #ddd; width: 192px; margin: 100px auto; /*border-radius: 6px;*/ } .panel p, .panel input { font-family: "微软雅黑"; font-size: 20px; margin: 4px; float: left; /*border-radius: 4px;*/ } .panel p { width: 122px; height: 26px; border: 1px solid #ddd; padding: 6px; overflow: hidden; } .panel input { width: 40px; height: 40px; border:1px solid #ddd; } </style> <script> window.onload = function() { //给div绑定单击事件 var div = document.getElementById("jsq"); div.onclick = function(e) { //获取事件源 var obj = e.srcElement || e.target; if(obj.nodeName=="INPUT") { var p = document.getElementById("screen"); if(obj.value=="=") { //计算 try { p.innerHTML = eval(p.innerHTML); } catch(ex) { p.innerHTML = "Error"; } } else if(obj.value=="C") { //清空 p.innerHTML = ""; } else { //累加 p.innerHTML += obj.value; } } } } </script> </head> <body> <div class="panel" id="jsq"> <div> <p id="screen"></p> <input type="button" value="C"> <div style="clear:both"></div> </div> <div> <input type="button" value="7"> <input type="button" value="8"> <input type="button" value="9"> <input type="button" value="/"> <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> <input type="button" value="*"> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="-"> <input type="button" value="0"> <input type="button" value="."> <input type="button" value="="> <input type="button" value="+"> <div style="clear:both"></div> </div> </div> </body> </html>
创建对象的三种方式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> //1.采用直接量的方式创建对象 function f1() { var student = { "name":"zhangsan", "age":23, "work":function(){ alert("我学Java"); } }; alert(student.name); alert(student.age); student.work(); } //2.采用内置构造器创建对象 function f2() { var teacher = new Object(); teacher.name = "苍老师"; teacher.age = 18; teacher.work = function(){ alert("我教Java"); }; alert(teacher.name); alert(teacher.age); teacher.work(); } //3.采用自定义构造器创建对象 function Coder(name,age,work) { //需要在对象上记录传入的参数 this.name = name; this.age = age; this.job = work; } function f3() { var coder = new Coder( "Lisi", 28, function(){ alert("我写Java"); } ); alert(coder.name); alert(coder.age); coder.job(); } </script> </head> <body> <input type="button" value="按钮1" onclick="f1();"/> <input type="button" value="按钮2" onclick="f2();"/> <input type="button" value="按钮3" onclick="f3();"/> </body> </html>
直接绑定事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> //1.直接绑定事件 function f1(e) { console.log(1); console.log(e); } //页面加载后 window.onload = function() { //给按钮2后绑定单击事件 var btn2 = document.getElementById("btn2"); btn2.onclick = function(e){ console.log(2); console.log(e); }; } </script> </head> <body> <input type="button" value="按钮1" onclick="f1(event);"/> <input type="button" value="按钮2" id="btn2"/> </body> </html>
取消冒泡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> div { border: 1px solid red; padding: 30px; margin: 30px; width: 300px; } p { border: 1px solid blue; padding: 30px; } </style> <script> function f1(e) { alert("BUTTON"); //取消冒泡 //e={"stopPropagation":function(){}} //e={"cancelBubble":false} if(e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } } </script> </head> <body> <div onclick="alert('DIV');"> <p onclick="alert('P');"> <input type="button" value="按钮1" onclick="f1(event);"/> </p> </div> </body> </html>