JavaScript笔记（七）
文本对象：
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.文本对象名称.属性
document.表单名称.文本对象名称.方法（参数）
事件处理程序：
onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect
关于上例，为什么(obj.value.length==4)的判断，不能写成(obj.value.length==obj.maxlength)?而且我alert了多时，obj.type和obj.size都可以，就maxlength不好用，还是挺费解的。有达人解决一下吧，谢啦
密码对象：
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.密码对象名称.属性
document.表单名称.密码对象名称.方法（参数）
事件处理程序：
onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect
*注：isNaN是js自带的函数，返回的是Boolean值
isNaN=is Not a Number
用于判断是否是数字
按钮对象、提交按钮对象、重置按钮对象：
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.按钮对象名称.属性
document.表单名称.按钮对象名称.方法（参数）
事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
隐藏对象：
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.隐藏对象名称.属性
document.表单名称.隐藏对象名称.方法（参数）
单选按钮对象：
格式：
document.forms[索引].elements[索引](索引).属性
document.forms[索引].elements[索引](索引).方法（参数）
document.表单名称.单选对象名称[索引].属性
document.表单名称.单选对象名称[索引].方法（参数）
事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
复选框对象：
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.单选对象名称[索引].属性
document.表单名称.单选对象名称[索引].方法（参数）
事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
此处如果想取到提交的颜色，应该怎么做啊？
天上如下代码即可：位置自己找：）还是憋着不问自己解决有成就感啊
需要注意的是，array不要定义数，否则在打印少于3个的时候会有“,”，
再就是js打印list不需要遍历，赞一个
选择对象：
事件处理程序：
onBlur onClick onChange onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
选项对象：选择对象的子对象
格式：
<option value="值" selected>文字</option>
new Option([文字[,值[,defaultSelected[,selected]]]])
例：
用某个大牛的话说，这里选完之后，应该把左边选项中相应的值给去掉
不知道怎么做，hide不好用啊
/* -------- 1.htm -------- */
<上例完>
文本区域对象：
事件处理程序：
onBlur onClick onChange onSelect onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
文件上传对象：
事件处理程序：
onBlur onClick onSelect onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.文本对象名称.属性
document.表单名称.文本对象名称.方法（参数）
事件处理程序：
onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect
<FORM>
姓名：
<INPUT TYPE="text" NAME="name">
<INPUT TYPE="button" VALUE="请单击" onClick=alert("谢谢你，"+this.form.name.value)>
</FORM>
<Script>
function getFocus(obj) {
obj.style.color='red';
obj.style.background='#DBDBDB';
}
function getBlur(obj) {
obj.style.color='black';
obj.style.background='white';
}
</Script>
<BODY onLoad=document.form1.name.focus()>
<FORM NAME="form1">
姓 名：<INPUT TYPE="text" NAME="name"
onFocus=getFocus(this) onBlur=getBlur(this)><BR>
电 话：<INPUT TYPE="text" NAME="tel"
onFocus=getFocus(this) onBlur=getBlur(this)><BR>
</FORM>
</BODY>
<Script>
var i = 0;
function movenext(obj,i) {
if(obj.value.length==4){
document.forms[0].elements[i+1].focus();
}
}
function result() {
fm = document.forms[0];
num = fm.elements[0].value +
fm.elements[1].value +
fm.elements[2].value +
fm.elements[3].value ;
alert("你输入的信用卡号码是"+ num);
}
</Script>
<BODY onLoad=document.forms[0].elements[i].focus()>
请输入你的信用卡号码：
<form>
<input type=text size=3 maxlength=4 onKeyup=movenext(this,0)> -
<input type=text size=3 maxlength=4 onKeyup=movenext(this,1)> -
<input type=text size=3 maxlength=4 onKeyup=movenext(this,2)> -
<input type=text size=3 maxlength=4 onKeyup=movenext(this,3)>
<input type=button value=显示 onClick=result()>
</form>
</BODY>
关于上例，为什么(obj.value.length==4)的判断，不能写成(obj.value.length==obj.maxlength)?而且我alert了多时，obj.type和obj.size都可以，就maxlength不好用，还是挺费解的。有达人解决一下吧，谢啦
密码对象：
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.密码对象名称.属性
document.表单名称.密码对象名称.方法（参数）
事件处理程序：
onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect
<Script>
function checkPw() {
fm = document.form1;
if (fm.pw2.value != fm.pw1.value) {
alert("密码不符，请重新输入");
document.form1.pw2.select();
}
else
alert("谢谢你，"+fm.name.value);
}
</Script>
<BODY onLoad=document.form1.name.focus()>
<FORM NAME="form1">
姓 名：<INPUT TYPE="text" NAME="name"><BR>
输入密码：<INPUT TYPE="password" NAME="pw1"><BR>
重新输入：<INPUT TYPE="password" NAME="pw2"><BR>
<INPUT TYPE="button" VALUE="填好了" onClick=checkPw()>
<INPUT TYPE="reset" VALUE="重 填">
</FORM>
</BODY>
<Script>
function isInt(elm) {
if (isNaN(elm)) {
alert("你输入的是" + elm + "\n不是数字！");
document.forms[0].pw.value = "";
return false;
}
if (elm.length != 4) {
alert("请输入四位数数字！");
document.forms[0].pw.value = "";
return false;
}
}
</Script>
<form action="test.asp" onSubmit="return isInt(this.pw.value)">
请输入四位数数字密码：<BR>
<input type="password" name="pw">
<input type="submit" value="检查">
</form>
*注：isNaN是js自带的函数，返回的是Boolean值
isNaN=is Not a Number
用于判断是否是数字
按钮对象、提交按钮对象、重置按钮对象：
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.按钮对象名称.属性
document.表单名称.按钮对象名称.方法（参数）
事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
隐藏对象：
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.隐藏对象名称.属性
document.表单名称.隐藏对象名称.方法（参数）
单选按钮对象：
格式：
document.forms[索引].elements[索引](索引).属性
document.forms[索引].elements[索引](索引).方法（参数）
document.表单名称.单选对象名称[索引].属性
document.表单名称.单选对象名称[索引].方法（参数）
事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
<Script>
function show() {
var x = "先生";
if (document.form1.sex[1].checked)
x = "小姐";
alert(document.form1.name.value + x);
}
</Script>
<FORM NAME=form1>
姓名：<INPUT TYPE="text" NAME="name"><BR>
你是：<INPUT TYPE="radio" NAME="sex" CHECKED>帅哥
<INPUT TYPE="radio" NAME="sex">美女<BR>
<INPUT TYPE="button" VALUE="请单击" onClick=show()>
</FORM>
复选框对象：
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.单选对象名称[索引].属性
document.表单名称.单选对象名称[索引].方法（参数）
事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
<Script>
function count() {
var checkCount=0;
var num = document.form1.elements.length;
for (var i=0; i<num; i++) {
if (document.form1.elements[i].checked)
checkCount++;
}
alert ("你喜欢 "+ checkCount + "种颜色。")
}
</Script>
<FORM NAME=form1>
请选择你喜欢的颜色：<BR>
<INPUT TYPE="checkbox" NAME="red">红色
<INPUT TYPE="checkbox" NAME="green">绿色
<INPUT TYPE="checkbox" NAME="blue">蓝色<BR>
<INPUT TYPE="button" VALUE="请单击" onClick=count()>
</FORM>
此处如果想取到提交的颜色，应该怎么做啊？
天上如下代码即可：位置自己找：）还是憋着不问自己解决有成就感啊
需要注意的是，array不要定义数，否则在打印少于3个的时候会有“,”，
再就是js打印list不需要遍历，赞一个
var list = new Array();
list[i] = document.form1.elements[i].name;
alert ("你喜欢 "+ checkCount + "种颜色。" + list)
选择对象：
事件处理程序：
onBlur onClick onChange onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
选项对象：选择对象的子对象
格式：
<option value="值" selected>文字</option>
new Option([文字[,值[,defaultSelected[,selected]]]])
<Script>
var url = new Array(3);
url[0] = "http://www.google.com.hk/";
url[1] = "http://www.baidu.com/";
url[2] = "http://cn.bing.com/";
function goto(form) {
var i = form.menu.selectedIndex;
if (i>0) {
location = url[i-1];
}
}
</Script>
<FORM>
<SELECT NAME="menu" onChange="goto(this.form)">
<OPTION>你喜欢哪一个搜索引擎?
<OPTION STYLE="color:red">◆Google
<OPTION STYLE="color:red">◇百度
<OPTION STYLE="color:red">◆必应
</SELECT>
</FORM>
<Script>
function getText() {
sel = document.forms[0].weekday
ans = sel.options[sel.selectedIndex].text
return ans;
}
</Script>
<FORM>请选择...
<SELECT name=weekday>
<OPTION VALUE="Monday">星期一
<OPTION VALUE="Tuesday">星期二
<OPTION VALUE="Wednesday">星期三
<OPTION VALUE="Thursday">星期四
<OPTION VALUE="Friday">星期五
<OPTION VALUE="Saturday">星期六
<OPTION VALUE="Sunday">星期日
</SELECT><P>
<INPUT TYPE="button" VALUE="取出选项的文字"
onClick="alert(getText())">
<INPUT TYPE="button" VALUE="取出选项的值"
onClick="alert(this.form.weekday.value)"><BR>
</FORM>
例：
用某个大牛的话说，这里选完之后，应该把左边选项中相应的值给去掉
不知道怎么做，hide不好用啊
<FORM NAME="form1">
你最喜欢哪一种水果?
<INPUT TYPE="text" NAME="fruit">
<A HREF="#" onClick="javascript:open('1.htm','','width=100')">
查询</A>
</FORM>
/* -------- 1.htm -------- */
<Script>
function choice() {
sel = document.forms[0].elements[0];
document.form1.fruit.value =
sel.options[sel.selectedIndex].text;
self.close();
}
</Script>
<FORM>
<SELECT onChange="choice()">
<OPTION>请选择
<OPTION>西瓜
<OPTION>香蕉
</SELECT>
</FORM>
<上例完>
<Script>
function createOptions(){
var option = new Option(document.form1.select1.value)
document.form1.select2.options[2] = option;
}
</script>
<form name="form1">
<select name="select1" size="10">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select>
<input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
</form>
<Script>
function createOptions(){
sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
var option = new Option(sel1.options[num].text);
sel2.options[2] = option;
}
</script>
<form name="form1">
<select name="select1" size="10">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select>
<input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
</form>
<Script>
function createOptions(){
sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
var option = new Option(sel1.options[num].text);
var item = sel2.options.length;
sel2.options[item] = option;
}
</script>
<form name="form1">
<select name="select1" size="10">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select>
<input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
</form>
<Script>
function createOptions(){
sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
if (num > 1) {
var option = new Option(sel1.options[num].text);
var item = sel2.options.length;
sel2.options[item] = option;
}
sel1.selectedIndex = 10000;
}
function delOptions() {
var num = document.form1.select2.selectedIndex;
if (num>1)
document.form1.select2.options[num] = null;
else
document.form1.select2.selectedIndex = 10000;
}
</script>
<form name="form1">
<select name="select1" size="10"
onDblClick="createOptions()">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select>
<input type="button" value="选择" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
<input type="button" value="删除" onClick="delOptions()">
</form>
文本区域对象：
事件处理程序：
onBlur onClick onChange onSelect onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
<Script>
function isTooLong(elm){
if (elm.length > 50) {
alert("留言内容太长，请修改后再发送....");
return false;
}
}
</script>
<FORM onSubmit="return isTooLong(this.msg.value)">
<TEXTAREA NAME="msg" COLS="30" ROWS="5" onFocus="this.value=''">
欢迎留言，不过请长话短说....
</textarea><BR>
<INPUT TYPE="submit" VALUE="留言完毕">
</FORM>
<STYLE>
INPUT {background-color:'99FFFF';color:"red"}
TEXTAREA {background-color:'99FFFF';color:"red"}
</STYLE>
<BODY BGCOLOR="99FFFF">
<FORM METHOD="post" ENCTYPE="text/plain" ACTION="mailto:[email protected]?subject=不错">
<TABLE>
<CAPTION>读者回函</CAPTION>
<TR><TD>姓 名：
<TD><INPUT TYPE="text" NAME="userName">
<TR><TD>电子邮件：
<TD><INPUT TYPE="text" NAME="email">
<TR><TD VALIGN="top">内 容：
<TD><TEXTAREA NAME="msg" ROWS="2" COLS="30">
我非常喜欢你的书，加油!!!
</TEXTAREA>
<TR><TD COLSPAN="2" ALIGN="center">
<INPUT TYPE="submit" VALUE="填好了">
</TABLE>
</FORM>
</BODY>
文件上传对象：
事件处理程序：
onBlur onClick onSelect onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove