js知识点分享

Posted 2020-09-24 张学亮

一、object对象

一、属性 

Object自带一个prototype的属性，即Object.prototype，Object.prototype本身也是一个对象，也会有一些属性和方法。如下： 

1、属性 

 

Object.prototype.writable：默认为false 

Object.prototype.enumerable：默认为false 

Object.prototype.configurable：默认为false 

Object.prototype.constructor：用于创建一个对象的原型。

2、常用方法 

 

?

?

Object.prototype.hasOwnProperty():返回一个布尔值，表示某个对象是否含有指定的属性，而且此属性非原型链继承。

 

Object.prototype.isPrototypeOf():返回一个布尔值，表示指定的对象是否在本对象的原型链中。

 

Object.prototype.propertyIsEnumerable():判断指定属性是否可枚举。

 

Object.prototype.toString():返回对象的字符串表示。

 

Object.prototype.watch():给对象的某个属性增加监听。

 

Object.prototype.unwatch():移除对象某个属性的监听。

 

Object.prototype.valueOf():返回指定对象的原始值。

?

?

 

 

二、方法 

Object.assign(target, …sources):把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。

 

Object.create(proto,[propertiesobject]):创建一个拥有指定原型和若干个指定属性的对象。

 

Object.defineProperties(obj, props)：在一个对象上添加或修改一个或者多个自有属性，并返回该对象。

 

Object.defineProperty(obj, prop, descriptor)：直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。obj：需要定义属性的对象。prop：需定义或修改的属性的名字。descriptor：将被定义或修改的属性的描述符。

 

Object.entries(obj)：返回一个包含由给定对象所有可枚举属性的属性名和属性值组成的 [属性名，属性值] 键值对的数组，数组中键值对的排列顺序和使用for…in循环遍历该对象时返回的顺序一致。 

举例： 

 

var obj = { foo: “bar”, baz: 42 }; 

console.log(Object.entries(obj)); // [ [‘foo’, ‘bar’], [‘baz’, 42] ]

 

 

Object.freeze(obj)：冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说，这个对象永远是不可变的。该方法返回被冻结的对象。

 

Object.getOwnPropertyDescriptor(obj, prop)：返回指定对象上一个自有属性对应的属性描述符。

 

Object.getOwnPropertyNames(obj)：返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性）组成的数组。 

举例： 

// 类数组对象 

var obj = { 0: “a”, 1: “b”, 2: “c”}; 

console.log(Object.getOwnPropertyNames(obj).sort()); // [“0”, “1”, “2”]

 

Object.getPrototypeOf(object)：返回该对象的原型。

 

Object.is(value1, value2)：判断两个值是否是同一个值。

 

Object.isExtensible(obj)：判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）。

 

Object.isFrozen(obj)：判断一个对象是否被冻结（frozen）。

 

Object.isSealed(obj)：判断一个对象是否是密封的（sealed）。密封对象是指那些不可 扩展 的，且所有自身属性都不可配置的（non-configurable）且属性不可删除的对象（其可以是可写的）。

 

Object.keys(obj)：返回一个由给定对象的所有可枚举自身属性的属性名组成的数组，数组中属性名的排列顺序和使用for-in循环遍历该对象时返回的顺序一致 

举例： 

var arr = [“a”, “b”, “c”]; 

alert(Object.keys(arr)); // 弹出”0,1,2”

 

// 类数组对象 

 

var obj = { 0 : “a”, 1 : “b”, 2 : “c”}; 

alert(Object.keys(obj)); // 弹出”0,1,2”

 

 

Object.preventExtensions(obj)：让一个对象变的不可扩展，也就是永远不能再添加新的属性。

 

Object.setPrototypeOf(obj, prototype)：将一个指定的对象的原型设置为另一个对象或者null

 

Object.values(obj)：返回一个包含指定对象所有的可枚举属性值的数组，数组中的值顺序和使用for…in循环遍历的顺序一样。 

