第六十四天 JS基础操作

一、JS三个组成部分

ES:ECMAScript语法

DOM:document对象模型=》通过js代码与页面文档（出现在body中的所有可视化标签）进行交互

BOM：borwser对象模型=》通过js代码与浏览器自带功能进行交互

二.引入方式

行间式

出现在标签中的全局事件属性中

this代表该标签，可以访问全局属性，再访问具体操作对象（eg:this.style.color = "red")

内联式

出现在script脚本标签

可以通过标签的id唯一标识，在js代码块中操作页面标签

js采用的是小驼峰命名规范，属于解释性语言（由上至下依次解释执行）

外联式

通过script标签的src属性连接外部js文件，连接后，script标签本身内部的js代码

块将会被屏蔽

在任何位置都可以使用this对象，当this对象不指向任意一个标签是，代表的是window

对象

js具体出现的位置

head标签的底部：依赖性js库

body标签的底部（body与html结束标签之间）：功能性js脚本

三、变量的定义

四种定义变量的方式

语法：关键字 变量名 = 变量值

num = 10; //省略关键字，定义的为全局变量，在任何位置定义，在任何位置都可

以访问，但不建议使用。

var num = 10;//var关键词，无块级作用域，定义在块级作用域中的变量，外界

也可以访问

let num = 10;//let关键词，有块级作用域，定义在块级作用域中的变量，外界

无法访问

const NUM = 30;// const关键词，有块级作用域，定义在块级作用域中的变量，

外界无法访问，且变量的值不能再被二次修改，所以为常量

产生块级作用域的方式

{

　　直接书写
}

if语句可以产生

while语句可以产生

for语句也可以产生

// 函数可以产生局部作用域，除了定义在局部作用域中的全局变量（没有关键字的变量

声明），外界可以访问，其他定义方式，外界都不可以访问

ES5 | ES6

是ECMAScript两个语法版本，ES6是ES5之后的一个版本，但是对ES5是向下兼容，

ES6中支持ES5语法

命名规范

变量命名规范

可以由哪些组成：字母，数字，_，$，中文

不能出现什么：关键字，保留字

提倡什么书写规范：小驼峰，支持_连接语法

好的 = "真好"

