第五章dom常用对象及应用

第五章JavaScript常用

DHTML对象：Document相关对象及综合案例回顾JavaScript

DHTML

Window对象JavaScript

对话框JavaScript

定时器本章内容JavaScript

Document对象JavaScriptScreen对象，History对象，Location对象JavaScript

表单，CSSDocument对象常用字符串属性名称功能说明title文档标题,通过窗口标题栏显示URL,location文档的载入链接referrer链接到该文档的前一文档链接，只读lastModified文档最后修改日期的字符串，只读bgColor,fgColor文档背景和缺省字体颜色alinkColor链接按下激活后的颜色linkColor未访问过链接的颜色vlinkColor已经访问过链接的颜色Document对象程序示范获取上次修改时间标题栏动态修改

背景颜色调整document.write("最后修改时间："+document.lastModified);document.title="欢迎进入JavaScript世界";document.bgColor="#EFEFEF";

//设置背景为灰色document.fgColor="red";

//设置字体为红色Document对象常用对象属性名称功能说明forms[

]Form对象数组，存放文档中所有表单images[

]Image对象数组，存放文档所有图片anchors[

]链接定义数组，存放文档中所有链接applets[

]存放文档中Java小程序的数组cookie子对象，用于在客户端存储信息all[

]存放文档中所有对象的数组，IE支持Document对象数组对象的调用根据对象索引号，如forms[0]代表文档中第一个表单根据对象名称，如forms["form1"]代表名称为form1的表单直接对象调用，如document.

form1<form

name="form1"><input

type="text"name="input1"><input

type="submit"

value="提交"></form><script

type=“text/javascript”>document.form1.input1.value=(newDate()).toLocalString();</script>一般情况下采用直接对象调用方式调用表单Document对象关键方法名称功能说明open()初始化文档对象close()关闭open()方法打开的文档(与浏览器有关)write(str)将文本附加到当前打开的文档writeln(str)将文本附加到当前打开的文档并加上一个换行符（在网页中显示为一个空格）Document对象程序示范：输出内容到弹出新窗口var

myWin=window.open();

//打开新窗口myWin.document.open();

//初始化显示文档myWin.document.write("直接输出；");myWin.document.writeln("1.输出后换行");myWin.document.writeln("2.输出后换行");myWin.document.writeln("3.输出后换行");myWin.document.close();

//关闭文档如果不指定Window对象则代表直接操作当前窗口的

Document对象Document对象程序结果：writeln输出的换行符在原代码中可以看到Screen对象书写格式功能说明screen.width屏幕分辨率的宽度，例如1024*768分辨率下宽度为1024screen.height屏幕分辨率的高度，例如1024*768分辨率下宽度为768screen.availWidth屏幕中可用的宽screen.availHeight屏幕中可用的高screen.colorDepth屏幕的色彩数对象介绍属于window的子对象常用于获取屏幕的分辨率和色彩Screen对象应用例子：窗口最大化window.moveTo(0,0);window.resizeTo(screen.availWidth,screen.availHeight);采用screen对象的分辨率属性和

resizeTo方法来动态确定窗口最大长度和宽度History对象书写格式功能说明history.length历史记录数history.back()返回上一页history.forward()前进一页history.go(num)前进或后退num页，num为0时表示页面刷新对象介绍属于window的子对象常用于返回到已经访问过的页面History对象应用例子：网页导航按钮history.back()history.forward()history.go(-1)history.go(1)等价于等价于<inputtype="button"

value="返回"onclick="history.back()"><inputtype="button"

value="前进"onclick="history.forward()"><inputtype="button"

value="刷新"onclick="history.go(0)">Location对象Location对象属于window的子对象常用于获取和改变当前浏览的网址常用的属性hrefreplace(url)reload()当前窗口正在浏览的网页地址转向到url网页地址重新载入当前网址，同按下刷新按钮Location对象获取Location对象的所有属性var

showtext="Location对象属性列表：\n";for

(var

propname

in

location){showtext

+=

propname

+

":

"

+

location[propname]

+

"\n";}alert(showtext);表单表单元素FormInputSelectTextarea<input

type="text"

name="a1"

value="1"><select

name="s1"><optionvalue="1">选择一</option><optionvalue="2">选择二</option></select><textarea

name="t1">初始内容</textarea>type包括text、button、submit、reset、checkbox、radio、hidden等表单表单验证<script

type=“text/javascript”>function

check(){//检查t1输入是否为空

if

(form1.t1.value!=""){form1.submit();}else{alert("姓名不能为空，请重新输入!");form1.t1.focus();}//如果t1值为空则自动将焦点设定到t1输入框}</script><form

name="form1">姓名：<input

type="text"

name="t1"

value=""><input

type="button"

name="b1"

onclick="check()"

value="提交"></form>案例：注册信息验证第一步：验证用户名用户名：4-20个字符(可使用字母、数字、下划线)参考代码<!--用户名验证开始-->function

checkUser

(

pUserName

)

{var

oContainer

=

$("userNameInfor");oContainer.className

=

"font_error";达式var

reg=/^(\w|[\u4E00-\u9FA5])*$/;

//用户名验证的正则表if(pUserName.value==""){

oContainer.innerHTML="请输入用户名！"return

false;}第一步：验证用户名if

(

pUserName.value.charAt(0)

==

"_"

)

{oContainer.innerHTML="用户名不能以下划线开头，请重新填写！"return

false;}if

(pUserName.value.length>

20

||

pUserName.value.length<

6

)

{oContainer.innerHTML="用户名最长只能占20位字符，最短6个字符，请重新填写！"return

false;}if

(

!reg.test(pUserName.value)

)

{oContainer.innerHTML="名字中只能用数字、字母、下划线和汉字，请重新填写！";return

false;

}oContainer.className

=

"font_true";oContainer.innerHTML

=

"你填写的用户名是有效的！";return

true;

}<!--用户名验证结束-->第二步：验证密码密码：由6-16个字符(可使用字母、数字、下划线)参考代码：<!--密码验证结束-->function

