BOM操作

window对象

window对象的常用属性

​ JavaScript中,属性的基本语法格式如下:

window.属性名="属性值";
/*
window对象的常用属性如下。
history: 用户访问过的统一资源定位符()信息
locaton:当前URL信息
screen:只读属性,包含客户端显示屏幕上的信息

*/

window对象的常用方法

window.方法名();
/*
alert(); 显示一个带有提示信息和一个"确定"按钮的警示对话框
confirm(); 显示一个带有提示,"确定"和"取消"按钮的对话框
prompt(); 显示可以提示用户输入的对话框
open(); 打开一个新的浏览器窗口,加载给定URL所指定的文档
close(); 关闭浏览器窗口
setInterval(); 间隔指定的毫秒数不停地执行指定代码
clearInterval(); 用于停止setInterval()方法执行的函数代码

setTimeout();  在指定的毫秒数后执行指定代码
clearTimeout(); 用于停止执行setTimeout()方法的函数代码
*/
open()

语法:

window.open([URL,name,specs,replace]);
/*
URL 为可以选参数,打开指定的页面URL。没有指定的URL,则打开一个新的空白窗口
name 为可选参数,指定target属性或窗口的名称
specs 为可选参数,表示窗口特征属性
replace 为可选参数,指定装载到窗口的URL在窗口的浏览历史中是创建一个新条目,还是替换浏览历史中的当前条目
*/
close()

语法:

window.close(); 

history对象

history对象就是保存着用户上网的历史记录。由于history对象是window对象的属性,所以每个浏览器窗口,每个标签页,都有自己的history对象与特定的window对象关联。

history对象的常用属性和方法

类别名称说明
属性length返回历史记录列表中的网址数
方法go()加载history列表中的某个具体页面
方法forward()加载history列表中的下一个URL
方法back()加载history列表中的上一个URL

location对象

location对象是比较有用的BOM对象之一,它提供了与当前窗口中加载文档有关的信息,还提供了一些导航功能。

locaton对象的常用属性与方法
类别名称说明
属性host返回服务器名称和端口号
属性hostname返回不带端口号的服务器名称
属性href返回当前加载页面的完整URL
方法reload重新加载当前文档
方法replace用新的文档替换当前文档
locaton对象使用
//跳转页面
function aaa(){
    location.href="index.html";
}
//刷新
function bbb(){
    location.reload();
}
//替换
function ccc(){
    location.replace("on.html");
}

document对象

document对象是window对象的一部分,又代表整个HTML文档,可以用来访问页面中的所有元素。当使用document对象时,除了要符合各浏览器的标准外,也要符合W3C(万维网联盟)的标准

document常用方法

方法描述
getElementById()返回拥有指定id的第一个对象引用
getElementsByName()返回带有指定 名称的对象集合
getElementsByTagName()返回带有指定标签名的对象的集合
write()向文档写文本,HTML表达式或JavaScript代码
  • getElementById()方法一般用于访问div,图片,表单元素,网页标签等,但是要求访问对象的id是唯一的。
  • getElementsByName()方法与getElementById()方法相似,但是它访问的是具有name属性的元素,由于一个文档中的name属性可能不唯一,所以getElementsByName()方法一般用于访问一组相同name属性的元素。
  • getElementsByTagName()方法通常按标签来访问页面元素,一般用于访问一组相同的元素。

JavaScript定时函数

超时调用

​ 超时调用需要使用window对象的setTimeout()方法,接收两个参数 : 要执行的代码或函数和以毫秒表示的时间

var time;
function Time(){
    time=setInterval(aa,3000);//延时3秒钟后执行 aa() 函数
}

function aa(){
    alert("JavaScript");
}
/*
代码执行会在三秒后以弹框的方式显示出JavaScript
*/

clearTimeout(time); //只要是在指定时间尚未过去之前调用clearTimeout()方法就可以完全取消超时调用

间歇调用

​ 间歇调用与超时调用类似,只不过它会按照指定时间间隔重复执行代码,直至间歇调用被取消或者页面被关闭。设置间歇调用的方法是setInterval(),它接收的参数与超时调用相同。

var time;
function Time(){
    time=setInterval(aa,3000)
}

function aa(){
    alert("JavaScript");
}
/*
代码执行会每隔三以弹框的方式显示出JavaScript
*/

clearInterval(time); //调用clearInterval()方法就可以完全取消间歇调用

JavaScript内置对象

​ 在JavaScript中,系统的内置对象有String对象,Array对象,Date对象和Math对象等。主要了解后三个

  • Array对象

    同Java中的数组一样,JavaScript中数组也是具有一个或多个值的集合。数组用一个名称储存一系列的值,用下标区分数组中的每个值,数组下标从0开始。不同的是在JavaScript中一个数组可以存放任意类型值。

    //创建数组
    var arr = new Array(4);
    
    //赋值
    arr[0]=1;
    arr[1]=true;
    arr[2]='123';
    arr[3]=10.2;
    
    //访问数组
    alert(arr[1]);
    
    数组的常用属性和方法
    类别名称描述
    属性length设置或者返回这个数组中元素的数目
    方法join()把数组中的元素放入一个字符串,通过指定的分割符进行分隔
    方法sort()对数组进行排序并返回这个数组
    方法push()向数组末尾添加一个或者多个元素,并返回新的长度
    方法forEach()遍历数组,forEach()方法不会直接修改原始数组,但是回调函数可能会修改

    forEach()用法:

    var num=[1,2,3,4,5,6];num.forEach(function (value,index,array){	document.write(value);});
    
  • Date对象

    var time = new Date(参数);
    

    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对象的年份,其值为4位数
    getTime()返回自某一时刻(1970年1月1日)以来的毫秒数

    时钟效果

//动态时钟setInterval(time,1000); function time(){    var time=new Date();    var house=time.getHours();	//获取小时    var min=time.getMinutes();	//获取分钟    var sec=time.getSeconds(); 	//获取秒	    		document.getElementById("time").innerHTML=house+':'+min+':'+sec; //拼接时分秒}
  • Math对象

    Math对象提供了许多与数学相关的功能,它是JavaScript的一个全局对象,不需要创建,直接作为对象使用就可以调用其属性和方法。

    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);返回25
    Math.round(25.5);返回26
    random()返回0~1中的随机数Math.random0;例如,0.62736088 14137365

    Math随机数用法

    <div>    本次选择的颜色是:<span id="color"></span>    <input type="button" value="选择颜色" onclick="self()"/></div><script type="text/javascript">   /* var num=[1,2,3,4,5,6];    num.forEach(function (value,index,array){        document.write(value);    });*/   function self(){       var color=new Array("红",'黄','蓝','绿','橙');       var num=Math.ceil(Math.random()*5)-1;       document.getElementById("color").innerHTML=color[num];   }</script>
    

总结:

  • window对象常用属性: hstoy,location、screen。
  • window对象常用方法:alert()、confirm()、prompt()、open()、close()、 setInterval()、clearInterval()、setTimeout() clearTimeout()。
  • history对象和location对象可以轻松地实现浏览器中“后退”、前进” 和” 刷新”的功能。
  • document对象的getElementByld0方法用于访问唯一的元素。
  • document对象的getElementsByName()方法用于访问相同name属性的一组元素。
  • document对象的getElementsByTagName()方法用于访问相同标签的一组元素。
  • JavaScript 内置对象Array对象用于在单独的变量名中存储一系列的值。
  • JavaScript内置对象Date对象用于操作日期和时间。
  • JavaScript内置对象Math对象可以执行常用的数学任务。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值