JavaScript学习笔记(4)--面向半新不新的新手

七、JavaScript常用文档对象

 

文档(document)对象是浏览器窗口(window)对象的一个主要部分。它包含了网页显示的各个元素对象。网页文件中的HTML标记静态地提供了各级文档对象的内容。

文档对象也具有属性和方法。通过JavaScript改变网页中的内容,实际上就是通过调用JavaScript函数改变文档对象的属性值,或使用文档对象的方法,模仿用户操作的效果。

 

7.1  文档对象常用属性

 

 

 

anchors

锚点对象数组

见以后小结的具体讲解

forms

窗体对象数组

……

links

链接对象数组

……

images

图像对象数组

……

applets

Java程序块数组

……

embeds

插入的程序块数组

……

title

网页标题

……

cookie

用于记录用户操作状态

……

domain

网页域名

……

lastModified

上一次修改日期

……

linkColor

网页中的激活状态的链接颜色

……

alinkColor

网页中的链接颜色

……

vlinkColor

网页中的已访问过的链接颜色

……

bgColor

网页背景颜色

……

fgColor

网页文字颜色

……

 

 

 

文档对象常用方法

 

 

 

write

向网页中输出HTML内容

见例7-1

writeln

write作用一样

见例7-1

open

打开用于write的输出流

见例7-1

close

关闭用于write的输出流

见例7-1

 

7-1 在网页的标题中显示当前日期,在网页中显示该网页的更新日期,当用户进入网页时说“您好”,当用户点击网页中的链接更换网页内容时说“再见”

目的:使用文档对象的属性、方法及事件

        

 

7.2   cookie属性

cookie是文档对象的一个属性,它用于记录用户在浏览器中执行时的一些状态。用户在使用相同的浏览器显示相同的网页内容时,JavaScript可以通过比较cookie属性值,从而显示不同的网页内容。

值得注意的是,用户可以在浏览器中删除已有的cookie或设置不使用cookie

1、设置cookie

浏览器保存cookie时是用一系列的“变量名=值”组成的字符串表示,并以分号“;”相间隔。设置cookie的字符串格式如下:

cookie名=cookie值;expires=过期日期字符串;[domain=域名;path=路径;secure]

expires值设置的是该cookie的有效日期;domainpath项是可选的,如果不设置domain path,则表示缺省为网页所在的域名和路径。例如:某网页地址是http://67.85.238.132:18/cbx,那么域名就是67.85.238.132:18,路径就是/cbx。如果使用secure,则表示客户端与服务器端传送cookie时将通过安全通道。

JavaScript设置cookie,实际上就是用JavaScript的方法组成上述cookie的字符串。

2、取出cookie

得到cookie时的字符串格式为:

cookie1名=cookie1值;cookie2名=cookie2值;……

3、删除cookie

删除cookie实际上是设置指定的cookie名的值为空串,过期日期是当前日期以前的日期。

 

7.3窗体(form)及其元素对象

窗体对象是文档对象的一个主要元素。窗体对象包含有许多用于收集用户输入内容的元素对象,例如文本框(text),按钮(button),列表(select)等,通过这些元素对象,窗体将用户输入的数据传递到服务器端进行处理。

一个网页中可以包含有多个窗体,但这些窗体的标记不可以交叉或嵌套。

7.3.1引用窗体对象

使用下述两种方法(后面还会讲到通过DHTML对象模型方法得到窗体对象)得到窗体对象。

(1)    使用窗体标记中的名称(name)值。

var myForm1 = document.form1;

var myForm2 = document.form2;

2)通过窗体数组

var myForm1 = document.forms[0];

var myForm2 = document.forms[1];

var myForm1 = document.forms[“form1”];

var myForm1 = document.forms[“form2”];

7.3.2窗体对象的常用属性、方法及事件

 

窗体对象常用属性

 

 

 

action

窗体提交后的URL

myForm.action=“/doLogin.jsp”

myForm.action=“mailto:[email protected]

elements

窗体中包含的元素对象(例如文本,选钮等)数组

 

