js(11)
style对象的相关案例
<!DOCTYPE html> <html> <head> <title>MyHtml.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"> <script language="javascript" type="text/javascript"> //有的浏览器认language，有的浏览器认type function gouwu(obj){ var fruits=document.getElementsByName("fruit"); var totalPrice=0; //遍历所有的checkbox，计算新的总价 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" onclick="gouwu(this)" value="10"/>苹果10元 数量<input type="text" id="pg" /><br/> <input type="checkbox" name="fruit" onclick="gouwu(this)" value="20"/>香蕉20元<br/> <input type="checkbox" name="fruit" onclick="gouwu(this)" value="30"/>西瓜30元<br/> <input type="checkbox" name="fruit" onclick="gouwu(this)" value="40"/>栗子40元<br/> <input type="checkbox" name="fruit" onclick="gouwu(this)" value="50"/>哈密瓜50元<br/> 总价格是：<span id="myspan">0元</span> </body> </html>
代码：（说明，该代码实现了两种方式（超链接，复选框））
<!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"> <script language="javascript" type="text/javascript"> //有的浏览器认language，有的浏览器认type function selectCheck(obj){ //window.alert(obj.innerText); var fruits=document.getElementsByName("fruit"); if(obj.innerText=="全选"){ for(var i=0;i<fruits.length;i++){ fruits[i].checked=true; } }else{ for(i=0;i<fruits.length;i++){ fruits[i].checked=false; } } } //响应复选框 function selectCheck2(){ var fruits=document.getElementsByName("fruit"); if(myselect.checked){ for(var i=0;i<fruits.length;i++){ fruits[i].checked=true; } } } </script> </head> <body> <h1>我的购物车</h1> <input type="checkbox" name="fruit" onclick="gouwu(this)" value="10"/>苹果10元<br/> <input type="checkbox" name="fruit" onclick="gouwu(this)" value="20"/>香蕉20元<br/> <input type="checkbox" name="fruit" onclick="gouwu(this)" value="30"/>西瓜30元<br/> <input type="checkbox" name="fruit" onclick="gouwu(this)" value="40"/>栗子40元<br/> <input type="checkbox" name="fruit" onclick="gouwu(this)" value="50"/>哈密瓜50元<br/> <a href="#" onclick="selectCheck(this)">全选</a> <a href="#" onclick="selectCheck(this)">取消</a> <input type="checkbox" id="myselect" onclick="selectCheck2()" />是否全选 </body> </html>
form对象
form对象定义：按照表单在文档中的顺序得到form对象，forms对象集合中包括了当前文档的所有form对象。
forms对象集合/form对象
forms对象集合有
length:返回大小
item(index);指定取出forms对象集合的第几个form对象。
说明：当访问某个表单的某个元素时，可以使用下面两种方式：
（1）document.forms（第几个表单）.元素的名字
（2）document.forms.item（第几个表单）.元素的名字
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script language="javascript" type="text/javascript"> <!-- function test(){ //如果取得所有的表单 var allforms=document.forms; //window.alert(allforms.length); //可以通过allforms去访问指定表单 window.alert(allforms[1].hobby2.value); //window.alert(allforms.item(1).hobby2.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="提交"/><br/> </form> <h1>兴趣爱好</h1> <form action="?"> 爱好1:<input type="text" name="hobby1"/><br/> 爱好2:<input type="text" name="hobby2"/><br/> <input type="submit" value="提交"/><br/> </form> <input type="button" value="tesing" onclick="test()"/> </body> </html>
表单的一个验证综合案例：
要求：当用户在提交表单的时候，要给出响应的提示信息。
在验证表单的时候，可以在<form action="" onsubmit="函数"/>
也可：
<input type="submit" onclick="函数"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link href="my.css" type="text/css" rel="stylesheet"> <script type="text/javascript" language="javascript"> function checkinfo(){ span1.innerText=""; span2.innerText=""; span3.innerText=""; var re=true; //获取表单的用户名 var len1=document.forms[0].username.value.length; //window.alert("ok"); if(len1<4||len1>6){ //window.alert("ok"); span1.innerText="用户名应在4-6位间"; //window.alert(innerText); re=false; //如果在这里就直接返回，那么就无法执行下面代码了 } //判断密码是否ok var len2=document.forms[0].pwd1.value.length; //window.alert(len2); if(len2<=3){ span2.innerText="密码要求大于3位"; re=false; } if(document.forms[0].pwd2.value!=document.forms[0].pwd1.value){ span3.innerText="两次密码不一样"; re=false; } return re; } </script> </head> <body> <h1>用户注册</h1> <form action="" onsubmit="return checkinfo()"> <table border="1"> <tr> <td class="td1">用户名</td> <td class="td2"><input class="style1" type="text" name="username"/><span id="span1"></span> </td> </tr> <tr> <td>密码</td> <td><input class="style1" type="password" name="pwd1" /><span id="span2"></span> </td> </tr> <tr> <td>确认密码</td> <td><input class="style1" type="password" name="pwd2" /><span id="span3"></span> </td> </tr> <tr> <td>年龄</td> <td><input class="style1" type="text" name="age" /> </td> </tr> <tr> <td>电子邮件</td> <td><input class="style1" type="text" name="email" /> </td> </tr> <tr> <td>电话号码</td> <td><input class="style1" type="text" name="phone" /> </td> </tr> <tr> <td><input type="submit" onclick="return checkinfo()" value="注册新用户" /> </td> <td><input type="reset" value="重新填写" /> </table> </form> </body> </html>
img对象代表一个图片，在HTML文档中<img>每出现一次，就会创建一个img对象。
img对象的事件句柄
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script language="javascript" type="text/javascript"> function test1(){ window.alert("no ok"); } </script> </head> <body> <img src="1.png" onerror="test1()"/> </body> </html>
可以用来检验图片是否正确加载。
html和htm有什么区别？
在windows操作系统中是没有区别的。
htm是来源于老的8.3文件格式，DOS操作系统只能支持长度为3位的后缀名。
links对象
all对象，可以得到所有节点。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script language="javascript" type="text/javascript"> function test1(){ window.alert("no ok"); } function abc(){ var myall=document.all; for(var i=0;i<myall.length;i++){ window.alert(myall[i].nodeType+" "+myall[i].nodeName); } } </script> </head> <body> <img src="1.jpg" onerror="test1()"/> <span id="myid"></span> <input type="button" value="测试" onclick="abc()"/> </body> </html>
all对象在遍历的时候会用到。
button对象。
select对象。
table对象。
1.rows[]表格中所有行的一个数组（针对表格）
2.表格中某一行所有单元格的一个数组（针对行）
使用方法如下所示：
for(var i=0;i<mytab.rows.length;i++){ //取出一行 //mytab.rows[i] 第i行 var eachRow=mytab.rows[i]; //对该行遍历 //eachRow.cells表示 eachRow所有列 for(var j=0;j<eachRow.cells.length;j++){ window.alert(eachRow.cells[j].innerText); } }
完整代码如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" language="javascript"> <!-- function test(){ //取出所有行 /* var myrows=mytab.rows; window.alert(myrows.length); */ //mytab.rows：表示所有行 for(var i=0;i<mytab.rows.length;i++){ //取出一行 //mytab.rows[i] 第i行 var eachRow=mytab.rows[i]; //对该行遍历 //eachRow.cells表示 eachRow所有列 for(var j=0;j<eachRow.cells.length;j++){ //window.alert("ok"); //取出数据 window.alert(eachRow.cells[j].innerText); } } } function test2(){ mytab.deleteRow(1); } function test3(){ var tableRow=mytab.insertRow(1); //该方法创建一个Table对象，表示一个新的<tr>标记 tableRow.insertCell(0).innerText="3"; tableRow.insertCell(1).innerText="吴用"; tableRow.insertCell(2).innerText="智多星"; } //--> </script> </head> <body> <h1>英雄排行榜</h1> <table id="mytab" border="1px"> <tr><td>排名</td><td>姓名</td><td>外号</td> <tr><td>1</td><td>宋江</td><td>及时雨</td> <tr><td>2</td><td>卢俊义</td><td>玉麒麟</td> </table> <input type="button" value="tesing" onclick="test()"/> <input type="button" value="tesing2" onclick="test2()"/> <input type="button" value="插入一行" onclick="test3()"/> </body> </html>
上述代码可以实现表格一行的插入和删除。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>table2.html</title> <script type="text/javascript" language="javascript"> <!-- function addHero(){ //获取用户输入的信息 var newTableRow=mytab.insertRow(mytab.rows.length); newTableRow.insertCell(0).innerText=no.value; newTableRow.insertCell(1).innerText=username.value; newTableRow.insertCell(2).innerText=nickname.value; } //--> </script> </head> <body> <h1>英雄排行榜</h1> <table id="mytab" border="1px"> <tr><td>排名</td><td>姓名</td><td>外号</td> <tr><td>1</td><td>宋江</td><td>及时雨</td> <tr><td>2</td><td>卢俊义</td><td>玉麒麟</td> </table> <h1>请输入新的好汉</h1> 编号<input type="text" id="no"/><br/> 名字<input type="text" id="username"/><br/> 外号<input type="text" id="nickname"/><br/> <input type="button" value="添加" onclick="addHero()"/> </body> </html>
随着前台点击，后台就会发生相应的改变，这是通过ajax技术实现的。
以下代码实现插入表格数据，并且不允许有重复的编号。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>table2.html</title> <script type="text/javascript" language="javascript"> <!-- function addHero(){ //为了让插入的数据编号有序，并且重复 //遍历这个表格看有没有重复的编号 for(var i=0;i<mytab.rows.length;i++){ var eachRow=mytab.rows[i]; if(eachRow.cells[0].innerText==no.value){ window.alert("不允许编号重复"); return; } } //获取用户输入的信息 var newTableRow=mytab.insertRow(mytab.rows.length); newTableRow.insertCell(0).innerText=no.value; newTableRow.insertCell(1).innerText=username.value; newTableRow.insertCell(2).innerText=nickname.value; } //--> </script> </head> <body> <h1>英雄排行榜</h1> <table id="mytab" border="1px"> <tr><td>排名</td><td>姓名</td><td>外号</td> <tr><td>1</td><td>宋江</td><td>及时雨</td> <tr><td>2</td><td>卢俊义</td><td>玉麒麟</td> </table> <h1>请输入新的好汉</h1> 编号<input type="text" id="no"/><br/> 名字<input type="text" id="username"/><br/> 外号<input type="text" id="nickname"/><br/> <input type="button" value="添加" onclick="addHero()"/> </body> </html>
作业：
要求：
点击修改超链接，修改超链接位置变成确定按钮，然后姓名和绰号都变成文本框了。