console.log(好的）；

四.三种弹出框

普通弹出框

alert("你丫真帅！！！")

输入框：以字符串形势接受用户输入内容

var info = prompt("请输入内容：”）；

确认框：根据用户选择确认或取消，得到 true | false 两个布尔结果

var res = confirm("你是猪吗？")

console.log(res)

五 数据类型

值类型

var a = 10; // Number 10

var a = 'abc'; // String abc

var a = true; // Boolean true

var a = undefined // undefined undefined

// 引用类型

var a = function(){} // function f(){}

var a = {} // Object {}

var a = null // Null null

// 其他Object具体体现

Array | Date | RegExp

六 值类型的类型转换

1.通过类型声明转换

Number() | String() | Boolean()

2.方法(函数) parseInt('10') | parseFloat('3.14') 123..toString()

3.隐式转换 +'10' => 10 '' + 10 => '10'

六、分支结构

1.if语句

　　if基础语句

　　if(条件表达式）{

　　　　代码块；

}

// 当条件表达式结果为true,会执行代码块；反之不执行

// 条件表达式可以为普通表达式

// 0、undefined 、null、""、NaN为假，其他均为真

if 复杂语法

// 1.双分支

if (表达式1){

　　代码块1；

} else{

　　代码块2；

}

// 2.多分支

if (表达式1){

} else if (表达式2） {

}

...

else if (表达式2） {

} else {

}

if嵌套

if(表达式1）{

　　if(表达式2）{

　　}...

}...

2.switch语句

　　switch (表达式){

　　　　case 值1：代码块1；break;

　　　　case 值2：代码块2; break;

　　　　default :    代码块3；

}

// 1. 表达式可以为 整数表达式 或 字符串表达式

// 2. 值可以为 整数 或字符串

// 3. break可以省略

// 4. default为默认代码块，需要出现在所有case最下方，在所有case均为被匹配时执行

}

七、循环结构

1.for循环

for(循环变量①；条件表达式②；循环变量增量③）{

　　代码块④；

}

// 1.循环变量可以在外、在内声明

// 2.执行逻辑 ① ②④③ ... ②④③ ②，入口为①，出口为②，②④③个数为[0,n]

2.while循环

while(条件表达式){

　　代码块；

}

3.do...while循环

do{

　　代码块；

} while (条件表达式)；

4.for ...in 循环

obj = {"name":"zero","age":8}

for(k in obj){

　　console.log(k,obj[k])

}

// 用于遍历对象：遍历的结果为key，通过[]语法访问对应的value

5.for...of循环

iter = ['a','b','c'];

for (i in iter){

　　console.log(iter[i])

}

// 1.用于遍历可以迭代对象：遍历结果为index，通过[]语法访问对应的value

//2.ES6新增，可以迭代对象有 字符串、数组、Map、Set、Anguments、NodeList等

6.break,continue关键词

break:结束本层循环进入下一次循环

八、异常处理

try {

　　易错代码块；

} catch(err) {

　　异常处理代码块；

} finally{

　　必须逻辑代码块；

}

// 1.err为存储错误信息的变量

// 2.finally分支在异常出现与否都会执行

throw "自定义异常"

// 必要的时候抛出自定义异常，要结合对应的try...catch使用

九、函数初级

1、函数的定义

ES5

function 函数名（参数列表）{

　　函数体；

}

var 函数名 = function(参数列表）{

　　函数体；

}

ES6

let 函数名 = （参数列表） =>{

　　函数体；

}

匿名函数

（function(参数列表）{

　　函数体；

}）（参数列表）；

2.函数的diaoy

函数名（参数列表）

3.函数的参数

　　个数不需要统一

　　function fn (a,b,c){

　　　　connsile.log(a,b,c) // 100 undefined undefined

　　}

　　fn(100)

　　function fn (a) {

　　　　console.log(a) // 100

　　}

　　fn(100,200,300)   //200,3000被丢弃

　　可以任意位置具有默认值

　　function fn (a, b=20 , c , d = 40）{

　　　　console.log(a,b,c,d) // 100 200 300 40

　　}

　　fn(100 , 200,300)

　　通过...语法接收多个值

　　function fn (a,....b){

　　　　console.log(a,b) //100 [200 300]

　　}

　　fn (100 , 200 , 300)

　　// ...变量必须出现在参数列表最后

4.返回值

　　function fn(){

　　　　return 返回值；

　　}

　　//1.可以空return操作，用来结束函数

　　//2.返回值可以为任意js类型数据

　　//3.函数最多只能拥有一个返回值

5、事件初级

　　onload:页面加载完毕事件，只附属于window对象

　　onclick:鼠标点击时间

　　onmouseover:鼠标悬浮事件

　　onmouseout:鼠标移开事件

十、js选择器

　　1.getElement系列

　　

// 1.通过id名获取唯一满足条件的页面元素
document.getElementById('id名‘）；
//该方法只能由document调用

//2、通过class名获取所有满足条件的页面元素
document.getElementsByClassName('class名’）;
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组记过的对象,使用方式同数组）
// 没有匹配到任何结果返回空HTMLCollection对象([])

//3.通过tag名获取所有满足条件的页面元素
document.getElementsByTagName('tag名‘）;
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection(一个类数的对象，使用方式同数组）
// 没有匹配到任何结果返回空HTMLCollection对象（[])

2、querySelect系列
// 1.获取一个匹配的页面元素
document.querySelector('css语法选择器');
// 该方法可以由document及任意页面对象调用

// 该方法可以由document及任意页面对象调用
// 返回值NodeList (一个类数组结果的对象，使用方式同数组）
// 没有匹配到任何结果返回空NodeList对象（[]）

3、id 名
可以通过id名直接获取对应的页面元素对象，但是不建议使用

七、JS操作页面内容
innerText:普通标签内容（自身文本与所有子标签文本）
innerHTML:包含标签在内的内容（自身文本及子标签的所有）
value: 表单标签的内容
outerHTML:包含自身标签在内的内容（自身标签及往下的所有）

八、JS操作页面样式

读写style属性 样式
div.style.backgroundColor = 'red';
//1.操作的为行间式
//2.可读可写
//3.具体属性名采用
只读 计算后 样式
//eg:背景颜色
// 推荐
getComputedStyle(页面元素对象，伪类）.getPropertyValue('background-color');
// 不推荐
getComputedStyle(页面元素对象，伪类）.backgroundColor;
//IE9以下
页面元素对象.currentStyle.getAttribute('background-color);
页面元素对象.currentStyle.backgroundColor;

// 1.页面元素对象由JS选择器获取
// 2.伪类没有的情况下用null填充
// 3.计算后样式只读
// 4.该方式依旧可以获取行间式样式 （获取逻辑最后的样式）

结合css操作样式
页面元素对象.className = ""; // 清除类名
页面元素对象.className = "类名"；//设置类名
页面元素对象.className+="类名"；//添加类名