js_day26--js DOM编程（forms/form对象+table对象）

来源：互联网发布：淘宝店铺客服怎么登陆编辑：程序博客网时间：2024/05/18 02:54

Day26

案例1：简易购物车

<!DOCTYPE html><html>  <head>    <title>mycart.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" language="javascript"><!--function buy(obj){//遍历所有的checkbox，计算新的总价var fruits=document.getElementsByName("fruit");var totalPrice = 0;for(var i=0;i<fruits.length;i++){//判断是否选择if(fruits[i].checked){totalPrice+=parseFloat(fruits[i].value);}}myspan.innerText=totalPrice+"";}//--></script>  </head>    <body>   <h1>我的购物车</h1>   <input type="checkbox" name="fruit" value="10" onclick="buy(this)"/>苹果 10元 <br/>   <input type="checkbox" name="fruit" value="20" onclick="buy(this)"/>香蕉 20元<br/>   <input type="checkbox" name="fruit" value="30" onclick="buy(this)"/>西瓜 30元<br/>   <input type="checkbox" name="fruit" value="40" onclick="buy(this)"/>梨子 40元<br/>   <input type="checkbox" name="fruit" value="50" onclick="buy(this)"/>哈密瓜 50元<br/>   总价格是：<span id="myspan">0</span>元  </body></html>

案例2：全选与取消全选

<!DOCTYPE html><html>  <head>    <title>selectCheckBox.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript"><!--var fruits = document.getElementsByName("fruit");function selectCheckBox(obj){//window.alert(obj.innerText);if(obj.innerText=="全选"){for(var i=0;i<fruits.length;i++){fruits[i].checked=true;}}else if(obj.innerText=="取消"){for(var i=0;i<fruits.length;i++){fruits[i].checked=false;}}}//响应复选框function selectCheckBox2(){if(myselect.checked){for(var i=0;i<fruits.length;i++){fruits[i].checked=true;}}else{for(var i=0;i<fruits.length;i++){fruits[i].checked=false;}}}//--></script>  </head>    <body>    <input type="checkbox" name="fruit" value="10" onclick="buy(this)"/>苹果 10元 <br/>   <input type="checkbox" name="fruit" value="20" onclick="buy(this)"/>香蕉 20元<br/>   <input type="checkbox" name="fruit" value="30" onclick="buy(this)"/>西瓜 30元<br/>   <input type="checkbox" name="fruit" value="40" onclick="buy(this)"/>梨子 40元<br/>   <input type="checkbox" name="fruit" value="50" onclick="buy(this)"/>哈密瓜 50元<br/>   <a href="#" onclick="selectCheckBox(this)">全选</a>     <a href="#" onclick="selectCheckBox(this)">取消</a>   <input type="checkbox" id="myselect" onclick="selectCheckBox2()"/>是否全选  </body></html>

forms对象（集合）定义：
按照表单在文档中的顺序得到form对象，forms对象集合中包括了当前文档的所有form对象。
讲forms对象（集合）的目的其实是为了讲解form对象。

length: 设置或得到集合的大小
forms[1]等价于forms.item(1)
当访问某个表单的某个元素的时候，可以使用上面两种方法。

案例3：form对象

<!DOCTYPE html><html>  <head>    <title>forms.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript"><!--function test(){var allform = document.forms;//拿到所有的表单//window.alert(allform.length);//可以通过allform访问指定表单window.alert(allform[1].hobby2.value);window.alert(allform.item(1).hobby1.value);}//--></script>  </head>    <body>  <h1>个人信息</h1>   <form action="">   u:<input type="text" name="username"/><br>   p:<input type="password" name="pwd"/><br>   <input type="submit" value="提交"/>   </form>    <h1>兴趣爱好</h1>   <form action="">   爱好1:<input type="text" name="hobby1"/><br>   爱好2:<input type="text" name="hobby2"/><br>   <input type="submit" value="提交"/>   </form>   <input type="button" value="testing" onclick="test()"/>  </body></html>

在验证表单的时候，可以在

也可以在

写一个就可以了，没有必要多写，否则验证两次，不划算！

images对象（集合）/img对象
imagesàimg对象

onload 图片在加载成功后调用
onerror图片在加载失败后调用

links对象（集合）定义：
links—>link对象，与前面类似

table对象
鉴于table对象在web编程中的重要性，这里重点强调table对象。
table对象代表一个html表格。
在HTML文档中<table>标签每出现一次，一个table对象就会被创建。

table对象的例子参照window对象3中的猜拳游戏！

0 0