innerHTML和innerText操作div和span
1、innerHTML会执行HTML代码，而innerText不会执行HTML代码，这两个都是属性。
使用例子：
（1）通过运行结果可以看到，innerText后的字符串是纯字符串，不会被当做HTML代码执行
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div1{
background-color: aqua;
width: 300px;
height: 300px;
border: 1px black solid;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var btnEml = document.getElementById("btn");
btnEml.onclick = function(){
// 设置div的内容
// 第一步：获取div对象
var divElt = document.getElementById("div1");
// 第二步：使用innerHTML属性来设置元素内部内容
divElt.innerHTML = "<font color='color'>用户名不能为空</font>";
// 第二步：使用innerText属性来设置元素内部内容
divElt.innerText = "<font color='color'>用户名不能为空</font>";
}
}
</script>
<input type="button" id="btn" value="设置div中的内容"/>
<div id="div1"></div>
</body>正则表达式
什么是正则表达式
1、正则表达式：Regular Expression。
2、正则表达式主要用在字符串格式匹配。
常见的正则表达式符号
常见的元字符
| 代码 | 说明 |
|---|---|
| . | 匹配除换行符以外的任意字符 |
| \w | 匹配字母或数字或下划线或汉字 |
| \s | 匹配任意的空白符 |
| \d | 匹配数字 |
| \b | 匹配单词的开始或结束 |
| ^ | 匹配字符串的开始 |
| $ | 匹配字符串的结束 |
常见的重复字符
| 代码/语法 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ? | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
常见的反义字符
| 代码/语法 | 说明 |
|---|---|
| \W | 匹配任意不是字母，数字，下划线，汉字的字符 |
| \S | 匹配任意不是空白符的字符 |
| \D | 匹配任意非数字的字符 |
| \B | 匹配不是单词开头或结束的位置 |
| [^x] | 匹配除了x以外的任意字符 |
| [^aeiou] | 匹配除了aeiou这几个字母以外的任意字符 |
简单的正则表达式
正则表达式中的小括号()优先级较高
[1-9] 表示1到9的任意1个数字（次数是1次）
[A-Za-z0-9]表示A-Za-z0-9中的任意1个字符
[A-Za-z0-9-]表示A-Za-z0-9、-中的任意一个字符
| 表示或
例子：QQ号的正则表达式：^[1-9][0-9]{4,}$
创建正则表达式的方法
第一种：
var regExp = /正则表达式/flags;
第二种：使用内置支持类RegExp
var regExp = new RegExp("正则表达式","flags");
正则表达式对象的test()方法:正则表达式.test(用户填写的字符串);返回值为布尔类型，true表示字符串匹配成功，false表示字符串匹配失败。
关于flags：
g:全局匹配
i:忽略大小写
m:多行搜索（ES规范制定之后才支持m），如果前面正则表达式，m不能使用，如果是字符串才能使用。
正则表达式使用示例
<body>
<script type="text/javascript">
window.onload = function(){
document.getElementById("btn").onclick = function () {
var email = document.getElementById("email").value;
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var isRight = emailRegExp.test(email);
if(isRight){
document.getElementById("emailError").innerText = "邮箱地址合法";
}else{
document.getElementById("emailError").innerText = "邮箱地址不合法";
}
}
// 给文本绑定focus
document.getElementById("email").onfocus = function(){
document.getElementById("emailError").innerText = "";
}
}
</script>
<input type="text" id="email"/>
<span id="emailError" style="color: red; font-size: 12px;"></span>
<br>
<input type="button" value="验证邮箱" id="btn"/>
</body>扩展字符串的trim函数
作用：去除前后空白(即空格）
示例：var username = document.getElementById("username").value;
var username = username.trim();
注意：因为IE8不支持trim()函数，解决方法：可以自己对String类扩展一个全新的trim()函数
实现方法：
String.prototype.trim = function(){
return this.replace(/^\s+/,"").replace(/\s+$/,"");
表单验证
功能要求
（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能由数字和字母组成，不能含有其他符号（正则表达式）
（4）密码和确认密码一致，邮箱地址合法
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体为12号，红色
（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
（8）最终表单中所有项均合法方可提交
实现代码
<body>
<script type="text/javascript">
/* （1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能由数字和字母组成，不能含有其他符号（正则表达式）
（4）密码和确认密码一致，邮箱地址合法
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体为12号，红色
（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
（8）最终表单中所有项均合法方可提交
*/
// 页面加载完毕开始执行function内代码
window.onload = function(){
// 验证用户名
document.getElementById("username").onblur = function(){
// 获取用户名
var username = document.getElementById("username").value;
// 去除用户名前后空白
username = username.trim();
if(username === ""){
document.getElementById("usernameError").innerText = "用户名不能为空！"
}else{
if(username.length < 6 || username.length > 14){
document.getElementById("usernameError").innerText = "用户名必须在6-14位之间"
}else{
var usernameRegExp = /^[A-Za-z0-9]+$/
if(usernameRegExp.test(username)){
document.getElementById("usernameError").innerText = ""
}else {
document.getElementById("usernameError").innerText = "用户名只能由数字和字母组成"
}
}
}
}
// 验证密码和确认密码
document.getElementById("confirmPwd").onblur = function(){
if(document.getElementById("password").value != document.getElementById("confirmPwd").value){
document.getElementById("confirmPwdError").innerText = "密码不一致！"
}
}
// 验证邮箱
document.getElementById("email").onblur = function(){
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(!emailRegExp.test(document.getElementById("email").value)){
document.getElementById("emailError").innerText = "邮箱格式错误！";
}else{
document.getElementById("emailError").innerText = "";
}
}
// 验证手机号
document.getElementById("phoneNumber").onblur = function(){
// 手机号的正则表达式
var phoneRegExp = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
// test验证
if(!phoneRegExp.test(document.getElementById("phoneNumber").value)) {
document.getElementById("phoneNumberError").innerText = "手机号格式错误！";
}else{
document.getElementById("phoneNumberError").innerText = "";
}
}
// 提交表单
document.getElementById("sub").onclick = function(){
document.getElementById("username").focus();
document.getElementById("username").blur();
document.getElementById("confirmPwd").focus();
document.getElementById("confirmPwd").blur();
document.getElementById("email").focus();
document.getElementById("email").blur();
document.getElementById("phoneNumber").focus();
document.getElementById("phoneNumber").blur();
if(document.getElementById("usernameError").innerText == "" && document.getElementById("confirmPwdError").innerText == ""
&& document.getElementById("phoneNumberError").innerText == "" && document.getElementById("emailError").innerText == ""){
document.getElementById("userForm").submit();
}else{
alert("注册信息有误！");
}
}
}
</script>
<form method="get" id="userForm">
<table style="text-align: right;">
<tr>
<td>
用户名：
</td>
<td>
<input type="text" name="username" id="username"/>
</td>
<td style="text-align: left;">
<span id="usernameError" style="color: red; font-size: 12px;"></span>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" name="password" id="password"/>
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td>
<input type="password" id="confirmPwd"/>
</td>
<td style="text-align: left;">
<span id="confirmPwdError" style="color: red; font-size: 12px; "></span>
</td>
</tr>
<tr>
<td>
邮箱：
</td>
<td>
<input type="text" id="email" name="email"/>
</td>
<td style="text-align: left;">
<span id="emailError" style="color: red; font-size: 12px;"></span>
</td>
</tr>
<tr>
<td>
手机号：
</td>
<td>
<input type="text" id="phoneNumber" name="phoneNumber"/>
</td>
<td style="text-align: left;">
<span id="phoneNumberError" style="color: red; font-size: 12px;"></span>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<input type="button" value="提交" id="sub"/>
</td>
</tr>
</table>
</form>
</body>复选框的全选和取消全选
示例代码如下：
<body>
<script type="text/javascript">
window.onload = function(){
// 获得复选框数组
var habit = document.getElementsByName("habit");
var firstChk = document.getElementById("firstChk");
firstChk.onclick = function(){
for(var i in habit){
habit[i].checked = firstChk.checked;
}
}
// 点击复选框时判定是否全选
var all = habit.length;
for(var i in habit){
habit[i].onclick = function(){
var checkedCount = 0;
for(var i in habit){
if(habit[i].checked){
checkedCount++;
}
}
firstChk.checked = (all == checkedCount);
}
}
}
</script>
<input type="checkbox" id="firstChk"/><br>
<input type="checkbox" name="habit" value="eat" />吃<br>
<input type="checkbox" name="habit" value="drink" />喝<br>
<input type="checkbox" name="habit" value="play" />玩<br>
</body>获取下拉列表选中选的value
第一种方法：onchange属性
<body>
<select onchange="alert(this.value)" id="provinceList">
<option value="">--请选择省份--</option>
<option value="001">河南省</option>
<option value="002">河北省</option>
<option value="003">上海市</option>
<option value="004">山东省</option>
</select>
</body>第二种方法：JS编写
<body>
<script type="text/javascript">
window.onload = function(){
var provinceListElt = document.getElementById("provinceList");
provinceListElt.onchange = function(){
alert(provinceListElt.value)
}
}
</script>
<select id="provinceList">
<option value="">--请选择省份--</option>
<option value="001">河南省</option>
<option value="002">河北省</option>
<option value="003">上海市</option>
<option value="004">山东省</option>
</select>
</body>显示网页时钟【周期函数setInterval】
setInterval函数和clearInterval()函数
（1）setInterval(code,millisec[,"lang"])
注：
code：要调用的函数或要执行的代码块
millisec：周期性执行或调用code之间的时间间隔，以毫秒计
（2）clearInterval()
注：该函数用于接受setInterval的返回值，并将其执行关闭
显示网页时钟实现代码
<body>
<script type="text/javascript">
function displayTime(){
var time = new Date();
var strTime = time.toLocaleString();
document.getElementById("timeDiv").innerHTML = strTime;
}
// 每隔一秒调用displayTime()函数
function start(){
interval = window.setInterval("displayTime()",1000);
}
// 停止调用setInterval函数
function stop(){
window.clearInterval(interval);
}
</script>
<input type="button" value="显示当前系统时间" onclick="start();"/>
<input type="button" value="停止当前系统时间" onclick="stop();"/>
<div id="timeDiv"></div>
</body>设置table的tbody
示例代码
<body>
<script type="text/javascript">
var classInfo = {
"total" : 3,
"student" : [
{"name" : "张三","birth":"1980-10-20"},
{"name" : "李四","birth":"1980-10-20"},
{"name" : "王五","birth":"1980-10-20"}
]
};
window.onload = function(){
document.getElementById("displayInfo").onclick = function(){
var student = classInfo.student;
var html = "";
for(var i in student){
var stu = student[i];
html += "<tr>";
html += "<td>" + stu.name + "</td>";
html += "<td>" + stu.birth + "</td>";
html += "</tr>";
}
document.getElementById("emptybody").innerHTML = html;
}
}
</script>
<input type="button" id="displayInfo" value="显示信息"/>
<h2>学生信息列表</h2>
<hr>
<table style="border:1px;width: 50%;">
<tr>
<th>学生姓名</th>
<th>学生生日</th>
</tr>
<tbody id="emptybody"></tbody>
</table>
</body>
639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
