JavaScript里面的window对象

DOM文档      window的事件

onclick事件

当按钮被点击时,会执行该函数 例如:window.onclick=function(){  //代码片段}

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

注意:用原生的JS文档加载完毕写法:window.onload=function(){//要执行的代码}

引入jQuery框架的时候,常用写法,$(document).ready(function(){//要执行的代码});

引入jQuery框架的时候,简便写法,$(function(){//要执行的代码});

onchange 事件

onchange 事件常结合对输入字段的验证来使用。当用户改变输入字段的内容时,会调用 某个 函数

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

计时器

在JavaScript对象里面有计时器setTimeout():在指定的时间之后单次调用,setInterval():在指定时间的多次调用。

单次调用示例:

window.setTimeout(function(){
    //js代码片段
},1000);//一秒后调用

重复调用示例:

window.setInterval(function(){
    //js代码片段
},1000);//每隔一秒重复调用

window对象的setTimeout()方法用来实现一个函数在指定的毫秒后运行,它会返回一个值,把这个值传递给clearTimeout()用来取消这个函数的执行。 

例如:window.clearTimeout(setTimeout(f,1000));里面的函数f是自定义的

同样的setInterval()也会返回一个值,把这个值传入到clearInterval()用来取消这个函数的调用

例如:window.clearInterval(setTimeout(f,1000));里面的函数f是自定义的

浏览器定位URL

window.location是一个对象,包含属性有

        hash 从井号 (#) 开始的 URL(锚)
        host 主机名和当前 URL 的端口号
        hostname 当前 URL 的主机名
        href 完整的 URL
        pathname 当前 URL 的路径部分
        port 当前 URL 的端口号
        protocol 当前 URL 的协议

        search 从问号 (?) 开始的 URL(查询部分)

        reload();是用于页面重新加载,刷新

获取window.location.href是最常用的

location是location.href的简写,无论是访问还是赋值,从功能上,locatin等于location.href

而从本质上,location是一个对象,location.href是一个属性

从chrome的console里面输入window.location.href和window.location你就能很清楚的看到两者的不同

浏览历史 History

  • window.history.back() - 与在浏览器点击后退按钮相同
  • window.history.forward() - 与在浏览器中点击按钮向前相同
  • window.history.go() - 接受一个整数参数,可以在历史列表中向前(正参数)或向后(负参数)跳过任意多个页面

window.history.go(-2);//后退两个历史记录,相当于单击后退按钮两次

浏览器和屏幕信息

Navigator对象 包含有关访问者浏览器的信息

  • appName   web浏览器全程
  • appversion 该属性以数字开始,并跟着包含浏览器厂商和版本信息的详细字符串
  • userAgent 浏览器在它的USER-AGENT HTTP 头部中发送的字符串
  • platform 在其上运行的浏览器的操作系统的字符串

window.screen 对象包含有关用户屏幕的信息

一些属性:

  • screen.availWidth - 可用的屏幕宽度
  • screen.availHeight - 可用的屏幕高度

对话框

  • alert()       警告框,向用户显示一条消息并等待用户关闭对话框
  • confirm()  确认框,也是显示一条消息,要求用户单击“确定”或“取消”按钮,并返回一个Boolean值
  • prompt()   提示框,同样也显示一条消息,等待用户输入字符串,并返回字符串  

提示框prompt()可以输入默认值:例如    prompt("请输入您的名字","Bill Gates")

如上图所示,里面的Bill Gates是默认就有的

cookie 用来识别用户

利用用户在提示框中输入的数据创建一个 JavaScript Cookie,当该用户再次访问该页面时,根据 cookie 中的信息发出欢迎信息

什么是cookie?  它是document对象的属性,例如:window.document.cookie

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

直接用document.cookie=.....这样赋值就可以了,

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

cookie保存在系统中的时候是“cookie名1 = cookie值; cookie名2= cookie值”这样的方式来保存的;document.cookie是返回包含所有cookie的字符串;document.cookie.indexOf(c_name+ "=")是取得这个cookie名在整个cookie中的位置。(加“=”号:取cookie名加上等于号的位置,比方整个cookie是"user=tony;passwd=user123",这时候查找名为user的cookie值的时候,是查找"user="的位置;如果不要等于号,就会找到其它位置的"user",比如后面密码里面也有user字符,但并不是cookie中cookie名都是唯一的,所以加上等于号就不会出错。 ) document.cookie.indexof(";", c_start)是从上一步的位置开始查找的,直到";"的位置

注意!注意!注意!在document.cookie.indexOf()这个函数里面,第二个参数一般是数值,表示起始点,如。
"abcdab".indexOf('b') //1                          "abcdab".indexOf('b',3)//5

多窗口和窗口体

打开和关闭窗口

window.open()打开窗口有四个可选参数:

  • 第一个参数是在新窗口中显示的文档的URL,如果省略了,就用空白页面的url   about:blank
  • 第二个参数是新打开窗口的名字   窗口的名字很重要,允许open()方法引用已经存在的窗口
  • 第三个参数是一个以逗号分隔的列表,包含大小和各种属性,用以表明新窗口是如何打开的,若省略,就会用默认的。                          eg:window.open("smallwin.html","smallwin","width=400,height=350,status=yes,resizable=yes");
  • 第四个参数只在第二个参数命名的是一个存在的窗口时才有用。它是一个Boolean值,声明了第一个参数指定的url是应用替换掉窗口浏览历史的当前条目录(true),还是应该在窗口浏览历史中创建一个新的条目(false),默认是false。

window.close()关闭窗口

猜你喜欢

转载自blog.csdn.net/u012060033/article/details/85335237