菜鸟笔记--window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

Browser 对象------------------------------------------------

一 navigator对象

window.navigator 对象包含有关访问者浏览器的信息
window.navigator 对象在编写时可不使用 window 这个前缀。

1. appCodeName 返回浏览器的代码名

navigator.appCodeName
"Mozilla"

2. appName 返回浏览器的名称

navigator.appName
"Netscape"

3. appVersion 返回浏览器的平台和版本名称

navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36"

4. cookieEnabled 返回运行浏览器的操作系统平台
navigator.cookieEnabled
true

5. platform 返回浏览器的操作系统平台

navigator.platform
"Win32"

6. userAgent 返回由客户机发送服务器的user-agent头部的值

navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36"

二 screen 显示器对象

1. availHeight 返回显示屏幕的可用高度

availHeight 属性声明了显示浏览器的屏幕的可用高度,以像素计。在 Windows 这样的操作系统中,这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间。
document.write('可用的屏幕高度'+ screen.availHeight);

2. availWihth 返回显示屏幕的可用宽度

document.write('可用的屏幕宽度'+ screen.availWidth);

3. height 属性声明了显示浏览器的屏幕的高度,以像素计。

4. width 属性声明了显示浏览器的屏幕的宽度,以像素计。

5. colorDepth 返回目标设备或缓冲器上的调色板的比特深度。

三 history 历史对象

window.history 对象在编写时可不使用 window 这个前缀。

1. back() 返回前一个URL

history.back() - 与在浏览器点击后退按钮相同

2. forword() 返回下一个URL

history.forward() - 与在浏览器中点击按钮向前相同

3. go() 返回某个具体页面

go()方法只有一个参数,可以是整数、负数。如果是正数,就前进。负数就是后退。(相当于Forward和Back的区别)

后退一页 history.go(-1)

前进一页 history.go(1)

四 location 位置方法

window.location 对象在编写时可不使用 window 这个前缀。

1. 属性

