JavaScript中window对象的成员属性实例分析

这篇文章主要介绍“JavaScript中window对象的成员属性实例分析”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript中window对象的成员属性实例分析”文章能帮助大家解决问题。1.1 什么是BOM?BOM：Browser Object Model 是浏览器对象模型，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象也是核心对象，其他对象都是该对象的子对象。1.2 BOM包含哪些内容？浏览器介绍BOM对象包含(1)window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性。(2)document 对象，文档对象；(3)location 对象，浏览器当前URL信息；(4)navigator 对象，浏览器本身信息；(5)screen 对象，客户端屏幕信息；(6)history 对象，浏览器访问历史信息；在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。1.3 BOM和DOM的关系(1)DOM通过document对象来访问、控制、修改html和xhtml等文档中的内容(2)BOM通过 window 对象来访问、控制、修改浏览器中的内容联系：BOM包含DOM。区别：DOM描述了处理网页内容的方法和接口，即操作页面内部BOM描述了与浏览器进行交互的方法和接口，即操作页面之间所有浏览器都支持 window 对象。表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。2.1 window对象因为window对象是js中的顶级对象，因此所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。例如：打开窗口 window.open(url); 【等价于open(url);】关闭窗口 window.close(); 【等价于close();】获取事件 window.event 【等价于event;】获取文档 window.document 【等价于document】2.2 window对象中常用的属性2.2.1 window.name属性：window.name是window对象的一个属性，默认值为空。特性：window.name值在不同的页面（甚至不同域名）加载后依旧存在,并且可以支持非常长的name值（2MB左右）2.2.2浏览器距离屏幕的距离window.screenXwindow.screenY2.2.3 window尺寸属性outerHeight属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。outerWidth属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动条）。innerheight 返回窗口的文档显示区的高度。innerwidth 返回窗口的文档显示区的宽度。2.2.4 document对象2.2.4 window.navigator对象window.navigator对象包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用。（这个对象和event一样是一个全局变量，并且是唯一的）navigator.appCodeName //浏览器代码名的字符串表示navigator.appName //官方浏览器名的字符串表示navigator.appVersion //浏览器版本信息的字符串表示navigator.userAgent //返回和浏览器内核相关的信息navigator.cookieEnabled //如果启用cookie返回true，否则返回falsenavigator.javaEnabled() //如果启用java返回true，否则返回falsenavigator.platform //浏览器所在计算机平台的字符串表示navigator.plugins //安装在浏览器中的插件数组ps:如果window.navigator.userAgent出现了Mobile，可以确定用户使用的是移动设备。2.2.5 Location 对象location.hostname 返回 web 主机的域名location.pathname 返回当前页面的路径和文件名location.port 返回 web 主机的端口 （80 或 443）location.protocol 返回所使用的 web 协议（http: 或 https:）search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）2.2.6 screen对象2.3 window对象中常用的方法2.4实例：三级联动菜单3.1警告框3.2 输入框prompt(alertMsg,defaultMsg);表警示框，作用是提示用户信息，该方法执行后根据情况不同返回值略有不同。a)点击取消,返回值为nullb)没有默认值如果用户没有输入内容，返回一个空字符串如果用户输入了内容，返回值为用户输入的内容c)有默认值如果用户没有输入内容，返回默认值如果用户修改了默认，返回值为用户输入的内容3.3 确认框3.4 实例：自定义右键菜单3.5 实例：放大镜效果4.1 定时器setInterval(表达式，毫秒数)语法：var timer = null；timer = setInterval(需要执行的函数，执行间隔时间ms)；例如：总结说明：要把定时器下边的任务执行完毕后 才会去执行定时器的内容定时执行中this指向window每创建一个定时器 就会有一个唯一的id被返回 id从开始 之后累加清除定时器时 不仅可以使用变量 也可以使用唯一Id清除当定时执行的函数是包含参数时 则应该 将函数和参数 使用引号包裹起来首先明确两点：1.JS 执行机制是单线程。2.JS的Event loop是JS的执行机制按照这种的分类方式JS的执行机制是：异步的编程思想：首先，判断JS是同步还是异步，同步进入主线程，异步进入Event table其次，异步任务在Event table中注册函数，当满足特定的条件，被推入Event queue（消息队列）最后，同步任务进入主线程后一直执行，直到主线程空闲后，才会去Event queue中查看是否有可执行的异步任务，如果免费云主机、域名有就推入主线程中执行。清除间隔调用既然间隔调用每隔一段时间就会自动执行一次，那么清除间隔调用就势必存在。语法：clearInterval(变量标识)例如：clearInterval(timer);上述代码就能够将刚刚创建的定时器移除掉，令其不在间隔一段时间后自动再次执行。注意：(1)间隔调用的返回值是一个数字队列，因此通过访问数字队列来清除间隔调用也被允许。注意：(2) 如果间隔调用的函数需要传入参数，则间隔调用需要使用如下的方式声明语法：var timer = null;timer = setInterval(字符串,执行间隔事件ms)；例如(3) 间隔调用不是立即执行，而是在【任务队列中的任务完成后】才执行间隔调用(4) 因为间隔调用函数的实际执行者是window，因此间隔调用内部的this指向window4.2 延时器延迟调用又叫延迟调用函数。是一种能够等待一定时间后在执行的函数。语法：var timer = null;timer = setTimeout(需要执行的函数，等待的时间);例如：根据语法所述，上述代码所表示的含义为：等待2s后打印一句【hello world！】注意：延迟调用除了在语法上和间隔调用略有不同外，其余语法均相同。(1)阅读下列代码，口算打印结果(2)阅读下列代码，口算打印结果4.4 实例：时间走动4.5 实例：倒计时4.6 实例：进度条的加载关于“JavaScript中window对象的成员属性实例分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注云技术行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: Jquery如何实现Map对象和数组、对象之间的转换

本篇内容介绍了“Jquery如何实现Map对象和数组、对象之间的转换”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ 一、JQuery中Map对象的使用Map对象…