二阶段第一周（3.28-4.2）

第一天

变量：var 取的名字='值'

常量：const 取的名字='值

常量一旦初始化后，不允许修改

算数运算符：+-*/% 算数运算符里面包含隐式转换：

默认运算符左右两边都会悄悄转换为一个数字有字符串也可以转为数字，但是必须是纯数字组成的字符串才可以，只有包含一个非数字字符，结果则为NaN

NaN不是一个数字，但是一个数字类型，一个垃圾，任何的运算都为NaN

+比较特殊：只要碰上一个字符串，则都会变为字符串，+运算也不再是+运算，变成了拼接操作

js中的基本类型：5个：

1：String-字符串，有无数个，必须写'' ""来包含它

2：Number-数字，有无数个，直接写

3：Boolean-布尔，取值有两个 true/false 用于判断

4：Undefined-取值只有Undefined，没有用垃圾

5：Null-空，取值只有null，作用是释放空间。

第二天

强制转换

1：转字符串：语法 var str=x.toString 不重要，页面中所有获取的数据都为字符串

2：转数字

1： var num=parselent(str/num); 是取的是整数

console.log(parseInt(35.5));//35

2：var num=parseflost；可以取到是第一个小点后面的数字

console.log(parseFloat("15.5px"));//15.5

3：Number(x);//x是万能的，任何人都可以转为数字

但是跟隐式转换差不多。不如*1 /1 -0,

基本的函数

1 什么是函数：也称之为方法，需要【预定义】后，可以【反复使用】的【代码段】

2 创建函数并且调用函数

创建：function 函数名（）{
诺干的代码段
}
创建完成后不会马上执行，需要进行调用

3 带参数的函数

1 创建带参数的函数

形参：就是一个变量名

function 函数名(形参){ 函数体 }

2 调用带参数的函数

实参：实际参数，这个变量名所保存的值函数名（实参.....）

总结：

1 如果你的函数体是固定不变的，则不需要使用带参数的函数

2 如果你的函数体希望根据传入的实参的不同，做的事儿也略微不同，则需要带有参数

分支结构

1 代码中流程控制语句：

1.顺序结构：

默认结构，代码从上到下，一步一步执行的

2.分支结构

根据条件，选择一部分的代码去执行

3.循环结构

根据条件，判断你是否需要再一次重复执行某一些代码

2 比较运算符：< > = <= >= == !=

作用：比较判断的条件

结果会是一个布尔值。true/false

3 if结构：

一个条件一件事，满足就做，不满就就不做

if(条件){
操作
}

一个条件两件事，满足就做第一件事，不满足就做第二件事

if(条件){
操作
}else{
默认操作
}

3、多个条件多件事，满足谁就做谁

if(条件1){
操作1;
}else if(条件2){
操作2;
}else{
默认操作
}

逻辑运算符：&&（并且）||（或）！（非）

&&全部满足条件才会做， ||满足其中一个条件就会做！颠倒布尔值！true--false !!true -> true

第三天

循环结构

循环定义：反复执行【相同或者相似】的操作，一瞬间完成多次

循环三要素：

循环条件：开始，结束，重复的次数
循环体：循环操作，干什么事
循环变量：创建，然后（自增或者自减），向着不满足条件在变化

while循环

var 循环变量=几；

while(循环条件){ 循环体；循环体变化}

死循环：停不下来的循环。

需要一个控制语句：break（退出循环）

for循环 和while能做的事是一样的，只不过语法比while更简单语法：

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

数组

创建数组的两种方式

1 直接方法 var arr=【】空数组

2 构造函数方式 var arr=new Array（）空数组

两种方式没有区别，建议用第一种

获取数组中的元素：数组名【下标】

修改添加数组中的元素：数组名【下标】=新元素

特殊： 1、下标处如果没有人，则为添加

2、下标处如果有人，则为修改

3、如果下标越界 - 会导致我们的数组变为一个稀疏数组，不是好东西

数组三大不限制：

1：不限制长度 2：不限制类型 3：不限制下标越界

数组唯一的属性：length长度

语法：数组名.length

数组的三个固定套路： 1、希望向末尾添加元素：arr[arr.length]=新元素

2、获取倒数第n个元素：arr[arr.length-n]

3、缩容：删除数组的倒数n个：arr.length-=n;

遍历数组：把数组中的每一个元素取出来执行相同或相似的操作公式：

for(var i=0;i<数组名.length;i++){
数组名[i];//当前次元素
}

第四天

DOM树：

树根：是一个document对象，document对象是不需要程序员来创建的，由浏览器的js解释器负责创建

查找元素

通过html的特点来查找元素

1：通过ID找到元素：var elem=document.getElementById("id值");

2：标签名查找：var elems=document/已经找到的某个父元素.getElementsByTagName("标签名");

3.class名查找：var elems=document/已经找到的某个父元素.getElementsByClassName("class名");

通过节点之间的关系来查找元素：前提：必须找到一个人才能使用

父元素：XX.parentNode;为单个元素

子元素：XX.children，是一个集合

第一个儿子：xx.firstElementChild;为单个元素

最后一个儿子：xx.lastElementChild;为单个元素

前一个兄弟：xx.previousElementSibling;为单个元素

后一个兄弟：xx.nextElementSibling;为单个元素

单个元素可以直接操作，集合不行

操作元素：<标签属性名="属性值" style="样式">内容</标签>

内容

1：innerHTML:获取某个元素的内容部分（可以识别标签）

获取：elem.innerHTML;多半用于判断

设置：elem.innerHTML='新内容';修改内容

2： innerText：获取或设置某个元素的文本部分 - 不能识别标签的

获取：elem.innerText; - 多半用于判断操作

设置：elem.innerText="新文本"; - 修改内容

3：value属性：专门为单标签（input）操作内容准备的

获取：input.value; - 多半用于判断操作

设置：input.value="新内容"; - 修改内容

属性：什么是属性：HTML属性

1、获取属性值：elem.getAttribute("属性名"); - 多半用于判断操作

2、设置属性值：elem.setAttribute("属性名","属性值"); - 修改

简化：

1、获取：elem.属性名; - 多半用于判断操作 2、设置：elem.属性名="属性值" - 修改

缺陷：

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

2、class在ES6升级的时候成为了一个关键字，所以不可以在用class，换为了className

样式

css定义的方式：3种

1、内联样式现在就使用这种样式

2、内部样式表

3、外部样式表 - 最适合写样式的时候使用此方法

语法：获取：elem.style.css属性名 - 多半用于判断操作

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

注意：css属性名，要把有横线的地方，换成小驼峰命名法

元素绑定事件

单个元素：elem.onclick=function(){
//操作
  }
多个元素：
for(var i=0;i<elems.length;i++){
elems[i].onclick=function(){
//操作
 }
}

第五天

1、this的指向：

单个元素绑定事件：this->单个元素

多个元素绑定事件：this->当前触发的事件

2、取消字符样式的方法：eval(str);//脱掉字符串的外套并且执行里面的操作

JS学习的第一周