一、javascript组成
JavaScript由三部分组成:
1. 核心(ECMAScript)
2. 浏览器对象模型(BOM)
3. 文档对象模型(DOM)
ECMAScript：是一种由ECMA国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。ECMAScript 定义的只是这门语言的基础，他的组成部分有：语法、类型、语句、关键字、保留字、操作符、对象等
BOM： Browse Object Model, 浏览器对象模型，提供与浏览器交互的方法和接口(API ), 开发人员使用BOM可以控制浏览器显示页面以外的部分.
DOM： Document Object Model, 文档对象模型，提供访问和操作网页HTML内容的方法和接口
二、BOM
window对象
BOM的核心是window对象(全局),window对象的方法:
alert(text): 弹出提示框(警告框)
confirm(): 创建一个需要用户确认的对话框
open(url,[options]) : 打开一个新窗口并返回新 window 对象(默认新建，_self当前窗口; 调用window对象close方法即关闭窗口)location对象
location.href = 'http://www.baidu.com' //跳转到指定的URL
location.assign('http://www.baidu.com'); //跳转到指定的URL
location.reload(); //最有效的重新加载,有缓存加载
三、DOM
- DOM的概念
DOM就是Document Object Model(文档对象模型)的缩写，DOM 是 W3C（万维网联盟）的标准。
DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
HTML(页面结构) CSS(页面样式) JavaScript(页面行为操作)
-
节点树
加载HTML页面时，web浏览器生成一个树形结构，用来表示页面内部结构。DOM将这种树形结构理解为由节点组成:
节点树
上图树形结构，html标签，没有父辈，没有兄弟，所以html标签为根标签。head标签是html的子标签，meta和title标签是兄弟关系。如果把每个标签当作一个节点，那么这些节点组合成的就是节点树。
- 节点种类
元素节点、文本节点、属性节点;
<div id="box">测试Div</div>
元素节点: div
属性节点: id="box"
文本节点: 测试Div
- 元素节点对象的获取方式
- getElementById(): 获取特定ID元素的节点对象(返回一个对象)
- getElementByClassName(): 获取指定类名的元素节点列表(返回一个数组)
- getElementsByTagName(): 获取指定标签名的节点列表(返回一个数组)
- getElementsByName(): 获取相同name属性值的节点列表(返回一个数组)
错误提醒: 如果id值存在, 但是返回null，则是执行顺序的问题！
解决方式一: 把<script>标签(JS代码)移到html结构后面；
解决方式二: 使用onload事件来处理， onload事件会在html加载完毕后再调用。
window.onload=function() {
document.getElementById('box'); //id具有唯一性
};
- 元素节点的属性
tagName: 元素节点对象所指向的标签名称
innerHTML: 元素节点中的内容
className: 元素节点的class属性值
style: css内联样式对象
children: 某元素的所有子元素节点
parentNode: 某元素的父节点
value: 输入框的内容
练习: 实现一个个人信息页面 姓名 年龄 学历 专业, 可以获取到输入的信息, 点击保存按钮以后, 输出信息(信息显示形式: 姓名:张三,年龄:33,学历:本科,专业:计算机)
- DOM节点操作
DOM节点操作指的是: 创建节点、复制节点、插入节点、删除节点和替换节点等。
- createElement(); 创建一个元素节点
var op1 = document.createElement('p')
- appendChild(); 添加一个新子节点到子节点的末尾
box.appendChild(op1)
- createTextNode(); 创建一个文本节点
var txt = document.createTextNode('哈哈')
- insertBefore(); 将新节点插入到某节点前面
box.insertBefore(div3, div1) // 将div3加入到div1的前面
- replaceChild(); 将新节点替换旧节点
box.replaceChild(op, div1) // 将div1替换为op
- cloneNode(true); 复制节点
div1.appendChild(div1.cloneNode(true))
- removeChild(); 移除节点
box.removeChild(op1)
- this对象
this是javascript的一个关键字。随着函数使用场合不同，this的值会发生变化。但是总有一个原则，谁调用即指向谁(this指的是调用函数的那个对象)。
var box = document.getElementById('box');
box.onclick = function() {
console.log(this); // this表示box对象
};
// 通过for循环添加事件, 使用this
var aInput = document.getElementsByTagName('input');
for (var i=0; i<aInput.length; i++) {
aInput[i].onclick = function() {
console.log(this.value); //这里的this表示被点击的那个input元素节点对象
};
}
-
练习: 动态表格的创建, 在输入框中输入内容后,点击保存则在表格末尾添加一条记录, 点击删除则会删除对应行的记录
练习.png
四、事件
- 鼠标事件
# 鼠标事件，页面所有元素都可触发鼠标事件;
click： 当单击鼠标按钮并在松开时触发
oBox.onclick = function() {
console.log('单击了鼠标');
};
dblclick： 当双击鼠标按钮时触发。
oBox.ondblclick = function() {
console.log('双击了鼠标');
};
mousedown：当按下了鼠标还未松开时触发。
oBox.onmousedown = function() {
console.log('按下鼠标');
};
mouseup： 释放鼠标按钮时触发。
oBox.onmouseup = function() {
console.log('松开了鼠标');
};
mousemove：当鼠标指针在某个元素上移动时触发。
oBox.onmousemove = function() {
console.log('鼠标移动了');
};
mouseenter/mouseover：当鼠标移入某个元素的那一刻触发。
oBox.onmouseenter = function() {
console.log('鼠标移入了');
};
mouseleave/mouseout：当鼠标刚移出某个元素的那一刻触发。
oBox.onmouseleave = function() {
console.log('鼠标移出了');
};
- 键盘事件
# 键盘事件，在键盘上按下键时触发的事件(一般由window对象或者document对象调用)
keydown：当用户按下键盘上某个键触发，如果按住不放，会重复触发。
window.onkeydown = function() {
console.log(按下了键盘上的某个键);
};
keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发
window.onkeypress = function() {
console.log('按下了键盘上的字符键');
};
keyup：当用户释放键盘上的某个键触发。
window.onkeyup = function() {
console.log('松开键盘上的某个键');
};
ev.keyCode 键码
- HTML事件
# HTML事件，跟HTML页面相关的事件;
load：当页面完全加载后触发
window.onload = function() {
console.log('页面已经加载完毕');
};
unload：当页面完全卸载后触发
window.onunload = function() {
console.log('页面已经卸载完毕');
};
select：当用户选择文本框(input 或 textarea)中的内容触发。
input.onselect = function() {
console.log('选择了文本框中的内容');
};
change：当文本框(input 或 textarea)内容改变且失去焦点后触发。
input.onchange = function() {
console.log('文本框中内容改变了');
};
focus：当页面或者元素获得焦点时触发。
input.onfocus = function() {
console.log('文本框获得焦点');
};
blur：当页面或元素失去焦点时触发。
input.onblur = function() {
console.log('文本框失去焦点');
};
submit：当用户点击提交按钮在<form>元素节点上触发。
form.onsubmit = function() {
console.log('提交form表单');
};
reset：当用户点击重置按钮在<form>元素节点上触发。
form.onreset = function() {
console.log('重置form表单');
};
scroll：当用户滚动带滚动条的元素时触发。
window.onscroll= function() {
console.log('滚动了滚动条了');
};
- 案例
有一块空白区域,
当鼠标移动到区域内,显示"亲爱的, 我爱你",
当我鼠标移开的时候,显示"对不起, 开玩笑",
当我鼠标不停的在区域内移动的时候, 变换随机颜色(随机十六进制的颜色：#FFFFFF)
- 事件对象event
通过事件的执行函数传入的event对象(事件对象) 不是在所有浏览器都有值, 在IE浏览器上event对象并没有传过来, 这里我们要用window.event来获取, 而在火狐浏览器上window.event无法获取, 而谷歌浏览器支持event事件传参和window.event两种, 为了兼容所有浏览器, 我们使用以下方式来得到event事件对象:
box.onclick = function(evt){
var e= evt || window.event; //获取到event对象(事件对象)
console.log(e);
};
其中window.event中的window可以省略, 最终我们可以写成:
box.onclick = function(evt){
var e= evt || event; //获取到event对象(事件对象)
console.log(e);
};
注意: evt || event不要倒过来写
- 事件对象属性
target: 返回触发此事件的元素（事件的目标节点）
clientX: 浏览器可视区域的x坐标
clientY: 浏览器可视区域的y坐标
screenX: 显示器屏幕的x坐标
screenY: 显示器屏幕的y坐标
offsetX: 鼠标点击的元素位置距离元素左边界的x坐标
offsetY: 鼠标点击的元素位置距离元素上边界的y坐标
-
案例(下拉菜单)
1, 最开始效果如左图1
2, 鼠标滑过”请选择游戏名称”区域时,效果如图2
3, 鼠标滑过下拉选项区域时, 让下拉选项可以继续显示,移开后隐藏
4, 鼠标在选项中滑过时, 显示效果图3
5, 选择某一项, 将顶部的名称改成你选择的游戏名称
下拉菜单效果
五、事件冒泡
- 事件冒泡
当一个元素接收到事件以后，会将接收到的事件传递给父级元素，一直传递给顶层window；可以利用事件冒泡，可以减少事件的绑定，有利于性能优化
注意: 事件传递给某个元素，并不一会触发该事件；会不会触发该事件，和你是否添加该事件有关；
- 阻止事件冒泡
非IE: ev.stopPropagation()
IE: ev.cancelBubble = true;
// 兼容写法
ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
-
事件冒泡的使用(扩展)
点击单元格时，可以编辑单元格的内容，点击表格以外即编辑完成。
表格的编辑.png
