1、基础知识
①关于name 与id 区别
ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。
ID和html页面内部元素相关,不和页面元素的内容相关。name则更多地和页面元素的内容相关
所以ID更多是在DOM中使用,name更多在后台服务器端调用。
关于name的使用:
用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示,比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
用途2: HTML元素Input type='radio'分组,我们知道radio button控件在同一个分组类,check操作是mutex的,同一时间只能选中一个radio,这个分组就是根据相同的Name属性来实现的。
用途3: 建立页面中的锚点,我们知道<a href="URL">link</a>是获得一个页面超级链接,如果不用href属性,而改用Name,如:<a name="PageBottom"></a>,我们就获得了一个页面锚点。
用途4: 作为对象的Identity,如Applet、Object、Embed等元素。比如在Applet对象实例中,我们将使用其Name来引用该对象。
用途5: 在IMG元素和MAP元素之间关联的时候,如果要定义IMG的热点区域,需要使用其属性usemap,使usemap="#name"(被关联的MAP元素的Name)。
用途6: 某些特定元素的属性,如attribute,meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。
显然这些用途都不是能简单的使用ID来代替掉的,所以HTML元素的ID和Name的却别并不是身份证号码和姓名这样的区别,它们更本就是不同作用的东西。
当然HTML元素的Name属性在页面中也可以起那么一点ID的作用,因为在DHTML对象树中,我们可以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。Name属性还有一个问题,当我们动态创建可包含Name属性的元素时,不能简单的使用赋值element.name = "..."来添加其Name,而必须在创建Element时,使用document.createElement('<element name = "myName"></element>')为元素添加Name属性。
② 提交表单
一般用户点击提交按钮或者图像时,就会提交表单内容
定义方式2种:
用input定义:<input type = "submit" value="Submit button"> / <input type = "submit" src = "a.gif">
直接用button定义:<button type = "submit" >Submit button</button>
若不想触发submit事件,用户自定义提交,可用form.submit() ;
注意:
1、提交表单最大的问题,就是重复提交表单。比如用户重复按多次按钮。解决办法:在第一次提交表单后就禁用提交按钮,或,用onsubmit事件忽略后续的提交
2、若要给submit按键添加事件处理程序,注意事件不要用onclick,要用onsubmit! 因为不同浏览器对于onclick与onsubmit处理方法不一样,可能存在先后顺序的时差
③ 重置表单
type=reset
这样一按就全部清空
或者form.reset()
④表单字段
可以用DOM方法访问表单字段。每一个表单都有elements属性,该属性是表单所有表单字段的集合,是一个有序列表。
例如是按照顺序的<input> <textarea> <button>等等,
var form = document.getElementById("form");
var field1 = form.elements[0]; //取得表单第一个字段内容
var field2 = form.elements["textbox1"] //取得名为textbox1的字段
如果很多表单控件都使用相同的name,比如一组单选按钮,name就会返回一个nodelist
表单字段的属性:
当取得表单字段后,可以利用其以下属性:
disabled: 布尔值,表示是否被禁用
name:当前字段名称
value:当前字段最终要交给服务器的值
type:当前字段类型,例如CheckBox,radio //表单中特有的属性,不是innerHTML,而是控件自身的value
表单字段的属性:
focus() //获得焦点
blur() //失去焦点
form.elements[0].focus(); //自动将焦点放到第一个字段上
对应的事件: onfocus,onblur,change
2、文本框
input type = "text"
单行输入文本框。size可以设置文本框的宽高。value可以设置文本框的初始值。maxlength可以设置最大输入长度
<textarea>
多行输入,初始值不能用value写,要放在<></>之间,不能指定最大长度
方法:
select:用于选择文本框中的所有文本 —— textbox.select(); //不接受参数
事件:
select
可以用selectStart与selectEnd来取得选择的文本,二者都是偏移量
①校验输入内容
1、屏蔽字符:
一般会禁止用户输入违规字符,就可以利用keypress写事件监听,然后用正则来检测
用getCharCode(event) 来获取用户输入的字符编码
再用String.fromCharCode(charcode)来转回string,利用正则表达式来检测
如果检测失败,可用preventDefault来屏蔽
2、剪切板
还有cut,copy,paste等等事件
3、选择框(下拉)
<select> + <option>
<select name="locaton" id = "location">
<option value="q">aaaa</option>
<option value="qq">bbbb</option>
<option value="qqq">cccc</option>
<option value="qqqq">dddd</option>
</select>
对于每一个option都有一个option对象,有以下属性可以调用:
index:当前选项在所有option集合的索引
selected:布尔值,表示是否被选中
text:文本
value:值
option:所有选项的合集
var text= selectbox.options[0].text; //第一个选项的文本
var value = selectbox.option[0].value; //第一个选项的值
选中的选项:
若为单选,则可以用selectedIndex来调取
举例:
var selectedoption = selectbox.options[selectbox.selectedIndex];
alert(selectedoption.value);
alert(selectedoption.text);
若为多选,用selected+循环,看所有option谁的状态为selected,是的话push一个数组,这样调取。selectedIndex默认只能看一个,后面的选项无效
for(var i=0, len=selectbox.options.length; i<len; i++){
option = selectbox.options[i];
if(option.selected){
if(option.selected){
result.push(option); //push到result数组中
}
}
}
4、序列化(提交表单)
是为了配和ajax技术,将name与value上传服务器时,将表单内容进行整合
name与value进行URL编码,然后用和号(&)分隔
然后有一些规定,比如禁用的不发送,只发送用户选择的选项,没选的不发送等等
书上有一段成熟的代码
5、富文本
富文本编辑(所见即所得):
在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性,这个空白的HTML页面可以被编辑,编辑对象就是该页面的<body>元素的HTML代码。
当designMode设置为on时,怎个文档都可以被编辑,然后就可以编辑文本,例如加粗斜体等等
实现:
方法一:
先自己写好一个HTML文档的格式,例如
<!DOCTYPE html>
<html>
<head>
<title>aaaa</title>
</head>
<body>
//此处可为空白,留着编写
</body>
</html>
将这个文档命名为blank.html
然后,在程序中插入<iframe>
<iframe name="richedit" style="height:100px;width:100px;" src="blank.html"></iframe>
<script>
window.οnlοad=function(){
frames["richedit"].document.designMode = "on";
}
</script>
这样在打开window之后,就会出现一个类似于文本编辑框的可编辑区,但是具有跟网页一样的样式
方法二:
直接给元素标签设置contenteditable
<div class="a" id = "b" contenteditable></div>
好处是不限于HTML文档iframe了,任何元素设置了这个属性都可以被编辑,该值可以改为true,false,inherit(继承父辈)
6、两个表单之间的互联(百度课程中涉及)
情景: 两个下拉菜单,一个为城市,一个为大学。当选择城市时,大学的option会随之改变
直接上代码,具体在GitHub中有
//html中,先只写全所有的城市option,与第一个城市对应的所有大学
//第一个select
<select name="select1" id="select1">
<option value="beijing">北京</option>
<option value = "shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
//第二个select,只写北京对应的就可以
<select name="select2" id="select2">
<option value="qinghua">清华大学</option>
<option value="beida">北京大学</option>
</select>
接下来两个select的交互,实际上就是如何读取第一个select的选项内容,以及如何动态的改写第二个select的option内容
function select(){
//先写好一组对象,名值对,分别是城市与大学的全部
var data={
beijing:["清华大学","北京大学"],
shanghai:["上海交大","复旦大学"],
guangzhou:["A大学","B大学"]
}
//接下来开始读取+更改
var source = document.getElementById("select1");
var target = document.getElementById("select2");
var select = source.options[source.options.selectedIndex.value]; //注意这句,就是利用selectedIndex.value来读取用户选中项的内容
target.innerHTML=""; //先清空原有的所有option
for(var i=0 ; i<data[selected].length; i++){
var opt = document.creatElement("option");
opt.innerHTML = data[selected][i]; //将之前的目录内容写进去
document.getELementById("select2").appendChild(opt); //把心的option写进去
}
}