length

窗体中元素的个数

myForm.length(myForm.elements一样)

method

提交窗体的方式,postget

myForm.method=”post”;

name

窗体的名字,可以直接用于引用窗体

var formName = myForm.name;

target

提交窗体后显示下一网页的位置

myForm.target=”_top”;

 

窗体对象常用方法

 

 

 

reset()

将窗体中各元素值恢复到缺省值,与点击重置按钮(reset)的效果是一样的

myForm.reset()

submit()

提交窗体,与点击提交按钮(submit)的效果是一样的

myForm.submit()

 

窗体对象常用事件

 

 

onReset(JavaScript语句或函数)

当进行重置窗体操作时执行指定的JavaScript语句或函数

onSubmit(JavaScript语句或函数)

当进行重置窗体操作时执行指定的JavaScript语句或函数

 

 

 

 

 

 

 

 

7-2 让用户输入电子邮件地址和邮件主题,按“发送”钮后,打开Outlook软件进行发送电子邮件的操作,这时用户输入的参数就会一起带到Outlook

目的:学习引用窗体对象,使用窗体对象的属性、方法和事件

      

             

 

 

 

            电子邮件地址:

            主题:

            发送">

            重置">

      

 


7.3.3 窗体中的元素对象

窗体中的元素对象一般都可以与HTML的标记一一对应。下表列出了窗体所有的元素对象名及相应的HTML标记示例

窗体中的元素对象及相应的HTML标记

元素对象名称

type属性值

HTML标记示例

单行文本框

text

多行文本框

textarea

按钮

button

value=”ok” onClick=”do Validate();”>

单选钮

radio

checked value=”yes”>

复选钮

checkbox

列表:

(单选列表)

 

 

 

(多选列表)

select-one

 

 

 

 

select-multiple

 

密码框

password

重置按钮

reset

提交钮

submit

隐含变量

hidden

“delete”>

 

JavaScript中引用窗体中的元素对象可以用以下两种方法:

(1)通过元素名称的方法  document.窗体对象名称.元素名称

(2)通过窗体的元素组的方法   document.窗体对象名称.elements[i]

                            document.窗体对象名称.elements[“元素名称”]

 

窗体元素对象的常用方法

 

 

blur()

让光标离开当前元素

focus()

让光标落到当前元素上

select()

用于种类为text,textarea,password的元素,选择用户输入的内容

click()

模仿鼠标点击当前元素

 

 

 

 

窗体元素对象的常用属性

 

 

form

返回当前元素属于的窗体的名称

name

元素对象的名字,用于识别元素及提交至服务器端时作为变量名

type

元素对象的种类,有的是在HTML的标记中直接设置

value

元素对象的值

defaultValue

defaultChecked

元素对象初始值(text,password,textarea)

元素对象初始是否选上(checkbox,radio)

checked

元素对象是否选上(checkbox,radio)

readonly

该元素不可以被编辑,但变量仍传递到服务器端

disabled

该元素不可以被编辑,且变量将不传递到服务器端

 

窗体元素对象的常用事件

 

 

onBlur

当光标离开当前元素时

onChange

当前元素的内容变化时

onClick

鼠标单击当前元素时

onDblClick

鼠标双击当前元素时

onDragDrop

拖放当前元素时

onFocus

当光标落到当前元素上时

onKeyDown

当按下键盘时

onKeyPress

当按一下键盘时

onKeyUp

当松开键盘时

onMouseDown

当按下鼠标时

onMouseMove

当移动鼠标时

onMouseOut

当鼠标移出当前元素时

onMouseOver

当鼠标移到当前元素时

onMouseUp

当松开鼠标时

onMove

当移动当前元素时

onSelect

当选择当前元素内容时(用于种类为text,textarea,

password的元素)

 

7.3.4 列表及列表选项元素

网页中的列表包括下拉列表和列表两种,在HTML文件中都使用标记中没有size属性时,就是下拉列表,否则就是列表。在列表的情况下,当中都需要包含标记以表示列表中的选项内容。

