05-JS基础2

一、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元素节点对象 
        };
}

练习: 动态表格的创建, 在输入框中输入内容后,点击保存则在表格末尾添加一条记录, 点击删除则会删除对应行的记录

1801379-14a11a2f88dee598.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;

事件冒泡的使用(扩展)
点击单元格时，可以编辑单元格的内容，点击表格以外即编辑完成。

表格的编辑