目录
一.windows对象
浏览器对象模型(BOM) 是Javascript 的组成之一,他提供了独立于内容与浏览器窗口进行交互的对象,是浏览器对象模型可以实现与HTML交互。他的作用是将相关的元素组织包装起来,提供给程序设计人员使用,从而降低开发人员的劳动量,提高设计Web页面的能力。
--BOM是一个分层结构
![](https://i-blog.csdnimg.cn/blog_migrate/35983b03a9854ef9e345a29ea3d0c062.png)
--使用BOM模式通常可以实现如下功能
1.弹出新的浏览器窗口
2.移动,关闭浏览器窗口及调整窗口的大小。
3.在浏览器窗口中实现页面的前进,后退功能
1.常用的属性
window对象的常用属性
名称 | 说明 |
history | 有关客户访问过的URL的信息 |
location | 有关当前URL的信息 |
screen | 只读属性,包含有关客户端显示屏幕的信息 |
--在javascript中,window属性的语法格式
1.语法
window.属性名=“属性值”
2.使用:跳转到百度页面
window.location=“http://www.baidu.com”
2.常用的方法
window对象的常用方法
名称 | 说明 |
prompt() | 显示一个可输入的对话框 |
alert() | 显示一个带有提示信息和一个确定按钮的警示对话框 |
confrim() | 显示一个带有提示信息,确认和取消的按钮的对话框 |
close() | 关闭浏览器窗口 |
open() | 打开一个新的浏览器窗口,加载指定URL的窗口 |
setTime() | 在指定毫秒数后调用函数或者计算表达式 |
setInterval() | 按照指定周期(以毫秒)来计算函数或者表达式 |
--在javascript中,window方法的语法格式
1.语法
window.方法名();
//window对象是全局对象,所以再调用方法和属性时 ,window可以省略
2.关闭浏览器方法
close();
3.弹出一个确认对话框
confrim(“对话框中显示的纯文本”);
4.在页面弹出一个新的浏览器窗口
open("弹出窗口的URL","窗口名称","窗口特征");
--prompt()方法和alert()的用法,与confirm()方法的区别
1.alert()只有一个参数,仅显示警告对话框的消息,无返回值。
2.prompt()有两个参数,是输入对话框,用来提示用户输入一些信息,单击确认按钮则返回用户输入的值,单击取消则返回null.
3.confrim()只有一个参数,是确认对话框,显示提示对话框的消息,确认按钮和取消按钮。单击确认按钮返回true,单击取消按钮返回flase;
3.history对象和location对象
1.history对象
history对象提供用户最近浏览过的URL列表,但出于隐私方面的原因,history对象不在允许脚本访问已经访过多得实际URL,可以使用history对象提供的,逐个返回访问过的页面的方法.
--history()对象的方法
名称 | 描述 |
black() | 加载history对象列表中的前一个URL |
forward() | 加载history对象列表中的后一个URL |
go() | 加载history对象列表中的某个具体的URL |
--black()方法让浏览器加载前一个浏览过的文档,等效于浏览器页面中的“前进”按钮。
--forward()方法让浏览器加载后一个浏览过的文档,等效于浏览器页面中的“后退”按钮。
--go(n)方法中的n是一个具体的数字,等效于浏览器页面中的“前进”或"后退"按钮。
2.location对象
location对象提供当前的URL信息,并且可以重新装载当前页面或者载入新页面,
--location()对象的属性
名称 | 描述 |
host | 设置或返回主机名和当前URL的端口号 |
hostname | 设置或者返回当前URL的主机名 |
href | 设置或返回完整的URL |
--location()对象的方法
名称 | 描述 |
reload() | 重新加载当前文档 (刷新) |
replace() | 用新的文档替换当前文档 (跳转) |
1.实现刷新页面和跳转至查看鲜花详情页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>主页面</title>
<style type="text/css">
body{
margin: 0px auto;
text-align:center;
}
</style>
</head>
<body>
<img src="images/flow.jpg" alt="鲜花" /><br />
<a href=" javascript:location.replace('flower.html')" >查看鲜花详情</a>
<a href=" javascript:location.reload()" >刷新本页</a>
</body>
</html>
4.document对象
document对象既是window对象的一部分,又代表整个HTML文档,可用来访问页面中的所有元素.
1.doucment对象的常用属性
属性 | 描述 |
referrer | 返回载入当前文档的URL |
URL | 返回当前文档的URL |
1.referrer的语法
document.referrer //当前文档如果不是通过超链接访问的,则返回值为null;
2.URL的语法
document.URL
1.使用document.referrer属性获得链接进入本页的页面地址,判断是否从登录页面进入
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>领奖页面</title>
<style type="text/css">
body,h1{margin: 0;padding: 0;}
.prize{text-align: center;}
</style>
</head>
<body>
<div class="prize">
<img src="images/d1.jpg" alt="中奖" />
<h1><a href="praise.html" onclick="zhongjiang()">马上去领奖啦!</a></h1>
</div>
<script>
function zhongjiang(){
var reurl=document.referrer;
if(reurl=="" )
{
document.write("您不是从登录页面进入,五秒中后自动跳转登录页面");
setTimeout("location.href='login.html'",5000);
}else
{
document.write("恭喜您中了大奖")
}
}
</script>
</body>
</html>
2.document对象的常用方法
方法 | 描述 |
getIElementById() | 返回对拥有指定ID的第一个对象的引用 |
getIElementByName() | 返回对带有指定名称的对象的引用 |
getIElementByTagName() | 返回对带有指定标签名的对象的集合 |
write() | 向文档写文本,HTML表达式或者JavaScript代码 |
--getIElementById() 方法一般用来访问DIv,图片,表单元素,网页标签等,但要求访问对象的id是唯一的。
--getIElementByName()方法与getIElementById()方法相似,但他访问的是具有name属性的元素,由于一个文档中的name属性不可能是唯一的,因此getIElementByName()访问的是具有相同name属性的元素,如具有相同的name属性的单选按钮,复选框。
--getIElementByTagName()方法是按照标签来访问页面元素的,一般用于访问一组相同的元素如一组<input>,一组的图片等。
1.document对象方法的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用document对象操作页面</title>
</head>
<body>
<div class="content">
<img src="images/book.jpg" alt="岛上书店"/>
<div class="r">
<div id="book">书名:岛上书店</div>
<input name="changeBook" value="换换名称" type="button" onclick="tihuan()"/><br>
四季名称:
<input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" /><br><br>
<input name="b2" type="button" value="input内容" onclick="input()" />
<input name="b3" type="button" value="四季名称" onclick="sijiname()"/>
<input name="b4" type="button" value="清空页面内容" onclick="clears()" />
<p id="replace"></p>
</div>
</div>
<script>
//替换书名
function tihuan()
{
document.getElementById("book").innerHTML="书名:你好Low啊";
}
//输出input标签中的内容
function input()
{
var inputs=document.getElementsByTagName("input");
var p=document.getElementById("replace");
p.innerHTML=null;
for(var i=0;i<inputs.length;i++){
p.innerHTML+= inputs[i].value+"<br/>";
}
}
//输出属性名称为season的元素中的内容
function sijiname()
{
var inputs=document.getElementsByName("season");
var p=document.getElementById("replace");
p.innerHTML=null;
for(var i=0;i<inputs.length;i++){
p.innerHTML+= inputs[i].value+"<br/>";
}
}
//清除页面所有内容
function clears()
{
document.write("")
}
</script>
</body>
</html>
--innerHTML是所有的HTML元素都有得属性,他是一个文字串,用来设置获取当前对象的开始标签和结束标签之间的HTML。
5.JavaScript内置对象
在Javascript中,系统的内置对象有Date对象,array对象,String对象和Math对象。
--Date:用于操作日期和时间。
--Array:用于在单独的变量名中储存一系列的值。
--String:用于支持对字符串的处理
--Math:使我们有能力执行常用的数学任务。
1.Date对象
1.语法
var 日期实例=new Date(参数);
--日期实例中储存Date对象的变量,可以省略参数
var time=new Date();
--参数的字符串格式“MM DD,YYYYY,hh:mm:ss” 表示日期和时间
var time =new Date("july 15,2013,16:34:"13);
--Date对象的常用方法
方法 | 说明 |
getDate() | 返回Date对象的一个月中的每一天,其值为1~31 |
getDay() | 返回Date对象的星期中的每一天,其值为0~6 |
getHours() | 返回Date对象的小时数,其值为0~23 |
getMinutes() | 返回Date对象的分钟数,其值为0~59 |
getSeconds() | 返回Date对象的秒数,其值为0~59 |
getMonth() | 返回Date对象的月份,其值为0~11 |
getFullYear() | 返回Date对象的年份,其值为四位数 |
getTime() | 返回自某一个时刻(1970年1月1日)以来的毫秒数 |
--getFullYear()返回四位数的年份,getlYear()返回二位或四位的年份,常用于获取年份getFullYear();
--获取星期几使用getDay();0表示周日,1表示周一,6表示周六。
--各部分时间表示的范围:除号数(一个月中的每一天)外,其他均从0开始计数。
2.Math对象
math对象提供了许多与数学相关的功能。
方法 | 说明 | 示例 |
ceil() | 对数进行上舍入 | Math.ceil(25.5) 返回26 Math.ceil(-25.5) 返回-25 |
floor() | 对数进行下舍入 | Math.floor(25.5) 返回25 Math.floor(-25.5) 返回-26 |
round() | 把数四舍五入为最接近的数 | Math.round(25.5) 返回26 Math.round(-25.5) 返回-26 |
random() | 返回0~1中的随机数 | Math.round() 列如0.1254545454 |
5.定时函数
1.常用定时函数
JavaScript中提供了两个定时函数SetTimeout()和setInterval()。
1.setTimeout()
1.语法(用于在指定的毫秒数后调用函数或者计算表达式)
setTimeout("调用函数名称",等待的毫秒数)
2.setInterval()
1.语法(可按照指定的周期来调用函数或者计算表达式)
setInterval("调用的函数名称","周期性调用函数之间间隔的毫秒数");
3.clearTimeout()和clearInterval()
1.语法(用于清除两种定时函数设置的定时器)
clearTimeout(setTimeout()返回的ID值)
clearInterval(setInterval()返回的ID值)