JavaScript 的组成部分:
ECMAScript : 核心; ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现 .
BOM : 浏览器对象模型; 它定义了JavaScript可以进行操作的浏览器的各个功能部件的接口, BOM 的核心对象是
window, 它的作用使JavaScript有能力与浏览器’对话.
DOM : 文档对象模型; DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口, 它是W3C 的标准[所有浏览器公共遵守的标准] .
1.BOM 浏览器对象模型
(1) window对象
window对象: 代表的是浏览器中打开的窗口, 在js中我们使用window来引用window对象, window对象是最顶层的一个对象, 它的属性和方法的调用都可以省略window.
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | innerHeight / innerWidth | 获取浏览器窗口的内部高度 / 宽度(包括滚动条) |
| 2 | screen.availWidth / availHeight | 获取可用的屏幕宽度 / 高度 |
| 3 | prompt() | 弹出输入框 |
| 4 | alert() | 弹框警告框 |
| 5 | confirm() | 弹出确认与取消提示框(返回的布尔值true和false) |
| 6 | open(‘url’) | 打开新窗口 |
| 7 | close() | 关闭浏览器窗口 |
| 8 | print() | 打印当前窗口的内容(调出打印机) |
| 9 | moveTo(, ) | 移动当前窗口 |
| 10 | resizeTo(, ) | 调整当前窗口的尺寸 |
(2) location对象
location对象: 代表的是URL(统一资源定位符, 通常所说的网址); 使用location. 来调用属性
| 序号 | 属性 | 方法 |
|---|---|---|
| 1 | location.hostname | 返回 web 主机的域名 |
| 2 | location.pathname | 返回当前页面的路径和文件名 |
| 3 | location.port | 返回 web 主机的端口 （80 或 443） |
| 4 | location.protocol | 返回所使用的 web 协议（http:// 或 https://） |
| 5 | location.href | 返回当前页面的URL |
| 6 | location.assign(‘url’) | 加载新的文档网页 |
| 7 | location.reload() | 重新加载, 刷新页面 |
(3) history对象
window.history: 对象返回浏览器的历史记录列表; 使用 history. 来调用属性
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | history.forward() | 前进 |
| 2 | history.back() | 后退 |
| 3 | go(number) | +前进 / -后退 |
(4) navigator对象
navigator对象: 包含有关浏览器的信息
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | navigator.appCodeName | 浏览器代号 |
| 2 | navigator.appName | 浏览器名称 |
| 3 | navigator.appVersion | 浏览器版本 |
| 4 | navigator.cookieEnabled | 启用Cookies |
(5)计时器 (计时事件)
计时事件: 我们通过使用JavaScript能做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行.
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | setInterval (function() {) },2000); | 间隔指定的毫秒数不停地执行指定的代码(周期执行) |
| 2 | clearInterval() | 用于停止 setInterval() 方法执行的函数代码。 |
| 3 | setTimeout (function(){)}, 2000); | 在指定的毫秒数后执行指定代码(执行一次) |
| 4 | clearTimeout() | 用于停止执行setTimeout()方法的函数代码 |
2.DOM 文档对象模型
使用DOM模型能够使用JS操作文档内容进行 添加, 删除, 修改, 查询, 复制, 等.
(1)获取元素节点
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | document. getElementById() / document.querySelector | 通过id查找元素, 返回带有指定id的元素对象(拿单个元素) |
| 2 | document. getElementsByTagName() / getElementsByName | 通过标签名查找元素, 返回指定标签的所有元素的集合(使用lenght获取元素个数) |
| 3 | document. getElementsByClassName() / document. querySelectorAll | 通过类名查找元素, 返回指定类名的所有元素的集合(使用lenght获取元素个数) |
(2) 添加节点
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | var 变量名 = document.createElement(‘li’) | 创建元素节点 |
| 2 | var 变量名 = document.createTextNode(‘hello’) | 创建文本节点 |
| 3 | ul.appendChild(li) | 添加节点(添加到内部末尾) |
| 4 | ul. insertBefore(li, li[0]) | 插入节点(添加到内部之前) |
(3) 删除节点
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | 父元素.removeChild(删除的节点对象) | 删除指定的节点 |
| 2 | 元素. removeAttribute(属性名) | 删除指定的属性 |
(4) 修改元素内容及属性
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | 元素. innerHTML | 获取 / 修改内部的HTML文本, 会渲染标签 |
| 2 | 元素. innerText / textContent | 获取 / 修改内部的纯文本 |
| 3 | 元素. setAttribute(属性名, 属性值) | 修改元素的的属性, 设置新属性 |
| 4 | 元素. getAttribute(属性名) | 通过元素名获取属性的值 |
| 5 | 元素. 属性名 = 属性值 | 直接修改属性值 |
| 6 | 元素. style. 属性名 = 属性值 | 修改CSS的属性 |
(5) 节点查找(层次)
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | parentNode | 查找某节点的父节点 |
| 2 | childNodes | 查找所有孩子节点 |
| 3 | children | 查找被选元素的所有直接子元素 |
| 4 | firstChild | 查找被选节点的第一个节点 |
| 5 | lastChild | 查找被选节点的最后一个节点 |
| 6 | previousSibling | 查找被选节点的上一个兄弟节点 |
| 7 | nextSibling | 查找备选节点的后一个兄弟节点 |
(6) 复制节点
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | var copy = node. cloneNode(true / false) | 参数表示是否克隆后代, 默认为false, 即不克隆后代 |
(7) 事件对象
事件驱动模型 : 事件(动作) –> 事件类型(动作类型) –> 事件源(事件发生的地方) –> 事件处理程序(事件响应程序 - 函
数) –> 事件监听器(监听事件的发生 - 浏览器).
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | onclick | 事件在元素被点击时发生(元素被点击的整个过程) |
| 2 | onload | 事件在页面或图像加载完成后立即发生 |
| 3 | onunload | 事件在用户退出页面时发生 |
| 4 | onchange | 事件会在域的内容改变时发生 |
| 5 | onfocus | 获得焦点是发生 |
| 6 | onblur | 失去焦点时发生 |
A. 鼠标属性
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | onmouseover | 鼠标移至元素上方时触发函数 |
| 2 | onmouseout | 鼠标移至移出元素时触发函数 |
| 3 | onmousedown | 鼠标按下时发生 |
| 4 | onmouseup | 鼠标释放时发生 |
| 5 | onmousemove | 鼠标被移动时发生 |
B. 键盘属性
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | onkeydown | 某个键盘按键被按下 |
| 2 | onkeyup | 某个键盘按键被松开 |
| 3 | onkeypress | 某个键盘按键被按下并松开的整个过程 |
注意: 事件回柄需要加on, 添加事件监听addEventListener类型不需要加’on’前缀, 其他都要加on.
(8) 事件冒泡与捕获
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | evt.stopPropagation() | 阻止事件冒泡 |
| 2 | evt.cancelBubble = true | 阻止事件冒泡(IE9之前) |
| 3 | evt.preventDefault() | 阻止事件默认行为 |
| 4 | evt.returnValue = false | 阻止事件默认行为(IE9之前) |
(9) 事件监听
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | document. addEventListener(“click”, function(){ }, true) #捕获方式默认为false | 添加事件监听 |
| 2 | document. attachEvent(‘onclick’ , function(){ }) | 添加事件监听(IE9之前) |
| 3 | document. removeEventListener(“click”, function(){ }) | 移除事件监听 |
| 4 | document. detachEvent(‘onclick’ , function(){ }) | 移除事件监听(IE9之前) |