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

最新推荐文章于 2024-08-19 20:53:10 发布

KLeonard

最新推荐文章于 2024-08-19 20:53:10 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/gavin_john/article/details/21887539

版权

☛Web前端同时被 2 个专栏收录

38 篇文章 3 订阅

订阅专栏

------ JavaScript

21 篇文章 0 订阅

订阅专栏

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" οnclick="buy(this)"/>苹果 10元 <br/>
   <input type="checkbox" name="fruit" value="20" οnclick="buy(this)"/>香蕉 20元<br/>
   <input type="checkbox" name="fruit" value="30" οnclick="buy(this)"/>西瓜 30元<br/>
   <input type="checkbox" name="fruit" value="40" οnclick="buy(this)"/>梨子 40元<br/>
   <input type="checkbox" name="fruit" value="50" οnclick="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" οnclick="buy(this)"/>苹果 10元 <br/>
   <input type="checkbox" name="fruit" value="20" οnclick="buy(this)"/>香蕉 20元<br/>
   <input type="checkbox" name="fruit" value="30" οnclick="buy(this)"/>西瓜 30元<br/>
   <input type="checkbox" name="fruit" value="40" οnclick="buy(this)"/>梨子 40元<br/>
   <input type="checkbox" name="fruit" value="50" οnclick="buy(this)"/>哈密瓜 50元<br/>
   <a href="#" οnclick="selectCheckBox(this)">全选</a>  
   <a href="#" οnclick="selectCheckBox(this)">取消</a>
   <input type="checkbox" id="myselect" οnclick="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" οnclick="test()"/>
  </body>
</html>

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

也可以在

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

images对象（集合）/img对象

imagesàimg对象

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

links对象（集合）定义：

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

table对象

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

table对象代表一个html表格。

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

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

KLeonard

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js_day26--js DOM编程（forms/form对象+table对象）

Day26 案例1：简易购物车 mycart.html --> <!-- function buy(obj){ //遍历所有的checkbox，计算新的总价 var fruits=document.getElementsByName("fruit");
复制链接

扫一扫

专栏目录