Js的组成：
- DOM: Document Object Model，文档对象模型，为我们操作页面元素提供了一套方法（API） ;
- BOM: Broswer Object Model,浏览器对象模型；
- ECMAScript : 规定JS的核心语法。JS语句，关键字，循环结构，分支结构等。
Js 数据类型：
- 基本（简单）数据类型：
- string 字符串
- number 数值（整数和小数）
- boolean 布尔（true | false）
- undefined 未定义
- null 空
- 复杂（复合）数据类型：
- Object
- Array 数组
- Date 日期
- Function 函数
- String 字符串对象
- Number
- Boolean
判断数据类型方式：
关键字：typeof
语法：typeof 数据（变量）
返回值 ：字符串类型
Js运算符
分类：算数运算符，关系运算符，逻辑运算符
- 算数运算符：
+（加法），-（减法），*（乘法），/（除法），%（取余），+=（等号左边的值先和等号右边的值进行相加运算在赋值给等号左侧的变量），-=（类似+=）。
++自增（--自减类似）：
- 变量前（++a）,在执行这句的时候a的值已经增加1.
var a = 3;
var b = ++a *2;
b的值为：8；
- 变量后（a++），在执行这句话后a的值才增加1，也就是说在a++出现的地方，不会对a的值造成影响。
var a = 3;
var b = a++ *2;
var c = a+1;
b的值为：6；
a的值为：5；
算数运算符的优先级:先加减后乘除，可以利用（）来改变运算顺序。
- 关系运算符：用来比较两个数值的关系，返回值为布尔值（true | false）,用于条件判断。
< 小于
>大于
<= 小于等于
>= 大于等于
==等于
！=不等于
===全等于
等于和全等于
赋值： =
等于： == 判断等号两边是否相等，只判断值是否相等；
全等于： === 判断等号两边是否相等，除了判断值是否相等，还需要判断两边的类型是否一样。
console.log(null == undefined); // true
console.log(null === undefined);// false
null 和 undefined有什么区别?
一般情况下,变量的值永远不会为null, 除非手动设置为 null。已经声明未赋值的则为undefined。当告知系统不再使用这个变量的时候，可以回收这个变量所占用的内存空间。
注意点：1.如果被比较的对象不是数值类型,编译器会先尝试进行转换为数值类型,如果不能转换,则报NaN错误；2.关系运算符不能连续使用。
- 逻辑运算符（短路运算符）
- 逻辑非 : 取反
语法: ! 表达式
结果: 布尔类型, true | false - 逻辑或: ||
语法: 表达式1 || 表达式2
结果: 不是布尔类型的
如果表达式1为真,返回表达式1
如果表达式1为假,返回表达式2 - 逻辑与: &&
语法: 表达式1 && 表达式2
结果: 不是布尔类型的
如果表达式1为假,返回表达式1，
如果表达式1为真,返回表达式2。
注意点：尽管 && 和 || 运算符能够在非Boolean环境中使用, 但如果他们的返回值能够转换成Boolean值的话,也可以认为是Boolean运算.
值类型和引用类型
- 值类型：
- 字符类型：使用单引号或者双引号进行包裹的值，例如："adg",'adg'。
- 数字类型：直接使用数字进行表示的值：1，2，3，4。
- 布尔类型：只能用来表示真假的一个数据类型，用true表示真，false表示假。
- 对象类型：Object，一种特殊的数据类型，可以拥有自己的属性和方法。
例如一个人，是一个对象，他又自己的名字属性，年龄属性，和其他一些功能。 - 未定义类型：undefined，凡是没有初始化值的变量或者系统不能够识别的值类型都会设置为undefined。
判断一个数值的类型可以通过方法typeof获得。
- 引用类型：Object Array Function Date..
区别：存储的信息不一样。值类型存储的是具体的数据，引用类型存储的是引用（地址），该地址指向具体的内存空间，这一块内存空间中存储着具体的数据。
Js赋值：
内部实现：将等号右边存储的信息复制一份给左边。
- 值类型的赋值：把右边存储的信息（具体的数据）复制一份给左边。只是简单的数据复制，相互独立，修改其中一个的数值，不会影响另外一个的数值。
- 引用类型的赋值：把右边存储的信息（指向具体数据的地址）复制一份给左边，共享同一份数据，修改其中一个对象的属性值会影响另外一个。
- 值类型作为函数的参数：实参和形参是相互独立的，没有影响（值传递）；
- 引用类型作为函数的参数：实参和形参共享同一份数据，修改其中一个对象属性的值会影响另一个（地址传递）
对象的动态特性：可以对对象做一些操作 增加/修改/删除
访问对象的属性：
- 点语法：obj.name = 'zs',如果设置的属性不存在，则是进行添加操作，如果已经存在则是修改操作。
- [ ]方括号语法：obj['name ']= 'zs',
- 使用new 创建对象:var obj = new Object(); //--> {}
in关键字的作用:
-
for in 可以用于遍历对象的属性；
-
判断对象中是否存在指定的属性。
-
in在数组中的使用:
如何判断数组中是否有某个元素？
- for 循环，有值则返回；
for (var i = 0; i < arr.length; i++) {
if(arr[i] == 9){
}
}
- indexof： 如果存在该元素就返回该元素的索引,如果不存在返回-1。
console.log(arr.indexOf(10));//-1
delete关键字的作用:
-
可以删除对象中的属性；
-
可以删除未使用var声明的变量；
-
不能删除使用var声明的变量；
-
可以删除直接定义在window上的属性；
特点：
- 有返回值,返回值是布尔类型,true表示删除成功;false表示删除失败;
- 不能删除使用var声明的变量;
- 可以删除直接定义在window上的属性。
循环和分支:
循环：
- for 循环：
for (var i = 0; i < 100; i++) {
// 循环体
}
- for..in循环：
var obj = {};
for(var key in obj){
}
- while:先判断在执行,有可能一次都不执行循环体.
var a = 10;
while (a < 0){
// 循环体
a -= 1;
}
- do..whlie:先执行后判断,至少执行一次循环体.
do{
// 循环体
}while(a<0);
分支：
-
if..else
-
switch.case
异常处理:正常情况下，程序在执行过程中如果出现了错误或者异常，出现错误或异常后面的代码不会执行，有时候我们需要保证及时程序出现了错误或者异常后面的代码也仍然可以执行，这个时候就需要使用异常处理。
结构:
try{
// 可能会出错的代码
}
catch(e){
// try大括号中的代码出现了错误会执行这个大括号中的代码
// 获取到出错的原因
// 需要对错误进行相关的处理
}
finally{
// 不管有没有出现错误,都会执行这个大括号
// 在前端开发中不会使用,在后端开发中才会使用(nodejs),一般需要在这里释放一些资源
}
}
DOM 操作
- 创建div标签
var div = document.createElement('div')
- 设置样式：
div.style.backgroundColor = 'red';
div.style.width = '300px';
div.style.height = '200px';
div.style.border = '2px solid #ccc';
- 添加元素节点
document.body.appendChild(div);
- 获取新创建的div
var div1 = document.getElementsByTagName('div')[0];
- 删除div
document.body.removeChild(div1);
函数的创建：
- 声明函数：
function 函数名(形参1,形参2...) {
// 函数体
}
- 匿名的函数表达式
var func = function () { //匿名函数
// 函数体
};
- 命名的函数表达式
var func1 = function demo() {
// 函数体
}
- 使用构造函数
var func2 = new Function("console.log('func2');");
func2();
对象的创建：
1.字面量创建对象
var obj = {name:'zs',age:20};
- 使用构造函数
var obj1 = new Object();
Math的常用方法
- Math.pow(2,7) 2的7次幂
- Math.round(.6) // 四舍五入
- Math.ceil(.6) //向上求整
- Math.floor(.6) // 向下求整
- Math.abs(-4) // 求绝对值
- Math.max(x,y,z) // 返回最大值
- Math.min(x,y,z) // 返回最小值
- Math.random() //生成一个大于0小于1.0的伪随机数.
数组的常用方法
- concat();方法参数可以多个数组,按照参数顺序拼接在调用者后-->返回一个新的数组
- unshift('g');在数组头部添加元素-->返回添加元素后的数组长度
- shift();在数组头部删除元素-->返回被移除的元素
- push('g');在数组尾部添加元素-->返回数组长度
- pop();在数组尾部删除元素-->返回被删除的元素
- splice(startIndex,deleteCount,insertValue,...);删除指定位置的元素-->返回包含被删除元素的数组
- join(),join(separatorStr);把数组元素用某个字符串串成一个字符串-->返回拼接后的字符串，对原数组没有影响,没有参数默认为逗号
- sort();数组中的元素按照ASCII码表中的顺序进行排序,先转为字符串,再进行比较
- arr.sort(function (a,b) { return a-b; }); 从小到大排列
JS获取元素值的方式
- style:通过element.style属性只可以获取元素在标签内style属性中的css样式,获取到的属性值是可读并且可写的.
- getComputedStyle:是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。尺寸单位是像素.
语法如下：
var style = window.getComputedStyle("元素", null); 第二个参数通常可以省略,或者填写null,也可以是::before或者::after来获取为元素样式
- currentStyle:是IE浏览器的一个属性，element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的<style>属性等。
getComputedStyle与style的区别
我们使用element.style也可以获取元素的CSS样式声明对象，但是其与getComputedStyle方法还有有一些差异的。
- 只读与可读写
正如上面提到的getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写，能屈能伸。 - 获取的对象范围
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认样式显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+, 而element.style就是0。
getComputedStyle与currentStyle的区别
从作用上将，getComputedStyle方法与currentStyle属性走的很近，使用形式上则style与currentStyle走的近。不过，currentStyle属性貌似不支持伪类样式获取，这是与getComputedStyle方法的差异。
例如，我们要获取一个元素的高度，可以类似下面的代码：
element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height;
网友评论