文章目录
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4b80795a472f5738ed1df66d6613bf54.gif)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/455a91db92e4531291860420a5ec128d.gif)
window对象
一个浏览器窗口就是一个 window
对象
window
子对象
子对象 | 说明 |
---|---|
d o c u m e n t document document | 文档对象,用于操作页面元素 |
l o c a t i o n location location | 地址对象,用于操作 URL 地址 |
n a v i g a t o r navigator navigator | 浏览器对象,用于获取浏览器版本信息 |
h i s t o r y history history | 历史对象,用于操作浏览历史 |
s c r e e n screen screen | 屏幕对象,用于操作屏幕宽度高度 |
一个窗口就是一个 window
对象,这个窗口里面的 HTML
文档就是一个 document
对象,document
对象是 window
对象的子对象
window
对象常用方法
方法 | 说明 |
---|---|
a l e r t ( ) alert() alert() | 提示对话框 |
c o n f i r m ( ) confirm() confirm() | 判断对话框 |
p r o m p t ( ) prompt() prompt() | 输入对话框 |
o p e n ( ) open() open() | 打开窗口 |
c l o s e ( ) close() close() | 关闭窗口 |
s e t T i m e o u t ( ) setTimeout() setTimeout() | 开启 “一次性” 定时器 |
c l e a r T i m e o u t ( ) clearTimeout() clearTimeout() | 关闭 “一次性” 定时器 |
s e t I n t e r v a l ( ) setInterval() setInterval() | 开启 “重复性” 定时器 |
c l e a r I n t e r v a l ( ) clearInterval() clearInterval() | 关闭 “重复性” 定时器 |
打开窗口
window.open(url, target);//target默认为_blank(新窗口打开), target为_self 时表示在当前窗口打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="打开新窗口" />
<input type="button" value="操作新窗口" />
<script>
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
var opener = null;
oBtn[0].onclick = function ()
{
opener = window.open();
var strHtml = '<div>小心偷影子的人,他会带走你的心。</div>';
opener.document.write(strHtml);
};
oBtn[1].onclick = function ()
{
var oDiv = opener.document.getElementsByTagName("div")[0];
oDiv.style.fontWeight = "bold";
oDiv.style.color = "hotpink";
};
}
</script>
</body>
</html>
关闭窗口
window.close() //无参数
对话框
alert()
:仅提示文字,无返回值
alert("提示文字");
confirm()
confirm
不仅提示文字,还提供确认,返回布尔值
confirm("提示文字");
prompt()
prompt()
:不仅显示提示文字,还返回一个字符串
prompt("提示文字")
定时器
setTime() && clearTimeout()
setTimeout(code, time); //执行一次
code
是一段代码,一个函数,也可以是函数名
time
是时间,单位为毫秒,表示经过多长时间才执行 code
中的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>点击开始按钮,2秒后开始欢迎</p>
<input type="button" value="开始" />
<input type="button" value="暂停" />
<script>
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
var timer = null; //存放定时器
oBtn[0].onclick = function ()
{
timer = setTimeout(function(){
alert("欢迎欢迎");
}, 2000);
};
oBtn[1].onclick = function ()
{
clearTimeout(timer);
};
}
</script>
</body>
</html>
setInterval() && clearInterval()
setInterval(code, time); //执行多次
倒计时效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>倒计时:<span id="num">5</span></p>
<script>
var n = prompt();
window.onload = function () {
var t = setInterval(countdown, 1000); //设置定时器
}
function countdown(){
if(n > 0){
n--;
document.getElementById("num").innerHTML = n;
}
}
</script>
</body>
</html>
背景颜色替换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{width: 100px; height: 100px; border: 1px solid silver;}
</style>
</head>
<body>
<input type="button" value="开始" />
<input type="button" value="暂停" />
<div></div>
<script>
window.onload = function () {
var obtn = document.getElementsByTagName("input");
var odiv = document.getElementsByTagName("div")[0];
// 定义一个数组存放六种颜色
var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
var timer = null;
var i = 0;
obtn[0].onclick = function()
{
clearInterval(timer);
timer = setInterval(function(){
odiv.style.backgroundColor = colors[i];
i++;
i = i%colors.length;
}, 1000);
};
obtn[1].onclick = function()
{
clearInterval(timer);
};
}
</script>
</body>
</html>
location 对象
属性 | 说明 |
---|---|
h r e f href href | 当前页面地址 |
s e a r c h search search | 当前页面地址 “?” 后面的内容 |
h a s h hash hash | 当前页面地址 “#” 后面的内容 |
window.location.href //获取或设置当前页面的地址
window.location.search //获取和设置当前页面地址
window.location.hash; //获取和设置当前页面地址#后面的内容 #一般用于锚点链接
navigator 对象
navigator
获取浏览器的类型
window.navigator.userAgent;
document 对象
document 对象属性
属性 | 说明 |
---|---|
d o c u m e n t . t i t l e document.title document.title | 获取文档的 t i t l e title title |
d o c u m e n t . b o d y document.body document.body | 获取文档的 b o d y body body |
d o c u m e n t . f o r m s document.forms document.forms | 获取所有的 f o r m form form 元素 |
d o c u m e n t . i m a g e s document.images document.images | 获取所有的 i m g img img 元素 |
d o c u m e n t . l i n k s document.links document.links | 获取所有 a a a 元素 |
d o c u m e n t . c o o k i e document.cookie document.cookie | 文档的 c o o k i e cookie cookie |
d o c u m e n t . U R L document.URL document.URL | 当前文档的 U R L URL URL |
d o c u m e n t . r e f e r r e r document.referrer document.referrer | 返回使浏览者到达当前文档的 U R L URL URL |
document 对象方法
方法 | 属性 |
---|---|
d o c u m e n t . g e t E l e m e n t B y I d ( ) document.getElementById() document.getElementById() | 通过 i d id id 获取元素 |
d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ) document.getElementsByTagName() document.getElementsByTagName() | 通过标签名获取元素 |
d o c u m e n t . g e t E l e m e n t s B y C l a s s N a m e ( ) document.getElementsByClassName() document.getElementsByClassName() | 通过 c l a s s class class 获取元素 |
d o c u m e n t . g e t E l e m e n t s B y N a m e ( ) document.getElementsByName() document.getElementsByName() | 通过 n a m e name name 获取元素 |
d o c u m e n t . q u e r r y S e l e c t o r ( ) document.querrySelector() document.querrySelector() | 通过选择器获取元素,只获取第一个 |
d o c u m e n t . q u e r y S e l e c t o r A l l ( ) document.querySelectorAll() document.querySelectorAll() | 通过选择器获取元素,获取所有 |
d o c u m e n t . c r e a t e E l e m e n t ( ) document.createElement() document.createElement() | 创建元素节点 |
d o c u m e n t . c r e a t e T e x t N o d e ( ) document.createTextNode() document.createTextNode() | 创建文本节点 |
d o c u m e n t . w r i t e ( ) document.write() document.write() | 输出内容 |
d o c u m e n t . w r i t e l n ( ) document.writeln() document.writeln() | 输出内容并换行 |