事件
- js是以事件驱动为核心的一门语言
事件三要素
- 获取事件源
- 绑定事件
- 书写事件驱动程序
注册事件的两种方式
- onclick 所有的浏览器都支持，但易被层叠
- addEventListener() 事件监听，不会被层叠 参数1：事件名（不带on） 参数2：执行函数 参数3：捕获或者冒泡（true或false）
- ie9以前使用attachEvent 事件名带on
- 注意：
- addEventLisener：事件处理程序会在当前对象的作用域运行，因此，时间处理程序的this就是当前对象
- attachEvent：事件处理程序是在全局作用域下运行因此this就是window
移除事件的两种方式
- element.onclick = null;
- removeEventListener
- IE9以前detachEvent
- 如果注册的时候使用的是匿名函数，则无法移除
焦点事件
- onfocus 获得焦点，表示文本框等，获得鼠标光标
- onblur 失去焦点，表示文本框等，失去鼠标光标
鼠标事件
mousedown、mouseup、mousemove、mouseover、mouseout、click、dblclick
事件对象的属性
clientX/clientY 所有浏览器都支持，窗口位置
pageX/pageY IE8以前不支持，页面位置
screenX/screenY 屏幕位置
shiftKey/ctrlKey/altKey 同时按下组合键
button
键盘事件
keydown、keypress、keyup
事件对象的属性
keyCode 键盘码，只有数字和字母对应ASCII码
charCode 对应ASCII码，只有keypress才有效，IE9+
其它事件
onchange 文本内容或下拉菜单中的选项发生改变
onload 网页文档加载事件
onunload 关闭网页时
onsubmit 表单提交事件
onreset 重置表单时
定时器
循环执行（等待时间过去之后执行）
var timerId = setInterval(code,interval);
clearInterval(timerId);
间隔时间执行，不是特别精确
定时执行（只执行一次）
var timerId = setTimeout(code,interval);
clearTimeout(timerId);
入口函数
window.onload=function(){} 整个页面加载完毕再执行js内容
js加载时和html同步加载的，（如果使用元素在定义元素之间，容易报错）
Javascript的组成
- BOM 浏览器对象模型
- DOM 文档对象模型
- ECMAScript Javascript标准规范
BOM
BOM------>window---->frames[]
| history
|--->DOM location
navigator
screen
window对象
window对象是JavaScript中的顶级对象，定义时常可省略，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法（如：alert，prompt,confirm,定义函数，成员变量等）
打开窗口
window.open(url,target,param)
url 要打开的地址
target新窗口的位置 _blank _self _parent(父框架)
param 新窗口的一些设置
返回值，新窗口的句柄
window.close() 关闭窗口
新窗口.moveTo(5,5) 新窗口.moveBy()
新窗口.resizeTo() window.resizeBy()
location对象
window.location
location相当于浏览器地址栏
可以将url解析成独立的片段
location对象的属性
href
hash 返回url中#后面的内容，包含#
host 主机名，包括端口
hostname 主机名
pathname url中的路径部分
protocol 协议 一般是http、https
search 查询字符串
location对象的方法
location.assign() 改变浏览器地址栏的地址，并记录到历史中
---设置location.href 就会调用assign()。一般使用location.href 进行页面之间的跳转
location.replace() 替换浏览器地址栏的地址，不会记录到历史中
location.reload() 重新加载
navigator对象
window.navigator 的一些属性可以获取客户端的一些信息
--userAgent (系统，浏览器)
--platform (浏览器支持的系统，win/mac/linux)
history对象 历史记录管理
后退
--history.back()
--history.go(-1) 0是刷新
前进
--history.forward()
--history.go(1)
DOM
- DOM：文档对象模型，处理网页内容的方法和接口，是一套操作html文档的API。
- 解析过程：HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内存中DOM上的元素节点，然后操作的时候修改的是该元素的属性。
- 在html中一切都是节点，整个文档就是一个文档节点
- 每一个html标签都是一个元素节点（标签）
- 标签中的文字则是文字节点（文本）
- 标签的属性是属性节点（属性）
DOM节点的获得
- id：=document.getElementById("demo"); 返回值是一个标签
- 标签名：=document.getElementsByTagName("div")[0]; 返回值是一个数组，可以用[],取数组中的元素值
- 类名：=document.getElementsByClassName("banner"); 返回值是一个数组，可以用[],取数组中的元素值
- 注意：getElementById()的获得前边必须用document，因为标签没有id这个属性，但getElementsByTagName和getElementsByClassName可以用父盒子的节点调用，因为标签都有这个属性
通过DOM访问关系获得节点
父节点 parentNode
兄弟节点
-
下一个兄弟节点 nextSibling/nextElementSibling
-
前一个兄弟节点 previousSibling/previousElementSibling
-
nextSibling：调用者是节点。IE678中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）。
-
nextElementSibling：在火狐谷歌IE9都指的是下一个元素节点。
-
总结：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling
下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling
单个子节点
- 第一个子节点 firstElementChild/firstChild
- 最后一个子节点 lastElementChild/lastChild
所有子节点
-
childNodes：标准属性，返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点
nodeType == 1 表示的是元素节点（元素就是标签） nodeType == 2 表示是属性节点 nodeType == 3 是文本节点 -
children：非标准属性，它返回指定元素的子元素集合,只返回HTML节点，不包括文本节点，和innerHTML方法一样，几乎所有浏览器的支持，在IE6/7/8中包含注释节点
节点自己.parentNode.children[index];得到任意兄弟节点
parentNode 和 children 是重点属性
DOM节点操作
- 节点的访问关系都是属性，节点的操作都是函数或方法
创建节点
新的标签（节点）=document.creatElement("标签名");
插入节点
父节点.appendChild(新节点); 父节点的最后插入一个新节点
父节点.insertBefore(新节点,参考节点); 在参考节点前插入,如果参考节点为null，那么他将在节点最后插入一个节点
删除节点
父节点.removeChild（子节点）
自杀：node.parentNode.removeChild(node)
复制节点
新节点=要复制的节点.cloneNode(参数);
true 深层复制，false 只复制节点本身
属性操作
-
节点.属性 节点["属性"]
-
获取：getAttribute("名称")
-
设置：setAttribute("名称","值")
-
删除：removeAttribute("名称")
-
注意：IE6、7不支持
-
属性的方法操作，如果是自定义属性，两种方式定义的不能交换使用，赋值和取值必须用同一种方法，其中
元素节点.属性（元素节点["属性"]）：绑定的属性值不会出现在标签上 get/set/removeAttribute(""):绑定的属性会出现在标签上
节点的属性
nodeType 节点的类型，1元素节点 2属性节点 3文本节点
nodeName 节点的名称（标签名称）
nodeValue 节点的值，元素节点的nodeValue始终是null
<div id="box" value="111">你好</div>
<script>
var ele = document.getElementById("box");//元素节点
var att = ele.getAttributeNode("id");//属性节点
var txt = ele.firstChild;
console.log(ele);//<div id="box" value="111">你好</div>
console.log(att);//id="box"
console.log(txt);//你好
//nodeType
console.log(ele.nodeType);//1
console.log(att.nodeType);//2
console.log(txt.nodeType);//3
//nodeName
console.log(ele.nodeName);//DIV
console.log(att.nodeName);//id
console.log(txt.nodeName);//#text
//nodeValue
console.log(ele.nodeValue);//null
console.log(att.nodeValue);//box
console.log(txt.nodeValue);//你好
</script>
DOM对象的属性
-
src、title、className、href
-
表单元素的属性：type、value、checked、selected、disabled
-
value：标签的value属性（例如input中的）
-
innerHTML:获取双闭合标签里面的内容（识别标签）
-
innerText:获取双闭合标签里面的内容（不识别标签）
-
老版本的火狐不支持innerText，支持textContent
-
p/h1/a不能嵌套p/h1/a(一一对应)
设置样式的两种方式
className 内嵌 外链
style 行内
不能获取和设置内嵌和外链的属性样式，只能设置和获取标签种使用style设置的样式
1.样式少的时候使用
2.style是对象（其他大部分是字符串）
3.值是字符串，没有设置值是“”；
4.命名规则，驼峰命名。和css不一样
5.设置了类样式不能获取。（只和行内式交互，和内嵌和外链无关）
6.box.style.cssText = “字符串形式的样式”；（获取/设置）
style的常用属性：
backgroundColor
backgroundImage
color
width
height
border
opacity (IE8以前filter: alpha(opacity=xx))
动态创建元素的三种方式
方式一：
document.write()
不常用，动态因为容易覆盖原来的页面（事件动态操作容易）
方式二：
innerHTML
（innerText方法不识别标签），用的比较多，绑定属性和内容都比较方便
方式三：利用DOM的api创建元素
createElement()
appendChild()
removeChild()
insertBefore(新，旧)
replaceChild(新，旧)
动态创建表格
方式1
createElement()
方式2
rows (只读，table和textarea能用),返回值是数组
insertRow() (只有table能调用)（）内填写数字，表示指定索引值之前插入
deleteRow() (只有table能调用)（）内填写数字，表示指定索引值之前删除
cells (只读，table和textarea能用)
insertCell() (只有tr能调用)（）内填写数字，表示指定索引值之前插入
deleteCell() (只有tr能调用)（）内填写数字，表示指定索引值之前删除
注意点
在a链接的onclick事件中，加入 return false 可以阻止a链接的跳转
替换类名
div.className=div.className.replace("old","new");
html中的行内调用function的时候，是先通过window调用function，所以打印function中的this等于打印window，行内可以用fn(this)调用定义的函数fn(aaa)
文本框
placeholder:<input type="text" placeholder="我是..."/>,输入字后文本框中的字消失，输入字段为空时显示，在字段获得焦点时消失
元素节点.focus():光标在文本框中自动闪烁显示，获取插入条光标
oninput:事件在用户输入时触发
337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
