静态网页基础知识
1、获取输入框的输入值
var x = document.getElementById('userInput').value
赋值的话：document.getElementById('userInput').value = 1
2、获取td的值、span的值等一个区域的值
var x = document.getElementById('result').innerText
赋值：document.getElementById('result').innerText = ”1“
或者：document.getElementById('result').innerHTML = 1
3、获得一个父组件的所有”x“类型的子组件
getElementsByTagName
如获得ul下面所有li类型的组件：
//获取ul
var ul = document.getElementById("photos"
//得到ul下面叫做li的所有标签
var lis =ul.getElementsByTagName("li");4、设置定时：
setInterval(方法，间隔时间)-----间隔多久时间执行一次方法
如：
setInterval( function (){//获取ulvar ul = document.getElementById("photos")//得到ul下面叫做li的所有标签var lis =ul.getElementsByTagName("li");for(var i =0;i<lis.length;i++){lis[i].className="hide"}//下一个li显示index++;lis[index%lis.length].className="show"
},1000)
5、通过js创造新的组件并且添加到页面上显示
document.createElement("类型")
如：创造一个option类型的新节点
var option = document.createElement("option")
设置新节点的value值为3，代表是select中第四个选项：
option.setAttribute("value",3)
设置新节点的属性值
option.innerHTML=”第四个选项“
应用新节点到select中
document.getElementById("select").appendChild(option)
同样的，ul也可以用这种方法添加，不过创建的新节点是li
var li= document.createElement("li")
6、购物车案例，关键是要理清楚逻辑，通过层级关系去找需要的东西
<!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 type="text/javascript">function add_shoppingcart(btn){//1.根据点击的按钮找到同行的商品和单价//根据点击的按钮找到他的爷爷，行var tr = btn.parentNode.parentNode;//爷爷tr的所有儿子tdvar tds = tr.getElementsByTagName("td");//第一个td是商品名var name = tds[0].innerText;//第二个td是价格var price = tds[1].innerText;//alert(price);//获得购物车var tbody = document.getElementById("goods");//判断购物车每一行，看是不是已经有同样的商品了，如果是的话就应该直接改变购物车里的对应行的数量和价格var tbtrs = tbody.getElementsByTagName("tr");//tbody的每一行for(var i=0;i<tbtrs.length;i++){var tbtds = tbtrs[i].getElementsByTagName("td");//tbody某一行的所有列if(name == tbtds[0].innerText){//第一列是商品名，如果点击加入购物车的商品在购物车中var inputtd = tbtds[2];//获得购物车里加号所在列var inputs = inputtd.getElementsByTagName("input");//获得第三列所有input（-，数量，+）var button = inputs[2];//加号按钮increase(button);//将这个按钮作为参数执行加加方法return;//结束方法}}//2.创建一个tr插入到购物车table下面var ntr = tbody.insertRow();//3.编写这一行的商品名和价格ntr.innerHTML='<td>'+name+'</td>'+'<td>'+price+'</td>'+'<td align="center">'+'<input type="button" value="-" onclick="decrease(this)"/>'+'<input type="text" size="3" id="sl" value="1"/>'+'<input type="button" value="+" onclick="increase(this)">'+'</td>'+'<td id="allPrice">'+price+'</td>'+'<td>'+'<input type="button" value="x" onclick="del(this)"/>'+'<td>'//4.改变总和total();}//删除一行function del(btn){//获取按钮对应的这一行var deltr = btn.parentNode.parentNode;//用这一行的父节点来删除这一行deltr.parentNode.removeChild(deltr);//4.改变总和total();}//数量++function increase(btn){//1.数量++var intd = btn.parentNode;//得到按钮所在列//得到该列所有叫input的组件，数量是第二个组件var inputs = intd.getElementsByTagName("input");var sl = inputs[1];var value = parseInt(sl.value);sl.value = ++value;// sl.setAttribute("value",++value);// alert(sl.value)//2.获取单价//获取这一行var trs = btn.parentNode.parentNode;//获取所有tdvar tds = trs.getElementsByTagName("td");//获取单价,单价是td里的text，var price = tds[1].innerText;//3.数量*单价var all = parseInt(price)*parseInt(sl.value);var alltd = tds[3];alltd.innerText = all;//4.改变总和total();}//数量--// function decrease(btn){// //获得点击的这一行tr// var intr = btn.parentNode.parentNode;// //获得这一行的数量,不对，这只能获取第一行sl// var sl = document.getElementById("sl");//// //数量减减// var sl1 = parseInt(sl.value)-1// sl.setAttribute("value",sl1) ;// alert(sl.value)//// //获得这一行的单价// var intds = intr.getElementsByTagName("td");// var price = intds[1].innerText;// //alert(price)//// //修改这一行的总金额// var allprice = intds[3];// var a = parseInt(sl1)*parseInt(price);// allprice.innerHTML=a;// }//数量减减function decrease(btn){//先判断能不能减，如果数量是0则不能减var btntd = btn.parentNode;var inputs = btntd.getElementsByTagName("input");var sl = inputs[1];if(sl.value==0){//alert("数量为0，不能减");return;//1.方法有返回值时，结束方法、返回返回值,2.结束方法}else{//1.减减var value = parseInt(sl.value);sl.value = --value;//2.获取单价var tr = btn.parentNode.parentNode;var tds = tr.getElementsByTagName("td");var price = tds[1].innerText;//3.改变总金额var all = tds[3];all.innerText = parseInt(sl.value)*parseInt(price)//4.改变总和total();}}//改变合计function total(){var all = 0;//总金额//1.得到total列var total = document.getElementById("total");//2.遍历购物车表格tbody每一行tr的第四列tdvar tbody = document.getElementById("goods");var trs = tbody.getElementsByTagName("tr");for(var i=0;i<trs.length;i++){var tds = trs[i].getElementsByTagName("td");all += parseInt(tds[3].innerText)}total.innerText = all;}</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">
<!-- <tr>-->
<!-- <td>罗技M185鼠标</td>-->
<!-- <td>80</td>-->
<!-- <td align="center">-->
<!-- <input type="button" value="-"/>-->
<!-- <input type="text" size="3" readonly value="1"/>-->
<!-- <input type="button" value="+"/>-->
<!-- </td>-->
<!-- <td>80</td>-->
<!-- <td align="center"><input type="button" value="x"/></td>-->
<!-- </tr> --></tbody><tfoot><tr><td colspan="3" align="right">总计</td><td id="total"></td><td></td></tr></tfoot></table> </body>
</html>