事件
- 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:事件在用户输入时触发