JS参考手册
一、JavaScript Core API
词法结构
字符集
使用Unicode字符集
注释
单行注释
//或HTML风格的<!--
多行注释
/**/
标识符
大小写
区分大小写
空格、换行、格式控制
转义序列
字面值、类型、变量、常量
字面值
类型(字面值或量的类型)
类型种类
原始类型 | 布 | ||
符 |
|
||
数 |
|
||
u |
|
||
n |
|
||
引用类型 | 数组 | ||
对象 | |||
类型转换
布 | 布-->其它 |
|
|
其它-->布 | 隐式转换(系统默认) |
|
|
显示转换(强制转换) | |||
符 | 符-->其它 | ||
其它-->符 |
变量
常量
表达式
语句
二、Web浏览器API(客户端API)
Web浏览器中JS的运行
引入(四种方式)
内联(执行一次)
script元素属性表:
属性及默认值 | 说明 | 备注 |
language="javascript" | 老式浏览器代替type,已废弃 | |
type="text/javascript" | 脚本的MIME类型 |
当包含不被浏览器识别的type属性值时,
|
src="url" | .js文件URL | |
defer | 延迟执行 |
|
async | 异步执行 |
|
XHTML中,“<”,“&”会解释成xml,可用CDATA包围:<![CDATA[ //JS code ]]>。
外部(执行一次)
使用src后,script标签的之间的内容会被忽略。
事件属性(执行多次)
- 属性值包含多条语句,以;分割,构成一个函数体。
- 单行注释不可用。
URL资源(执行多次)
- <a href="javascript:" />
- <form action="javascript:" />
- window.open()方法的参数
- 超链接里的URL(bookmarklet)
- 单行注释不可用
javascript:url执行后会将返回值覆盖当前文档,可以:
- void操作符强制函数调用或
- 给表达式赋予undefined
避免覆盖
执行(单线程模型,无并发,脚本和事件处理程序同一时间只能执行一个)
同步执行阶段(脚本执行阶段)
- 默认执行方式(内联和外部脚本默认情况下同步阻塞执行,阻塞文档解析和渲染)
- 可改变的执行方式:
- defer延迟脚本
- async异步脚本
- 动态创建script标签插入文档实现异步载入和执行。
异步执行阶段(事件处理阶段,事件驱动)
第一个事件:onload事件
执行时间线
- document.readystate="loading"阶段。web浏览器创建Document对象,解析web页面,解析HTML元素和文本内容添加Element对象和Text节点到文档中。
- 无async和defer的script元素时:
- 暂停解析(暂停解析文档,将元素添加入文档并同步执行,下载和执行时解析器会暂停解析。)
- 可以使用document.write()方法将文本插入输入流。解析器恢复时,这些文本成为文档的一部分。
- 可以访问自身的script元素及之前的文档内容。
- 含async的script元素时:
- 继续解析(继续解析文档,同时异步下载脚本文本并尽快执行)
- 禁止使用documnet.write()方法。
- 可能也不可能(取决于尽快的程度)访问自身的script元素及之前的文档内容。
- 含defer的script元素时:
- 继续解析,暂停脚本执行直到文档完成解析。
- 解析文档完成后,document.readystate="interactive"。
- 由于文档解析完成,含defer的script元素顺序执行
- 禁止使用document.write()方法
- 可以访问完整文档树
- 浏览器在Document上触发DOMContentLoaded事件。此时异步脚本可能没有执行。
- 载入图片,执行未执行的异步脚本后,document.readystate="complete",然后web浏览器会触发window的load事件。
Web浏览器中JS的兼容性、安全性、可访问性
兼容性
兼容性的原因(演化、未实现、Bug)
兼容性的解决
- 类库
- 分级支持
- 功能测试
- 浏览器测试
- 怪异模式和标准模式
- IE条件注释
HTML中的条件注释 单独的条件前后缀 <!--[if !|lt|gt|lte|gte IE|IE 5|IE 6|IE 7|IE 8|IE 9]> IE5~IE9能识别前后缀并解释渲染内容 其他浏览器不能识别前后缀仅当做注释 <![endif]--> 注释的条件前后缀 <!--[if !|lt|gt|lte|gte IE|IE 5|IE 6|IE 7|IE 8|IE 9]>-->(或<---->) IE5~IE9能识别前后缀但同时将里面的内容当做注释并不展示 其他浏览器不能识别前后缀仅当做注释,但此时前后缀也被注释掉,所以可以识别里面的内容。 <!--(或<!---->)<![endif]--> JS中的条件注释(IE的js解释器支持条件注释) /*@cc_on
@if(@_jscript)
@else
@end
@*/
安全性
同源策略
不严格同源策略
- Document对象的domain属性
- CORS跨域资源共享
- CDM跨文档消息
IE的Active控件和非IE的插件
XSS跨站脚本
拒绝服务攻击
可访问性(JS增强信息访问,WAI-ARIA)
BOM(宿主API)
Window
属性
普通属性
事件属性
方法
DOM(宿主下文档API)
Document对象
属性
方法
节点树的操作(增删改查)
元素节点的操作
查(访问) |
||||
遍历方式 | ||||
节点属性 |
|
|||
根节点 |
|
|||
子节点 |
|
|||
父节点 |
|
|||
兄弟节点 |
|
|||
快捷方式 | ||||
属性 | id | document.getElementById() | Element对象 | IE8以下,该方法入参不区分大小写,且返回匹配的name属性的元素 |
name | document.getElementsByName() | NodeList对象(包含若干Element对象的数组) |
|
|
class | document.getElementsByClassName() | |||
元素 | Tag | document.getElementsByTagName() | ||
CSS选择器 | Selector | document.querySelector() | ||
document.querySelectorAll() | ||||
document.all | ||||
增 |
||||
创建 |
元素节点 | document.createElement('element')/document.createElementNS('url','element')(在使用了XML命名空间的文档中,同时指定命名空间的url和标签名) | ||
文本节点 | document.createTextNode('text node content') | |||
注释节点 | document.createComment() | |||
文档碎片 | document.createDocumentFragment() | DocumentFragment和Document一样独立不属于文档一部分,且把一组节点当中一个节点 | ||
克隆节点 | Node.cloneNode(true|false)(true:深拷贝|false:浅拷贝) | |||
导入节点 | document.importNode(node,true|false)(true:深拷贝|false:浅拷贝) | 除IE外 | ||
插入节点 |
|
|
若插入已存在的节点,则会删除已存在重新插入 | |
删 |
||||
删除和替换节点 |
|
|||
改 |
属性节点的操作
Node节点属性 | Node.attributes[index|name] |
|
标准属性 |
|
|
非标准属性 |
|
|
数据集属性 |
|
|
文本节点的操作
Node节点文本 | Node.nodeValue | |
Node.data | ||
纯文本 | Node.textContent | 除IE外都支持 |
Element.innerText | 除FF外都支持 | |
document.getElementsByTagName('script')[0].text(script元素text属性) | ||
HTML文本 | document./element.innerHtml | 单独设置时效率高,使用+=拼接效率低,因为既要序列化又要解析 |
element.outerHtml | 除FF外都支持 | |
element.insertAdjacentHTML('beforebegin|afterbegin|beforeend|afterend','element') |
CSSOM(宿主下文档样式API)
内联样式 style |
|
|
|
|
|
计算样式 getComputedStyle() |
|
|
|
|
|
class类 |
|
|
|
|
|
样式表 |
|
|
|
|
|
|
事件
异步事件驱动模型
事件类型
事件目标
事件处理程序
注册
属性注册 | 元素属性注册 |
|
如果事件目标为window则注册在body元素的属性上 |
JavaScript对象属性注册 |
|
只能注册一个属性 | |
方法注册 |
非IE,标准API |
|
|
IE9以下 |
|
|
调用
参数 |
|
运行环境 |
|
作用域 |
|
返回值 |
对属性注册的处理程序
对通过方法注册的处理程序
|
调用顺序 |
|
事件对象
事件传播
HTML5相关API
JS参考手册的更多相关文章
- JS 参考手册
JS 参考手册 JavaScript 对象 HTML DOM 对象
- Gulp.js 参考手册,自动化构建利器
Gulp 是最新的基于 Node 的自动化构建工具,希望能够取代 Grunt,成为最流行的 JavaScript 任务运行器.通过结合 NodeJS 的数据流的能力,只需几步就能搭建起自己的自动化项目 ...
- Vue.js 2.0 参考手册.CHM下载
下载地址 Vue.js 2.0 参考手册.CHM下载链接: http://pan.baidu.com/s/1kVbhd4b 密码: wxfh
- HTML 内嵌JS脚本、相关参考手册
提供一个JS.HTML参考手册入口:http://www.w3school.com.cn/jsref/index.asp. JavaScript 最常用于图片操作.表单数据处理以及内容动态更新. &l ...
- 浏览器端-W3School:JS & DOM 参考手册
ylbtech-浏览器端-W3School:JS & DOM 参考手册 1.返回顶部 1. JavaScript 参考手册 本部分提供完整的 JavaScript 参考手册: JavaScri ...
- vue.js学习参考手册
参考手册 示例:www.51siyuan.cn/161.html
- jQuery 1.10.3 参考手册
Jquery是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7 ...
- [转] Mongoose 参考手册
Mongoose 参考手册 标签(空格分隔): MongoDB Mongoose 是什么? 一般我们不直接用MongoDB的函数来操作MongoDB数据库 Mongose就是一套操作MongoDB数据 ...
- dubbo 官方参考手册~备案(防止哪天阿里一生气把dubbo给删除了)
首页 || 下载 || 用户指南 || 开发者指南 || 管理员指南 || 培训文档 || 常见问题解答 || 发布记录 || 发展路线 || 社区 E ...
随机推荐
- 1 win10双系统安装ubuntu16.04和18.04(问题详细记录)
我从来不想在琐事上花功夫.就拿装系统来说,我感觉拿过来一个完全陌生的项目源码,看起来,都比装系统爽.我属于典型的逻辑思考男.喜欢畅游程序的海洋. 一直windows跑深度学习和tensorflow,有 ...
- Azure 订阅和服务限制、配额和约束
最后更新时间:2016年10月24日 概述 本文档指定一些最常见的 Azure 限制.请注意,本文档目前未涵盖所有 Azure 服务.一段时间后,将展开并更新这些限制以包含多个平台. NOTE: 如果 ...
- Ionic开发项目
hybrid app是移动开发代替原生开发完成app应用项目的一种方案,Ionic是hybrid app开发的一种选择.对ionic有兴趣可以去网上找相应的基础知识来学习了解,因为Ionic是基于An ...
- c#(winform)环境下使用动态链接库dll的详解
1,什么是dll文件? DLL(Dynamic Link Library)文件为动态链接库文件,又称“应用程序拓展”,是软件文件类型.在Windows中,许多应用程序并不是一个完整的可执行文件,它们被 ...
- [翻译] HTKDragAndDropCollectionViewLayout
HTKDragAndDropCollectionViewLayout Custom UICollectionViewLayout that works together with a custom U ...
- Linux入门-7 Linux管道、重定向以及文本处理
Linux管道.重定向以及文本处理 1 Linux多命令协作:管道及重定向 管道和重定向 2 Linux命令行文本处理工具 文件浏览 基于关键字搜索-grep 基于列处理文本-cut 文本统计-wc ...
- java入门学习总结
1.jdk(java开发工具包)------> jre(java运行环境)------> jvm(java虚拟机) ------>应用(javac) -------> java ...
- 企业级Apache详解2
http_conf主配置说明 root@lamp01 apache]# grep -Ev "#|^$" conf/httpd.conf DocumentRoot "/us ...
- 001Java输入、eclipse快捷键
内容:Java实现键盘输入,eclipse常用快捷键 ######################################################################### ...
- BZOJ 1051 受欢迎的牛 缩点
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1051 题目大意: 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数( ...