项目中 js 备忘
document.getElementsByName();document.getElementById();
document.getElementsByTagName()的区别:
document.getElementsByName() 是根据控件名称获取这个控件对象，因为控件名称可以相同，返回的是一个对象数组。
document.getElementById() 是根据控件ID获取这个控件对象，因为控件ID唯一，返回的是一个对象。
document.getElementsByTagName() 是根据控件TAG获取这个控件对象，返回的是一个对象数组。
例如：
HTML中有控件如下：
<input type="radio" id="radio1" checked="checked" name="radiogroup1" />
<input type="radio" id="radio2" name="radiogroup1" />
<input type="radio" id="radio3" name="radiogroup1" />
则：
document.getElementsByName('radiogroup1') 取得的是这三个控件，可以用document.getElementsByName('radiogroup1') 取得的是第一个控件。
document.getElementById('radio1')取得的是第一个控件，
document.getElementsByTagName('input') 取得的是这三个控件，可以用document.getElementsByTagName('input') 取得的是第一个控件。
getElementsByName('delID')返回的是所有名称为'delID'的控件组成的数组，数组就是一种集合。
数组的运用实例：
<html><head><title></title><script type="text/javascript"><!-- function validate()//判断是否为空 { var array = getArray(); for (var i = 0; i < array.length; i++) { if(array.value==null||array.value==""){alert("有空值");return false} } alert("成功"); return true; } function getArray() { var array =new Array(); for (var i = 1; i <= 4; i++)//这里i设置为你以某种命名规则命名的控件数量 { array = document.getElementById('v' + i); //把以该命名规则命名的控件都放在array这个数组中 } return array;//返回包含以该命名规则命名的所有控件 }// --></script> </head><body><form action="" name="form1" method="post"><input type="text" name="a" id="v1" value="" />电脑<input type="text" name="a" id="v2" value="" />家电<input type="text" name="a" id="v3" value="" />中国<input type="text" name="a" id="v4" value="" />苹果<a href="#" mce_href="#" name="OK" >提交</a></form></body></html>
得到一个字符串实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script type="text/javascript"><!-- function validate() {var result="";for(var i=1;i<=4;i++){result+=document.getElementById('v'+i).value+","}alert(result); }// --></script> </head><body><form action="" name="form1" method="post"><input type="text" name="v1" id="v1" value="" />电脑<br /><input type="text" name="v2" id="v2" value="" />家电<br /><input type="text" name="v3" id="v3" value="" />中国<br /><input type="text" name="v4" id="v4" value="" />苹果<br /><input type="button" name="OK"value="提交"></form></body></html>
至少有一个checkbox 被选中实例：
<html><head><title></title><script type="text/javascript"><!-- function check(){var s = document.getElementsByName("pcs"); var check=0; //定义一个标识for(var i=0;i <s.length;i++){ if(s.checked){ check=1; } } alert(check); if(check == 0){ alert("至少要有一个checkbox被选中!"); return false; } }// --></script></head><body><form action="" name="f1" method="post" ><inputtype="checkbox" name="pcs" value="1"/>a <inputtype="checkbox" name="pcs" value="2"/>b <inputtype="checkbox" name="pcs" value="3"/>c <input type="checkbox" name="pcs" value="4"/>e <inputtype="checkbox" name="pcs" value="5"/>f <inputtype="checkbox" name="pcs" value="6"/>h <input type="submit" value="sub" /></form></body><html>
得到select 框中的有规律值的总和
<html><head><mce:script type="text/javascript"><!-- function getCount() { //alert("start");var count=0; var array =new Array(); for (var i = 1; i <= 3; i++) { array = document.getElementById('v' + i);if(array.value==0){ count=count+1;} }//alert(count); return count; }function isPass(){ //alert("start");var c=getCount();alert(c);}// --></mce:script></head><body><form> <SELECT name="v1"> <OPTION value="0"> 000 </OPTION> <OPTION value="1"> 1111</OPTION> <OPTION value="2"> 22222</OPTION> </SELECT><SELECT name="v2"> <OPTION value="0"> 0000</OPTION> <OPTION value="1"> 111</OPTION> <OPTION value="2"> 2222</OPTION> </SELECT><SELECT name="v3"> <OPTION value="0"> 0000</OPTION> <OPTION value="1"> 111</OPTION> <OPTION value="2"> 2222</OPTION> </SELECT> <INPUT type="Submit" name="test" value="submit"/></form></body></html>
在页面中新增控件实例：
<html><head><mce:script language="javascript"><!-- var count= 0 ; var maxfile = 5;//限制控件个数 增加元素 function addmx() { if(count >= maxfile) return;//限制最多maxfile个文件框 count++; //自增id不同的HTML对象，并附加到容器最后 var newDiv ="<div id=divStock" + count +">" + " <table align=center width=80% border=1><tr>" +"<td>股票代码</td><td><input name=stockList["+count+"].sdCode size=4></td>" +"<td>股票名称</td><td><input name=stockList["+count+"].sdName size=4></td>" +"<td>股票字母</td><td><input name=stockList["+count+"].sdPinYin size=4></td>" +"<td>股票类型</td><td><input name=stockList["+count+"].sdType size=4></td>"+ "</tr>" + "</table>" + " <a href="javascript:delrow(" mce_href="javascript:delrow("'divStock" + count + "');>删除</a>" + " </div>"; document.getElementById("coll").insertAdjacentHTML("beforeEnd", newDiv); } //删除指定元素 function delrow(diva) { count--; document.getElementById(diva).parentNode.removeChild(document.getElementById(diva)); } // --></mce:script></head><body> <a href="#" mce_href="#" id="">新增页面控件</a><div id="coll"></div></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>表单验证</title><script language="javascript" src="jquery-1.4.2.js" type="text/javascript"></script><script type="text/JavaScript"><!--//表单验证函数function check(){var msg="以下字段：\n";//所有的input 元素，包括：select 、textarea、button.$(":input").each(function(i){var isNull=$($(":input")).val();if(isNull==null||isNull==""){msg+=$(this).attr("cname");msg+=",";}});msg+="\n不能为空！\n--------------------------------\n以下字段：\n"//验证数字//var reg=/^\d*$|^0$/;//注意：故意限制了 0开头的数字。这种格式，如不需要，直接reg=/^\d+$/;//var reg = /^\d+(\.\d+)?$/;//小数也算纯数字var reg = /^\d+(\.\d{2})?$|^0$/;//这个是结合上述两种情况。并小数点后保留两位$("input").each(function(i){var isNum=$($("input")).val();//if(reg.test(isNum)!=true){msg+=$(this).attr("cname");msg+=",";}});msg+="\n只能为数字！"//alert(msg);}</script></head><body><form action="" method="get">姓名:<input name="a" type="text" value="" cname="姓名" ctype="str.4" notnull="notnull"/><br />编号:<input name="b" type="text" value="" cname="编号" ctype="num.16" notnull="notnull" /><br />次数:<input name="" type="text" value="" cname="次数" ctype="num.20" number="number" /><br />单价:<input name="" type="text" value="" cname="单价" ctype="num.20.2" number="number" /><br />备注:<textarea name="" cols="" rows="" cname="备注" ctype="str.100"notnull="notnull"></textarea><br />国家:<select name="" cname="国家" ctype=""notnull="notnull"></select><br /><input name="test" type="button" cname="测试" value="测试" /><br /></form></body></html> 回车将光标指定到自己设定的input输入框中<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title> 回车将光标定位到指定的位置 </title><meta name="Generator" content="EditPlus"><script src="jquery-1.4.2.js" type="text/javascript"></script></head><script type="text/javascript">$(function() { $("#myform input:text").keypress(function(e) { if (e.which == 13) //判断所按是否回车键 { var inputs = $("#myform :text");//获取表单中指定的输入框 var idx = inputs.index(this);//获取当前焦点输入框所处的位置 if (idx == inputs.length - 1)// 判断是否是最后一个输入框 { if (confirm("最后一个输入框已经输入。\n是否提交?")) //用户确认 $("#myform").submit(); //提交表单 } else { inputs.focus(); //设置焦点 inputs.select(); //选中文字 } return false;//取消默认的提交行为 } }); });</script><body><form id="myform"><label>姓名: </label><input type="text" id="username" name="username" tab="tab"/><label>年龄 : </label><input type="text" id="age" name="age" /><br /><label>民族 : </label><select type="select" id="nationality" name="nationality"></select><label>地址 : </label><input type="text" id="address" name="address" tab="tab"/><input type="submit" value="submit" /></form></body></html>
页:
[1]