关于JavaScript知识的个人总结

关于JavaScript脚本

JavaScript脚本是一个增加用户交互性的脚本，也就是说它是一个辅助脚本，它的作用是让用户访问我们的网站时，有更好的用户体检（友好的动态效果等），而我们网页的主要功能不能依靠JavaScript脚本，这就表示当网站的JS脚本被禁用时用户依然可以正产使用网站只是缺少了一些漂亮的动态效果。

 

增加网站性能：

       向后兼容  兼容低版本浏览器

       渐进增强  浏览器  高到低

平稳退化  脚本禁用

当我们使用JS脚本为a条状添加更漂亮的交互时，当脚本被禁用a标签依然能跳转，只是没有了交互效果

                            <ahref=”index.html”>跳转</a>

       性能优化：

              合并压缩文件

              将脚本写在文档的后面（因为Http协议，以及href和src的区别）

              封装抽象函数，减少决定条件

              减少文档的DOM规模，降低对DOM的搜索

       分离JavaScriptCSS  防止HTML中掺杂脚本

       共享load

Ajax

Ajax的主要功能就是携带请求信息发送给服务器端，然后获取服务器的响应。

       建立对象：

              if(window.XMLHttpRequest){

             returnnew XMLHttpRequest();

          }elseif(window.ActiveXObject){

                     returnnew ActiveXObject("Microsoft.XMLHTTP");

          }

       获取服务器的响应

       XHR.open(‘post’,’form.getAttribute(“action”),true’)    获取这个表单被提交到的位置

onreadystatechange表示当XHR对象的请求状态发生改变时触发，所以一共会触发五次0-4

XHR.onreadystatechange= function(){

              对象XHR请求和响应的状态

              if(XHR.readystate == 4 &&XHR.status == 200){

                     这是就可以接收服务器端的响应了

                     responseText

}else{此时表示没有成功响应可以使用statusText获取服务器响应的状态

}

}

发送请求信息：

XHR.send(data);

GET和POST

速度：在传送相同数据时。get的速度是post的两倍

传递方式：get将数据绑定在URL后面，post使用send()方法传递，这就表示了get没有post的容量大

使用方法：get在Ajax中可以直接使用，只是设置send(null)

               post在Ajax中使用的时候需要设置头部信息

                     XHR.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”)

                     表示客户端向服务器端请求的信息是以URL编码

 

Hijax

渐进增强的使用Ajax，先满足老式浏览器的浏览器能去发送响应请求，然后在能使用Ajax异步请求的时候就是用Ajax发送响应请求

关于Ajax的问题

1、 IE浏览器获取服务器响应是会直接在缓存中读取，这导致了响应的信息不是最新的信息，解决办法，在响应服务器文件URL后添加随机数Math.random()

XHR.open('Get','demo.json?id='+Math.random(),true);

2、封装Ajax  Jquery中的ajax({})

DOM

文档对象模型，适用于多种环境和语言API，必须在文档加载完之后才能使用

DOM-Core

不属于JavaScript，可以被多种标记语言使用，例如XML等

获取元素DOM：

getElementById

getElementsByTagName

getElementdByClassName   html5提供   使用JavaScript兼容className

操作属性：

       getAttribute()      className、Style、onclick属性中有兼容性    setAttribute()

       removeAttribute()   IE6以下不支持

子集：

       childNodes   不忽略空白节点

       children     忽略空白节点

层次节点：     不忽略空白节点

       firstChild

       lastChild

       parentNode

       nextSibling

       prevousSibling

创建节点：

       createElement()

       createTextNode()

       appendChild()

       insertBefore()

       removeChild()    返回已删除的节点此时节点还存在内存中

       replaceChild()

       cloneNode()

节点属性：

       nodeName

       nodeType

       nodeValue

HTML-DOM

由HTML提供只能在HTML文档中使用

主要写法：

       element.Attribute = value

forms对象

       document.forms             返回数组，文档中所有form表单

       document.forms[0].elements   返回数组，form中所有表单元素

images对象

innerHTML属性     可代替DOM-Core中的createTextNode

CSS-DOM

style      设置/获取内敛样式

className  添加样式样式追加需要加一个空格element.className+= “ newClass”

BOM

浏览器对象模型

window

       document

       location

       history

       screen

       navgator

       frames

document

       location

       images

       forms

       links

       anchors

window对象

对话框：

       alert()

       confirm()   确认和取消

       prompt()  获取输入的值

打开新窗口

       open(url,name(blank,parent),”width=200px;”)

              open方法返回一个window对象

       opener  子窗口可以通过window.opener操作父窗口

浏览器窗口位置   number类型

       screenLeft  screenTOP

       screenX   screenY     fireFox

兼容var LeftX = typeof s window.screenLeft == “number” ? window.screenLeft :window.screenX;

浏览器窗口大小  number类型

       innerWidth  innerHeight   outerWidth  outerHeight

       标准模式document.compatMode == “CSS1Compat”

       documen.documentElment.clientWidth  documen.documentElment.clientHeight

       documen.body.clientWidth            documen.body.clientHeight

setTimtout   clearTimeout       超时

setInterval()    clearInterval()    间隔

location对象

操作URL

常用location.href  location.search

history对象

网页历史记录

       back()

       forword()

       go()     正数前进负数后退

JavaScript实现动画效果

利用style属性，和position定位，以及setTimeOut()实现

将目标元素当前的位置和目标位置进行对比，然后移动

函数抽象

将一个具体的函数抽象为通用的

事件