引言
夏敏主要介绍有关BOM、DOM、事件和正则表达式编程的相关知识。
BOM编程
什么是BOM编程？如下图所示：
BOM是（Broswer Object Model） 浏览器对象模型编程
window对象
open(): 在一个窗口中打开页面
参数一： 打开的页面
参数二：打开的方式。 _self: 本窗口 _blank: 新窗口（默认）
参数三： 设置窗口参数。比如窗口大小
setInterval(): 设置定时器（执行n次）
setTimeout(): 设置定时器(只执行1次)
定时器： 每隔n毫秒调用指定的任务（函数）
参数一：指定的任务（函数）
参数二：毫秒数
clearInterval(): 清除定时器
clearTimeout(): 清除定时器
清除任务
参数一：需要清除的任务ID
alert(): 提示框
仅仅有确定按钮
confirm(): 确认提示框
返回值就是用户操作
true: 点击了确定
false： 点击了取消
propmt(): 输入提示框
返回值就是用户操作
true: 点击了确定
false： 点击了取消
注意：
因为window对象使用非常频繁，所以当调用js中的window对象的方法时，可以省略对象名不写。
有关window对象的相关使用在代码中体现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window对象</title>
<script type="text/javascript">
function testOpen(){
window.open("广告.html","_blank","width=30px;height=60px");
}
var setIntervalId;
function testSetInterval(){
setIntervalId=window.setInterval("testOpen()",5000);
}
var setTimeoutId;
function testSetTimeout(){
setTimeoutId=window.setTimeout("testOpen()",2000);
}
function testClearInterval(){
window.clearInterval(setIntervalId);
}
function testClearTimeout(){
window.clearTimeout(setTimeoutId);
}
function testConfirm(){
var flag=window.confirm("确定你喜欢的是薛之谦？");
if(flag){
alert("世界和平哦！");
}else{
}
}
function testPropmt(){
window.prompt("请输入你喜欢的明星姓名");
}
</script>
</head>
<body>
<input type="button" value="open" onclick="testOpen()" />
<input type="button" value="setInterval" onclick="testSetInterval()" />
<input type="button" value="setTimeout" onclick="testSetTimeout()" />
<input type="button" value="clearInterval" onclick="testClearInterval()" />
<input type="button" value="clearTimeout" onclick="testClearTimeout()" />
<input type="button" value="confirm" onclick="testConfirm()" />
<input type="button" value="propmt" onclick="testPropmt()" />
</body>
</html>
相关结果如下：
location对象
href属性： 代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符
reload方法： 刷新当前页面
需求：实现每隔一秒刷新一次页面
有关location对象的相关使用在代码中体现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>location对象</title>
<script type="text/javascript">
function getHref(){
var url=window.location.href;
alert(url);
}
function setHref(){
window.location.href="广告.html";
}
function reflush(){
window.location.reload();
}
window.setInterval("reflush()",1000);
</script>
</head>
<body>
<input type="button" value="getHref" onclick="getHref()" />
<input type="button" value="setHref" onclick="setHref()" />
<input type="button" value="reflush" onclick="reflush()" />
</body>
</html>
相关结果如下：
history对象
forward(): 前进到下一页
back(): 后退上一页
go(): 跳转到某页（正整数：前进 负整数：后退） 1 -2
有关history的使用在代码中体现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>history对象</title>
<script type="text/javascript">
function testBack(){
//window.history.forward();
window.history.back();
//window.history.go(1);
}
</script>
</head>
<body>
<input type="button" value="back" onclick="testBack()" />
</body>
</html>
相关结果如下：
screen对象（学习四个属性）
availHeight和availWidth
是排除了任务栏之后的高度和宽度
width和height
是整个屏幕的像素值
有关screen对象的使用在代码中体现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>screen对象</title>
<script type="text/javascript">
document.write("屏幕的实际宽度："+window.screen.width);
document.write("<br />");
document.write("屏幕的实际高度："+window.screen.height);
document.write("<br />");
document.write("屏幕的可用宽度："+window.screen.availWidth);
document.write("<br />");
document.write("屏幕的可用高度："+window.screen.availHeight);
</script>
</head>
<body>
</body>
</html>
相关结果如下：
事件编程
javascript事件编程的三个要素：
（以单击事件为例讲解事件编程三要素）
1）事件源：html标签
2）事件 ：click dblclick mouseover。。。。
3）监听器： 函数
如下图所示：
javascript事件分类：
点击相关的：
单击： onclick
双击： ondblclick
焦点相关的：（获得焦点输入框内提示内容消失，失去焦点验证用户名信息并且在输入框内提示）
聚焦： onfocus
失去焦点： onblur
选项相关的：（select选项改变，做一个籍贯选项）
改变选项： onchange
鼠标相关的：（画一个div区块进行演示）
鼠标经过： onmouseover
鼠标移除： onmouseout
页面加载相关的：（一般用在body标签中，用于网页加载完毕后还需执行什么操作进行触发）
页面加载： onload
有关事件的操作在代码中体现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件</title>
<script type="text/javascript">
function testClick(){
alert("单击事件被触发");
}
function testdbClick(){
alert("双击事件被触发");
}
function testOnFocus(){
var username=document.getElementById("username");
username.value="";
}
function testOnBlur(){
var username=document.getElementById("username").value;
var usernameTip=document.getElementById("usernameTip");
if("薛之谦"==username){
usernameTip.innerHTML="改用户名已被占用".fontcolor("red");
}else{
usernameTip.innerHTML="改用户可用".fontcolor("green");
}
}
function testChange(){
var sheng=document.getElementById("sheng").value;
var shi=document.getElementById("shi");
if(sheng=="shanxi"){
shi.innerHTML="<option>西安</option><option>咸阳</option> <option>渭南</option>";
}else if(sheng=="guangdong"){
shi.innerHTML="<option>广州</option><option>深圳</option> <option>佛山</option>";
}else if(sheng=="sichuan"){
shi.innerHTML="<option>成都</option><option>雅安</option><option>广安</option>";
}
}
function testOver(){
alert("鼠标移入了");
}
function testOut(){
alert("鼠标移出了");
}
</script>
</head>
<body>
<input type="button" value="单击事件" onclick="testClick()" />
<input type="button" value="双击事件" onclick="testdbClick()" />
<br />
<hr />
<input type="text" value="请输入姓名" id="username" onfocus="testOnFocus()" onblur="testOnBlur()" />
<span id="usernameTip"></span>
<br />
<hr />
<select onchange="testChange()" id="sheng">
<option>---请选择---</option>
<option value="shanxi">陕西</option>
<option value="guangdong">广东</option>
<option value="sichuan">四川</option>
</select>
<select id="shi">
</select>
<br />
<hr />
<div style="width:200px;height:300px;border:2px solid #0F0" onmouseover="testOver()" onmouseout="testOut()"></div>
</body>
</html>
相关结果如下：
DOM编程
什么事DOM编程，如下图所示：
DOM（document Object Model）文档对象模型编程。
查询标签对象
通过document对象获取，document代表一个html页面
#通过document对象的集合
作用： 获取多个或者同类的标签对象
all: 获取所有标签对象
forms： 获取form标签对象
images: 获取img标签对象
links: 获取a标签对象
用代码体现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document集合获取多个标签对象</title>
</head>
<body>
<a href="#"></a>
<a href="#"></a>
<img />
<img />
<form></form>
<form></form>
</body>
<script type="text/javascript">
//all: 获取所有标签对象
//var nodeList=document.all;
//forms： 获取form标签对象
//var nodeList=document.forms;
//images: 获取img标签对象
//var nodeList=document.images;
//links: 获取a标签对象
var nodeList=document.links;
//遍历获取到的所有标签对象
alert(nodeList.length);
for(var i=0;i<nodeList.length;i++){
alert(nodeList[i].nodeName);
}
</script>
</html>
相关结果如下：
#通过关系查找标签对象
父节点： parentNode属性
子节点： childNodes属性
第一个子节点： firstChild属性
最后一个子节点： lastChild属性
下一个兄弟节点： nextSibling属性
上一个兄弟节点： previousSibling属性
用代码体现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>节点属性获取节点对象</title>
</head>
<body>
<form><a href="#">我是一个a标签</a><input type="text" /> <input type="text" /></form>
</body>
<script type="text/javascript">
/*
#通过关系查找标签对象
父节点： parentNode属性
子节点： childNodes属性
第一个子节点： firstChild属性
最后一个子节点： lastChild属性
下一个兄弟节点： nextSibling属性
上一个兄弟节点： previousSibling属性
*/
//获取from标签中的a标签
var aNode=document.links[0];
//alert(aNode.nodeName);
//通过parentNode属性获取a标签的父标签
var formNode=aNode.parentNode;
//alert(formNode.nodeName);
//通过childNodes属性获取form的子标签个数
var childNodeList=formNode.childNodes;
//alert(childNodeList.length);
//通过遍历获取所有子标签对象
/*
在我们获取一个父标签的所有子标签的时候,会将它我们的注释和我们的换行都看成一个标签对象一起获取:
标签对象名称:#text -- 换行 -- 3
标签对象名称:#comment -- 注释 -- 8
标签对象名称:#text
标签对象名称:A -- 1
标签对象名称:#text
标签对象名称:INPUT -- 1
标签对象名称:#text
标签对象名称:INPUT -- 1
标签对象名称:#text
*/
for(var i=0;i<childNodeList.length;i++){
if(childNodeList[i].nodeType==1){
document.write("标签对象名称："+childNodeList[i].nodeName+childNodeList[i].nodeType+"<br />");
}
}
//去掉换行符和注释之后，获取父标签的第一个、最后一个、下一个兄弟和上一个兄弟节点
//第一个子节点firstChild
var first=formNode.firstChild;
//alert(first.nodeName);
//最后一个节点lastChild
var last=formNode.lastChild;
//alert(last.nodeName);
//下一个兄弟节点nextSibling
var next=first.nextSibling;
//alert(next.nodeName);
//上一个下兄弟节点 previousSibling
var previous=next.previousSibling;
alert(previous.nodeName);
</script>
</html>
相关结果如下：
#通过document方法查询标签对象
document.getElementById(“id属性值”); 最常用
注意：
1）使用该方法获取的标签一定要有id属性
2）在同一个html页面中不要出现两个同名的id
documetn.getElementsByName(“name属性值”); 获取同name属性名的标签列表
注意：
使用该方法获取的标签一定要有name属性
document.getElementsByTagName(“标签名”) 获取相同标签名的标签列表
用代码体现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过document中的方法获取标签对象</title>
</head>
<body>
<a href="#" id="aid">我是一个a标签</a>
<a href="#" name="aname">我是一个a标签2</a>
<a href="#" name="aname">我是一个a标签3</a>
</body>
<script type="text/javascript">
//document.getElementById("id属性值");
var aid=document.getElementById("aid");
//alert(aid.nodeName);
//documetn.getElementsByName("name属性值");
var name=document.getElementsByName("aname");
//alert(name.length);
//document.getElementsByTagName("标签名")
var tag=document.getElementsByTagName("a");
alert(tag.length);
</script>
</html>
相关结果如下：
修改标签对象属性
常用的需要修改的属性：
innerHTML属性：修改标签体内容
innerHTML : 设置的标签内的html
value属性： 修改value属性值。 input type=”text”
src属性： 修改图片的src属性。
checked属性：修改单选或多项的默认值。
用代码体现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>修改标签属性</title>
</head>
<body>
<input type="text" value="请输入用户名" onfocus="change()" id="username"/>
</body>
<script type="text/javascript">
function change(){
var username=document.getElementById("username");
username.value="";
}
</script>
</html>
相关结果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>更改图片src属性</title>
</head>
<body>
<img src="d07c3e0907b2cd087e6aa3ae0efd1642.jpg" style="width:300px;height:400px" id="imge" />
<input type="button" value="更改图片" onclick="changePic()" />
</body>
<script type="text/javascript">
function changePic(){
var image=document.getElementById("imge");
image.src="56f2aa78-984a-427d-8530-e5bfee223fd0.jpg";
}
var i=100000;
function changePicture(){
var image=document.getElementById("imge");
if(i%2==0){
image.src="56f2aa78-984a-427d-8530-e5bfee223fd0.jpg";
}else{
image.src="d07c3e0907b2cd087e6aa3ae0efd1642.jpg";
}
i--;
}
window.setInterval("changePicture()",2000);
</script>
</html>
相关结果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>checked属性联系</title>
</head>
<body>
<input type="checkbox" id="all" onclick="choseAll()" />全选<br />
<input type="checkbox" name="cmp" value="4000" />戴尔电脑4000$<br />
<input type="checkbox" name="cmp" value="5000" />华硕电脑5000$<br />
<input type="checkbox" name="cmp" value="10000" />苹果电脑10000$<br />
<input type="checkbox" name="cmp" value="6000" />神州电脑6000$<br />
<input type="button" value="计算总价" onclick="allPrice()"/><span id="allPrice"></span>
</body>
<script type="text/javascript">
function choseAll(){
var cmp=document.getElementsByName("cmp");
for(var i=0;i<cmp.length;i++){
if(cmp[i].checked){
cmp[i].checked=false;
}else{
cmp[i].checked=true;
}
}
}
function allPrice(){
//定义一个总价
var res=0;
//获取选中的input标签对象
var cmp=document.getElementsByName("cmp");
//获取span标签对象
var allPriceSpan=document.getElementById("allPrice");
for(var i=0;i<cmp.length;i++){
if(cmp[i].checked){
var price=cmp[i].value;
//将其转换为number
price = parseInt(price);
res+=price;
}
}
allPriceSpan.innerHTML=res+"元";
}
</script>
</html>
相关结果如下：
正则表达式
正则表达式的书写规则
创建正则表达式： var 变量 = /正则规则/;
[a-z]: 表示匹配字母
* : 0或多个元素
+: 1个或多个元素
? : 0或1个元素
{n,m} 大于n,小于m的个数
正则方法：
test（）： 用于匹配指定的字符串. true：表示匹配成功 ； false; 表示匹配失败
注意：
在js的正则表达式中，如果遇到了符合规则的内容，就代表匹配成功！
如果需要和java一样完全匹配，需要添加边界符号
开始标记： ^
结束标记： $
用一个案例理解正则表达式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
</head>
<!--
案例：利用正则表达式写一个表单验证
用户名：10-15位的数字或者字母
密码：10-15位的数字或字母
确认密码：判断两次输入的密码是否一致
邮箱：xxx@xxx.(com/cn/net)
提交按钮：必须全部验证成功的情况下，才能成功提交，只要有一个验证失败无法提交
-->
<body>
<form action="8-提交成功.html" onsubmit="return checkAll()">
用户名：<input type="text" id="username" onblur="testUsername()" /><span id="usernameTip"></span><br />
密码：<input type="password" id="password" onblur="testPassword()" /><span id="passwordTip"></span><br />
确认密码:<input type="password" id="repassword" onblur="testRePassword()" /><span id="repasswordTip"></span><br />
邮箱：<input type="text" id="mail" onblur="testMail()" /><span id="mailTip"></span><br />
<input type="submit" value="提交" /></form>
</body>
<script type="text/javascript">
//检测用户名
function testUsername(){
//用户名：10-15位的数字或者字母
var res=/^[a-zA-Z0-9]{10,15}$/;
var usernameValue=document.getElementById("username").value;
var usernameTip=document.getElementById("usernameTip");
if(res.test(usernameValue)){
usernameTip.innerHTML="用户名可用".fontcolor("green");
return true;
}else{
usernameTip.innerHTML="用户名不可用".fontcolor("red");
return false;
}
}
//检测密码
function testPassword(){
//密码：10-15位的数字或字母
var passwordValue=document.getElementById("password").value;
var passwordTip=document.getElementById("passwordTip");
var res=/^[a-zA-Z0-9]{10,15}$/;
if(res.test(passwordValue)){
passwordTip.innerHTML="密码可用".fontcolor("green");
return true;
}else{
passwordTip.innerHTML="密码不可用".fontcolor("red");
return false;
}
}
//检测确认密码
function testRePassword(){
var passwordValue=document.getElementById("password").value;
var repasswordValue=document.getElementById("repassword").value;
var repasswordTip=document.getElementById("repasswordTip");
if(passwordValue==repasswordValue){
repasswordTip.innerHTML="两次输入一致".fontcolor("green");
return true;
}else{
repasswordTip.innerHTML="两次输入不一致".fontcolor("red");
return false;
}
}
//检测邮箱
function testMail(){
//邮箱：xxx@xxx.(com/cn/net)
var mailValue=document.getElementById("mail").value;
var mailTip=document.getElementById("mailTip");
var res=/^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-z]{2,3}){1,2}$/;
if(res.test(mailValue)){
mailTip.innerHTML="邮箱可用".fontcolor("green");
return true;
}else{
mailTip.innerHTML="邮箱不可用".fontcolor("red");
return false;
}
}
//提交按钮：必须全部验证成功的情况下，才能成功提交，只要有一个验证失败无法提
function checkAll(){
if(testUsername()&&testPassword()&&testRePassword()&&testMail()){
return true;
}else{
return false;
}
}
</script>
</html>
结果如下：
1044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
