JavaScript-DOM编程-觅稀奇MeXiQi.COM

一、innerHTMLinnerText操作div和span

innerHTML和innerText属性有什么区别？
相同点：都是设置元素内部的内容
不同点：
innerHTML会把后面的“字符串”当做一段HTML代码解释并执行
innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待

示例代码：

<styletype="text/css">#div1{background-color:aqua;width:300px;height:300px;position:absolute;left:100px;top:100px;}</style><scripttype="text/javascript">window.onload=function(){vardtnElt=document.getElementById("dtn");dtnElt.onclick=function(){//设置div的内容//第一步:获取div的内容vardiv1Elt=document.getElementById("div1");//第二步:使用innerHTML属性来设置元素内部的部分//div1Elt.innerHTML="用户名输入为空！";//div1Elt.innerHTML="<fontcolor='red'>用户名输入为空！</font>";div1Elt.innerText="<fontcolor='red'>用户名输入为空！</font>";}}</script><inputtype="button"value="设置div的属性"id="dtn">javascript<divid="div1"></div>

二、JS的正则表达式（RegularExpression）

1、什么是正则表达式，有什么用？
正则表达式是一门独立的学科，基本每个语言都支持。
正则表达式不是JS专属的。不过在JS中使用居多。
通常使用正则表达式进行字符串格式匹配。

正则表达式是有一堆特殊的符号组成的一个表达式。
每一个特殊的符号都有特殊的代表含义。

例如：
qq号的正则表达式。
邮箱地址的正则表达式。

邮箱地址格式验证：
程序中有一个邮箱地址的正则表达式。
用户输入了一个邮箱地址。
那么邮箱地址的正则表达式和邮箱地址进行匹配，能匹配成功，表示合法，反之表示不合法。

2、对于javascript程序员来说，对于正则表达式掌握到什么程度？
第一：能够看懂正则表达式
第二：简单的正则要会写
第三：要能够独立的从网络当中搜索到你想要的正则表达式（搜索能力要有）
第四：要会创建JS的正则表达式对象。
第五：要会调用JS正则表达式对象的方法。

3、常见的正则表达式符号有哪些？
.匹配除换行符以外的任意字符
\w匹配字母或数字或下划线或汉字
\s匹配任意的空白符
\d匹配数字
\b匹配单词的开始或结束
^匹配字符串的开始
$匹配字符串的结束

*重复零次或更多次0-N次

重复一次或更多次1-N次

?重复零次或一次0或1次

{n}重复n次n次
{n,}重复n次或更多次n次
{n,m}重复n到m次n到m次
注意：数量永远匹配的都是前面的那个字符出现的次数。

\W匹配任意不是字母，数字，下划线，汉字的字符
\S匹配任意不是空白符的字符
\D匹配任意非数字的字符
\B匹配不是单词开头或结束的位置
[a-z]{1}a到z所有的字符中的任意1个。

[a-zA-Z0-9]{3,}前面这堆中的任意字符至少出现3个。

[1-9]没有指定数量的时候，默认是1个。

5、在JS中怎么创建正则表达式对象呢？

第一种方式：直接量语法
varregExp=/正则表达式/标记

第二种方式：使用内置类RegExp类。
varregExp=newRegExp(“正则表达式”,“标记”)

标记是可选项！！！！！都有哪些值可选呢？
g：全局global
i:忽略大小写ignorecase
gi:全局扫描，并且忽略大小写。

6、正则表达式对象有一个很重要的方法：
varemailRegExp=/^\w([-.]\w)@\w([-.]\w).\w([-.]\w)*$/
varok=emailRegExp.test(“用户输入的字符串”);
返回值ok是true表示，匹配成功了。>

其实在JS中，字符串String也是支持正则表达式的。

7、正则表达式对象的test()方法
true/false=正则表达式对象.test(用户填写的字符串)；
true：字符串格式匹配成功
false：字符串格式匹配失败

三、去除字符串前后空白trim函数

示例代码：

<body><scripttype="text/javascript">//自定义去除前后空白方法String.prototype.trim=function(){returnthis.replace(/^\s/,"").replace(/\s$/,"");}window.onload=function(){document.getElementById("btn").onclick=function(){varusername=document.getElementById("username").value;username=username.trim();alert("--->"username"<----");}}</script><inputtype="text"id="username"/><br><inputtype="button"value="获取用户名"id="btn"/></body>

四、表单验证

满足条件

（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码一致
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
（7）文本框再次获得焦点后，清空错误提示信息
（8）最终表单中所有项均合法方可提交

示例代码：