举例： 

 

var obj = { foo: “bar”, baz: 42 }; 

console.log(Object.values(obj)); // [‘bar’, 42]

二、JSX

JSX简介

 

JSX就是javascript和XML结合的一种格式。React发明了JSX，利用html语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

 

如下(JS写法)

 

?

var child1 = React.createElement(‘li‘, null, ‘First Text Content‘);

var child2 = React.createElement(‘li‘, null, ‘Second Text Content‘);

var root = React.createElement(‘ul‘, { className: ‘my-list‘ }, child1, child2);

?

等价于(JSX写法)

 

?

?

?

var root =(

  <ul className="my-list">

    <li>First Text Content</li>

    <li>Second Text Content</li>

  </ul>

);

?

?

?

后者将XML语法直接加入JS中,通过代码而非模板来高效的定义界面。之后JSX通过翻译器转换为纯JS再由浏览器执行。在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，JSX的语法不会带来任何性能影响。另外，由于JSX只是一种语法，因此JavaScript的关键字class, for等也不能出现在XML中，而要如例子中所示，使用className, htmlFor代替，这和原生DOM在JavaScript中的创建也是一致的。JSX只是创建虚拟DOM的一种语法格式而已,除了用JSX,我们也可以用JS代码来创建虚拟DOM.

 

 

 

JSX语法介绍

 

大括号里是JavaScript，不要加引号，加引号就会被当成字符串。

 

三元表达式

 

JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式.例如:

 

var person = <Person name={window.isLoggedIn ? window.name : ‘‘} />;

上述代码经过JSX编译后会得到：

 

var person = React.createElement(

  Person,

  {name: window.isLoggedIn ? window.name : ‘‘}

);

数组递归

 

数组循环,数组的每个元素都返回一个React组件。

 

?

?

?

var lis = this.todoList.todos.map(function (todo) {

  return (

    <li>

      <input type="checkbox" checked={todo.done}>

      <span className={‘done-‘ + todo.done}>{todo.text}</span>

    </li>

  );

});

 

var ul = (

  <ul className="unstyled">

    {lis}

  </ul>

);

?

?

?

 

 

JSX中绑定事件

 

JSX让事件直接绑定在元素上。

 

<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>

和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称，大括号中仍然是标准的JavaScript表达式，返回一个事件处理函数。

 

React并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点document上为每种事件添加唯一的Listener，然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件，React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。尽管整个事件系统由React管理，但是其API和使用方法与原生事件一致。

 

 

 

JSX中使用样式

 

在JSX中使用样式和真实的样式也很类似，通过style属性来定义，但和真实DOM不同的是，属性值不能是字符串而必须为对象。

 

例如:

 

