A. 事件处理：通常将鼠标或者热键的动作称为事件，由鼠标或热键引发的一连串程序动作，称为事件驱动。对事件进行处理的程序或函数称为事件处理程序。
- 窗口或页面的事件处理
事件 | 说明 |
onBlur | 当前元素失去焦点时触发 |
onFocus | 当某个元素获得焦点触发 |
onLoad | 页面内容完成时触发 |
onUnload | 页面退出或重置触发 |
2.键盘或鼠标的事件处理
onClick | 鼠标单击时触发 |
onDbClick | 鼠标双击时触发 |
onMouseDown | 按下鼠标时触发 |
onMouseMove | 移动鼠标时触发 |
onMouseOut | 离开某个对象范围触发 |
onMouseOver | 移动到某个对象范围上触发 |
onMouseUp | 按下鼠标后松开鼠标时触发 |
onKeyPress | 键盘上某个键被按下并释放时触发 |
onKeyDown | 键盘上某个键被按下时触发 |
onKeyup | 键盘上某个键被放开时触发 |
事件处理模型通常是用函数完成，事件=“函数名” 如
B.表单元素
- 表单元素的通用属性与方法
form属性：获取该表单控件所属的表单对象
name属性：获取或设置表单控件的名称
type属性：获取表单控件的类型
value属性：获取表单控件的值
focus方法：让表单控件对象获得焦点
blur方法：让表单对象失去焦点
2.文本框
value属性：获得文本框的值，值是字符串类型
defaultValue属性：获得文本框的默认值，值是字符串类型
readonly属性:只读，文本框内容不能被修改
focus方法：获得焦点，即获得鼠标光标
blur方法：失去焦点
select方法：选中文本框内容，突出显示输入区域
3.复选框
checked属性：复选框是否被选中，选中为true，未选中为false
value属性：设置或获取复选框的值
4.单选按钮
与复选框相似
5.下拉列表
length属性：选项个数
selectedIndex属性：当前被选中选项的索引
options属性：所有选项组成一个数组，options表示整个选项数组，第一个选项即为options[0]。
option的value属性：标记中的value所指定的值
option的text属性：显示与界面中的文本，即...之间的部分
增加选项：每个选项都是一个option对象，可以创建option对象，然后添加到select的末尾 如select.options[select.length]=new Option(text,value);
<html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script type="text/javascript"> function gg(){ var opObjeect=document.forms[0].elements["cities"]; for(var i=0;i if(opObject.options[i].selected) { alert(opObjeect.options[i].value); alert(opObjeect.options[i].text); } } //增加列表项 opObjeect.options[opObjeect.length]=new Option("新增"+1,"new"+1); }script> head><body><form action=""><select name="cities" onchange="gg()"> <option value="dalian">大连option> <option value="beijing">北京option> <option value="shanghai">上海option> <option value="guangzhou">广州option>select>form>body>html>
C表单验证
用户在表单中输入的内容提交到服务器之前，在客户端利用表单控件产生的事件，利用正则表达式验证输入数据的有效性。
正则表达式：(有点复杂，百度搜就行)
常见如下
1匹配中文:[\u4e00-\u9fa5]
2、英文字母:[a-zA-Z]
3、数字:[0-9]
4、匹配中文，英文字母和数字及下划线：^[\u4e00-\u9fa5_a-zA-Z0-9]+$
同时判断输入长度：
[\u4e00-\u9fa5_a-zA-Z0-9_]{4,10}
5、不能以_开头 (?!_) 不能以_结尾 (?!.*?_$) 至少一个汉字、数字、字母、下划线[a-zA-Z0-9_\u4e00-\u9fa5]+ 与字符串结束的地方匹配 $
6、只含有汉字、数字、字母、下划线，下划线位置不限：
^[a-zA-Z0-9_\u4e00-\u9fa5]+$
7、由数字、26个英文字母或者下划线组成的字符串 ^\w+$
8、2~4个汉字 "^[\u4E00-\u9FA5]{2,4}$";
9、最长不得超过7个汉字，或14个字节(数字，字母和下划线)正则表达式
^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$
10、匹配双字节字符(包括汉字在内)：[^x00-xff]
评注：可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1)
11、匹配空白行的正则表达式：ns*r
评注：可以用来删除空白行
12、匹配HTML标记的正则表达式：]*>.*?|<.>
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力
13、匹配首尾空白字符的正则表达式：^s*|s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式
14、匹配Email地址的正则表达式：^[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$
评注：表单验证时很实用
15、手机号：^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$
16、身份证：(^\d{15}$)|(^\d{17}([0-9]|X|x)$)
示例：
<html lang="en"><head> <meta charset="UTF-8"> <title>表单验证title> <script type="text/javascript"> function checkEmail(){ var exp=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; if(!exp.test(document.forms[0].email.value)){ alert("Email格式错误"); document.forms[0].email.focus(); return false; }else{ alert("Email格式正确"); return true; } }script>head><body><form action=""> Mail:<input type="text" name="email"/><br> <input type="button" value="提交" onclick="return checkEmail()"/>form>body>html>正确输入的情况
错误输入的情况
