1. JS概念

一个运行在客户端浏览器的【解释型（不检查错误，直接运行，碰到错误就停止）】【弱类型（数据类型由数据决定）】【面向对象】脚本语言

使用

1、直接在HTML页面上写一个script标签，里面就可以书写你的js代码

<script>js代码</script>

2、外部js，进行引入

1、创建一个xx.js的文件，里面书写js代码 2、在HTML页面引入 <script src="js文件路径"> 只要有了src属性，此处就不可以在写代码了 </script>

2. 变量和常量

将重复使用的数据保存到变量中

- 变量

值可以改变 var 变量名=值;

注意

1. 变量名不能以关键字命名、数字开头，建议下划线命名或者驼峰命名，不建议单字母或单字母加数字等无意义变量名
2. 如果变量名是“name”，保存的数据会变成字符串
3. 创建多个变量可以简写var 变量名1=值1,变量名2=值2,...

- 常量

一旦创建，值不允许改变 var 常量名=值;

3. 算数运算符

加+、减-、乘*、除/、取余%

取余用法

1. 判断奇偶性：num%2,结果为0是偶数，结果为1是奇数
2. 判断数字倒数n位（拆解数字）

1234%10 	->	4
1234%100	->	34
1234%1000	->	234

注意

1. “+”：如果左右两边有一个字符串，会让两边都成为字符串，“+”变成了字符串的拼接
2. “减-、乘*、除/、取余%”：如果是纯数字的字符串，计算时会自动变为数字，如果有非数字字符会转为NaN

4. 数据类型

原始/基本/值类型：5个

1. Number

数字，取值无数个

2. String

字符串，取值无数个，需要带上‘’或者“”

3. Boolean

布尔，取值true/false，用于判断比较的条件时使用

4. Undefined

未定义，取值undefined，创建变量为赋值时出现

5. Null

空，取值null，用于释放变量/内存，节约空间

引用/对象类型

11个引用类型的对象

5. 数据类型转换

不同数据类型做操作结果不同，JS获取页面上的数据是，默认是字符串。查看数据类型用typeof(想要查看的东西)

算数运算的隐式转换

1. 运算时默认转为数字
2. “+”运算时遇到字符串就拼接
3. “减-、乘*、除/、取余%”运算时，字符串也能转为数字，前提字符串是纯数字组成的
4. 其他数据类型也能转为数字

true -> 1
false -> 0
undefined -> NaN
null -> 0
"1000" -> 1000
"1000x" -> NaN

5. NaN:不是一个数字但是数字类型。可以用!isNaN(x)来判断x的值是否是一个有效数字，true即为是

强制转换

1. 转字符串

var str=x.toString();//页面上的一切数据默认都是字符串类型
//x不能是undefined和null，undefined和null不能使用.

2. 转数字

var num=parseInt/Float(str);
console.log(parseInt(100.5));//100
console.log(parseInt("100.5"));//100
console.log(parseInt("100px"));//100
console.log(parseInt("1px00"));//1
console.log(parseInt("px100"));//NaN
console.log(parseInt(true));//NaN
console.log(parseInt(false));//NaN
console.log(parseInt(undefined));//NaN
console.log(parseInt(null));//NaN

var num=Number(x);//万能的，但完全等效于隐式转换，不如-0 *1 /1 %1

6. 函数基础

function

函数，称之为方法，需要【预定义】，可以【反复使用】的【代码段】

使用

1. 创建函数

function 函数名(形参列表,...){
    函数体;
}

2. 调用/使用函数

函数名(实参列表,...);
elem.onclick=function(){
    函数名(实参列表,...);
}

7. 分支结构

根据条件选择部分代码执行

一个条件，一件事，满足就做，不满足就不做
if(条件){
    操作
}

一个条件，两件事，满足就做第一件，不满足就做第二件
if(条件){
    操作
}else{
    默认操作
}

多个条件，多件事，满足谁就做谁
if(条件1){
    操作1
}else if(条件2){
    操作2
}else{
    默认操作
}

比较运算符

">" "<" ">=" "<=" "==" "!="

逻辑运算符

且"&&" 或"||" 非"!"

8. 循环

根据条件判断是否重复操作

三要素

1. 循环条件：循环次数
2. 循环体：每次循环的操作
3. 循环变量：记录循环次数，向不满足条件的方向前进

while循环

先判断条件，条件满足做一次循环，不满足退出