<div style={{color: ‘#ff0000‘, fontSize: ‘14px‘}}>Hello World.</div>

或者

 

?

?

?

var style = {

  color: ‘#ff0000‘,

  fontSize: ‘14px‘

};

 

var node = <div style={style}>HelloWorld.</div>;

?

?

?

要明确记住,{}里面是JS代码,这里传进去的是标准的JS对象。在JSX中可以使用所有的的样式，基本上属性名的转换规范就是将其写成驼峰写法，例如“background-color”变为“backgroundColor”, “font-size”变为“fontSize”，这和标准的JavaScript操作DOM样式的API是一致的。

 

 

 

HTML转义

 

在组件内部添加html代码,并将html代码渲染到页面上。React默认会进行HTML的转义，避免XSS攻击，如果要不转义，可以这么写：

 

?

?

?

var content=‘<strong>content</strong>‘;    

 

React.render(

    <div dangerouslySetInnerHTML={{__html: content}}></div>,

    document.body

);

三、eval

1. 和其他解释性语言一样，javascript 同样可以解释运行由javascript源代码组成的字符串，javascript 通过eval()来完成。

2. eval() 其实是一个函数，是javascript很早版本中就已经存在，但是javascript设计者和解释器对其进行了许多的限制，看起来eval更像一个运算符。但是作为用于动态执行代码，eval存在这样的问题，解释器无法对动态代码做进一步的优化。如果将它看做一个函数，那它是可以被赋予其他名字的：

 

 var A = eval;

 var B = A;

如果是这样的话，那么解释器就无法优化调用B()的函数了。因此设计者赋予eval一些运算符的特性（作为保留字）之后这些问题得到解决。

 

3. Eval 只有一个参数，如果传入的不是字符串的话，它直接返回这个参数；如果是字符串，那么首先会进行编译，如编译失败则爆出语法错误；编译成功则执行代码。更主要的是eval可以使用调用它的变量作用域环境，也就是说它查找的变量或者新增的变量作用域跟代码的完全一样。

如：

 

?

function A()

{

  eval(‘var x ;‘);

  eval("x=1"); //在一个函数中定义或者更改，那就是针对局部变量。

}

?

4. 全局eval

eval 可以动态执行代码，并申明或者改变变量，当然可以对全局变量进行上述操作。如

 

?

?

var globalEval = eval; //定义全局eval函数别名

var a =‘global‘, b = ‘global‘; //全局变量

function c()

{

  var a = ‘local‘; //局部变量

eval(‘a+="changed"‘); //直接更改局部变量的值

 return a; //返回更改后的局部变量

}

 function d()

{

   var b = ‘local‘;

   globalEval("b+=‘changed‘");

   return b;

} 

 

console.log(c(), a); //localchanged global

console.log(d() , b) //local globalchanged更强的是，全局的eval还可以更改局部变量的能力，不过这也是javascript优化的一个大问题。 当然在严格模式下，eval更像一个运算符，不可以用别名来覆盖eval。

?

?

四、AJAX

什么是 AJAX ？

 

AJAX = 异步 JavaScript 和 XML。

 

AJAX 是一种用于创建快速动态网页的技术。

 

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

 

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

 

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

 

AJAX 实例解释

 

上面的 AJAX 应用程序包含一个 div 和一个按钮。

 

div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：

 

?

?

<html>

<body>

 

<div id="myDiv"><h3>Let AJAX change this text</h3></div>

<button type="button" onclick="loadXMLDoc()">Change Content</button>

 

</body>

</html>

?

?

 

 

接下来，在页面的 head 部分添加一个 <script> 标签。该标签中包含了这个 loadXMLDoc() 函数：

 

?

?

<head>

<script type="text/javascript">

function loadXMLDoc()

{

.... AJAX script goes here ...

}

</script>

</head>

?

?

Ajax的使用

 

以下步骤，如果不能理解你死记硬背都要记下来，总比你答不出来要好吧！

 

1.创建Ajax核心对象XMLHttpRequest

 

var xmlhttp;  

if (window.XMLHttpRequest)  

  {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  

  xmlhttp=new XMLHttpRequest();  

  }  

else  

  {// 兼容 IE6, IE5  

  xmlhttp=newActiveXObject("Microsoft.XMLHTTP");  

  }  

 

2.向服务器发送请求

 

xmlhttp.open(method,url,async);  

send(string)  

注意：open 的参数要牢记，很多面试官爱问这样的细节

 

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）

send(string)方法post请求时才使用字符串参数，否则不用带参数。

 

注意：post请求一定要设置请求头的格式内容

 

xmlhttp.open("POST","ajax_test.html",true);  

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  

xmlhttp.send("fname=Henry&lname=Ford");   

3.服务器响应处理

 

responseText 获得字符串形式的响应数据。

responseXML 获得XML 形式的响应数据。

 

       3.1 同步处理

 

xmlhttp.open("GET","ajax_info.txt",false);  

xmlhttp.send();  

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;  

直接在send()后面处理返回来的数据。

 

3.2 异步处理

 

异步处理相对比较麻烦，要在请求状态改变事件中处理。

 

 

 

xmlhttp.onreadystatechange=function()  

  {  

  if (xmlhttp.readyState==4 &&xmlhttp.status==200)  

    {  

   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;  

    }  

  }  

 

 

 

一共有5中请求状态，从0 到 4 发生变化。

 

0: 请求未初始化

 

1: 服务器连接已建立

 

2: 请求已接收

 

3: 请求处理中

 

4: 请求已完成，且响应已就绪

 

 

 

xmlhttp.status：响应状态码。这个也是面试比较爱问的，这个必须知道4个以上，比较常见的有：

 

200: "OK"

 

403 （禁止） 服务器拒绝请求。

 

404 （未找到） 服务器找不到请求的网页。

 

408 （请求超时） 服务器等候请求时发生超时。

 

500 （服务器内部错误） 服务器遇到错误，无法完成请求

 

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 对象

 

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

 

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

 

创建 XMLHttpRequest 对象

 

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

 

创建 XMLHttpRequest 对象的语法：

 

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

 

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

 

?

?

var xmlhttp;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

?

?

五、JS事件

事件是可以被 JavaScript 侦测到的行为。

 

事件

 

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

 

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

 

事件举例：

 

鼠标点击

页面或图像载入

鼠标悬浮于页面的某个热点之上

在表单中选取输入框

确认表单

键盘按键

注意：事件通常与函数配合使用，当事件发生时函数才会执行。

 

onload 和 onUnload

 

当用户进入或离开页面时就会触发 onload 和 onUnload 事件。

 

onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。

 

onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："Welcome John Doe!"。

 

onFocus, onBlur 和 onChange

 

onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。

 

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。

 

<input type="text" size="30" id="email" onchange="checkEmail()">

onSubmit

 

onSubmit 用于在提交表单之前验证所有的表单域。

 

下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。

 

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

onMouseOver 和 onMouseOut

 

onMouseOver 和 onMouseOut 用来创建“动态的”按钮。

 

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：

 

<a href="http://www.w3school.com.cn"

onmouseover="alert(‘An onMouseOver event‘);return false">

<img src="w3school.gif" width="100" height="30"> </a>

六、window对象属性和方法

window对象有以下方法：

 

open　close　alert　confirm　prompt　setTimeout　clearTimeout　setInterval　clearInterval　moveBy　moveTo　resizeBy　resizeTo　scrollBy　scrollTo　find　back　forward　home　stop　print　blur　focus　captureEvent　enableExternalCapture　disableExternalCapture　handleEvent　 releaseEvent　routeEvent　scroll

 

1. open方法

 

语法格式：window.open(URL,窗口名称,窗口风格)

 

功能：打开一个新的窗口，并在窗口中装载指定URL地址的网页。

 

说明：

 

open方法用于打开一个新的浏览器窗口，并在新窗口中装入一个指定的URL地址；

 

open方法在打开一个新的浏览器窗口时，还可以指定窗口的名称(第二个参数)；

 

open方法在打开一个新的浏览器窗口时，还可以指定窗口的风格(第三个参数)，窗口风格有以下选项，这些选项可以多选，如果多选，各选项之间用逗号分隔：

 

toolbar：指定窗口是否有标准工具栏。当该选项的值为1或yes时，表示有标准工具栏，当该选项的值为0或no时，表示没有标准工具栏；

 

location：指定窗口是否有地址工具栏，选项的值及含义与toolbar相同；

directories：指定窗口是否有链接工具栏，选项的值及含义与toolbar相同；

status：指定窗口是否有状态栏，选项的值及含义与toolbar相同；

menubar：指定窗口是否有菜单，选项的值及含义与toolbar相同；

scrollbar：指定当前窗口文档大于窗口时是否有滚动条，选项的值及含义与toolbar相同；

resizable：指定窗口是否可改变大小，选项的值及含义与toolbar相同；

width：以像素为单位指定窗口的宽度，已被innerWidth取代；

height：以像素为单位指定窗口的高度，已被innerHeight取代；

outerWidth：以像素为单位指定窗口的外部宽度；

outerHeight：以像素为单位指定窗口的外部高度；

left：以像素为单位指定窗口距屏幕左边的位置；

top：以像素为单位指定窗口距屏幕顶端的位置；

alwaysLowered：指定窗口隐藏在所有窗口之后，选项的值及含义与toolbar相同；

alwaysRaised：指定窗口浮在所有窗口之上，选项的值及含义与toolbar相同；

dependent：指定打开的窗口为当前窗口的一个子窗口，并随着父窗口的关闭而关闭，选项的值及含义与toolbar相同；

hotkeys：在没有菜单栏的新窗口中设置安全退出的热键，选项的值及含义与toolbar相同；

innerHeight：设定窗口中文档的像素高度；

innerWidth：设定窗口中文档的像素宽度；

screenX：设定窗口距离屏幕左边界的像素长度；

screenY：设定窗口距离屏幕上边界的像素长度；

titleBar：指明标题栏是否在新窗口中可见，选项的值及含义与toolbar相同；

z-look：指明当窗口被激活时，不能浮在其它窗口之上，选项的值及含义与toolbar相同。

open方法返回的是该窗口的引用。

 

小技巧：该方法经常用于在打开一个网页时自动打开另一个窗口。

 

2. close方法

 

语法格式：window.close()

 

功能：close方法用于自动关闭浏览器窗口。

 

3. alert方法

 

语法格式： window.alert(提示字符串)

 

功能：弹出一个警告框，在警告框内显示提示字符串文本。

 

4. confirm方法

 

语法格式：window.confirm(提示字符串)

 

功能：显示一个确认框，在确认框内显示提示字符串，当用户单击“确定”按钮时该方法返回true，单击“取消”时返回false。

 

5. prompt方法

 

语法格式：window.prompt(提示字符串，缺省文本)

 

功能：显示一个输入框，在输入框内显示提示字符串，在输入文本框显示缺省文本，并等待用户输入，当用户单击“确定”按钮时，返回用户输入的字符串，当单击“取消”按钮时，返回null值。

 

6. setTimeout方法

 

语法格式：window.setTimeout(代码字符表达式,毫秒数)

 

功能：定时设置，当到了指定的毫秒数后，自动执行代码字符表达式。

 

7. clearTimeout方法

 

语法格式：window.clearTimeout(定时器)

 

功能：取消以前的定时设置，其中的参数是用setTimeout设置时的返回值。

 

8. setInterval方法

 

语法格式：window.setInterval(代码字符表达式,毫秒数)

 

功能：设定一个时间间隔后(第二个参数)，反复执行“代码字符表达式”的内容

 

9. clearInterval方法

 

语法格式：window.clearInterval(时间间隔器)

 

功能：取消setInterval设置的定时。其中的参数是setInterval方法的返回值。

 

10. moveBy方法

 

语法格式：window.moveBy(水平位移量,垂直位移量)

 

功能：按照给定像素参数移动指定窗口。第一个参数是窗口水平移动的像素，第二个参数是窗口垂直移动的像素。

 

11.moveTo方法

 

语法格式：window.moveTo(x,y)

 

功能：将窗口移动到指定的指定坐标(x,y)处。

 

12. resizeBy方法

 

语法格式：window.resizeBy(水平,垂直)

 

功能：将当前窗口改变指定的大小(x,y)，当x、y的值大于0时为扩大，小于0时为缩小。

 

13. resizeTo方法

 

语法格式：window.resizeTo(水平宽度,垂直宽度)

 

功能：将当前窗口改变成(x,y)大小，x、y分别为宽度和高度。

 

14. scrollBy方法

 

语法格式：window.scrollBy(水平位移量，垂直位移量)

 

功能：将窗口中的内容按给定的位移量滚动。参数为正数时，正向滚动，否则反向滚动。

 

15. scrollTo方法

 

语法格式：window.scrollTo(x,y)

 

功能：将窗口中的内容滚动到指定位置。

 

16.find方法

 

语法格式：window.find()

 

功能：当触发该方法时，将弹出一个“find”(查找)对话窗口，并允许用户在触发find方法的页面中查找一个字符串。

 

注：该属性在IE5.5及Netscape6.0中都不支持。

 

17. back方法

 

语法格式：window.back()

 

功能：模拟用户点击浏览器上的“后退”按钮，将页面转到浏览器的上一页。

 

说明：仅当当前页面存在上一页时才能进行该操作。

 

注：IE5.5不支持该方法，Netscape6.0支持。

 

18. forward方法

 

语法格式：window.forward()

 

功能：模拟用户点击浏览器上的“前进”按钮，将页面转到浏览器的下一页。

 

说明：仅当当前页面存在下一页时才能进行该操作。

 

注：IE5.5不支持该方法，Netscape6.0支持。

 

19. home方法

 

语法格式：window.home()

 

功能：模拟用户点击浏览器上的“主页”按钮，将页面转到指定的页面上。

 

注：IE5.5不支持该方法，Netscape6.0支持。

 

20. stop方法

 

语法格式：window.stop()

 

功能：模拟用户点击浏览器上的“停止”按钮，终止浏览器的下载操作。

 

注：IE5.5不支持该方法，Netscape6.0支持。

 

21. print方法

 

语法格式：window.print()

 

功能：模拟用户点击浏览器上的“打印”按钮，通知浏览器打开打印对话框打印当前页。

 

22. blur方法

 

语法格式：window.blur()

 

功能：从窗口中移出焦点。当与focus方法合用时必须小心，因为可能导致焦点不断移进移出。

 

23. focus方法

 

语法格式：window.focus()

 

功能：使窗口中得到焦点。当与blur方法合用时必须小心，因为可能导致焦点不断移进移出

 

24. captureevent方法

 

语法格式：window.captureevent(event)

 

window.captureevent(事件1|事件2|…|事件n)

 

功能：捕捉指定参数的所有事件。由于能够捕获哪些由本地程序自己处理的事件，所以程序员可以随意定义函数来处理事件。如果有多个事件需要捕捉，各事件之间用管道符“|”隔开。可捕捉的事件类型如下：

 

event.abort　event.blur　event.change　event.click　event.dblclick　event.dragdrop　event.error　event.focus　event.keydown　event.keypress　event.keyup　event.load　event.mousedown　event.mousuemove　event.mouseout　event.mouseover　event.mouseup　event.move　event.reset　event.resize　 event.select　event.submit　event.unload

 

25. enableexternalcapture事件

 

语法格式：window.enableexternalcapture(event)

 

功能：enableexternalcapture方法用于捕捉通过参数传入的外部事件。

 

26. disableexternalcapture事件

 

语法格式：window.disableexternalcapture()

 

功能：取消enableexternalcapture方法的设置，终止对外部事件的捕捉。

 

27. handleevent事件

 

语法格式：window.handleevent(event)

 

功能：触发指定事件的事件处理器。

 

28. releaseevent事件

 

语法格式：window.releaseevent(event)

 

window.releaseevent(事件1|事件2|…|事件n)

 

功能：释放通过参数传入的已被捕捉的事件，这些事件是由window.captureevent方法设置的，可释放的事件与captureevent相同。

 

29. routeevent事件

 

语法格式：window.releaseevent(event)

 

功能：把被捕捉类型的所有事件转交给标准事件处理方法进行处理，可转交的事件与captureevent相同。

 

30. scroll事件

 

语法格式：window.scroll(x坐标,y坐标)

 

功能：将窗口移动到指定的坐标位置。

 

window对象的属性

 

window对象具有如下属性：

 

status　statusbar　statusbar.visible　defaultstatus　location　locationbar　locationbar.visible　self　name　closed　frames　frames.length　length　document　history　innerheight　innerwidth　menubar　menubar.visible　opener　outerheight　outerwidth　pagexoffset　pageyoffset　parent　 personalbar　 personalbar.visible　scrollbar　scrollbar.visible　toolbar　toolbar.visible　top　

 

1. status属性

 

语法格式：window.status=字符串

 

功能：设置或给出浏览器窗口中状态栏的当前显示信息。

 

小技巧：可以使用该属性设置浏览器窗口状态栏信息。

 

2. statusbar属性

 

语法格式：window.statusbar.属性

 

功能：statusbar属性本身也是一个对象，用于访问它自已的visible属性从而确定状态栏是否可见。

 

注：ie5.5浏览器不支持该属性。

 

3. statusbar.visible属性

 

语法格式： window.statusbar.visible

 

功能：检查状态栏是否可见，如果可见则返回true，反之返回false。

 

注：ie5.5浏览器不支持该属性。

 

4. defaultstatus属性

 

语法格式：window.defaultstatus[=字符串]

 

功能：defaultstatus属性值是浏览器窗中状态栏的默认显示信息

 

5.location属性

 

语法格式：window.location=url

 

功能：给出当前窗口的url信息或指定打开窗口的url。

 

6. locationbar属性

 

语法格式：window.locationbar.属性

 

功能：locationbar属性也可以看成是一个子对象，这个属性用来获取它自已的visible属性来确定位置栏是否可见。 到目前为止，该属性只有一个子属性：visible。

 

注：ie5.5不支持该属性。

 

7. locationbar.visible属性

 

语法格式：window.locationbar.visible

 

功能：返回位置栏是否可见，如果可见返回true，反之返回false。

 

注：ie5.5不支持该属性。

 

8. self属性

 

语法格式：window.self.方法

 

window.self.属性

 

功能：该属性包含当前窗口的标志，利用这个属性，可以保证在多个窗口被打开的情况下，正确调用当前窗口内的函数或属性而不会发生混乱。

 

9. name属性

 

语法格式： window.name=名称

 

功能：返回窗口名称，这个名称是由window.open()方法创建新窗口时给定的。在javascript1.0版本中，这个属性只能用于读取窗口名称，而到了javascript1.1版本时，可以用这个属性给一个不是用window.open()方法创建的窗口指定一个名称。

 

10. closed属性

 

语法格式：window.closed

 

功能：closed属性用于返回指定窗口的实例是否已经关闭，如果关闭，返回true ，反之返回flase。

 

11. frames属性

 

语法格式：window.frames[“框架名称”]

 

window.frames[数值]

 

功能：frames属性是一个数组，用来存储文档中每一个由元素创建的子窗口(框架)实例，其中的下标即可以是次序号也可以是用frame元素的name属性指定的名称来得到并使用。

 

12. frames.length属性

 

语法格式： window.frames.length

 

功能：frames.length属性用于给出文档中子窗口(框架)实例的个数。

 

13. length属性

 

语法格式：window.length

 

功能：length属性返回一个窗口内的子窗口数目，该属性与window.frame.length属性的值相同。

 

14. document属性

 

语法格式：window.document.事件　window.document.方法　window.document.属性

 

功能：window对象的子对象document是javascript的核心对象，在脚本中遇到body元素时创建一个实例。

 

15. history属性

 

语法格式：　window.history[数值] 　window.history.方法() 　window.history.属性

 

window对象的子对象history是javascript的核心对象之一，该属性包含了一个已访问过页面的名称和url的数组。

 

16. innerheight属性

 

语法格式：window.innerheight=数值

 

功能：返回或指定浏览器窗口中文档的像素高度，这个高度不包括任何工具栏和组成窗口的页面修饰高度。

 

注：ie5.5不支持该属性。

 

17. innerwidth属性

 

语法格式：window.innerheight=数值

 

功能：返回或指定浏览器窗口中文档的像素宽度，这个宽度不包括任何工具栏和组成窗口的页面修饰宽度。

 

注：ie5.5不支持该属性。

 

18. menubar属性

 

语法格式：window.menubar.属性

 

功能：menubar属性也可以看成是一个子对象，这个属性用来获取它自已的visible属性来确定菜单栏是否可见。到目前为止，该属性只有一个子属性：visible。

 

注：ie5.5不支持该属性。

 

19. menubar.visible属性

 

语法格式：window.menubar.visible

 

功能：menubar.visible属性用于返回菜单栏是否可见，如果可见返回true，反之返回false。

 

注：ie5.5不支持该属性。

 

20. opener属性

 

语法格式：window.opener　window.opener.方法　window.opener.属性

 

功能：opener属性与打开该窗口的父窗口相联系，当访问子窗口中operer属性时，返回的是父窗口。通过该属性，可以使用父窗口对象中的方法和属性。

 

21. outerheight属性

 

语法格式：window.outerheight

 

功能：outerheight属性用于访问浏览器窗口的像素高度，该高度包括工具栏和装饰边的高度。

 

注：ie5.5不支持该属性。

 

22. outerwidth属性

 

语法格式：window.outerwidth

 

功能：outerwidth属性用于访问浏览器窗口的像素宽度，该宽度包括工具栏和装饰边的宽度。

 

注：ie5.5不支持该属性。

 

23. pagexoffset属性

 

语法格式：window.pagexoffset=数值

 

功能：指定浏览器窗口中文档左上角在窗口中的当前水平像素位置。在利用moveto移动之前，可以通过该属性来决定是否需要移动窗口。因为该属性返回了可见文档相对整个页面的当前位置。

 

注：ie5.5不支持该属性。

 

24. pageyoffset属性

 

语法格式：window.pageyoffset=数值

 

功能：指定浏览器窗口中文档左上角在窗口中的当前垂直像素位置。在利用moveto移动之前，可以通过该属性来决定是否需要移动窗口。因为该属性返回了可见文档相对整个页面的当前位置。

 

注：ie5.5不支持该属性。

 

25. parent属性

 

语法格式：window.parent.frames[数值]　window.parent.framesname

 

功能：访问各个子窗口(多框架)所在的父窗口。

 

26. personalbar属性

 

语法格式：window.personalbar.属性

 

功能：personalbar属性本身也是一个对象，用于访问其自身的visible属性来确定个人栏是否可见。

 

注：ie5.5不支持该属性。

 

27. personalbar.visible属性

 

语法格式：window.personalbar.visible

 

功能：确定个人栏是否可见，如果可见则返回true，反之返回false。

 

注：ie5.5不支持该属性。

 

28. scrollbars属性

 

语法格式：window.scrollbars.属性

 

功能：scrollbars属性本身也是一个对象，用于访问其自身的visible属性来确定滚动栏是否可见

 

注：ie5.5不支持该属性。

 

29. scrollbars.visible属性

 

语法格式：window.scrollbars.visible

 

功能：scrollbars.visible用于确定滚动栏是否可见，如果可见则返回true，反之返回false。

 

注：ie5.5不支持该属性。

 

30. toolbar属性

 

语法格式：window.toolbar.属性

 

功能：toolbar属性本身也是一个对象，用于访问它自已的visible属性从而确定工具栏是否可见。

 

注：ie5.5不支持该属性。

 

31. toolbar.visible属性

 

语法格式：window.toolbar.visible

 

功能：toolbar.visible属性用于检查工具栏是否可见，如果可见则返回true，反之返回false。

 

注：ie5.5不支持该属性。

 

32. top属性

 

语法格式：window.top.frames[数值] 　window.top.framename 　window.top.方法()

 

window.top.属性

 

功能：window对象的top属性用于包含所有装入浏览器的子窗口(多框架)的最顶层窗口的信息。