JavaScript中对列表进行添加、删除选项的操作

(1)   添加列表选项 new Option([选项的文字内容[,选项的值[,初始是否选项[,是否选上]]]])

var newOption = new Option(“大连”, “5”);

       myList.option[5] = newOption;

(2)   删除列表选项。只要将列表选项数组中指定的选项赋值为null

myList.options[1] = null;

 

示例列表 

 

myList = document.myForm.province;

 

列表属性

 

 

 

options

列表选项数组

myList.options[1]表示列表中的第二个选项

length

列表选项长度,与options.length相同

myList.length结果为3

selectedIndex

对于单选列表,它是当前选择项在选项数组中的元素序号;对于多选列表,它是第一个选择项在选项数组中的元素序号

 

 

列表选项属性

 

 

 

selected

选项是否选上,返回结果为true/false

 

defaultSelected

选项初始时是否选上

 

text

选项的文字内容

myList.options[1].text 结果为“上海”

value

选项的值

myList.options[1].value结果为“1

 

7-3  当用户按下“开始测试”按钮后,JavaScript根据窗体元素的种类type,自动进行填写文字内容、选择按钮、选择列表项等操作,最后在提示信息框中按“OK”钮,JavaScript就会自动按下“重置”按钮,清空窗体内容。

目的:学习如何使用窗体及其元素的属性、方法和事件,学习如何使用JavaScript程序对窗体中的元素进行赋值、选择等操作。

      

      

 

 

             

                    

                           

                                  

                                  

      

                           

     

                           

                           

                                  

                                  

 

                           

     

                           

                           

                                  

                                  

     

                           

     

                           

                           

                                  

                                  

  

                           

     

                           

                           

                                  

                                  

    

                           

     

                           

                           

                                  

                                  

    

                           

     

 

                           

                                  

                                  

    

                           

     

                           

                           

                                  

                                  

      

                           

     

                           

                           

                                  

                                  

     

                           

     

                           

                           

                                  

                                  

     

                           

     

                           

                      

                                  

                                  

  

                           

                                 

                    

单行文本框
复选钮
单选钮

                                          Yes

                                          No

                                  

密码框
隐含变量
按钮 普通按钮">
提交钮 提交">
多行文本框
下拉列表

                                                

                                  

多选列表

                                                

                                  

重置钮 重置">

                    

                    

开始测试" οnclick="doTest()">

             

 

 

例7-3          在窗体myForm中的两个列表中移动

目的:学习如何使用窗体中的列表及列表选项元素,特别是如何进行列表项的添加、删除

             

      

             

                    

                           

                           

                           

                           

                           

                    

     

             

                                  

                           

                                  

                                  

                                  

    

                           

                                  

                           

      

 

 

 

 

 

74锚点(anchor)对象

       锚点对象用于在网页中定位,链接对象可用于表示通向定位点的链接。锚点与链接对象都使用标记,当标记中不含有href属性时表示锚点,如果含有href表示链接。

HTML中的锚点语句:

锚点名称”>文字内容

 

JavaScript中的锚点对象是文档对象的一个属性,它通常以数组的形式表示网页中所有的锚点,其语法规则如下:

锚点对象数组:    document.anchors

所有锚点个数:    document.anchors.length

某一锚点的名字:  document.anchors[i].name

 

7-4  网页中有一个可以滚动的文字区域,包含7个锚点标记,其下方有7个链接(自动生成),每一个链接对应一个锚点位置。

目的:在网页中使用锚点、链接标记

      

      

      

             

                     问题1

                    

回答1111

                     问题2

                    

回答2222

                     问题3

                    

回答3333

                     问题4

                    

回答4444

                     问题5

                    

回答5555

                     问题6

                    

回答6666

                     问题7

                    

回答7777

             

             

             

             

             

      

 

75链接(link)对象

HTML中的链接语句:

锚点名称” target=”目标字符串”>链接文字内容

网页地址字符串” target=”目标字符串”>链接文字内容

