漫漫学习之路何其久远,只有抛弃浮躁,静下来看书方能有所收获.
写此文章仅为记录自身学习之路,文章内容不是固定的,每当我发现新的东西就会添加进去.文章也可能有错误,希望看到的兄弟能帮我指出,在此小弟谢谢了.
1.Form对象
除了通过ID TagName等来获得form对象 还可以直接通过document.formName获得
例子1-1:
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload =function (){
vara = document.form1;
alert(a);
}
</script>
</head>
<body>
<formid="form1" name="form1" method="post"action="">
<p>
<label>
<input type="radio"name="RadioGroup1" value="A" id="RadioGroup1_0"/>
AA</label>
<br />
<label>
<input type="radio"name="RadioGroup1" value="B" id="RadioGroup1_1"/>
BBB</label>
<br />
<label>
<input type="radio"name="RadioGroup1" value="C" id="RadioGroup1_2"/>
CCC</label>
<br />
</p>
</form>
</body>
</html>
注意:如果name重名了 返回一个节点列表NodeList(尽量不要重名),可以通过索引访问
2.获取表单元素
(1)在form中 访问表单控件 ,可直接通过name访问(同样重名会返回一个类数组)
window.onload =function (){
var a = document.form1;
alert(a.RadioGroup1[0].value);//返回A
}
(2) form对象有个elements属性,包含了所有的表单控件(不包括div之类的)
window.onload =function (){
var a = document.form1;
alert(a.elements.length);//返回3
}
3,form对象有个onsubmit事件 ,当表单提交,就会发生submit事件,我们可以通过这个来检测内容是否正确
返回false 就不会提交
window.onload =function (){
varf = document.form1;
f.οnsubmit=function(){
if(true/*要检测内容*/) return true;
else return false;}
}
4.checked
单选按钮和复选框 都有一个checked属性 ,表示是否被选中
window.onload =function (){
var f = document.form1;
if(f.RadioGroup1[0].checked) alert(true);//如果被选中,checked属性就是true ,就会返回true
}
5.文本框
文本框的value表示内容 ,defaultValue表示默认内容
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload =function (){
var f = document.form1;
f.οnsubmit=function(){alert(f.input.value);}
}
</script>
</head>
<body>
<formid="form1" name="form1" method="post"action="aaa">
<input type="text"value="阿斯蒂芬" name='input'/>
<input name=""type="submit" />
</form>
</body>
</html>
6.复选框select对象
(1)select对象有个value属性,表示当前选中的内容
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload =function (){
var f = document.form1;
f.οnsubmit=function(){alert(f.s.value);return false;}
}
</script>
</head>
<body>
<formid="form1" name="form1" method="post"action="aaa">
<select name="s">
<optionvalue="A">a</option>
<optionvalue="B">b</option>
</select>
<input name=""type="submit" />
</form>
</body>
</html>
//点击提交返回A
(2)有个selectedIndex属性 ,表示选中的内容的下标 第一个为0,第二为1;
window.onload =function (){
var f = document.form1;
f.οnsubmit=function(){alert(f.s.selectedIndex);return false;}
}
//如果选中第一个返回0
(3)有个options类数组,包含了所有的option
window.onload =function (){
varf = document.form1;
f.οnsubmit=function(){alert(f.s.options.length);return false;}
}
//返回2
注意这个options和数组很像,可以改变length ,可以直接对options[0]赋值
var o = newOption("t",'v');
f.options[0] = o;
(3)添加option
可以通过creatElement 和 appendChild方法添加
但是有更好的方法
var f = document.form1.s;//获得select对象
var o = new Option("t",'v');//创建一个option对象 new Option('text值','value值')
f.add(o,f.options[0]);//select对象的add方法 添加option add(‘要添加的option对象’,‘已存在的option对象’)将会添加到这个已存在对象的前面 如果想要添加到最后 add(‘要添加对象’,null);
(4)删除option
select的remove方法 select.remove(下标)
window.onload =function (){
var f = document.form1.s;
var o = new Option("t",'v');
f.remove(0);
}