基础回顾之Javasript基础
一、
1、概述与基础语法
1、什么是JavaScript
JavaScript是一种运行与JavaScrpt解释器/引擎中的解释型脚本语言
运行环境 |
1.独立安装的JS解释器（NodeJS） 2.嵌入在[浏览器]内核中JS解释器 |
解释型 |
运行之前是不需要编译的，运行之前不会检查错误，知道碰到错误为止 |
编译型 |
对源码进行编译，还能检查语法错误（C/C++） |
JS使用场合 |
PC机、手机、平板、机顶盒 |
2、JS组成
完整的JS是由三部分组成：
① 核心（ECMAScript）：语法基础
② 文档对象模型（DOM，Document Object Model）：让JS有能力与网页进行对话
③ 浏览器对象模型（BOM，Browser Object Model）：让JS有能力与浏览器进行对话
3、JS特点
① 开发工具简单，记事本即可
② 无需编译，直接由JS引擎负责执行
③ 弱类型语言，由数据来决定数据类型
④ 面向对象
4、浏览器内核的作用
负责页面内容的渲染。内核主要由两部分组成：
① 内容排版引擎解析HTML和CSS
② 脚本解释引擎解析JavaScript
5、JS运行环境以及JS的三种添加方式
① 独立安装JS引擎
② 嵌入在浏览器内核中的引擎：直接在浏览器中输入并执行JS；将JS脚本嵌入在HTML页面中执行
1、将JS脚本嵌入在HTML页面中执行的步骤
1、将JS代码嵌入在元素“事件”中 onclick：当单击元素时所做的操作 <div id=”” onclick=”JS代码”> XXX </div> <html> <body> <button onclick=" console.log( 'Hello World' ); "> 打印消息 </button> </body> </html> |
2、将JS代码嵌入在<script>标记中 1、<script></script> 允许出现网页的任意位置处 < html> <body> 页头 <hr/> <script> document.write( '<b>欢迎</b>'); console.log( "脚本执行结束... ); </script> <hr/> 页尾 </body> </html> |
3、将JS代码写在外部脚本文件中(** js) 1、创建js文件,并编写JS代码 ***.js 2、在页面中引入js文件 <script font-family:宋体;">文件路径"></script> < html> < head> < script src= " myscript.js"> </script> </head> <body> </body> </html> |
注意: <script > </script>该对标记中,是不允许出现任何内容的 <script >console.log(); </script> //以上代码是错误的 |
例子： |
2、语法规范
1、语句
允许被JS引擎所解释的代码
使用分号来表示结束
console.log();
document. write();
大小写敏感
console. log0;正确
Console.logO;错误
英文标点符号
console.log(");正确
consoole.log (“”) ;错误
由表达式、关键字、运算符组成
2、注释
单行注释: //
多行注释:/* */
sublime text中Ctrl+/
2、变量
内存：保存程序在运行过程中，所需要用到的数据
8bit（比特是表示信息的最小单位）=1byte
1024byte = 1KB
1024KB = 1MB
1024MB = 1GB
1024GB = 1TB
变量即内存中的一段存储空间名：内存空间的别名，可以自定义值：保存在内存空间中的数据。
1、语法
声明：//声明过程中，尽量不要省略var关键字，否则声明的是“全局变量”
var 变量名；
赋值；
变量名=值；
在console.log()或document.write()使用变量名取代"" 打印变量stuName的值到控制台.上 var stuName= ="PP.XZ"; console.log(stuName); -- PP.XZ console. log("stuName"); -- stuName |
|
一次性声明多个变量并赋值 语法： var变量名1变量名2.. .变量名n;
|
var stuName=' 'PP.XZ",stuAge=25, stuHeight; 等同于 var stuName= "PP.XZ"; var stuAge=25; var stuHeight; |
2、变量名 命名规范
① 不允许使用JS的关键字和保留关键字
② 由字母、数字、下划线以及$组成
③ 不能以数字开头
④ 尽量见名知意
⑤ 可以采用“驼峰命名法”：变量名为合成词时，第一个单词全小写，第二个单词开始，每个单词首字符变大写；如果只有一个单词作为变量名，全小写
3、变量的使用
① 未经初始化的变量：变量声明后，从未赋值，称之未未经初始化变量
② 使用未声明的变量：变量未被定义过，直接打印或使用console.log(stuHeight);结果为错误
③ 对变量进行的存取操作:
注意：=出现的话，永远是将=右边的东西保存给=左边的变量，左边必须是变量。
3、数据类型
1、数据类型
1、数字类型 number类型
可以表示32位的整数以及64位的浮点数
整数：32位即4字节
浮点数：即小数，64位，8字节
整数
|
十进制：生活中常用数字 |
八进制：逢八进一 |
|
十六进制：逢15进一 |
|
小数 |
2、字符串类型 String类型
String表示一系列的文本字符数据，由Unicode字符，数字，标点组成：Unicode下所有的字符，数字，标点在内存中都占2字节，"张".charCodeAt().toString(16)
查看字符"张"的十六进制表现方式，结果为: 5f20
\u4e00 :汉字的起始字符；\u9fa5 :汉字的结束字符
转义字符：\n：换行；\r：回车；\t：一个制表符。
3、布尔类型 boolean类型
作用：用于表示条件的结果
取值：true：真，肯定的结果；false：假，否定的结果（除条件判断外，做运算是，true可以作1运算，false可作0运算）
4、空
声明对象未赋值：null
5、未定义 undefined
1、声明变量未赋值；2、访问对象不存在的属性
2、数据类型转换
1、弱类型
由数据来决定变量的数据类型是什么 var stu; //undefined stu=25; //number stu=”25” //string |
不同数据类型的数据在运算的过程中，如何处理？ var num1=15; //number var num2=13; //number var result=num1+num2;//28->number var str1=”15”;//string var result1=num1+str1; |
2、隐式转换
自动转换，由JS在运算过程中，自己进行转换的操作，不需要人为参与
① 函数 typeof()或typeof
② NaN Not a Number不是一个数字
isNaN(数据)：判断数据是否为非数字
是否为一个数字？当结果为布尔类型时，true不是一个数字，false是一个数字（所有的数据类型与string做 + 运算时，最后的结果都为string）
3、转换函数-显示转换（强制转换）
① toString()：将任意类型的数据转换为string类型
变量。toString(); 会得到一个全新的结果，类型为string，如：var num=15;var str=num+””;
②parseInt()：整型Integer的作用为获取指定数据的整数部分，语法：“var result = parseInt”，值得注意的是：parseInt从左向右依次转换，碰到第一个非整数字符，则停止转换。如果第一个字符就是非整数字符的话，结果为NaN
③ parseFloat()：浮点类型Float，将指定数据转换为小数，语法：“var result = parseFloat”
④ Number()：将一个字符串解析为number，语法：“var result = Number”；注意如果包含非法字符，则返回NaN
4、运算符与表达式
运算符：能够完成数据计算的一组符号，比如：+，-，*，/，……
表达式：由运算符和操作数所组成的式子叫作表达式，每个表达式都有自己的值
1、运算符
加(+)、减(- )、乘(*)、 除(/)、求余(% )
- 可以表示减号，也可以表示负号，如: x=-y
+ 可以表示加法，也可以用于字符串的连接
1、算术运算符
%：取余操作，作用是取两个数字的余数（判断数字的奇偶性、获取数字的最后几位）
2、自增++ & 自减--
++:自增，在数值的基础上，进行+1操作
: 自减，在数值的基础上，进行- 1操作
2、关系运算符
判断数据之间的大小关系：判断结果为true或false
> |
大于 |
< |
小于 |
>= |
大于等于 |
<= |
小于等于 |
== |
判断等于：比较数值 |
!= |
不等于 |
=== |
全等，除数值外，类型也比较 |
!== |
不全等 |
判断一个数据是否为数字：
var input=prompt(“请输入一个数据：”);
判断input是否为数字？？
isNaN（数据）
isNaN() 会抛开数据类型来判断数据是否为数字
如果 数据 是数字类型，则返回false
如果 数据 不是数据类型，则返回true
3、逻辑运算符
作用：关联条件
1、逻辑与&&
关联两个条件，两个条件都为真的时候，那么整个表达式的结果才为真
语法：条件1 && 条件2
2、逻辑或||
关联两个条件，两个条件中，只要有一个为真，那么整个表达式的结果就为真
3、逻辑非！
对条件取反（注意：逻辑非，只有一个操作数），语法：!条件
非真即假，非假即真
4、短路逻辑
1、短路&&
如果第一个条件的结果已经为false的话，那么就不会再判断第二个条件那么整个表达式的值，就是false
如果第一个条件的结果是true的话，则继续判断(执行)第二个条件(表达式)，并且以第二个表达式的值，作为整个表达式的值
2.短路||
如果第一个条件的结果已经为true的话， 那么就不会再判断第二个条件，那么整个表达式的值，就是true
如果第一个条件的结果是false的话，则继续判断(执行)第二个条件(表达式)，并且以第二个表达式的值，作为整个表达式的值
4、条件运算符
1、三目运算符：运算符需要三个操作
语法：表达式1？表达式2：表达式3；
表达式1是一个条件，值为boolean类型
若表达式1的值为true，则执行表达式2的操作，并且以表达式2的结果作为整个表达式的结果；若表达式1的值为false，则执行表达式3的操作，并且以表达式3的结果作为整个表达式的结果
var age = 20 ; var msg = age > 18 ? “成年人” : ”未成年人”; |
条件运算符的嵌套：输入一个考试成绩，判断如果成绩在80以上，则输出优秀；如果成绩在60以上，则输出合格；否则输出不合格
var score = 85; var result = score >= 80 ? ”优秀”：( score >= 60?”合格” : ”不合格” ) |
5、函数
函数(function)，也可以被称之为方法(method)，或者过程(procedure)是一段预定义好，并可以被反复使用的代码块。其中可以包含多条可执行语句
预定义好:事先声明好，但不被执行
反复使用:允许被多个地方(元素，函数中)所应用
代码块:允许包含多条可执行的代码
函数本质上是功能完整的对象
1、函数的声明
语法： function 函数名(){ 可执行语句; } |
ex：创建一个函数名称：sayHello，主体功能为：向控制台上输出一句Hello World function printHello(){ console.log(“Hello”); console.log(“world”); } |
2、函数的调用
执行函数中的内容，任何JS的合法位置处，都允许调用函数，语法：函数名称();
function sayHello( ){ console.log( "hello" ); console.log( "world" ); } sayHello( ); |
3、定义函数的参数和返回值
转换函数
parseInt(数据); //将指定数据转换为整数
parseFloat(数据); //将指定的数据转换为小数
console.log(“要打印的话”)；
1、定义带参数函数
function 函数名(参数列表声明){
//代码块(函数体,功能体,方法体)
}
参数列表：由一个或多个变量名称来组成，声明函数时定义的参数，可以称之为叫作“形参”（形式参数），在调用函数时所传递的参数值，被称之为“实参”（实际参数）
2、带返回值的函数
function 函数名(0或多个参数){
//代码块;
return值;
}
调用：var 变量 = 函数名(参数);
function add( num1, num2){ return num1 + num2 ; } var result = add( 10, 20 ); console.log( result ); //输出30 |
3、变量的作用域
1、作用域
作用域就是变量或函数的可访问范围。它控制着变量或函数的可见性和生命周期
在JS中，变量或函数的作用域可分为: .
① 函数作用域，只在当前函数内可访问
② 全局作用域，一经定义，代码的任何位置都可以方式
2、函数作用域
函数作用域中的变量(局部变量)只在当前函数内可访问到，离开此范围就无法访问了。
function add(){ varsum=1+2; //局部变量 console.log( sum ); //正确 } console.log( sum ) ; //脚本错误 |
3、全局作用域
全局作用域中的变量，称之为“全局变量”，在代码的任何位置处都能访问
4、声明提前
JS在正式执行之前，会将所有var声明的变量和function声明的函数，预读到所在作用域的顶部。但是，对变量的赋值，还保留在原来的位置处
5、按值传递
传参时，实际上是将实参复制了一-份副本传给了函数。在函数体内对变量进行修改，实际上是不会影响到外部的实参变量的
var n=100; //全局变量n function fun(n){ //参数变量也是局部变量 n-=3; //修改的是局部变量n console.log(n); //输出的是局部变量n } fun(n); //按值传递，方法内输出97; console.log(n); //输出全局变量的值: 100 |
6、分支结构
1、程序的流程控制：程序 = 数据 + 算法
1、程序的三种结构
1、分支结构
程序在运行过程中，根据不同的条件，选着执行某些语句
①if- 结构
当条件满足时，运行某些语句；当条件不满足时，则不运行这些语句 |
语法： if(条件表达式){ 语句块; } 流程: 1、判断条件表达式的结果 2、如果结果为true，则执行语句块内容；如果结果为false，则不执行语句块的内容 |
1、if语句，条件位置处，必须为boolean的值/表达式/变量；如果条件不是boolean类型的话，JS会自动进行转换 2、if语句块的{} ，可以被省略的；如果省略{}，那么if只控制它下面的第一条语句 |
②if-else 结构
当条件满足时，运行某些语句；当条件不满足时，运行另外一些语句 |
语法: if(条件){ 语句块1; }else{ 语句块2; } 如果条件为真的话，则执行语句块1中的操作；否则则执行语句块2中的操作 |
③else-if 结构
复杂 if 结构 或 多重 if 结构 |
语法： if(条件1){ 语句块1; }else if(条件2){ 语句块2; }else if(条件3){ 语句块3; }..else{ //最后的else模块，可以选择性添加 语句块n; . } |
④switch-case
使用场合：优先用于 等值判断 的条件中；switch case语句是一种特殊的分支结构，可以根据一个表达式的不同取值，从不同的程序入口开始执行。 |
|
switch (表达式) { case值1 : 语句1; 语句2; case值2: 语句3; …… default: 语句n; } 流程: 1、计算变量或表达式的值 2、将计算出来的值与case后的数值做等值判断，如果判断相等的话，则执行对应的case后的执行语句 |
switch (表达式) { case值1 : 语句1; break; //break语句作用：跳出switch结构 case值2: 语句3; break; …… default: 语句n; } 流程： 1、计算变量或表达式的值 2、将计算出来的值与case后的数值做等值判断，如果判断相等的话，则执行对应的case后的执行语句 3、如果碰到break,则结束执行，否则，继续向下执行 |
switch-case的结束机制: 1、碰到break结束 2、整个结构都执行完毕结束直落两个case或多个case之间，没有任何的可执行代码，那么就以最后一块的case为主 |
|
switch-case的优势： 常常和break语句结合使用实现分支的功能。switch-case在实现分支功能时和if-else的主要区别在于: 1、if..else....可以判定相等或不等的情形，适用性更广; 2、switch...case...结构的结构更清晰、效率更高; 3、但一般只用于指定变量相等于某个范围内的某个特定的值。 |
|
7、循环结构
循环：重复执行相同或相似的代码
循环的两大要素：
① 循环条件：什么时候开始，什么时候结束
② 循环操作：循环体，循环过程中执行的操作
1、while循环
语法：
while(boolean表达式){
循环体语句;
}
流程：
1、判断条件
2、如果条件为真，则执行循环操作
3、再判断条件，如果为真，继续执行循环操作
……
n、判断循环条件，如果条件为假，则退出循环结构
注：一般情况下，循环操作中会存在使得循环终止的可能性，如果循环条件一直为真的话， 那么循环就是个死循环，尽量避免死循环的产生。一定要记得更新循环变量（条件）
2、循环的流程控制
1、continue关键字
作用：用在循环中，用于终止本次循环，继续执行下次循环
2、break 关键字
作用：用在循环中的话，终止整个循环结构!!!
3、do-while循环
语法：
do{
可执行语句; //无论循环条件是否满足，循环体至少执行一次
}while(boolean表达式);
流程:
1、先执行循环操作
2、再判断循环条件
如果条件为真，则继续执行循环操作
如果条件为假，则终止循环即退出循环
4、while和do…while区别
while 先判断，后执行 最少一次循环都不执行(第一次条件就不满足) |
do...while 先执行，后判断 最少要执行一次循环操作(第一 次条件就不满足) |
5、for循环
语法：
for(表达式1;表达式2;表达式3){
循环体语句;
}
for循环执行过程:
1.计算表达式1的值;
2.计算表达式2 (boolean表达式) 的值，如果为true则执行循环体，否则退出循环;
3.执行循环体;
4.执行表达式3;
5.计算表达式2,如果为true则执行循环体，否则退出循环;
6.如此循环往复，直到表达式2的值为false。
1、for循环用于实现固定次数的循环
6、for、while、do-while之间的区别
for，while 最少执行0次 while:多数用于不确定循环次数时使用 for:多数用于确定循环次数时使用 |
do- while 最少执行1次 适合用于不确定循环次数时使用 |
7、循环的嵌套
在一个循环体内再出现一个循环
for / while / do-while三种循环在很多情况下是可以互换的;一般情况下,for循环使用最多
8、数组
1、索引数组
索引数组是内存中连续存储多个数据的数据结构，再起一个统一的名字；
普通的变量只能存储一个数据程序=数据结构+算法（算法是解决问题的步骤；数据结构是数据在内存中的存储结构，好的数据结构可以极大的提高程序的执行效率）
只要存储多个连续的数据就可使用索引数组。
1、创建
1、创建空数组
在创建数组时，还不知道数组中的元素内容时，可以创建空数组（2种）
数组直接量： var arr = []; |
用 new： var arr = new Array(); |
2、创建-例
var arrl =[ ]; //定义一个不包含元素的数组 var arr2= [97, 85, 79]; //定义一个包含3个元素的数组 var arr3 = new Array); //定义一-个不包含元素的数组 var arr4 = new Array("Tom", "Mary", "John"); //定义一个三个字符串元素的数组 |
3、创建数组同时初始化
在创建数组时，已经知道数组的元素内容
数组直接量：var array=[元素1,元素2,…]; |
用new：var arr=new Array(元素1,元素2,…); |
4、先声明空数组，再添加元素
2、访问数组中的元素
数组中每个数据都是一个元素，通过下标（数组中唯一标识每个元素存储位置的序号）访问，从0开始，连续不重复；只要访问数组元素，只能用下标；数组名[i]——用法和单个变量完全一样。
1、数组GET操作与SET操作
①设置数组元素的值——SET
②获取数组元素的值——GET
2、访问数组中的元素
数组的length属性：记录了数组中理论上的元素个数length属性的值永远是最大下标+1
遍历数组元素，通常选择for循环语句，元素的下标作循环变量，元素下标从0开始，到length-1结束
3、固定套路
① 获得数组最后一个元素：arr[arr.length-1]
② 获得倒数第n个元素的位置：arr[arr.length-n]
③ 数组缩容：减小arr.length的数值，会删除结尾的多余元素。
④ 遍历数组：依次访问数组中每个元素，对每个元素执行相同的操作
for(var i=0;i<arr.length;i++){
arr[i] //当前正在遍历的元素
}
3、特殊：三个不限制
① 不限制数组的元素个数：长度可变
② 不限制下标越界：
获取元素值：不报错！返回undefined
修改元素值：不报错！自动在指定位置创建新元素，并且自动修改length属性为最大下标+1；如果下标不连续的数组——稀疏数组
③ 不限制元素的数据类型
2、关联数组
关联数组是可自定义下标名称的数组，索引数组中的数字下标没有明确的意义，只要希望每个元素都有专门的名称时，便可使用索引数组，具体分为两步：①创建空数组；②向空数组中添加新元素，并自定义下标名称。
1、创建方式
var bookInfo= [ ]; bookInfo['bookName'] =西游记' ; bookInfo['price'] =35.5; |
由于关联数组的length属性值无法获取其中元素的数量，所有遍历关联数组只能使用for..in循环 |
2、遍历关联数组：for in 循环
for(var key in hash){ key//只是元素的下标名 hash[key]/当前元素值 } |
3、索引数组与关联数组的对比
总结：希望快速查找元素时，可以使用hash数组
9、数组API函数
1、数组转字符串
1、String(arr)
将arr中每个元素转为字符串，用逗号分隔
固定套路：对数组拍照：用于鉴别是否数组被修改过
2、arr.join(“连接符”)
将arr中每个元素转为字符串，用自定义的连接符分隔
//将字符拼接为单词 var chars=["H","e","Il","'l","o"]; console. log( chars.join(")); //Hello |
固定套路：
1、将字符组成单词：chars.join(“”)->无缝拼接
（判断数组是空数组：arr.join(“”)==””）
2、将单词组成句子：words.join(“”)
3、将数组转化为页面元素的内容：
”<开始标签>”+arr.jion(“</结束标签><开始标签>”)+”</结束标签>”
2、拼接和选取
不直接修改原数组，而返回新数组！
1、拼接concat
concat()拼接两个或更多的数组，并返回结果
var newArr=arr1.concat(值1,值2,arr2,值3,…) //将值1，值2和arr2中每个元素，以及值3都拼接到arr1的元素之后，返回新数组，其中：arr2的元素会被先“打散”，再拼接 |
2、选取slice
slice()返回现有数组的一个子数组
var subArray=arr.slice(starti,endi+1) //选取arr中starti位置开始，到endi结束的所有元素组成新数组返回——原数组不变 强调：凡是两个参数都是下标的函数，都有一个特性：含头不含尾 |
① 一直选取到结尾：可省略第二个参数
② 如果选取的元素离结尾近：可用倒数下标：
arr.slice(arr.length-n,arr.length-m+1) 可以简写为 arr.slice(-n,-m+1);
③ 复制数组：
arr.slice(0,arr.length); 可以简写为 arr.slice();
3、修改数组
1、删除
arr.splice(starti,n) 直接修改原数组，删除arr中starti位置开始的n个元素不考虑含头不含尾。
var deletets = arr.splice(starti,n); //返回值deletes保存了被删除的元素组成的临时数组
2、插入
arr.splice( starti,0,值1,值2,...)
在arr中starti位置，插入新值1 ,值...原starti位置的值及其之后的值被向后顺移
3、替换
其实就是删除旧的,插入新的
arr. splice(starti,n,值1,值2,...)
先删除arr中starti位置的n个值,再在starti位置插入新值；强调:删除的元素个数和插入的新元素个数不必一致。
4、颠倒reverse
颠倒数组中元素的顺序 arr.reverse(); //仅负责原样颠倒数组，不负责排序
5、排序sort
将元素按从小到大的顺序重新排列
排序API： arr.sort()：默认将所有元素转为字符串再排列 问题:只能排列字符串类型的元素 解决:使用自定义比较器函数 |
排序算法: (手写)冒泡快速插入排序
|
10、DOM查找
DOM（document object model）是W3C（万维网联盟）的标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。对网页进行增删改查的操作。
1、按id属性精确查找一个元素对象
var name = document.getElementById(“id”) //效率非常高 |
getElementById只能用在document上，只用于精确查找一个元素，但不是所有元素都有id
<ul id= " myList" > <li id="m1">首页</li> <li id="m2">企业介绍</li> <li id="m3">联系我们</li> </ul> |
var ul = document.getElementByld('myList'); console.log(ul ); |
2、按标签名找
var elems= parent.getElementsByTagName("tag "); //查找指定parent节点下的所有标签为tag的子代节点 |
强调:
1.可用在任意父元素上
2.不仅查直接子节点，而且查所有子代节点
3.返回一个动态集合，即使只找到一-个元素，也返回集合，必须用[0]，取出唯一元素
问题:
不但找直接，而且找所有子代。
<ul id= " myList" > <li id="m1">首页</li> <li id="m2">企业介绍</li> <li id="m3">联系我们</li> </ul> |
var ul = document.getElementByld( menuList'); var list = ul.getElementsByTagName('li'); console.log(list );
|
3、通过name属性查找
document.getElementsByName( 'name属性值’ )
可以返回DOM树中具有指定name属性值的所有子元素集合。
<form id =" registerForm"> < input type= " checkbox" name= " boy' '/> <input type= " checkbox" name= "boy' '/> <input type=" checkbox" name= "boy"/> < /form> |
var list = document.getElementsByName( 'boy'); console.log( typeof list );
|
4、通过class查找
查找父元素下指定class属性的元素
var elems= parent.getElemnetsByClassName(" class' "); //有兼容性问题: IE9+
<div id="news"> <p class=”mainTitle" >新闻标题1</p> <p >新闻标题2 </p> <p class=" mainTitle ">新闻标题3</p> </div> |
var div = document.getElementByld( news'); var list = div.getElementsByClassName( mainTitle'); console.log(list );
|
5、通过CSS选择器查找
元素选择器、类选择器、Id选择器、后代选择器、子代选择器、群组选择器
1、只找一个元素
var elem=parent.querySelector("selector")
强调: selector支持一切css中选择器
强调: 如果选择器匹配的有多个，只返回第一个
2、找多个元素
var elems=parent.querySelectorAll("selector")
强调: selector API返回的是非动态集合
11、DOM修改
核心DOM：可操作一切结构化文档的API，包括HTML和XML——万能，但是繁琐
HTML DOM：专门操作HTML文档的简化版DOM API，仅对常用的复杂的API进行简化
1、修改属性
1、读取属性值
① 先获得属性节点对象，再获得节点对象的值：
var attrNode = elem.attributes[下标/属性名]; var attrNode = elem.getAttributeNode(属性名) attrNode.value-属性值 |
② 直接获得属性值
var value=elem.getAttribute("属性名"); |
2、修改属性值
elem.setAttribute(“属性名”,value); |
3、判断是否包含指定属性
var bool=elem.hasAttribute("属性名") element.hasAttribute('属性名') //true或false |
4、移除属性
elem.removeAttribute("属性名") |
2、修改样式
内联样式: elem.style.属性名
强调: 属性名:去横线，变驼峰
比如: css: background-color => backgroundColor
list-style-type => listStyleType
12、DOM添加
1、添加元素的步骤
① 创建空元素
var elem = document.createElement(“元素名”)
② 设置关键属性
设置关键属性
|
a.innerHTML= "go to tmooc a.herf= " http://tmooc.cn"; <a href= "http://tmooc.cn">go to tmooc</a> |
设置关键样式 |
a.style.opacity =” 1 "; a.style.cssText = "width: 100px;height: 100px"; |
③ 将元素添加到DOM树
parentNode.appendChild(childNode) //可用于将为一个父元素追加最后一个子节点 |
parentNode.insertBefore(newChild, existingChild) //用于在父元素中的指定子节点之前添加一个新的子节点 |
2、添加元素优化
每次修改DOM树，都导致重新layout，因此要尽量少操作DOM树
1.如果同时创建父元素和子元素时，建议在内存中先将子元素添加到父元素，再将父元素一次性挂到页面
2.如果只添加多个平级子元素时，就要将所有子元素，临时添加到文档片段中。再将文档片段整体添加到页面
文档片段：内存中，临时保存多个平级子元素的虚拟父元素；用法和普通父元素完全一-样
1.创建片段
var frag=document.createDocumentFragment();
2.将子元素临时追加到frag中
frag.appendChild(child);
3.将frag追加到页面
parentappendChild(frag); //强调: append之后，frag自动释放,不会占用元素
13、BOM
1、BOM概述
BOM（Browser Object Model）专门操作浏览器窗口的API——没有标准,有兼容性问题
1、浏览器对象模型
window |
代表整个窗口 |
history |
封装当前窗口打开后，成功访问过的历史url记录 |
navigator |
封装浏览器配置信息 |
document |
封装当前正在加载的网页内容 |
location |
|
screen |
封装了屏幕的信息 |
event |
定义了网页中的事件机制 |
2、获取当前窗口大小
完整窗口大小: window.outerWidth/outerHeight 文档显示区大小: window.innerWidth/innerHeight |
3、定时器
定时器让程序按指定时间间隔自动执行任务；网页动态效果、计时功能等
1、周期性定时器
让程序按指定时间间隔反复自动执行一项任务
1、语法
setInterval(exp,time):周期性触发代码exp
exp:执行语句
time:时间周期，单位为毫秒
setInterval(function(){ console.log(" Hello World"); },1000); |
2、停止定时器
1、给定时器取名
var timer = setInterval(function(){ console.log(" Hello World"); },1000); |
2、停止定时器
clearlnterval(timer); |
3、一次性定时器
让程序延迟一段时间执行
1、语法
setTimeout(exp,time):一次性触发代码exp
exp:执行语句
time:间隔时间，单位为毫秒
setTimeout(function(){ alert("恭喜过关"); },3000); |
只要反复执行，就用周期性
只要只执行一次，就用一次性