一、js的使用
1、内部
在html页面上写 <script>js代码</script>
2、外部
创建一个xx.js文件，在文件内写js代码，在HTML页面中引入文件
<script src="xx.js文件路径">通过这种方式，此处就不要再书写代码</script>
3、js的调试语句（输出）
在控制台输出：console.log()；
弹出框输出：alert();
注：这种方式会卡住页面，必须关闭后用户才能看到html和css
在页面上进行输出：document.write();
注：如果绑定了事件会将页面上所有的内容全部替换掉
二、变量和常量
1、变量
语法：var 变量名 = 值;
变量值可以改变，将数据保存到一个变量中，使用变量名就相当于在使用变量值
只声明变量不赋值默认为undefined
变量名字要做到见名思意
2、常量
语法：const 常量名 = 值 ;
常量一旦初始化（赋值）后，值不会被修改
三、算数运算符（+ - * / %）
等同于数学中运算符，但是%在这里是取余（取模）运算
%可以用来判断奇偶性
num%2结果为0为偶数，结果为1是奇数
%可以用来获取某个数字的最后几位
1234%10->4 ; 1234%100->34 ; 1234%1000->234
四、数据类型转换
1、隐式转换
a、算数运算带有隐式转换
默认将运算符两边转换为数字再运算
特殊：1、+运算只要碰到一个字符串会变成拼串操作
2、- * / % 有字符串也会变成数字，但必须是纯数字型字符串，只要包含一个非数字字符结果则为NaN(NaN：意思是不是一个数字，但却是一个Number类型，NaN参与任何算数运算结果都为NaN；NaN参与任何比较运算结果都为false)
某些类型转换为数字结果
true->1;false->0;undefined->NaN;null-> 0;"100"->100;"10a0"->NaN
判断是不是一个有效数字！isNaN();结果为true是一个有效数字，为false不是一个有效数字
2、显示转换（主要针对字符串）
a、转字符串
语法： var str =x.toString();
注：x不能是undefined和null，他们不能进行.操作；页面上获取到的数据默认为字符串类型
b、转数字（主要针对字符串）
1、var num =parseInt/float(str);
原理：从左向右依次读取每个字符，进行转换，碰到非数字字符就会停止，Int不可以识别小数点，float可以识别第一个小数点。如果一来就识别到不认识的字符则为NaN.
2、 var num = Number(x); x可以是万能的，任何人都可以转为数字，此方法等同于隐式转换（*1；/1；-0）
五函数
完成一个功能，也称之为方法，需要预定义，可以反复使用的代码块
1、创建一个函数
语法：function 函数名（形参1...）{
若干代码段（函数体）
}
2调用
函数名();
绑定在页面元素上：elem.onclick=function(){ 函数体 }
六js中的数据类型
原始数据类型：String Number Boolean undefined Null
引用数据类型：对象Object
七、比较运算符
= >;<;>=;<=;==;!=一般在比较判断中出现，结果返回一个布尔值，比较运算符也具有隐式转换大部分情况下转换为数字进行比较
八、逻辑运算符
&&：只有全部条件都满足，最后结果才为true，只要有一个条件不满足结果为false
||：只有全部条件都不满足，最后结果才为false，只要有一个条件不满足结果为true
！：颠倒布尔值
九if语句
1、一个条件一件事：满足就做不满足就不做
语法：if（条件）{
操作语句
}
2、一个条件两件事：满足就做第一件，不满足就做第二件
语法：if(条件){
操作语句
}else{
操作语句（默认操作）
}
3、多个条件，多件事，满足谁就做谁
语法：if(条件1){
操作语句1
}else if（条件2）{
操作语句2
}else if（条件3）{
操作语句3
}else{
默认操作（最后的else可以写也可以不写，但如果条件都不满足则什么都不会之行）
}
十、循环语句（根据条件满不满足，如果满足就会一直做操作，直到条件不满足才会停止）
1、while循环
语法：var 循环变量=n;
while(循环条件){
循环体；
循环变量变化；
}
2for循环
语法：for(var 循环变量=n;循环条件；变量的变化){
循环体
}（创建循环变量时，可以创建多个用，隔开）
3、死循环
while的条件写死为true，for循环（）内只写；；
4、break
退出循环，死循环多半要搭配他使用
十一、数组
希望一个变量可以保存多个值
数组中的元素都是按照线性顺序排列
数组下标：数组中的每一个元素都有唯一的位置序号，称为数组下标，下标从0开始到最大长度-1结束
1、创建数组
a、直接量方式
语法：var arr=[];
var arr=[数据，数据，...];
b、构造函数方式
语法：var arr=new Array();
var arr=new Array(数据，数据，...);
2、获取/访问数组元素
数组名[下标]
3、添加修改数组元素
数组名[下标]=新元素
4、length属性
数组名.length
希望向末尾添加元素：arr[arr.length]=新元素
获取倒数第n个元素：arr[arr.length-n]
缩容：删除数组倒数n个元素：arr.length-=n;
5、遍历数组
for(var i=0;i<数组名.length;i++){
数组名[i];
}
十二、DOM
DOM树
DOM将HTMl看作一个倒挂的树状结构，但树根不是HTMl标签而是一个document对象，document不需要我们创建由浏览器的js解析器负责创建，一个页面只有一个document
1、查找元素
a、通过id查找
语法：var elem=document.getElementById("id值"); - 单个元素，没找到为null
b、通过标签名查找
语法：var elems=document/parent.getElementsByTagName("标签名"); - 集合，没找到为空集合
c、通过class名查找
语法：var elems=document/parent.getElementsByClassName("class名"); - 集合，没找到为空集合
d通过节点关系查找元素
父：elem.parentNode;
子：elem.children; - 集合，没找到为空集合
第一个元素儿子：elem.firstElementChild;
最后一个元素儿子：elem.lastElementChild;
前一个元素兄弟：elem.previousElementSibling;
后一个元素兄弟：elem.nextElementSibling;
2、操作元素
1、操作内容
a、innerHTML/innerText
innerHTML/innerText（innerText不能识别标签）
获取：elem.innerHTML
设置：elem.innerHTML="新内容"
b、value（转为input准备的）
获取：input.value;
设置：input.value="新内容“；
2、操作属性
获取：elem.getAttribute("属性名") 简化：elem.属性名
设置：elem.setAttribute("属性名","属性值") 简化：elem.属性名="属性值"
简化版有两个小缺陷：1、自定义属性不能操作2、class必须写为className
建议：优先使用简化版，简化版做不到的操作在用复杂版代替
3、操作样式
JS就要操作【内联样式】
取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";
特殊：css属性名有横线的地方要去掉横线变为小驼峰命名法
获取的目的往往都是为了判断，设置的目的就是修改
4、元素的绑定事件
1、单个元素：elem.onclick=function(){
//关键字this的指向->这个元素
}
2、多个元素： for(var i=0;i<elems.length;i++){
elems[i].onclick=function(){
//关键字this的指定->当前元素：当前你触发事件的元素
}
}
