您的位置：首页 > Web前端 > JavaScript

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

2014-03-23 21:20 471 查看


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>


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

<form action=”” onsubmit=”函数”/>

也可以在

<input type=”submit” onclick=”函数”/>

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

images对象（集合）/img对象

imagesàimg对象

onload 图片在加载成功后调用

onerror图片在加载失败后调用

links对象（集合）定义：

links—>link对象，与前面类似

table对象

鉴于table对象在web编程中的重要性，这里重点强调table对象。

table对象代表一个html表格。

在HTML文档中<table>标签每出现一次，一个table对象就会被创建。





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


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航