js的作用
- 客户端的数据计算；
- 表单的数据验证；
- 提供了事件；
- 网页中一切css作不了的特效，都由js完成。
js的使用
1.使用方法：
①在HTML中
<script>
js代码
</script>
②创建一个.js的文件，在里面书写js代码，最后在HTML中引用
<script src=""xx.js文件路径"></script>
2.调试语句
在控制台输出日志：console.log(想要输出的东西)
在页面上进行输出：document.write(想要输出的东西)
弹出框显示：alert(想要输出的东西)
3.js语句规范：严格区分大小写
4.js注释： 单行注释：// 多行注释：/***/
5.变量语法： var 变量名="值"
= 赋值符号，将等号右边的数据放到左边的变量名中
例：
var age=18;
console.log(age);
//输出结果为：19
注意：
变量名不能随意取，尽量的见名知意。
如果创建多个变量，中间的var可以省略，中间的（;分号）换为（,逗号），最后依然是以;分号结束。
如果是一个未声明的变量直接使用，报错；如果一个声明过的变量但是未赋值会显示：undefined
name变量名是一个关键字，里面只能
6.常量：一旦第一次赋值后，值不允许被修改
语法：const 常量名=值；
7.算术运算符：
+ - * / %
1.%：取余，俗称模，两个数相除取余
5%2==1
2%5==2 ...
作用：判断奇偶性
num%2; //结果为0说明是一个偶数
结果为1说明是一个奇数
获取某个数字的最后n位
1234%10==4
1234%100==34 ...
2.隐式转换：悄悄的转换，数据类型会发生变化，默认运算符左右两边都会悄悄变成一个数字
特殊：
1.+ 运算，只要碰上一个字符串则都为字符串
2.- * / 运算，有字符串也可以转换为数字必须包含纯数字的字符串才可以，只要包含了非数字字符则为NaN
注：NaN，Not a Number：不是一个数字，但是又确实是数字类型---不是有效的数字
NaN参与任何算术运算结果任为NaN
参与任何比较运算结果为false
8.数据类型
String--字符串，取值有无数个，必须写""或''
Number--数字，取值有无数个，直接写数字
Bodean--布尔，取值只有两个，true和false，主要用于怕判断比较
Undefined--取值只有一个默认值undefined
Null--空，取值只有一个null，用于释放变量，节约内存空间
数据类型的转换
1.算术运算符的隐式转换：其他运算符也有，只要是算术运算符就一定带有转换，默认会将左右两边的转换为数字，再运算。
特殊：
1.+ 运算，只要碰上一个字符串则都为字符串
2.- * / 运算，有字符串也可以转换为数字必须包含纯数字的字符串才可以，只要包含了非数字字符则为NaN。
3.部分结果转换为数字的结果：true==1
false==0
undefined==NaN
null==0
4.NaN:Not a Number：不是一个数字，但是又确实是数字类型---不是有效的数字
缺点： NaN参与任何算术运算结果任为NaN
参与任何比较运算结果为false
问题： !isNaN(x)--判断x是不是一个有效数字
true--说明是一个有效数字
false--说明是一个NaN
2.强制/显示转换：隐式转换的结果不是我们所想要的，可以通过手动调用某些方法，进行数据类型的转换后再运算。
转为字符串
语法：
var str=x.toString();//x不能是undefined和null
转数字
1.var unm=parseInt(str/num);
例：console.log(parseInt(35.5));//输出为35
从左向右依次读取每个字符，进行转换，碰到非数字字符就停止，且不认识小数点，如果一开始就碰到了不认识的字符结果为NnN
2.var num=parseFloat(str);
例： console.log(parseFloat(35.5));//结果为35.5
原理和parseInt一摸一样，但是认识小数点。
3.Number(x);任何人都可以转为数字，完全是隐式转换，不如使用运算符。
函数
1.函数也称为方法，需要预定义提前创建好后可以反复使用的代码段。
2.创建函数并且调用函数
第一步
创建
function 函数名(){
若干代码段段
}
第二步
调用
1.直接在js中写函数名()
2.绑定在页面的元素上，让用户来触发，用户触发一次就执行一次
3.带参数的函数
1.创建带有参数的函数
形参：就是一个变量名，只不过这变量名不需要var,并没有保存真正的值，形式参数，简称形参
function 函数名(形参，...){
函数体;
}
2.调用带参数的函数
实参：实际参数，这个变量名所保存的值。
函数名(实参，...)
实现任意两个数相加：
function add (a,b){
console.log(a+b);
}
带参数的函数，在调用时传入的实参的顺序和个数都要一一和行参对应上
分支结构
1.流程控制语句
1.顺序机构：从上向下一步一步执行
2.分支/选择结构：根据条件，选择一部分代码执行
3.循环结构：根据条件判断是否需要再一次重复的执行
2.比较运算符
> < >= <= == !=
作用：比较判断/条件中出现
结果：结果一定是一个布尔值。具有隐式转换
if结构
1.一个条件一件事
if (条件){
操作
}
2.一个条件2件事
if (条件){
1
}else{
2
}
3.多个条件多件事
if (条件1){
1
}else if(条件2){
2
}else{
3
}
循环结构
循环三要素
1.循环条件：开始，结束，重复执行的次数
2.循环体：循环操作，干什么事
3.循环变量：自增，自减
while循环：
语法：
var 循环变量=几；
while (循环条件){
循环体；
循环变量的变化；
}
死循环：
while (true){
循环体；
}
退出循环：break；
一般用于 循环次数不明确的情况，死循环
for循环：
语法：
for(var 循环变量=几;循环条件;循环变量的变化){
循环体;
}
特殊：1、死循环：for(;;){循环体}
2、创建循环变量部分，也可以，隔开创建多个变量
一般用于 已经确定了循环次数的情况
数组
数组中的每个元素都有一个唯一的位置序号，称之为【下标】，用来表示数组中的每一个元素，下标是从0开始的，到最大长度-1结束 1、创建数组：2种方式
1、直接量方式：var arr=[];//空数组
var arr=[元素,元素,...];
2、构造函数方式：var arr=new Array();//空数组
var arr=new Array(元素,元素,...);
2、访问数组中的元素：数组名[下标];
3、添加/修改数组中元素：数组名[下标]=新元素; 4、数组唯一的一个属性：length长度
语法：数组名.length;
三个固定套路：
1、永远希望想末尾添加元素：arr[arr.length]=新值;
2、获取倒数第n个：arr[arr.length-n];
3、缩容：删除数组的倒数n个：arr.length-=n
5.遍历数组：把数组中的每一个元素都取出来执行相同 或 相似的操作
公式：
for(var i=0;i<数组名.length;i++){
数组名[i];//当前次拿到的数据
}
DOM树
DOM将HTML看做了是一个倒挂的树状结构，但是树根不是理解的HTML标签
树根：是一个document对象，document对象不需要我们程序员创建，由浏览器的JS解释器创建，一个页面只有一个document
作用：提供了一些属性和方法，可以让我们程序员去操作整个DOM树（增删改查每一个DOM节点）
DOM节点：一个标签、文本、属性、元素
查找元素
1、通过HTML的特点去查找元素
1. id查找：var elem=document.getElementById("id值");
返回：找到了，返回对应的元素
没找到，null
在当前DOM树中，根据元素的id，获取具体的DOM节点（后端工程师使用）
2. 标签名查找：var elems=document/已经找到的父元素.getElementsByTagName("标签名");
返回：在当前DOM树中，根据标签名获取元素们
返回：找到了，返回一个DOM集合
没找到，空数组
特殊：1、返回的不是一个DOM节点，而是一个DOM集合，是不能直接用来做操作的，要么使用下标拿到某一个，要么使用遍历拿到全部
2、不一定非要从树根开始查找元素，也可以写一个你已经找到的某个父元素
3.class查找：var elems=document/已经找到的父元素.getElementsByClassName("标签名");
在当前DOM树中，根据标签名获取元素们
返回：找到了，返回一个DOM集合
没找到，空数组
特殊：1、返回的不是一个DOM节点，而是一个DOM集合，是不能直接用来做操作的，要么使用下标拿到某一个，要么使用遍历拿到全部
2、不一定非要从树根开始查找元素，也可以写一个你已经找到的某个父元素
2.节点之间的关系进行查找：前提：必须先要找到一个人，才能使用关系
父：elem.parentNode;//单个元素
子：elem.children;//集合
第一个儿子：elem.firstElementChild;//单个元素
最后一个儿子：elem.lastElementChild;//单个元素
前一个兄弟：elem.previousElementSibling;//单个元素
后一个兄弟：elem.nextElementSibling;//单个元素
操作元素
<标签名 属性名="属性值" style="样式">内容</标签名> 1、内容：
1、innerHTML属性：获取 或 设置 某个元素的内容，并且可以识别标签
获取内容：elem.innerHTML;
设置内容：elem.innerHTML="新内容";
2、innerText属性：获取 或 设置 某个元素的文本，不能可以识别标签
获取内容：elem.innerText;
设置内容：elem.innerText="新内容";
3、value属性：专门为单标签（input）操作内容准备的
获取内容：input.value;
设置内容：input.value="新内容";
2、属性：HTML属性：id、class、title、alt、style、type、href...只要是放在HTML标签上的都是一个属性
1、获取属性值：elem.getAttribute("属性名");
2、设置属性值：elem.setAttribute("属性名","属性值");
简写：
1、获取：elem.属性名;
2、设置：elem.属性名="属性值";
缺陷：1、不能操作自定义属性，只能操作标准属性
2、class在ES6升级为了一个关键字，所以想要写class换为了className
3、样式：
1、css定义的方式：
1、内联样式 - 二阶段
2、内部样式表
3、外部样式表 - 最适合写样式的时候使用此方法
2、JS操作内联样式的好处：
1、优先级最高，写的JS样式必定生效
2、一次只会操作一个元素，不会牵一发动全身
3、语法：
获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";
特殊：1、css属性名，要把有横线地方，换成小驼峰命名法
2、获取的时候，代老湿只交了大家获取内联样式，不能获取样式表中的样式
4、元素绑定事件：
单个元素：
elem.onclick=function(){
操作;
this->单个元素绑定事件，this->elem绑定事件的这个元素
}
多个元素：
for(var i=0;i<elems.length;i++){
elems[i].onclick=function(){
操作
this->多个元素绑定事件，this->当前触发事件的元素
}
}