函数名” target=”目标字符串”>链接文字内容

 

       链接对象也是文档对象的一个属性,它通常以数组的形式表示网页中所有的链接。与锚点不同,每个链接对象都具有属性、方法和事件,其属性与窗口(window)对象中的location对象的属性完全一样。其语法规则如下:

链接数组:       document.links

所有链接个数:   document.links.length

 

 

 

 

:网页中有一个链接

target=”_blank”>Blue

 

linkObj = document.links[0];  //得到链接对象

 

链接对象属性

 

 

 

href

链接地址字符串,如果要调用JavaScript函数,要以“JavaScript:”开始

linkObj.href 结果为

http:// 67.85.238.132:18/

cbx/essay.jsp?username=admin&group=grp1#blue

hash

href中的以#开始的表示锚点的一个字符串

linkObj.hash结果为

#blue

hostname

href中的服务器名、域名或IP地址

linkObj.hostname 结果为

67.85.238.132

post

href中的端口名

linkObj. post  结果为

18

host

href中的hostnameport

linkObj. host  结果为

67.85.238.132

pathname

href中的子目录名及文件名

linkObj. pathname  结果为

/cbx/essay.jsp

protocol

href中从开始至间的字符串

linkObj. protocol  结果为

http

search

href中从”?”开始表示变量部分的字符串

linkObj. search  结果为

?username=admin&group=grp1

target

显示链接地址的位置

linkObj. target  结果为

_blank表示新的一页

 

7-5  网页上有提交链接,通过该链接提交窗体,并且当光标移动到链接上时,浏览器的状态栏中将显示提交至服务器……”

目的:在链接对象中使用onmouseoveronmouseout事件;改变浏览器状态信息。

      

             

      

      

      

 

 

需要转到的页面">

                    

                     用户名:

                     密码:

                     提交

             

      

 

76 图像(image)对象

761 网页中已有的图像对象

JavaScript中的图像对象是文档对象的一个属性,通常以数组的形式表示网页中所有的图像。其语法规则如下:

图像对象数组:  document.images

所有图像个数:  document.images.length

引用图像对象:  document.images[i] document.images[“图像对象名字”]

”</font这个图片用于示例说明” longdesc=”test”>

   图像对象是myImage = document.images[0]; myImage = document.images[“myImg”];

 

图像对象属性

 

 

 

name

图像对象名字(只读)

myImage.name 结果为 myImg

src

图像文件地址

myImage. src结果为

file:///c:/js_book/myPict.gif

alt

关于图像对象功能的文字说明

myImage. alt结果为 这个图片用于示例说明

complete

浏览器显示图像是否完成(只读)

其值是true false

height

图像高度,单位是像素(只读)

myImage. height结果为 50

width

图像宽度,单位是像素(只读)

myImage. width结果为  35

762 网页中新建图像对象

使用关键字new就可以新建图像对象,其语法规则如下:

new Image([宽度,][高度]);例如:var myImage = new Image();

如果要在网页中预装载3个图像对象,3个图像文件名文别为0.gif1.gif2.gif,可用下述语句实现。

theImages = new Array(3);

for (i=0;i

      theImages[i] = new Image();

      theImage[i].src = I + ‘,gif’;

}

 

7-6 制作图片翻转效果

目的:在图像对象上应用onmouseover onmouseout 事件

用到的4张图片

   

     eye_c.gif                                  eye_d.gif

 

   

       eye_l.gif                                 eye_r.gif

 

   

   

          

   

     

                 

   

          

     

   

 

 

          

 

          

   

                   

                 

                 

      

          

                                                     οnmοuseοut="lefteye.src='eye_c.gif';righteye.src='eye_c.gif';">[链接1] 

          

          

               οnmοuseοut="lefteye.src='eye_c.gif';righteye.src='eye_c.gif';">[链接2]         

          

               οnmοuseοut="lefteye.src='eye_c.gif';righteye.src='eye_c.gif';">[链接3]         

 

你可能感兴趣的:(javascript,input,html,function,文档,button)