JavaScript BOM 教程.docx
《JavaScript BOM 教程.docx》由会员分享，可在线阅读，更多相关《JavaScript BOM 教程.docx（43页珍藏版）》请在冰豆网上搜索。
JavaScriptBOM教程
JavaScriptBOM教程
什么是BOM
JavaScriptwindow对象
JavaScriptmoveBy（）函数
JavaScriptmoveTo（）函数
JavaScriptresizeBy（）函数
JavaScriptresizeTo（）函数
JavaScriptscrollTo（）函数
JavaScriptscrollBy（）函数
JavaScriptfocus（）函数
JavaScriptblur（）函数
JavaScriptopen（）函数
JavaScriptclose（）函数
JavaScriptopener属性
JavaScriptalert（）函数
JavaScriptconfirm（）函数
JavaScriptprompt（）函数
JavaScriptdefaultStatus属性
JavaScriptstatus属性
JavaScriptsetTimeout（）函数
JavaScriptclearTimeout（）函数
JavaScriptsetInterval（）函数
JavaScriptclearInterval（）函数
JavaScriptdocument对象
JavaScriptwrite（）函数
JavaScriptwriteln（）函数
JavaScriptdocument.open（）函数
JavaScriptdocument.close（）函数
JavaScriptframes对象
JavaScripthistory对象
JavaScriptgo（）函数
JavaScriptback（）函数
JavaScriptforward（）函数
JavaScriptlocation对象
JavaScripthash属性
JavaScripthost属性
JavaScripthostname属性
JavaScripthref属性
JavaScriptpathname属性
JavaScriptport属性
JavaScriptprotocol属性
JavaScriptsearch属性
JavaScriptassign（）函数
JavaScriptreplace（）函数
JavaScriptreload（）函数
JavaScriptnavigator对象
JavaScriptuserAgent属性
JavaScriptcookieEnabled属性
JavaScriptscreen对象
JavaScriptavailHeight属性
JavaScriptavailWidth属性
JavaScriptcolorDepth属性
JavaScriptpixelDepth属性
JavaScriptwindow对象
目录
全局的window对象
window与self对象
window的子对象
window函数索引
窗体控制函数
窗体滚动轴控制函数
窗体焦点控制函数
新建窗体函数
对话框函数
状态栏属性
时间等待与间隔函数
延伸阅读
window--window对象是BOM中所有对象的核心
window，中文"窗口"
引用网址：
window对象除了是BOM中所有对象的父对象外，还包含一些窗口控制函数
全局的window对象
JavaScript中的任何一个全局函数或变量都是window的属性
示例
varsTest="dreamdu";document.write（sTest==window.sTest）;
结果:
true
由于sTest是全局变量，因此可以通过window.sTest访问这个变量
这点很重要，我们将在JavaScript作用域章节中详细介绍
window与self对象
self对象与window对象完全相同，self通常用于确认就是在当前的窗体内
window的子对象
JavaScriptdocument对象
JavaScriptframes对象
JavaScripthistory对象
JavaScriptlocation对象
JavaScriptnavigator对象
JavaScriptscreen对象
window函数索引
窗体控制函数
JavaScriptmoveBy（）函数
JavaScriptmoveTo（）函数
JavaScriptresizeBy（）函数
JavaScriptresizeTo（）函数
窗体滚动轴控制函数
JavaScriptscrollTo（）函数
JavaScriptscrollBy（）函数
猴子提示:
上面几个函数的名字最后都带有To或By，to是绝对的意思（从整体而言），by是相对的意思（从原先的位置而言）
窗体焦点控制函数
JavaScriptfocus（）函数
JavaScriptblur（）函数
新建窗体函数
JavaScriptopen（）函数
JavaScriptclose（）函数
JavaScriptopener属性
对话框函数
JavaScriptalert（）函数
JavaScriptconfirm（）函数
JavaScriptprompt（）函数
状态栏属性
JavaScriptwindow.defaultStatus属性
JavaScriptwindow.status属性
时间等待与间隔函数
JavaScriptsetTimeout（）函数
JavaScriptclearTimeout（）函数
JavaScriptsetInterval（）函数
JavaScriptclearInterval（）函数
延伸阅读
JavaScript作用域
JavaScriptmoveBy（）函数
moveBy--从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体
moveBy，中文"移动到"
引用网址：
to是绝对的意思（从整体而言），by是相对的意思（从原先的位置而言）
moveBy函数语法
moveBy（x,y）;
moveBy函数参数说明
x--水平移动的像素数
y--垂直移动的像素数
示例
moveBy（5,6）;
窗体向右移动5像素，向下移动6像素
moveBy（-5,-6）;
窗体向左移动5像素，向上移动6像素
moveBy（5,-6）;
窗体向右移动5像素，向上移动6像素
moveBy（-5,6）;
窗体向左移动5像素，向下移动6像素
"onclick="window.resizeTo（600,400）;"/>
JavaScriptmoveBy（）函数示例--可以尝试编辑
JavaScriptmoveBy（x,y）函数示例
猴子提示:
成熟的网站设计者应避免使用窗体移动与大小控制函数，移动窗体或改变大小会对用户产生不良的影响。
延伸阅读
JavaScriptmoveTo（）函数
JavaScriptmoveTo（）函数
moveTo--移动窗体左上角到相对于屏幕左上角的（x,y）点，当使用负数做为参数时会吧窗体移出屏幕的可视区域
moveTo，中文"移动到"
引用网址：
to是绝对的意思（从整体而言），by是相对的意思（从原先的位置而言）
moveTo函数语法
moveTo（x,y）;
moveTo函数参数说明
x--从屏幕左上角水平向左移动x个像素数
y--从屏幕左上角垂直向下移动y个像素数
示例
moveTo（5,6）;
移动窗体左上角到相对于屏幕左上角的（5,6）点
moveTo（-5,-6）;
移动窗体左上角到相对于屏幕左上角的（-5,-6）点，窗体一部分会移出屏幕的可视区域
"onclick="window.resizeTo（600,400）;"/>
JavaScriptmoveTo（）函数示例--可以尝试编辑
JavaScriptmoveTo（x,y）函数示例
猴子提示:
成熟的网站设计者应避免使用窗体移动与大小控制函数，移动窗体或改变大小会对用户产生不良的影响。
延伸阅读
JavaScriptmoveBy（）函数
JavaScriptresizeBy（）函数
resizeBy--相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。
如果参数为负值，将缩小窗体，反之扩大窗体
resizeBy，中文"调整大小到"
引用网址：
to是绝对的意思（从整体而言），by是相对的意思（从原先的位置而言）
resizeBy函数语法
resizeBy（w,h）;
resizeBy函数参数说明
w--窗体宽度调整的像素数
h--窗体高度调整的像素数
示例
resizeBy（5,6）;
窗体宽度扩大5像素，高度扩大6像素
resizeBy（-5,-6）;
窗体宽度缩小5像素，高度缩小6像素
"onclick="window.resizeBy（5,6）;"/>"onclick="window.resizeBy（-5,-6）;"/>
JavaScriptresizeBy（）函数示例--可以尝试编辑
JavaScriptresizeBy（w,h）函数示例
猴子提示:
成熟的网站设计者应避免使用窗体移动与大小控制函数，移动窗体或改变大小会对用户产生不良的影响。
延伸阅读
JavaScriptresizeTo（）函数
JavaScriptresizeTo（）函数
resizeTo--把窗体宽度调整为w个像素，高度调整为h个像素
resizeTo，中文"调整大小到"
引用网址：
to是绝对的意思（从整体而言），by是相对的意思（从原先的位置而言）
resizeTo函数语法
resizeTo（w,h）;
resizeTo函数参数说明
w--窗体宽度的像素数
h--窗体高度的像素数
w与h不能使用负数
示例
resizeTo（50,60）;
窗体宽度调整为50像素，高度调整为60像素
"onclick="window.resizeTo（50,60）;"/>"onclick="window.resizeTo（500,600）;"/>
JavaScriptresizeTo（）函数示例--可以尝试编辑
JavaScriptresizeTo（w,h）函数示例
猴子提示:
成熟的网站设计者应避免使用窗体移动与大小控制函数，移动窗体或改变大小会对用户产生不良的影响。
延伸阅读
JavaScriptresizeBy（）函数
JavaScriptscrollTo（）函数
scrollTo--在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
scrollTo，中文"滚动到"
引用网址：
to是绝对的意思（从整体而言），by是相对的意思（从原先的位置而言）
scrollTo函数语法
scrollTo（x,y）;
scrollTo函数参数说明
x--滚动条移动的水平像素
y--滚动条移动的垂直像素
示例
scrollTo（20,100）;
横向滚动条移动到相对于窗体宽度为20像素的位置，纵向滚动条移动到相对于窗体高度为60像素的位置
"onclick="window.scrollTo（20,100）;"/>
JavaScriptscrollTo（）函数示例--可以尝试编辑
JavaScriptscrollTo（）函数示例
延伸阅读
JavaScriptscrollBy（）函数
JavaScriptscrollBy（）函数
scrollBy--如果有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置（就是向左移动x像素），将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置（就是向下移动y像素）
scrollBy，中文"滚动到"
引用网址：
to是绝对的意思（从整体而言），by是相对的意思（从原先的位置而言）
scrollBy函数语法
scrollBy（x,y）;
scrollBy函数参数说明
x--滚动条移动的水平像素
y--滚动条移动的垂直像素
示例
scrollTo（10,50）;scrollBy（20,100）;
横向滚动条移动到相对于窗体宽度为10像素的位置，纵向滚动条移动到相对于窗体高度为50像素的位置，再将横向滚动条向左移动20像素，纵向滚动条向下移动100像素
"onclick="window.scrollBy（20,100）;"/>
JavaScriptscrollBy（）函数示例--可以尝试编辑
JavaScriptscrollBy（）函数示例
延伸阅读
JavaScriptscrollTo（）函数
JavaScriptfocus（）函数
focus--使窗体或控件获取焦点
focus，中文"焦点"
引用网址：
focus函数语法
focus（）;
示例
functionsetblur（）{dreamdutxt.focus（）;dreamdutxt.blur（）;}
dreamdutxt.focus（）"/>
使控件失去与获得焦点
JavaScriptfocus（）函数示例--可以尝试编辑
JavaScriptfocus（）函数示例使控件获取与失去焦点
猴子提示:
此示例在Firefox与Chrome浏览器下无效
延伸阅读
JavaScriptblur（）函数
JavaScriptblur（）函数
blur--与focus函数相反，使窗体或控件失去焦点
blur，中文"模糊"
引用网址：
blur函数语法
blur（）;
blur函数说明
可以使用blur函数使窗体或空间失去焦点，例如当按钮处于焦点状态下时，会有虚线框，使用blur函数可以去除焦点，从而使虚线框消失
示例
去除链接上的虚线框，点击链接测试
去除链接上的虚线框，使用blur函数
JavaScriptblur（）函数示例--可以尝试编辑
去除链接上的虚线框，使用blur函数
延伸阅读
JavaScriptfocus（）函数
JavaScriptopen（）函数
open--打开（弹出）一个新的窗体
open，中文"打开"
引用网址：
open函数语法
window.open（url,name,features,replace）;
open函数参数说明
url--要载入窗体的URL
name--新建窗体的名称（也可以是HTMLtarget属性的取值，目标）
features--代表窗体特性的字符串，字符串中每个特性使用逗号分隔
replace--一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定
open函数name参数说明
name用于设置弹出窗体的名称，如果使用已有的窗体或框架名称作为name参数，那么url网址将在这个窗体或框架页面载入
例如：
使用HTML连接建立一个页面首先使用普通HTML链接打开一个页面（target名为dreamdu），之后使用open函数打开另一个页面，浏览器首先要查找是否有名称为dreamdu的窗体，如果有，就在这个窗体中加载梦之都HTML教程网址。
否则新建一个名称为dreamdu的窗体并加载梦之都HTML教程网址
open函数默认的打开窗体的方式为target的_blank弹出方式，因此页面都将以弹出的方式打开
open函数features参数说明
如果不使用第三个参数，将打开一个新的普通窗口
open函数features参数说明，通过特性字符串可以定义新的特性的窗口
参数名称
类型
说明
height
Number
设置窗体的高度，不能小于100
left
Number
说明创建窗体的左坐标，不能为负值
location
Boolean
窗体是否显示地址栏，默认值为no
resizable
Boolean
窗体是否允许通过拖动边线调整大小，默认值为no
scrollable
Boolean
窗体中内部超出窗口可视范围时是否允许拖动，默认值为no
toolbar
Boolean
窗体是否显示工具栏，默认值为no
top
Number
说明创建窗体的上坐标，不能为负值
status
Boolean
窗体是否显示状态栏，默认值为no
width
Number
创建窗体的宽度，不能小于100
特性字符串中的每个特性使用逗号分隔，每个特性之间不允许有空格
open函数返回值
新建立的window对象
猴子提示:
不建议使用弹出窗体，HTML弹出窗体
示例
window.open（""dreamduwin","width=500,height=300,left=10,top=20,location=yes,status=yes"）;
新建一个宽度为500像素，高度为300像素，距离屏幕左上角水平偏移10像素，垂直偏移20像素，有地址栏与状态栏的窗体
varoWin=window.open（""dreamduwin"）;oWin.resizeTo（800,600）;//重新设置窗体大小oWin.moveTo（50,50）;//移动窗体oWin.close（）;//关闭窗体
window.open函数新建立窗体后会返回新建窗体的window对象，通过此对象可以控制窗体（移动，改变大小，关闭）
"onclick="window.open（''dreamduwin','width=500,height=300,left=10,top=20,location=yes,status=yes'）;"/>
JavaScriptopen（）函数示例--可以尝试编辑
JavaScriptopen（）函数示例
同一窗口加载网页，使用open函数
延伸阅读
JavaScriptclose（）函数
JavaScriptopener属性
HTML弹出页面
JavaScriptclose（）函数
close--关闭窗体
close，中文"关闭"
引用网址：
close函数语法
window.close（）;
close函数说明
所有的窗体都可以使用此函数关闭
对于通过使用open函数打开的窗体，使用close函数将直接关闭。
非open打开
升级会员 