var 循环变量=值;
while(循环条件){
    循环体;
    循环变量变化;
}

死循环：不确定循环次数时使用，用break退出循环

while(1){
    循环体;
    break;
}

for循环

for(var 循环变量=值;循环条件;变量的变化){
    循环体;
}

死循环：   
for(;;){
    循环体;
    break;
}

while和for的区别

语法上有区别，但两者都能做到相同的操作

一般不确定循环次数的时候，会使用while循环 - 死循环

一般确定循环次数的时候，就用for循环 - 更漂亮更简洁，大部分情况都会使用它

9. 数组

一个变量可以保存【多个数据】的集合

每个元素都有一个自己的位置，称之为叫做下标，下标是从0开始的，到最大长度-1

创建数组

var arr=[数据,...];
var arr=new Array(数据,...);

访问

数组名[下标];

添加/替换

下标处有没有元素，如果没有则为添加，如果有了就为替换

数组名[下标]=新值;

数组三大不限制

1. 不限制元素的个数
2. 不限制元素的类型
3. 不限制元素的下标越界

如果获取元素，下标越界，返回的一个undefined

如果添加元素，下标越界，会得到一个稀疏数组，导致下标不再连续，如果搭配上循环去遍历每一个元素的话，我们会得到很多很多的undefined

遍历数组

数组中唯一的属性：长度：数组名.length 获取当前数组的长度：最大下标+1

三个固定套路：

1. 获取倒数第n个元素： arr[arr.length-n]
2. 始终向末尾添加元素：arr[arr.length]=新值;
3. 缩容：删除倒数n个元素 arr.length-=n

遍历数组公式：

for(var i=0;i<数组名.length;i++){
    arr[i];
    console.log(数组名[i]);
}

10.DOM

Document Object Model：文档对象模型：专门用于操作HTML文档的

DOM树

概念

DOM将我们的HTML看做了是一个倒挂的树状结构，但是树根不是html标签，而是document对象

document对象

不需要我程序员创建的，由浏览器的js解释器自动创建，一个页面只有一个document

作用

可以通过树根找到任何一个DOM元素/节点/对象（属性和方法）

DOM会将页面上每个元素、属性、文本、注释当作一个DOM元素/节点/对象

查找元素

标签名/class名：var elems=document/已经找到的父素.getElementsByTagName/ClassName("标签名")

通过ID（不建议使用）

var elem=document.getElementById("id值");

注意：多个相同的id只会返回第一个，没找到返回null。直接写ID也可以找到元素

通过标签名

var elems=document/已经找到了的父元素.getElementsByTagName("标签名");

注意：返回的是一个类数组DOM集合，没找到返回空集合，所以不能直接操作DOM集合，要用遍历或者下标找到元素。

通过class名

var elems=document/已经找到了的父元素.getElementsByClassName("标签名");

注意点与标签名相同。

通过关系

前提条件：必须找到一个元素才可以调用

父元素：elem.parentNode; 
子元素：elem.children; - 集合
第一个儿子：elem.firstElementChild;
最后一个儿子：elem.lastElementChild;
前一个兄弟：elem.previousElementSibling;
后一个兄弟：elem.nextElementSibling;

操作元素

找到元素才能操作元素

<标签 属性名="属性值" style="样式">内容</标签>

内容

1. innerHTML：获取和设置开始标签到结束标签之间的内容 - 支持识别标签

获取：elem.innerHTML;

设置：elem.innerHTML="新内容";

2. innerText：获取和设置开始标签到结束标签之间的文本 - 不支持识别标签

获取：elem.innerText;

设置：elem.innerText="新文本";

3. value：专门为input的value值准备的

获取：input.value;

设置：input.value="新值";

属性

获取属性值：elem.属性名;

设置属性值：elem.属性名="新属性值";

缺陷： 1、class必须写为className - 2015年过后，ES6诞生过后，class变成了一个关键字

2、不能操作自定义属性，只能操作标准属性

样式

获取：elem.style.css属性名;

设置：elem.style.css属性名="css属性值";

css属性名，有横线的地方，去掉横线，变为小驼峰命名法 border-radius -> borderRadius

使用方式

1. 内联/行内样式
2. 内部样式表
3. 外部样式表

绑定事件

elem.on事件名=function(){
    操作;
    this关键字：目前只能用于事件内：
        单个元素绑定事件：this->这个元素
        多个元素绑定事件：this->当前触发事件的元素
}