JS window对象简单操作完整示例_javascript技巧

来源:脚本之家  责任编辑:小易  

简单来说,document是window的一个对象属性。Window 对象表示浏览器中打开的窗口。如果文档包含框架(frame 或 iframe 标签),浏览器会为HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。所有的全局函数和对象都属于Window 对象的属性和方法。document 对 Document 对象的只读引用。区别:1、window 指窗体。document指页面。document是window的一个子对象。2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location(用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象www.zgxue.com防采集请勿采集本网。

本文实例讲述了JS window对象简单操作。分享给大家供大家参考,具体如下:

直接用js里面自带的for.in就可以实现了。var o={a:1,b:2,c:3,d:4};for(var name in o){ console.log(name+':'+o[name]);} 这样就可以把o对象里面的所以属性都遍历一遍了。

例1:

document对象是一个跟当前文档相关的对象,拥有一些操作文档内容的功能,其功能上跟window对象差不多,因为window拥有一些操作浏览器窗口的功能。但是地位没有window对象高,window拥有其他所有根对象的

<html> <head> <title>js---window函数</title> <meta charset="UTF-8"/> <script type="text/javascript">// 显示框:没有返回值,出现一个提示框 var sto; var stl; function testAlert(){ var a=window.alert("显示框测试"); alert(a); }// 确认框:有返回值,显示一个选择框,当选择确认返回true,当选择取消会返回false function testConfirm(){ var flag=window.confirm("显示确认框"); alert(flag); }// 提示框:有返回值,显示一个提示框,用来输入,当输入数据点击确定时,会返回输入的值,没输入也显示,不过没有值,当当点击取消会返回null function testPrompt(){ var b=window.prompt(); alert(b); }// 设置点击后的等待时间:在函数中的对象在指定时间后才会执行,有返回值,返回一个数字,指的是当前定时器id function testSetTimeout(){ sto=window.setTimeout(function(){ alert("测试等待后执行,等待三秒"); },3000);// alert(sto); }// 设置间隔时间执行:在函数中的对象每间隔一定的时间就会执行一次,有返回值,也是一个数字,指的是当前定时器id function testSetInterval(){ stl=window.setInterval(function(){ alert("测试间隔执行,每隔2秒执行一次"); },2000);// alert(c); }// 和settimeout配套使用,来进行终止操作 function testClearTimeout(){ window.clearTimeout(sto); alert("直接阻断定时触发事件");// alert(cl); }// 和setinterval配套使用,来终结间隔执行事件 function testClearInterval(){ window.clearInterval(stl); alert("直接阻断间隔触发事件");// alert(cl); }// 几个属性的设置不是很准 function testOpen(){ window.open('Animation.html','newwindow','heigth=300px,width=300px,top=100px,left=200px,toolbar=yes,menubar=yes,scrollers=yes,resizable=no,location=yes,status=yes'); }// 利用子页面调用父页面的函数,注意在子页面中创建一个函数。其内部添加opener调用父类函数。 function testOpener(){ alert("clannad,赛高"); } </script> <style type="text/css"> hr{ height: 10px; background-color: bisque; border-radius: 10px; } </style> </head> <body> <h3>js---window函数</h3> <hr /> <input type="button" name="" id="" value="测试window显示框" onclick="testAlert();" /> <input type="button" name="" id="" value="测试window确认框" onclick="testConfirm();" /> <input type="button" name="" id="" value="测试window提示框" onclick="testPrompt();" /> <hr /> <input type="button" name="" id="" value="测试window设置时间框" onclick="testSetTimeout();" /> <input type="button" name="" id="" value="测试window设置间隔时间执行" onclick="testSetInterval();" /> <input type="button" name="" id="" value="测试window设置中断时间定时运行" onclick="testClearTimeout()" /> <input type="button" name="" id="" value="测试window设置中断间隔时间定时运行" onclick="testClearInterval()" /> <hr /> <input type="button" name="" id="" value="测试windowopen" onclick="testOpen()"/> </body></html>

法弹出了B页面,在B页面中就可以通过opener来引用A页面,这样就可以通过这个对象来对A页面进行操作。3.parent parent用于在iframe,frame中生成的子页面中访问父页面的对象。例如:A页面中有一个iframe或

例2:

首先声明,我不怎么懂JS语言,帮你在网上找了点,你看看,或许有帮助。对 document.URL 与 location.href 区别的质疑 有文说 document.URL 与 location.href 二者有两点区别: 一、重定向服务器重定向后有

<html> <head> <title>动漫</title> <meta charset="utf-8"/> <script type="text/javascript"> function timeDown(){ window.setInterval(function(){ var spantime=document.getElementById("time");// 得到spantime时的数据时string类型但是由于是减法所以可以直接自动转换为number spantime.innerHTML=spantime.innerHTML-1; //得到变量的改变值// 关闭页面操作 if(spantime.innerHTML==0){ window.close(); } },1000) } function testFather(){ window.opener.testOpener(); } </script> <style type="text/css"> #time{ font-size: 30px; color: red; } </style> </head> <!--利用onload进行页面的加载--> <body onload="timeDown()"> <h3>添加一个限时阅览</h3> <!--定义一段粗文本文字--> <b>歓迎する,该页面将于<span id="time" >10</span>秒终结访问</b><br /> <br /> <!--测试用父类函数在父类操作--> <input type="button" name="" id="" value="测试父类函数操作" onclick="testFather()" /> <h1 align="center">动漫回顾 </h1> <h3>几部动漫</h3> <hr /> <ul> <li>《clannad》</li> <li>《星游记》</li> <li>《海贼王》</li> <li>《境界的彼方》</li> </ul> <ol type="I"> <li>《clanad》</li> <li>《星游记》</li> <li>《海贼王》</li> <li>《境界的彼方》</li> </ol> <dl> <dt>clannad人物介绍</dt> <dd>冈崎朋也</dd> <a href="#冈崎朋也图片" rel="external nofollow" >冈崎朋也图片</a><br /> <dd>古河渚</dd> <a href="#古河渚图片" rel="external nofollow" >古河渚图片</a><br /> <dd>春原阳平</dd> <a href="#春原阳平图片" rel="external nofollow" >春原阳平图片</a><br /> <dd>伊吹风子</dd> <a href="#伊吹风子图片" rel="external nofollow" >伊吹风子图片</a><br /> </dl> <dl> <dt>星游记人物介绍</dt> <dd>麦当</dd> <dd>迪亚</dd> <dd>咕咚</dd> </dl> <dl> <dt>海贼王/dt> <dd>路飞</dd> <dd>路飞的船员</dd> <dd>路飞的敌人</dd> </dl> <dl> <dt>境界的彼方</dt> <dd>栗山未来</dd> <dd>神原秋人</dd> <dd>名濑月美</dd> <dd>名濑博晨</dd> </dl> <!--<hr />--> <table border="1px" cellspacing="0px" cellpadding="9px"> <tr height="27px"> <th width="100">人物名称</th> <th width="100">与路飞的关系</th> <th width="100">实力</th> <th width="100">果实能力</th> <th width="200">备注</th> </tr> <tr height="27px"> <td width="100">路飞</td> <td width="100">本人</td> <td width="100">标准原点</td> <td width="100">橡胶果实</td> <td width="300">主角光环加持,无限可能,极度抗打</td> </tr> <tr height="27px"> <td width="100">索隆</td> <td width="100">伙伴</td> <td width="100">和路飞实力相近</td> <td width="100">无</td> <td width="300">路飞海贼团第二战力,实力和路飞差不多,但光环加成远不及路飞</td> </tr> <tr height="27px"> <td width="100">BigMom</td> <td width="100" colspan="2" rowspan="2">敌人                  高于路飞</td> <!--<td width="100">高于路飞</td>--> <td width="100">魂魂果实</td> <td width="300" rowspan="2">海上四皇之一,有强大的战力</td> </tr> <tr height="27px"> <td width="100">凯多</td> <!--<td width="100" colspan="2">敌人 高于路飞</td>--> <!--<td width="100">高于路飞</td>--> <td width="100">无</td> <!--<td width="300">海上四皇之一,有强大的战力</td>--> </tr> <tr height="27px"> <td width="100">香克斯</td> <td width="100">伙伴</td> <td width="100">高于路飞</td> <td width="100">面子果实</td> <td width="300">实力深不可测,是海上四皇之一,船员不多但各个都很强</td> </tr> <!--<hr size="30px" width="40%" color="aqua" align="center"/>--> <hr size="10" color="aqua"/> </table> <a href="https://baike.baidu.com/item/%E8%88%AA%E6%B5%B7%E7%8E%8B/75861?fromtitle=%E6%B5%B7%E8%B4%BC%E7%8E%8B&fromid=8904&fr=aladdin" rel="external nofollow" target="_hzw">海贼王百度百科</a><br /> <a href="http://www.iqiyi.com/a_19rrhb3xvl.html?vfm=2008_aldbd" rel="external nofollow" target="_zy">海贼王爱奇艺资源</a><br /> <iframe src="" width="400px" height="400px" name="_hzw"></iframe> <iframe src="" width="400px" height="400px" name="_zy"></iframe> <hr /> <!--调用本地资源--> <a name="冈崎朋也图片"></a><br /> <!--锚的设置--> <img src="img/1.jpg" width="300px" title="冈崎朋也" alt="error" /><br /> <a name="古河渚图片"></a><br /> <img src="2.jpg" width="300px" title="古河渚" alt="error" /><br /> <a name="春原阳平图片"></a><br /> <img src="img/3.jpg" width="300px" title="春原阳平" alt="error" /><br /> <a name="伊吹风子图片"></a><br /> <img src="4.jpg" width="300px" title="伊吹风子" alt="error" /><br /> <hr /> <!--调用网络资源--> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570984004050&di=b851f31e47f01fa2cf5067d9841b9a12&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi2%2F2877272061%2FTB2SvXWeohnpuFjSZFpXXcpuXXa_%2521%25212877272061.jpg" width="300px" alt="error" /> <hr /> <!--访问本地资源--> <a href="FrameSet.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" >本页刷新</a><br /> <a href="FrameSet.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">点这跳转</a><br /> <a href="FrameSet.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="clannad.jpg" alt="" /></a><br /> <hr /> <!--访问网络资源--> <a href="https://baike.baidu.com/item/CLANNAD/25452?fr=aladdin" rel="external nofollow" target="_blank">clannad百度百科</a><br /> <a href="https://baike.baidu.com/item/%E5%9B%A2%E5%AD%90%E5%A4%A7%E5%AE%B6%E6%97%8F/2188040" rel="external nofollow" target="_blank">团子大家族百度百科</a><br /> <a href="#" rel="external nofollow" >返回顶部</a> </body></html>

JavaScript分为 ECMAScript,DOM,BOM BOM就是浏览器窗口对象模型,顶级对象就是window window,document都是一个实例对象,他们都属于Object,你不可以在new他,必须直接调用他的方法和属性

在开发过程中,js主要是通过函数进行操作的在,所以各个js的开发商封装了类,其中window类的学习在此。window类型的使用方法和math的使用相同,不用创建对象,直接用实体进行调用。

基本内容有:

显示框的显示;  几种时间定时和时间间隔执行;      函数方法调用其他子窗口,子窗口与父函数的交互。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

二、Window对象的属性和方法Window对象共有七个属性:defauleStatus:指定窗口状态栏中的信息。status:指定当前窗口状态栏中的信息。frames:是一个数组,其中内容是窗口中所有的框架。parent:指当前窗口的父窗口。self:指当前窗口。top:代表当前所有窗口的最顶层窗口。window:代表当前窗口。Window对象有五个方法:alert:显示带有一个“确定”按钮的对话框。confirm:显示带有“确定”与“取消”两个按钮的对话框。prompt:显示带有输入区的对话框。open:打开一个新窗口。close:关闭用户打开的窗口。三、status属性例子,在窗口状态栏显示和清除文字单击"写入文字"按钮,在状态栏显示'这是状态栏'。按"清除文字"按钮,清除状态栏的文字。function statbar(txt){window.status=txt;}写入文字"onclick="statbar('这是状态栏');清除文字"onclick="statbar('');四、alert方法例子:显示“大家来学习JavaScript脚本语言。的对话框。alert("大家来学习JavaScript脚本语言。五、Confirm方法例子:让用户选择是否进入下一页。用confirm显示选择对话框,按“确定”进入next.htm,按“取消”不进入。if(confirm("你想进入下一页吗?location="next.htm"六、Prompt方法例子:让用户输入姓名,并将它显示出来。用prompt显示输入对话框,让用户输入姓名,再用alert对话框显示出来。var namename=prompt("请输入姓名内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js window对象的top、parent、opener含义介绍
  • js window对象属性和方法相关资料整理
  • javascript window对象属性整理
  • javascript中window对象的属性及事件
  • javascript的document对象和window对象详解
  • js 使用 window对象的print方法实现分页打印功能
  • javascript浏览器对象之一window对象详解
  • javascript window对象详解
  • javascript之bom(window对象)详解
  • javascript入门之window对象【新手必看】
  • javascript类型系统 window对象学习笔记
  • js bind 函数 使用闭包保存执行上下文
  • javascript 制作坦克大战游戏初步 图片与代码
  • js原型链原理看图说明
  • js学习总结_基于数据类型检测的四种方式(必看)
  • js基于封装函数实现的表格分页完整示例
  • 基于javascript实现动态添加删除表格的行
  • 利用javascript实现bmi计算器
  • 常见的原始js选择器使用方法总结
  • js中的this的指向问题详解
  • js可以控制样式的名称写法一览
  • JavaScript中window对象常用的属性、方法
  • JS中document对象和window对象的区别
  • JS中document对象和window对象有什么区别么?
  • js中所有的全局变量和方法都是继承于window对象吗?
  • 如何遍历一个JS对象中的所有属性
  • javascript中的window对象是html对象还是页面元素对象还是内置对象呀,他们有什么区别
  • js window对象top能改写吗
  • JS问题(window对象)
  • javascript 中的window对象是什么
  • javascript 怎样获得window 对象?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript操作dom技巧总结javascript页面元素操作技巧总结javascript事件相关操作与技巧大全javascript查找算法技巧总结javascript数据结构与算法技巧总结javascript遍历算法与技巧总结javascript错误与调试技巧总结js window对象的top、parent、opener含义介绍js window对象属性和方法相关资料整理javascript window对象属性整理javascript中window对象的属性及事件javascript的document对象和window对象详解js 使用 window对象的print方法实现分页打印功能javascript浏览器对象之一window对象详解javascript window对象详解javascript之bom(window对象)详解javascript入门之window对象【新手必看】javascript类型系统 window对象学习笔记js bind 函数 使用闭包保存执行上下文javascript 制作坦克大战游戏初步 图片与代码js原型链原理看图说明js学习总结_基于数据类型检测的四种方式(必看)js基于封装函数实现的表格分页完整示例基于javascript实现动态添加删除表格的行利用javascript实现bmi计算器常见的原始js选择器使用方法总结js中的this的指向问题详解js可以控制样式的名称写法一览js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的javascript深入理解js闭包js删除数组里的某个元素方法利用js正则表达式验证手机号,email地址,邮javascript delete操作符应用实例js使用正则表达式判断输入框失去焦点事件javascript中数组array方法详解javascript验证手机号和实现星号(*)代替实javascript 就地编辑实现代码javascript 节点操作 以及domdocument属性javascript地理位置信息api经常用到的javascript验证函数收集javascript的变量声明与声明提前用法实例
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved