05-JavaScript基础[Python]

2018-08-16  本文已影响878人  EndEvent

一、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

三、DOM

HTML(页面结构) CSS(页面样式) JavaScript(页面行为操作)

上图树形结构，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具有唯一性
   };

练习: 实现一个个人信息页面 姓名 年龄 学历 专业, 可以获取到输入的信息, 点击保存按钮以后, 输出信息(信息显示形式: 姓名:张三,年龄:33,学历:本科,专业:计算机)

- 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)

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

四、事件

# 鼠标事件，页面所有元素都可触发鼠标事件;

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页面相关的事件; 

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)

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坐标

五、事件冒泡

注意: 事件传递给某个元素，并不一会触发该事件；会不会触发该事件，和你是否添加该事件有关；

事件冒泡 
  非IE: ev.stopPropagation()
  IE: ev.cancelBubble = true;
  // 兼容写法
  ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
上一篇下一篇

猜你喜欢

热点阅读