JavaScript常用内置函数、对象.ppt

JavaScript Advanced Hail to the king of web MIAC Javascript Advanced MIAC 函数声明与函数表达式 函数声明： 函数表达式： 写的话：命名函数表达式 不写的话：匿名函数表达式 Javascript Advanced MIAC 函数声明与函数表达式 这些也是函数表达式： 这个特别常见，引起注意 的区别？ 如何区分函数声明与函数表达式？ Javascript Advanced MIAC 函数声明与函数表达式 更细的区别 1. 函数表达式可以直接后面加括号执行，而函数声明不可以 2. 函数声明可以被预先解析出来 什么时候应该使用命名函数表达式？ NOTE：需要debug追寻函数错误的时候 JavaScript Basic MIAC DOM（文档对象模型） Document Object Model/ JavaScript HTML DOM Javascript Advanced MIAC DOM对象详解 所有对HTML文档的操作都是DOM操作 DOM其实是一系列JavaScript对象，用来描述页面上的每个元素 DOM其实还是一套规范，类似XHTML、HTML5 DOM是由浏览器创建的对象，并且开放它们的JS API Javascript Advanced MIAC DOM对象详解 DOM节点 节点类型 元素节点 属性节点 文本节点 注释节点 document Javascript Advanced MIAC 我们可以遍历元素的状态 我们可以改变状态 例如 检查一个选项框是否选中 我们可以改变样式 例如 往一个div里面插入一些文本 例如 使一段文字变成红色 DOM对象详解 Javascript Advanced MIAC DOM对象详解 DOM节点 父节点 -parenNode 子节点 -children Javascript Advanced MIAC DOM应用 创建DOM元素 插入DOM元素 createElement appendChild insertbefore 删除、替换DOM元素 removeChild replaceChild NOTE：用DOM方法创建出来的元素，和普通元素没有任何区别 append其实应该翻译成“追加” Javascript Advanced MIAC DOM优化 JS包括了哪些部分？ -ECMA -DOM -BOM Javascript Advanced MIAC DOM优化 DOM与JS 浏览器会把DOM与JS独立实现 JS操作DOM DOM的性能 - 像两个独立的小岛 - 从一个岛到另一个岛 - 岛与岛之间的桥，每次通过收取“过桥费” - 尽量减少过桥的次数 Javascript Advanced MIAC DOM优化 减少DOM操作 节点克隆 访问元素集合 元素节点 -cloneNode - 尽量用局部变量 -尽量用只获取元素的节点的方法 选择器API - 利用querySelector、querySelectorAll 例如：childNode - 元素节点、 文本节点 children - 元素节点 Javascript Advanced MIAC DOM优化 DOM与浏览器 重排：改变页面的内容 添加顺序 合并DOM操作 - 尽量在appendChild前操作 - 利用cssText - createDocumentFragment() 重绘：浏览器显示内容 文档碎片 Javascript Advanced MIAC 事件绑定 什么是事件绑定 什么时候用 如何绑定 解除绑定 - 在同一个事件上添加多个处理函数 - 匿名函数？ Javascript Advanced MIAC 事件对象 什么是事件对象 - 举例：鼠标坐标 事件的详细信息 事件冒泡 什么是事件冒泡 取消冒泡 - cancelBuddle NOTE：事件冒泡一直存在 Javascript Advanced MIAC 事件对象 什么是事件对象 - 举例：鼠标坐标 事件的详细信息 事件冒泡 什么是事件冒泡 取消冒泡 - cancelBuddle NOTE：事件冒泡一直存在 Javascript Advanced MIAC 事件对象属性 键盘按键 - keyCode 鼠标 - button - altKey、ctrlKey、shiftKey - 组合键的使用： Ctrl + 回车 - x、y - clientX、clientY - offsetX、offsetY - scre