checkpass(pass){ //密码验证

var

pwd=$("passinfor");//密码验证正则var

pattern

=/^[A-Za-z0-9_!@#$%^&*()]+$/;表达式，英文、数字及字符if(pass.value==""){pwd.className="font_error"pwd.innerHTML="密码不能为空";return

false;}第二步：验证密码if(pass.value.length<6){pwd.className="font_error"pwd.innerHTML="密码不能少于6位";return

false;}if(!pattern.test(pass.value)){pwd.className="font_error"pwd.innerHTML="密码只能是数字、字母、字符！";return

false;}pwd.className="font_true"pwd.innerHTML="您设置的密码符合要求！";return

true;}第三步：验证确认密码确认密码：两次输入必须一致function

checkrepass(pass,repass){//确认密码验证

var

repwd=$("repassinfor");repwd.className="font_error"if(repass.value==""){repwd.className="font_error"repwd.innerHTML="确认密码不能为空";return

false;}if(pass.value!=repass.value){//确认密码是否与密码一致

repwd.className="font_error"repwd.innerHTML="两次输入的密码不一样，请重新输入！";return

false;}repwd.className="font_true";repwd.innerHTML="两次输入的密码一致！";return

true;}第四步：验证邮箱邮箱格式需要符合正则表达式function

checkemail(email){var

einfor=$("emailinfor");if(!email.value.match(/^\w+((-{1,2}\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-{1,2})[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)

){// if(email.value.indexOf('@',0)==-1){einfor.className="font_error";einfor.innerHTML="您输入的电子邮件格式不正确，请重新输入！";return

false;}einfor.className="font_true";einfor.innerHTML="你输入的电子邮件地址正确！";return

true;}第五步：省市联动<!--下拉框级联开始-->var

cityList

=

new

Array(

);cityList['北京']=['朝阳区','东城区','西城区','海淀区','宣武区','丰台区','怀柔','延庆','房山'];cityList['上海']=['宝山区','长宁区','丰贤区','虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];function

changeCity(

)

{var

province=vince.value;document.myform.city.options.length=0;for

(var

i

in

cityList)

{if

(i

==

province)

{for

(var

j

in

cityList[i])

{document.myform.city.options.add(new

Option(cityList[i][j],cityList[i][j]));}

}

}document.myform.city.options.selctIndex=0;}第五步：省市联动function

loadAll(

){

for

(var

i

in

cityList){

vince.options.add(new

Option(i,

i));}vince.selectedIndex

=

0;}<!--下拉框级联结束-->作业为该注册页面加上日期的选择。（建议使用流行的组件）点击注册后，打开一个新的窗口Table对象指定所含内容要组织成行列的表格。常用方法：书写格式功能说明Table.

insertRow()在表格中创建新行(tr)，并将行添加到rows集合中。Table.deleteRow()从表格及rows集合中删除指定行(tr)。Tr.

insertCell()在表格行(tr)中创建新单元格，并将单元格添加到cells

集合中。案例：动态操作表格动态添加、删除表格的行案例：动态操作表格添加部分参考代码var

cell_2

=

new_row.insertCell();function

addRow(){varnew_row=per_tbl.insertRow();new_row.align

=

"center";var

cell_1

=

new_row.insertCell();var

cell_3

=

new_row.insertCell();varcell_1_txt_id="txt_1_"+

newDate().getTime();cell_1.innerHTML

=

"<input

type='text'

id='"+cell_1_txt_id+"'

/>";var

cell_2_radio_name

=

"radio_"

+

new

Date().getTime();cell_2.innerHTML="<input

type='radio'name='"+cell_2_radio_name+"'value='男'checked='checked'/>男  <input

type='radio'name='"+cell_2_radio_name+"'

value='女'/>女";cell_3.innerHTML="<input

type='button'

value='保存'onclick='saveARow(\""+cell_1_txt_id+"\",\""+cell_2_radio_name+"\",this)'/>  <input

type='button'

value='删除'onclick='deleteRow(this)'/>";}动态样式表CSS样式表链入外部样式表文件(Linking

toa

StyleSheet)先建立外部样式表文件（.css），然后使用HTML的link对象定义内部样式块对象(Embedding

a

Style

Block)可以在HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象内联定义(Inline

Styles)内联定义是指在对象的标记内使用对象的style属性直接定义少数的样式表属性动态样式表三种样式表的不同定义方法<link

rel=stylesheet

href="test.css"

type="text/css"><style

type="text/css"><!--body

{font:

10pt}p

{font:

10pt;

color:

black}--></style><p

style="margin-left:0.5in;margin-right:0.5in">测试<p><!--body

{font:

10pt}p

{font:

10pt;

color:

black}-->外部CSS文件无需加<style>标签直接作为属性设定动态样式表动态样式表指的是在JavaScript中直接对对象的style属性进行设定HTML组件中的style属性将立即起作用<div

style="font-size:36pt;font-family:黑体"onmouseover="this.style.color='#FF0000';"onmouseout="this.style.color='#000000';">鼠标移过来，马上变颜色</div>案例：动态改变风格参考代码<SCRIPT>function

c(css){document.getElementById('up').className=css;}</SCRIPT>.gree