一、innerHTML innerText操作div和span
innerHTML和innerText属性有什么区别？
相同点：都是设置元素内部的内容
不同点：
innerHTML会把后面的“字符串”当做一段HTML代码解释并执行
innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待
示例代码：
<style type="text/css"> #div1{ background-color: aqua; width: 300px; height: 300px; position: absolute; left: 100px; top: 100px; } </style> <script type="text/javascript"> window.onload = function(){ var dtnElt = document.getElementById("dtn"); dtnElt.onclick = function(){ //设置div的内容 //第一步:获取div的内容 var div1Elt = document.getElementById("div1"); //第二步:使用innerHTML属性来设置元素内部的部分 // div1Elt.innerHTML = "用户名输入为空！"; // div1Elt.innerHTML = "<font color='red'>用户名输入为空！</font>"; div1Elt.innerText = "<font color='red'>用户名输入为空！</font>"; } } </script> <input type="button" value="设置div的属性" id="dtn"> javascript<div id="div1"></div>
二、JS的正则表达式（Regular Expression）
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中怎么创建正则表达式对象呢？
第一种方式：直接量语法
var regExp = /正则表达式/标记
第二种方式：使用内置类RegExp类。
var regExp = new RegExp(“正则表达式”, “标记”)
标记是可选项！！！！！都有哪些值可选呢？
g：全局 global
i: 忽略大小写 ignorecase
gi: 全局扫描，并且忽略大小写。
6、正则表达式对象有一个很重要的方法：
var emailRegExp = /^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$/
var ok = emailRegExp.test(“用户输入的字符串”);
返回值ok是true表示，匹配成功了。>
其实在JS中，字符串String也是支持正则表达式的。
7、正则表达式对象的test()方法
true / false = 正则表达式对象.test(用户填写的字符串)；
true ： 字符串格式匹配成功
false ： 字符串格式匹配失败
三、去除字符串前后空白trim函数
示例代码：
<body> <script type="text/javascript"> //自定义去除前后空白方法 String.prototype.trim = function(){ return this.replace(/^\s+/,"").replace(/\s+$/,""); } window.onload = function(){ document.getElementById("btn").onclick = function(){ var username = document.getElementById("username").value; username = username.trim(); alert("--->" + username + "<----"); } } </script> <input type="text" id="username" /> <br> <input type="button" value="获取用户名" id="btn" /> </body>
四、表单验证
满足条件
（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码一致
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
（7）文本框再次获得焦点后，清空错误提示信息
（8）最终表单中所有项均合法方可提交
示例代码：
<body> <script type="text/javascript"> window.onload = function(){ var usernameErrorElt = document.getElementById("usernameError"); var usernameElt = document.getElementById("username"); //失去焦点事件 usernameElt.onblur = function(){ //获取用户输入的用户名值 var username = 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{ var regExp = /^[A-Za-z0-9]+$/; var ok = regExp.test(username); if(!ok){ //表示不符合规则 usernameErrorElt.innerText = "用户名只能有数字和字母组成，不能含有其它符号"; } usernameErrorElt.innerText = ""; } } } //获得焦点事件 usernameElt.onfocus = function(){//出错点,函数内的逻辑（不包含在if语句)肯定会执行!,if判断语句一定要在前!!!!! //当用户名文本框获得焦点时,清空文本框非法内容 if(usernameErrorElt.innerText != ""){ usernameElt.value = ""; } //当用户名文本框获得焦点时span清空 usernameErrorElt.innerText = ""; } //获取密码验证标签 var userpwdErrorElt = document.getElementById("userpwdError"); //获取确认密码标签 var userpwd2Elt = document.getElementById("userpwd2"); //失去焦点事件 userpwd2Elt.onblur = function(){ //获取密码标签 var userpwdElt = document.getElementById("userpwd"); //获取值 var userpwd = userpwdElt.value; var userpwd2 = userpwd2Elt.value; if(userpwd === userpwd2){ userpwdErrorElt.innerText = ""; }else{ userpwdErrorElt.innerText = "密码输入错误"; } } //绑定获得焦点事件 userpwd2Elt.onfocus = function(){ if(userpwdErrorElt.innerText != ""){ userpwd2.value = ""; } //当用户名文本框获得焦点时span清空 userpwdErrorElt.innerText = ""; } //获取邮箱验证标签 var emailErrorElt = document.getElementById("emailError"); //获取邮箱标签 var emailElt = document.getElementById("email"); //绑定邮箱失去焦点事件 emailElt.onblur = function(){ //获取值 var email = emailElt.value; var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; var ok = emailRegExp.test(email); if(ok){ emailErrorElt.innerText = ""; }else{ emailErrorElt.innerText = "邮箱输入格式不对！"; } } //绑定邮箱获得焦点事件 emailElt.onfocus = function(){ if(emailErrorElt.innerText != ""){ emailElt.value = ""; } emailErrorElt.innerText = ""; } //获取注册按钮标签 var btnElt = 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 == ""){//如果数据合法就跳转 //获取表单标签 var userformElt = document.getElementById("userform"); // formElt.action = "http://localhost:8080/jd/save"; //专用方法,提交表单 userformElt.submit(); } } } </script> <!-- 这个表单提交应该使用post，这里为了检测，所以使用get --> <form id="userform" action = "http://localhost:8080/jd/save" method="get"> 用户名： <input type="text" name="username" id="username" /><span id="usernameError"></span> <br> 密码： <input type="text" name="userpwd" id="userpwd" /> <br> 确认密码：<input type="text" id="userpwd2" /><span id="userpwdError"></span> <br> 邮箱： <input type="text" name="email" id="email" /><span id="emailError"></span> <br> <!-- <input type="submit " value="注册" /> --> <input type="button" value="注册" id="btn"> <input type="reset " value="重置" /> </form> </body>
注意：此程序表单提交如果要跳转页面需要使用后台服务器，如果没服务器，页面不会跳转
页面跳转（没有服务器时）：
五、复选框全选和取消全选
document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
示例代码：
<body> <script type="text/javascript"> window.onload = function(){ //获取多选框数组 var aihaos = document.getElementsByName("aihao"); //获取多选框标签 var firstChkElt = document.getElementById("firstChk"); //设置鼠标单击事件 firstChkElt.onclick = function(){ for(var i=0;i<aihaos.length;i++){ //每个多选框都和头部多选框保持一致 aihaos[i].checked = firstChkElt.checked; } } for(var i=0;i<aihaos.length;i++){ //给所有多选框设置鼠标单击事件 var all = aihaos.length; aihaos[i].onclick = function(){ var checkedCount = 0; //总数量和多选框数量相同的时候,第一个复选框选中 for(var i=0;i<aihaos.length;i++){ if(aihaos[i].checked){ checkedCount++ } } firstChkElt.checked = (all == checkedCount); } } } </script> <input type="checkbox" id="firstChk" /><br> <input type="checkbox" name="aihao" value="smoke" />抽烟<br> <input type="checkbox" name="aihao" value="drink" />喝酒<br> <input type="checkbox" name="aihao" value="tt" />烫头 </body>
六、获取下拉列表项中项的value
change事件
示例代码：
<body> <!-- 第一种方式 --> <!-- <select onchange="alert(this.value)"> <option value="001">河南省</option> <option value="002">河北省</option> <option value="003">山东省</option> <option value="004">山西省</option> </select> --> <!-- 第二种方式 --> <script type="text/javascript"> window.onload = function(){ //获取下拉标签 var firstOptionElt = document.getElementById("firstOption"); firstOptionElt.change = function(){ alert(firstOptionElt.value); } } </script> <select id="firstOption" onchange="alert(this.value)"> <option value="001">河南省</option> <option value="002">河北省</option> <option value="003">山东省</option> <option value="004">山西省</option> </select> </body>
七、显示网页时钟
window.setInterval()
window.clearInterval()
主要两个函数
示例代码：
<body> <script type="text/javascript"> //出错点,start不能放在onload里!!!!!!!!! function displayTime(){ var time = new Date(); var strTime = time.toLocaleString(); document.getElementById("div").innerHTML = strTime; } //设置显示的事件一直会变化 function start(){ v = window.setInterval("displayTime()",1000); } function stop(){ window.clearInterval(v); } </script> <input type="button" value="显示系统当前时间" onclick="start();" /> <input type="button" value="时间停止" onclick="stop();" /> <div id="div"></div> </body>
