十二、事件-Event（下）
事件 Event事件的默认行为及阻止 浏览器的默认行为 JavaScript 事件本身所具有的属性，例如 a 标签的跳转，Submit 按钮的提交，右键菜单，文本框的输入等。 1234567阻止默认行为的方式1、w3c的方法是e.preventDefault()2、IE则是使用e.returnValue = false;3、函数内部return false;自定义右键菜单 oncontextmenu DOM2 级事件处理程序添加事件监听器 添加事件监听器：ele.addEventListener(事件名，处理函数，布尔值) 注意：适用于现代浏览器（IE9、10、11 | ff, chorme, safari, opera） 注意：事件名不带 on，处理函数为函数引用，布尔值代表冒泡(内到外)或捕获（外到内） element.addEventListener(“click”,function(){},false);//false 事件冒泡 element.addEventListener(“click”,function(){},true);/...
十一、事件-Event（上）
事件 Event事件基础123JavaScript 事件是由访问 Web 页面的用户引起的一系列操作。当用户执行某些操作的时候，再去执行一系列代码。或者用来获取事件的详细信息，如鼠标位置、键盘按键等。 事件处理函数12javaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件所有的事件处理函数都会都有两个部分组成，on + 事件名称 常用鼠标事件（重点）1234567onclick: 用户单击鼠标按钮ondblclick: 当用户双击主鼠标按钮时触发onmousedown: 当用户按下鼠标还未弹起时触发onmouseup： 当用户释放鼠标按钮时触发onmouseover： 当鼠标移到某个元素上方时触发onmouseout： 当鼠标移出某个元素上方时触发onmousemove： 当鼠标指针在元素上移动时触发 常用 HTML 事件（重点）1234567onload： 当页面或者资源完全加载后在 window 上面触发onselect： 当用户选择文本框(input 或 textarea)中的一个或多个字符触发onchange： 当文本框(inpu...
十、DOM（下）
DOM（下） DOM 树就是我们 html 结构中一个一个的节点构成的 不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点 DOM 节点 DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点 什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点） 比如我们标签里面写的文字，那么就是文本节点 写在每一个标签上的属性，就是属性节点 元素节点 我们通过 getElementBy... 获取到的都是元素节点 属性节点 我们通过 getAttribute 获取的就是元素的属性节点 文本节点 我们通过 innerText 获取到的就是元素的文本节点 获取节点 childNodes：获取某一个节点下 所有的子一级节点 1234567891011121314151617181920<body> <div> <p>hello</p> </div> <script> // 这个 oDiv 获取的是页...
九、BOM和DOM
BOM / DOM（上）BOM BOM（Browser Object Model）： 浏览器对象模型 其实就是操作浏览器的一些能力 我们可以操作哪些内容 获取一些浏览器的相关信息（窗口的大小） 操作浏览器进行页面跳转 获取当前浏览器地址栏的信息 操作浏览器的滚动条 浏览器的信息（浏览器的版本） 让浏览器出现一个弹出框（alert/confirm/prompt） BOM 的核心就是 window 对象 window 是浏览器内置的一个对象，里面包含着操作浏览器的方法 弹窗 aleat()是在浏览器弹出一个提示框 12window.alert("我是一个提示框");// 这个弹出层知识一个提示内容，只有一个确定按钮，点击确定按钮以后，这个提示框就消失了 confirm 是在浏览器弹出一个询问框 123456var boo = window.confirm("我是一个询问框");console.log(boo);/* 这个弹出层有一个询问信息和两个按钮 当你点击确定的时候，就会得...
八、Math和Date
Math 和 Date Math 是 js 的一个内置对象，提供了一堆的方法帮助我们操作 数字 Date 是 js 的一个内置对象，提供了一堆的方法帮助我们操作 时间 Math random、round、abs、ceil、floor、max、min、PI Math.random()，用来生成一个0 ~ 1之间的随机数，生成的数字包含 0 ，但是不包含 1 12345678910111213141516171819202122var num = Math.random();console.log(num); // 得到一个随机数/* 应用场景：随机点名 */var names = [ "娄豪杰", "温亚帅", "窦全磊", "老许", "刘旭", "殷逸", "张朗", "罗慧",];var timer = setInterval(() => { let index = Math.f...
七、JS字符串"string"
ES5/String字符串的常用方法 我们操作字符串，也有一堆的方法来帮助我们操作 字符串和数组有一个一样的地方，也是按照索引来排列的 charAt、charCodeAt、indexOf、lastIndexOf、substring、substr、split、replace、toLowewrCase、toUpperCase charAt()是找到字符串中指定索引位置把内容返回,如果没有对应的索引，那么就会返回 空字符串 123var str = 'HJ'var res1 = str.charAt(1) // Jvar res2 = str.charAt(3) // '' charCodeAt()就是返回对应索引位置的 unicode 编码 123var str = 'HJ'var res = str.charCodeAt(1) // 74// 因为 `J` 在 `unicode` 对照表里面存储的是 74，所以就会返回 74 indexOf()就是按照字符找到对应的索引,找不到返回 -1 123var ...
六、JS数组[Array]
ES5/数组 什么是数组？ 字面理解就是 数字的组合 其实不太准确，准确的来说数组是一个 数据的集合 也就是我们把一些数据放在一个盒子里面，按照顺序排好 1[1， 'HJ', true, { name: "特兰克斯" }, [666]]; // 可以有 数字、字符串、布尔值、对象、数组 创建一个数组 语法：数组就是一个 []，在 [] 里面存储着各种各样的数据，按照顺序依次排好 1234/* 字面量的方式创建一个数组 */var arr = []; // 创建一个空数组var brr = [1, 2, 3]; // 创建一个有内容的数组 12345/* 使用 `js` 的内置构造函数 `Array` 创建一个数组 */var arr1 = new Array(); // 创建一个空数组var arr2 = new Array(10); // 创建一个长度为 10 的数组var arr3 = new Array(1, 2, 3); // 创建一个有内容的数组 数组的长度 length length: ...
五、JS函数（下）
函数（下）作用域（重点） 什么是作用域，就是一个变量可以生效的范围 变量不是在所有地方都可以使用的，而这个变量的使用范围就是作用域 全局作用域 全局作用域是最大的作用域 在全局作用域中定义的变量可以在任何地方使用 页面打开的时候，浏览器会自动给我们生成一个全局作用域 window 这个作用域会一直存在，直到页面关闭就销毁了 123// 下面两个变量都是存在在全局作用域下面的，都是可以在任意地方使用的var num = 100;var num2 = 200; 局部作用域 局部作用域就是在全局作用域下面有开辟出来的一个相对小一些的作用域 在局部作用域中定义的变量只能在这个局部作用域内部使用 在 JS 中只有函数能生成一个局部作用域，别的都不行 每一个函数，都是一个局部作用域 12345678910// 这个 num 是一个全局作用域下的变量 在任何地方都可以使用var num = 100;function fn() { // 下面这个变量就是一个 fn 局部作用域内部的变量 // 只能在 fn 函数内部使用 var num2 = 200;}f...
四、JS函数（上）
函数（上） 我们代码里面所说的函数和我们上学的时候学习的什么三角函数、二次函数之类的不是一个东西 函数的概念 对于 js 来说，函数就是把任意一段代码放在一个 盒子 里面 在我想要让这段代码执行的时候，直接执行这个 盒子 里面的代码就行 先看一段代码： 123456789101112// 这个是我们以前写的一段代码for (var i = 0; i < 10; i++) { console.log(i);}// 函数，这个 {} 就是那个 “盒子”function fn() { // 这个函数我们以前写的代码 for (var i = 0; i < 10; i++) { console.log(i); }} 函数的两个阶段（重点） 按照我们刚才的说法，两个阶段就是 放在盒子里面 和 让盒子里面的代码执行 函数定义阶段 定义阶段就是我们把代码 放在盒子里面 我们就要学习怎么 放进去，也就是书写一个函数 我们有两种定义方式 声明式 和 赋值式 声明式 使用 funct...
三、JS循环结构
什么是循环结构？ 循环结构，就是根据某些给出的条件，重复的执行同一段代码 循环必须要有某些固定的内容组成：初始化、 条件判断、要执行的代码、自身改变 for 循环 语法：for (var i = 0; i < 10; i++) { 要执行的代码 } 123456// 把初始化，条件判断，自身改变，写在了一起for (var i = 1; i <= 10; i++) { // 这里写的是要执行的代码 console.log(i);}// 控制台会依次输出 1 ~ 10 while 循环 while，其实就是当条件满足时就执行代码，一旦不满足了就不执行了 语法 while (条件) { 满足条件就执行 } 因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就一直循环下去了 12345var num = 0; // 初始化条件while (num < 10) { console.log("当前的 num 的值是： " + num); // 要执行的代码 num = num +...
