第一周学习复习
javescript的两种使用方式
1、在HTML页面写上一个标签： - 临时测试/上课用
<script>
js代码
</script>
2、创建一个xx.js文件，在里面书写js代码，最后在HTML页面引入
<script src="xx.js文件路径">//此处不再支持书写代码了</script>
1.js三种输出方式
console.log(); 打桩
document.write(); 缺点：如果绑定事件过后会替换掉页面所有东西
alert(); 缺点:会卡住页面
2.变量和常量
变量语法：var 变量名=变量值；
常量语法：const 常量名=常量值；
常量值一点设置后不可以修改
js的两种使用方式
1、在HTML页面写上一个标签：
<script>
js代码
</script>
2、创建一个xx.js文件，在里面书写js代码，最后在HTML页面引入
<script src="xx.js文件路径">//此处不再支持书写代码了</script>
算数运算符
+ - * / %
数据类型
1、原始/基本/值类型：String、Number、Boolean、Undefined、Null
2、引用/对象（属性和方法）类型：11种 - Array/Function
数据类型的转换
一、隐式转换
1、算术运算带有隐式转换：默认转为数字，在运算 特殊：1、+运算，如果碰到字符串，变成了拼接操作 2、-*/%，字符串可以转为数字，但是纯数字组成的，但凡包含一个非数字字符，则为NaN 3、true->1 false->0 undefined->NaN null->0 4、NaN：不是一个数字，但是是数字类型
二、显示转换/强制转换
1、转字符串：
var str=x.toString();//x不是undefined和null，因为undefined和null不能使用.
页面上获取到的数据默认都是字符串类型
2、转数字：
var num=parseInt/Float(str);//专门为字符串转数字准备的方法
原理：从左向右依次读取每个字符，碰到非数字字符则停止，Int不认识小数点，Float认识第一个小数点，如果一来就不认识，则为NaN
Number(x);//x可以是万能的，相当于隐式转换
函数
1、创建：
function 函数名(形参,...){
函数体;
}
2、调用：程序员在JS里面调好：函数名(实参,...);
绑定在页面元素上：<any on事件名="函数名()"></any>
分支结构
比较运算符：> < >= <= == !=
逻辑运算符：&&（并且） ||（或者） !（非）
结果都是一个布尔值
if(条件){操作}
if(条件){操作}else{默认操作}
if(条件){操作}else if(条件){操作}else{默认操作}
循环结构
1、while循环
var i=0;
while(i<10){
console.log(i);
i++;
}
2、for循环
for(var i=0;i<10;i++){
console.log(i);
}
3、死循环：
while(true){}
for(;;){}
4、循环流程控制语句：退出循环：break;
数组
1、创建：
直接量：var arr=[1,2,3,4];
构造函数：var arr=new Array(1,2,3,4);
2、使用
访问：arr[i]
添加：arr[i]=新值;//i处已经有人了，则为替换
3、数组三大不限制：
1、不限制长度
2、不限制类型
3、不限制下标越界
4、数组的属性：arr.length - 得到长度
1、缩容：arr.length-=n;
2、向末尾添加元素：arr[arr.length]=新值;
3、获取倒数第n个元素：arr[arr.length-n];
5、遍历数组：
for(var i=0;i<arr.length;i++){
arr[i];//当前次元素
}
Document Object Model（DOM）
树根：是一个document对象，document对象是不需要程序员来创建的，由浏览器的js解释器负责创建，一个页面只有一个document
作用：提供了一些属性和方法，可以让我们程序员去操作整个DOM树（增删改查每一个元素）
DOM节点/DOM元素/DOM对象其实都是同一个意思：一个标签、文本、属性、样式;
查找元素
1、通过HTML的特点去查找元素：3种方式
1、通过ID找到元素：var elem=document.getElementById("id值");
在当前DOM树中，根据元素的id，获取具体的DOM节点
找到了：返回对应的元素
没找到：返回null
特殊：1、如果页面上有多个重复的id，只会返回第一个
2、此方法找到的是单个元素 - DOM节点是可以直接用于做操作的
3、此方法你不能使用 - 以后id留给后端使用，而且此方法一次也只能找到一个元素操作起来不方便
2、标签名查找：var elems=document/已经找到的某个父元素.getElementsByTagName("标签名");
在当前DOM树中，根据元素的标签名获取元素们
找到了：返回是一个DOM集合/DOM类数组对象
没找到：空集合
特殊：1、返回的不是一个DOM节点，而是一个DOM集合，是不能直接用来做操作的，要么加下标拿到某一个，要么遍历拿每一个
DOM集合：类数组对象，类似数组：1、都可以使用下标 2、都可以使用length
2、不一定非要从树根开始查找元素，也可以写一个你已经找到的某个父元素
3、class名查找：var elems=document/已经找到的某个父元素.getElementsByClassName("class名");
在当前DOM树中，根据元素的标签名获取元素们
找到了：返回是一个DOM集合/DOM类数组对象
没找到：空集合
特殊：1、返回的不是一个DOM节点，而是一个DOM集合，是不能直接用来做操作的，要么加下标拿到某一个，要么遍历拿每一个
4、通过节点之间的关系进行查找元素：前提：必须先要找到一个对象，才能使用关系：
父：xx.parentNode; - 单个元素
子：xx.children; - 集合
第一个儿子：xx.firstElementChild; - 单个元素
最后一个儿子：xx.lastElementChild; - 单个元素
前一个兄弟：xx.previousElementSibling; - 单个元素
后一个兄弟：xx.nextElementSibling; - 单个元素
只有单个元素可以做操作，集合不行
操作内容
1、innerHTML：获取 或 设置某个元素的内容部分 - 可以识别标签的
获取：elem.innerHTML; - 多半用于判断操作
设置：elem.innerHTML="新内容"; - 修改内容
2、innerText：获取 或 设置某个元素的文本部分 - 不能识别标签的
获取：elem.innerText; - 多半用于判断操作
设置：elem.innerText="新文本"; - 修改内容
以上两个属性：都是为双标签准备的
3、value属性：专门为单标签（input）操作内容准备的
获取：input.value; - 多半用于判断操作
设置：input.value="新内容"; - 修改内容
操作属性
1、获取属性值：elem.getAttribute("属性名"); - 多半用于判断操作
2、设置属性值：elem.setAttribute("属性名","属性值"); - 修改
以上两个方法有点繁琐 - 但是无敌的
能够简化：
1、获取：elem.属性名; - 多半用于判断操作
2、设置：elem.属性名="属性值" - 修改
缺陷：1、不能操作自定义属性，只能操作标准属性
2、class在ES6升级的时候成为了一个关键字，所以不可以在用class，换为了className
操作样式
获取：elem.style.css属性名 - 多半用于判断操作
设置：elem.style.css属性名="css属性值"; - 修改
特殊：1、css属性名，要把有横线的地方，换成小驼峰命名法
2、唯一的缺陷：获取的时候，代老湿现在只交了你操作内联样式，目前不能获取样式表中的样式
绑定事件
1、单个元素：elem.onclick=function(){
//关键字this的指向->这个元素
}
2、多个元素：
for(var i=0;i<elems.length;i++){
elems[i].onclick=function(){
//关键字this的指定->当前元素：当前你触发事件的元素
}}
