一、认识 BOM 浏览器对象模型（Browser Object Model），简称BOM，由浏览器提供的用于处理文档之外的所有内容的其他对象，比如 navigator、 location、 history 等对象。 JavaScript 有一个非常重要的运行环境就是浏览器，而且浏览器本身又作为一个应用程序需要对其本身进行操作；所以通常浏览器会……

阅读全文

一、认识事件处理 web 页面需要和用户之间进行交互，而交互的过程中需要捕捉交互的过程； 比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置； 浏览器需要搭建一条 JavaScript 代码和事件之间的桥梁； 当某个事件发生时，让 JavaScript 可以响应（执行某个函数），所以需要针对事件编写处理程序。……

阅读全文

一、动态创建列表 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <h1>动态创建列表</h1> <ul class="list"></ul> <script> var listEl = document.querySelector(".list") var isFlag = true while (isFlag) { var message = prompt("请输入信息：") if (!message) { isFlag = false } else { var liEl = document.createElement("li") liEl.textContent = message listEl.append(liEl) } } </script> 二、动态时间 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20……

阅读全文

一、元素的特性 attribute Attribute分类 HTML标准制定的attribute，称之为标准Attribute 自定义的Attribute，称之为非标准Attribute Attribute操作 hasAttribute： 判断是否有该属性 getAttribute： 获取属性 setAttribu……

阅读全文

一、什么是DOM 文档对象模型 Document Object Model，简称 DOM，将页面所有的内容表示为可以修改的对象。 浏览器会对 html，css 进行渲染，同时又要考虑可能会通过 JavaScript 来对其操作，于是浏览器将 html 的每一个元素都抽象成了一个个对象； 所有对象都可以通过 JavaScript 来对其进行访问，就可以通过 JavaScript 来操作页面，所以将……

阅读全文

一、手写forEach 先调用一下数组的forEach()方法 1 2 3 4 5 var names = ["aaa", "bbb", "ccc"] names.forEach(function (item) { console.log(item) // aaa bbb ccc }) 根据以上分析： 数组的原型上有个方法可供所有数组调用 这个方法接受一个回调方法 回调方法执行代码 基于以上分析实现forEach方法，不考虑this的指向问题： 1 2 3 4 5 6 7 8 9 10 11 12 13 14……

阅读全文

一、数组类型 Array 创建方式 字面量 1 2 3 4 5 6 7 var names = ["aaa", "bbb", "ccc"] var products = [ {id: 100, name: "鼠标", price: 88, count: 0}, {id: 101, name: "键盘", price: 200, count: 0}, {id: 102, name: "耳机", price: 99, count: 0}, ] 类Array 1 2 3 4 5 6 7 8 var arr1 = new Array() var arr2 = new Array("aaa", "bbb", "ccc") var arr3 = new Array(5) // 传入一个数字，默认创建一个对应长……

阅读全文

一、认识包装类型 JavaScript 的原始类型并非对象类型，是没有办法获取属性或者调用方法的，为了使其可以获取属性和调用方法，对其封装了对应的包装类型。 但通常JavaScript引擎会进行很多优化，可以跳过创建包装类型的过程在内部直接完成属性的获取或者方法的调用。 包装类型的使用过程： 默认情况下，调……

阅读全文

一、对象类型的使用 创建方式 字面量 1 2 3 4 5 6 7 8 9 10 11 12 13 var person = { name: "Mocha", age: 18, height: 1.88, intro: function () { console.log(`name:${this.name}, age:${this.age}, height: ${this.height}`) } } console.log(person.name) // Mocha console.log(person.age) // 18 console.log(person.height) // 1.88 person.intro() // name:Mocha, age:18, height: 1.88 new Object 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var person = new Object() person.name = "Mocha" person.age = 18 person.height = 1.88 person.intro = function () { console.log(`name:${this.name}, age:${this.age}, height: ${this.height}`) } console.log(person.name) // Mocha console.log(person.age) // 18 console.log(person.height) // 1.88 person.intro() // name:Mocha, age:18, height: 1.88 new 其他类 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function……

阅读全文

一、函数的声明和调用 声明函数： 封装独立的功能 调用函数： 享受封装的成果 参数： 形式参数、实际参数 返回值：return 注意： 函数的命名规则与变量的命名规则一致，最好做到见名知意，动词居多(表示行为) 函数定义完后不会执行，必须调用才会执行 计算和 1 2 3 4 5 6 7 8 9 10 11 function sumN() { var sum = 0 for (var i =……

阅读全文