<body><scripttype="text/javascript">window.onload=function(){varusernameErrorElt=document.getElementById("usernameError");varusernameElt=document.getElementById("username");//失去焦点事件usernameElt.onblur=function(){//获取用户输入的用户名值varusername=usernameElt.value;//去除前后空格username=username.trim();//alert("-->"username"<--");//判断输入的用户名是否为空if(username===""){//用户名为空时执行此逻辑usernameErrorElt.innerText="用户名不能为空！";}else{//用户名不为空时执行此逻辑//用户名必须在[6-14]位之间if(username.length<6||username.length>14){//此时输入长度不符usernameErrorElt.innerText="用户名的长度必须是6-14之间";}else{varregExp=/^[A-Za-z0-9]$/;varok=regExp.test(username);if(!ok){//表示不符合规则usernameErrorElt.innerText="用户名只能有数字和字母组成，不能含有其它符号";}usernameErrorElt.innerText="";}}}//获得焦点事件usernameElt.onfocus=function(){//出错点,函数内的逻辑（不包含在if语句)肯定会执行!,if判断语句一定要在前!!!!!//当用户名文本框获得焦点时,清空文本框非法内容if(usernameErrorElt.innerText!=""){usernameElt.value="";}//当用户名文本框获得焦点时span清空usernameErrorElt.innerText="";}//获取密码验证标签varuserpwdErrorElt=document.getElementById("userpwdError");//获取确认密码标签varuserpwd2Elt=document.getElementById("userpwd2");//失去焦点事件userpwd2Elt.onblur=function(){//获取密码标签varuserpwdElt=document.getElementById("userpwd");//获取值varuserpwd=userpwdElt.value;varuserpwd2=userpwd2Elt.value;if(userpwd===userpwd2){userpwdErrorElt.innerText="";}else{userpwdErrorElt.innerText="密码输入错误";}}//绑定获得焦点事件userpwd2Elt.onfocus=function(){if(userpwdErrorElt.innerText!=""){userpwd2.value="";}//当用户名文本框获得焦点时span清空userpwdErrorElt.innerText="";}//获取邮箱验证标签varemailErrorElt=document.getElementById("emailError");//获取邮箱标签varemailElt=document.getElementById("email");//绑定邮箱失去焦点事件emailElt.onblur=function(){//获取值varemail=emailElt.value;varemailRegExp=/^\w([-.]\w)*@\w([-.]\w)*\.\w([-.]\w)*$/;varok=emailRegExp.test(email);if(ok){emailErrorElt.innerText="";}else{emailErrorElt.innerText="邮箱输入格式不对！";}}//绑定邮箱获得焦点事件emailElt.onfocus=function(){if(emailErrorElt.innerText!=""){emailElt.value="";}emailErrorElt.innerText="";}//获取注册按钮标签varbtnElt=document.getElementById("btn");//定义鼠标单击事件btnElt.onclick=function(){//系统自动获取和失去焦点,先获得焦点再失去焦点usernameElt.focus();usernameElt.blur()userpwd2Elt.focus();userpwd2Elt.blur();emailElt.focus();emailElt.blur();if(usernameErrorElt.innerText==""&&userpwdErrorElt.innerText==""&&emailErrorElt.innerText==""){//如果数据合法就跳转//获取表单标签varuserformElt=document.getElementById("userform");//formElt.action="http://localhost:8080/jd/save";//专用方法,提交表单userformElt.submit();}}}</script><!--这个表单提交应该使用post，这里为了检测，所以使用get--><formid="userform"action="http://localhost:8080/jd/save"method="get">用户名：<inputtype="text"name="username"id="username"/><spanid="usernameError"></span><br>密码：<inputtype="text"name="userpwd"id="userpwd"/><br>确认密码：<inputtype="text"id="userpwd2"/><spanid="userpwdError"></span><br>邮箱：<inputtype="text"name="email"id="email"/><spanid="emailError"></span><br><!--<inputtype="submit"value="注册"/>--><inputtype="button"value="注册"id="btn"><inputtype="reset"value="重置"/></form></body>

注意：此程序表单提交如果要跳转页面需要使用后台服务器，如果没服务器，页面不会跳转

页面跳转（没有服务器时）：

五、复选框全选和取消全选

document.getElementById()
document.getElementsByName()
document.getElementsByTagName()

示例代码：

<body><scripttype="text/javascript">window.onload=function(){//获取多选框数组varaihaos=document.getElementsByName("aihao");//获取多选框标签varfirstChkElt=document.getElementById("firstChk");//设置鼠标单击事件firstChkElt.onclick=function(){for(vari=0;i<aihaos.length;i){//每个多选框都和头部多选框保持一致aihaos[i].checked=firstChkElt.checked;}}for(vari=0;i<aihaos.length;i){//给所有多选框设置鼠标单击事件varall=aihaos.length;aihaos[i].onclick=function(){varcheckedCount=0;//总数量和多选框数量相同的时候,第一个复选框选中for(vari=0;i<aihaos.length;i){if(aihaos[i].checked){checkedCount}}firstChkElt.checked=(all==checkedCount);}}}</script><inputtype="checkbox"id="firstChk"/><br><inputtype="checkbox"name="aihao"value="smoke"/>抽烟<br><inputtype="checkbox"name="aihao"value="drink"/>喝酒<br><inputtype="checkbox"name="aihao"value="tt"/>烫头</body>

六、获取下拉列表项中项的value

change事件

示例代码：

<body><!--第一种方式--><!--<selectonchange="alert(this.value)"><optionvalue="001">河南省</option><optionvalue="002">河北省</option><optionvalue="003">山东省</option><optionvalue="004">山西省</option></select>--><!--第二种方式--><scripttype="text/javascript">window.onload=function(){//获取下拉标签varfirstOptionElt=document.getElementById("firstOption");firstOptionElt.change=function(){alert(firstOptionElt.value);}}</script><selectid="firstOption"onchange="alert(this.value)"><optionvalue="001">河南省</option><optionvalue="002">河北省</option><optionvalue="003">山东省</option><optionvalue="004">山西省</option></select></body>

七、显示网页时钟

window.setInterval()
window.clearInterval()
主要两个函数

示例代码：

<body><scripttype="text/javascript">//出错点,start不能放在onload里!!!!!!!!!functiondisplayTime(){vartime=newDate();varstrTime=time.toLocaleString();document.getElementById("div").innerHTML=strTime;}//设置显示的事件一直会变化functionstart(){v=window.setInterval("displayTime()",1000);}functionstop(){window.clearInterval(v);}</script><inputtype="button"value="显示系统当前时间"onclick="start();"/><inputtype="button"value="时间停止"onclick="stop();"/><divid="div"></div></body>