14-面向对象
面向对象一、对象的重要性在js内部，也就是js的底层，对所有数据的处理，都是以对象形式来进行的，所以，js中所有数据都有两种定义方式： 字面量方法 字面量方式，就是直接定义，让我们可以一目了然的看出，这个数据的类型。例如： 1234var num = 10var str = 'abcdef'var bool = true... 这种定义方式，我们可以一眼就看出这是什么类型的数据。 构造函数方式 12345var arr = new Array()var obj = new Object()var num = new Number()var str = new String()... 这种通过new的方式来定义对象的方式，就叫做构造函数方式。 这种方式定义的数据，也是可以像字面量方式定义的数据一样，进行数学运算、字符串拼接等操作的。例： 1234567var num = new Number(10)num += 5console.log(num) // 15var str = new String('abcd')str += 'e ...
13-DOM高级
DOM高级我们在实际开发中，页面中有很多需要用到动画的效果，如果每一个效果都需要我们手动创建定时器来写的话，的，代码会冗余，逻辑也会变得很复杂，所以我们需要手动封装一个专门用于执行动画的函数。 以一个div点击后执行动画为例来封装。 一、简单的运动html布局s 1234567891011<style>.box{ width: 100px; height: 100px; background-color: pink; position:absolute; left: 0; top: 0;}</style><div class="box"></div> js代码 123456789101112131415161718192021var box = document.querySelector(".box");// 点击div让div向右移动200pxbox.onclick=function(){ // 获取当前样式 var ...
12-正则表达式
正则表达式一、概念用于规范字符串的表达式。 对字符串的作用有三： 验证字符串是否满足某种规则 从字符串中满足规则的部分提取出来 将字符串中满足规则的部分替换成新的部分 正则表达式，其实就是上述作用中提到的规则。 二、定义规则的定义方式有两种： 12var reg = /具体的规则/var reg = new RegExp(规则字符串) 我们要学习的终点，就是具体规则的语法。 三、组成部分具体规则的组成部分分为2部分： 字符：表示字符串组成部分的字符 普通字符：普通字符串中的字符 元字符：具有特殊含义的特殊字符 修饰符：修饰字符的规则 例： 1var reg = /a{2}/ // 这个规则表示字符串中必须要有2个a字符 四、使用1、验证字符串正则表达式有独属于自己的使用方法，test方法是用来验证字符串是否满足某种规则的，使用语法： 1reg.test(被验证的字符串) test方法返回布尔值，表示字符串是否满足规则。 例： 12345678var reg = /a{2}/var str1 = 'abc'va ...
11-this关键字和ES6
this关键字和ES6一、this关键字1、this关键字的含义1.1、全局的this1console.log(this) 1.2、普通函数的this12345function fn() { console.log(this)}fn() 所谓普通函数，指的是直接拿函数名称调用的函数。 1.3、自调用函数中的this123(function() { console.log(this)})() 1.4、定时器中的this123setTimeout(function() { console.log(this)}, 1000) 1.5、事件函数中的this1234<button id="btn">按钮</button>btn.onclick = function() { console.log(this)} 1.6、对象方法中的this123456789var obj = { name: '张三' ...
10-事件
事件一、事件复习事件三要素： 事件源 + 事件名称 + 事件处理程序 事件源 : 谁触发这个事件 (按钮 btn) 事件名称 : 触发了什么事件 (点击click事件) 事件处理程序 : 事件触发后要执行的代码(函数形式)—-可以是有名字的函数，要不要加小括号？不加 1、事件类型1.1、鼠标事件 事件 描述 click 左键单击 contextmenu 右键单击 dblclick 双击 mousedown 左键按下 mouseup 左键弹起 mouseover 鼠标放上去（在子元素上也会触发） mouseout 鼠标离开 mouseenter 鼠标放上去 mouseleave 鼠标离开 mousemove 鼠标移动事件 mousewheel 鼠标滚轮事件 案例：星星评分 1234567891011121314151617181920212223242526272829<body><img src="./images/rank_3.gif" alt="">< ...
09-BOM and DOM
BOM和DOM js的组成部分 前面学习的部分是ECMAScript部分，都是基础语法部分。基础语法只是规定的代码如何写，并不能实现很多主流的操作，比如跳转页面，获取浏览器的尺寸等操作。再比如让HTML中的元素动起来。 所以需要学习BOM来操作浏览器。学习DOM来操作HTML标签。 一、BOM1、BOM介绍BOM是三个单词的首拼–Browser Object Model，即浏览器对象模型。 所谓对象模型，指的是用对象来描述的一个结构。 BOM意思是通过对象组成的结构来操作浏览器的。 window对象中包含的对象 2、浏览器的历史记录历史记录的操作是window的子对象history。可以操作网页的前进和后退。 123history.back(); # 返回到上一个页面，相当于浏览器的后退按钮history.forward(); # 前进到下一个页面（下一个页面必须是点击以后的页面），相当于浏览器的前进按钮history.go() 3、浏览器的地址栏信息浏览器的地址栏操作，window对象交给了自己的子对象location对象去处理。 123conso ...
08-Math and Date
一、数学处理1、Math常用API 圆周率 1Math.PI // 3.1415926535 生成随机数 1Math.random() 生成的是0~1之间的随机小数，通常在实际项目中需要获取到一个范围内的随机整数，利用这个随机小数封装一个获取范围内的随机整数的函数： 123456789function getRandom(a,b){ var max = a; var min = b; if(a<b){ max = b; min = a; } return parseInt(Math.random() * (max - min)) + min} 向上取整 向上取整的含义是一个数字的小数部分不够1，将他处理成1。例如：10条数据每页展示3条，前3页都能放3条数据，但是第4页只能放1条数据，虽然占不满1页，但也要占1页 1Math.ceil(3.3) // 4 向下取整 向下取整跟parseInt()是一个意思，只要整数部分，舍掉小数部分得到整数 1Math.floor(3.9) // 3 ...
07-字符串
ES5和字符串一、ES5的语法js在产生的时候，年代比较早，当时的web需求比较少，所以刚开始的js功能比较少，语法没有特别严谨。随着时代的发展和web应用的普及，js需要更多的功能，以及更严谨的语法，所以，js会有版本的升级。第一版的js是ECMA一开始统一了标准以后的版本。我们现在的所使用的语法，大多是ECMAScript版本3的语法，简称es3。到目前为止，已经有了es7,8,9,甚至es10 的版本了。近几年，基本每年都会有新的版本更新。 每个版本的更新，都需要浏览器支持才能运行，但浏览器不会在js更新之后，立马更新。所以有的版本出来之后，需要在很长时间之后，浏览器才会兼容他。到目前为止，我们公认，es5是兼容性最好的版本。 es5比起我们所正在使用的es3，语法没有什么变化，增加了一个严格模式，还有一些数组的方法。 1、严格模式1.1、概念由于js的作用域和隐式声明变量等语法会造成很多预想不到的错误，所以ES5中新增了一个严格模式的语法，用于严格规范代码的书写。 1.2、语法使用语法： 1"use strict"; 使用说明： 要放在代码的最前面，也就 ...
06-数组
数组一、概念对象中可以通过键值对存储多个数据，且数据的类型是没有限制的，所以通常会存储一个商品的信息或一个人的信息： 1234567891011var obj = { goodsname:"手机", price:"5000", introduce:"手机很时尚，很漂亮！"}var person = { name:"张三", age:12, sex:"男"} 但对象在存储同类型数据的时候比较困难，例如，存储一个班级所以人的姓名： 123456var obj = { name1:"张三", name2:"李四", name3:"王五", ...} 这种存储方式我们没有办法通过一个人的姓名获取到这个人的编号，也没有办法通过一个编号获取到某个人的姓名。 js提供了另外一种对象类型的数据，可以通过编号来存储数据：数组 ...
05-函数（下）
函数-下一、作用域能起到作用的区域就叫做作用域。定义在不同区域的变量，他的作用域是不一样的。 不在任何一个函数中定义的变量叫全局变量。他的作用域是定义之后的所有文档区域。 例： 12345678910<script>var a = 10</script><script>console.log(a); // 后面的script标签能用function fn(){ console.log(a); // 后面的函数中能用}fn()</script> 在函数中定义的变量叫局部变量。他的作用域是当前这个函数中，函数外不能使用。例： 12345function fn(){ var a = 10}fn()console.log(a); // 报错：a is not defined 如果全局和局部都有同名的变量，局部输出时如何输出呢？ 123456var a = 10;function fn(){ var a = 20; console.log(a) // 20}fn ...
