三.JS的API
3.1知识点(DOM)
1)DOM本质
- 将html结构化成浏览器和JS可识别可操作的东西
2)变量计算---强制类型转换
- 获取DOM节点
- Attribute(对html标签属性的修改)
- prototype(对JS对象的属性修改)
3)DOM结构操作
- 增加DOM节点 .appendChild( )
- 获取父元素 .parentElement
- 获取子元素 .childNode
- 删除节点 .removeChild( )
3.2知识点(BOM)
1)navigator
- .userAgent
2)screen
- .width
- .height
3)location
- .href
- .protocal
- .host
- .pathname
- search
- .hash
4)screen
- .back( )
- .forward( )
3.3知识点(事件绑定)
1)通用事件绑定
- .addEventlistener('事件',函数)
2)事件冒泡
- event.stopPropagation( )
3)取消默认
- event.preventDefault( )
4)代理
- var target = e.target
3.4知识点(Ajax)
1)XMLHttpRequest
var xhr = new XMLHttpRequest( ); xhr.onreadystatechange = function( ){ if(xhr.readyState==4){ if(xhr.status==200){ alert(xhr.responseText); } } }; xhr.open("GET","/api",false); xhr.send(null);
2)状态码说明
- 0-(未初始化)没调用send( )
- 1-(载入)调用send( ),正发送请求
- 2-(载入完成)send( )完,收完内容
- 3-(交互)解析响应内容
- 4-(完成)解析完可以在客户端用
- 2xx-成功处理请求
- 3xx-要重定向,浏览器直接跳转
- 4xx-客户端请求错误
- 5xx-服务端错误
3)跨域
- 什么是跨域
- 跨域条件:协议、域名、端口,有一个不同就算跨域
- 浏览器有同源策略,不允许ajax访问其他域接口
- 可以跨域的三个标签
- <img src = xxx>
- <link href = xxx>
- <script src = xxx>
3.5知识点(JSONP)
1)实现原理
- 加载某网址上的html文件http://www.xxxx.com/class.html
- 服务器端不一定有一个class.html文件,服务器可根据请求动态生成文件返回
2)例子
- 你要访问某网站的一个接口,该网站给你一个地址,你将它写在你的网站的<script src = xxx>里
- 同时,还要写一个window.callback = function(data){//我们跨域得到的信息}
3.6知识点(存储)
1)cookie
- 本身用于客户端和服务端通信,但有本地存储功能
- 用document.cookie = ...获取和修改
- 缺点:
- 存量小,4kb
- 所有http请求都带着,影响资源获取效率
2)locationStorage和sessionStorage
- html为存储设计,最大存储量5M
- API简单易用
- .setItem(key,value)
- .getItem(key)
3)三者区别
- 容量
- 是否携带到ajax中
- API易用性
关于JS重点知识介绍到这里,这里不作详细介绍,只粗略列出常用知识点。