(1) hash 设置或返回从井号(#) 开始的URL

(2) host 设置或返回主机名和当前URL的端口号

location.host
"www.w3school.com.cn"

(3) hostname 设置返回当前URL的主机名

(4) href 设置或返回完整带的URL

location.href
"http://www.w3school.com.cn/js/js_window_location.asp"

(5) pathname 设置或返回当前URL的路径部分

location.pathname
"/js/js_window_location.asp"

(6) port 设置或返回主机名和当前URL的端口号

(7) protocol 设置或返回当前URL的协议

location.protocol
"http:"

(8) search 设置或返回从问号(?)开始的URL

2. 方法

1. assign(URL) 加载新的文档

function newDoc(){
window.location.assign("http://www.baidu.com")
}

2. reload() 重新加载当前页面

3. replace(newURL) 用新的文档替代当前文档

 

window 对象-----------------------------------------------------------------------

一 window对象属性

1. 状态栏

(1) defaultStatus 改变浏览器状态栏的默认提示

window.defaultStatus = "This is the default text in the status bar!"

(2) status 临时改变浏览器状态栏的显示

window.status = "Some text in the status bar!"

2. 窗口位置(重点)

(1) IE 浏览器

(1.1) IE、Safari 和 Opera
screenLeft 声明窗口的左上角的X光标

screenTop 声明窗口的左上角的Y光标

(1.2) 声明当前文档向右滚动过的像素数
document.body.scrollLeft
document.documentElement.scrollLeft

声明当前文档向下滚动过的像素数
document.body.scrollTop
document.documentElement.scrollTop

(1.3) 浏览器窗口的内部高度(只针对 8,7,6,5)
document.body.clientHeight
document.documentElement.clientHeight

(1.4) 浏览器窗口的内部宽度(只针对 8,7,6,5)
document.body.clientWidth
document.documentElement.clientWidth


(2) 非IE 浏览器

(2.1) (Safari Firefox)
screenX 声明窗口的左上角的X光标

screenY 声明窗口的左上角的Y光标

(2.2) pageXOffset 声明当前文档向右滚动过的像素数

pageYOffset 声明当前文档向下滚动过的像素数

(2.3) 浏览器窗口的内部高度
window.innerHeight

浏览器窗口的内部宽度
window.innerWidth

//浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

var x = document.getElementById('demo');
x.innerHTML = '宽度是' + w + '高度是' + h

3. 其他属性

(3.1) opener 可以实现同域名下跨窗体之间的通讯
一个窗体要包含另一个窗体的opener

opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。

opener 属性非常有用,创建的窗口可以引用创建它的窗口所定义的属性和函数。

window.opener

注释:只有表示顶层窗口的 Window 对象的 operner 属性才有效,表示框架的 Window 对象的 operner 属性无效。

myWindow=window.open('','MyName','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()
myWindow.opener.document.write("This is the parent window")

详情看 https://blog.csdn.net/u012102536/article/details/53424165

(3.2) closed 当前窗口关闭时返回true

(3.3) name 设置或返回窗口前名称

(3.4) self 返回对当前窗口的引用

二 window对象方法

A.定时器

1. setTimeout

语法 setTime(执行代码,毫秒数)
功能 当到了指定的毫秒数后,自动执行功能代码

2. clearTimeout

语法 clearTimeout(定时器)
功能 取消由setTimeout()设置的定时器

3. setInterval

语法 setInterval(重复执行的代码,毫秒数)
功能 按指定周期重复执行功能代码

4. clearInterval

语法 clearInterval(时间间隔器)
功能 取消由setInterval()设置的时间间隔器

B. 对话框

1. alert

语法 alert("提示字符串")
功能 弹出一个警告框,在警告框内显示提示字符串

2. confirm

语法 confirm("提示字符串")
功能 显示一个确认框,在确认框能显示提示字符串
当用户但其“确定”按钮时该方法返回true
当单击“取消”按钮时,但会null值

3. prompt

语法 prompt("提示字符串",“缺少文本”)
功能 显示一个输入框,在输入框显示字符串
在输入文本框显示缺少文本,并等待用户输入
当用户单击“确定”按钮时,返回用户输入的字符串
当单击“取消”按钮时,但会null值

D. open and close

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
window.open(URL,name,features,replace)

新浏览器窗口中打开 www.w3school.com.cn :
window.open("http://www.w3school.com.cn")

在新浏览器窗口中打开 about:blank 页:
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()

E. scollBy and scrollTo

scrollBy(xnum,ynum)按照指定的像素值来滚动内容。
window.scrollBy(100,100)

scrollTo()把内容滚动到指定的坐标。
scrollTo(xpos,ypos)
window.scrollTo(100,500)

F. resizeBy and resizeTo

resizeBy(width,height)方法用于根据指定的像素来调整窗口的大小。
window.resizeBy(-100,-100)

resizeTo(width,height) 方法用于把窗口大小调整为指定的宽度和高度。
window.resizeTo(500,300)

G. moveBy and moveTo

moveBy() 方法可相对窗口的当前坐标把它移动指定的像素。
window.moveBy(x,y) x要把窗口右移的像素数 y要把窗口下移的像素数

moveTo() 方法可把窗口的左上角移动到一个指定的坐标。
window.moveTo(x,y)

H. focus() 方法可把键盘焦点给予一个窗口。
window.focus()

下面的例子可确保新的窗口得到焦点:
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()

blur() 方法可把键盘焦点从顶层窗口移开。
window.blur()

 

HTML DOM 对象----------------------------------------------------------------------------------

一 document 文档对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

1. 集合

(1) anchors[] 描点对象数组

document.anchors.length

(2) images[] 图片对象数组

document.images.length

(3) links[] 连接对象数组

document.links.length

(4) forms[] 表单对象数组

document.forms.length

(5) all[] 返回对文档中所有 HTML 元素的引用

document.all是页面内所有元素的一个集合
document.all(0)表示页面内第一个元素

document.all[i]
document.all[name]
document.all.tags[tagname]


2. 属性

(1) cookie 设置或返回与当前文档有关的所有cookie

该属性是一个可读可写的字符串,可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。
document.cookie

(2) domain 返回当前文档的域名
document.domain //www.w3school.com.cn

(3) referrer 返回当前文档的文档的URL
document.referrer
"http://www.w3school.com.cn/jsref/dom_obj_document.asp"

(4) title 返回当前文档的标题
document.title
"HTML DOM title 属性"

(5) URL 返回当前文档的文档的URL
document.URL
"http://www.w3school.com.cn/jsref/prop_doc_title.asp"

(6) lastModified 返回文档最近被修改的日期和时间
document.lastModified
"08/06/2018 21:21:34"

3. 方法

(1) open() 打开一个新的文档,并擦除旧文档的内容
document.open(minetype,replce)

重要事项:调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后,必须记住用 close 方法关闭文档,并迫使其内容显示出来。

注释:属于被覆盖的文档的一部分的脚本或事件句柄不能调用该方法,因为脚本或事件句柄自身也会被覆盖。

(2) close() 关闭文档输出流

(3) write() 想当前文档追加写入文本

write() 方法值得注意,在文档载入和解析的时候,它允许一个脚本向文档中插入动态生成的内容。

function myFunc(){
var newDoc = document.open("text/html", "replace");
var txt = "<html><body>铃儿响叮当</body></html>"
newDoc.write(txt);
newDoc.close()
}


(4) written() 与write相同,在<pre>中追加换行
等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

 

posted @ 2018-08-06 22:37  仙人酱酱  阅读(203)  评论(0编辑  收藏  举报