JS用法
JavaScript是一种运行于JavaScript解释器/引擎中的解释性脚本语言。
JS基本语法
-
运行环境 ：
-
1，独立安装的JS解释器（NodeJS）
-
2，嵌入在【浏览器】内核中JS解释器
-
-
解释型：运行前是不需要编译的，运行之前不会检查错误，直到碰到错误为止。
-
编译型：对源码进行编译，还能检查语法错误（C/C++）
JS组成
1，核心（ECMAScript）。eg:可以进行+-*/运算
2，文档对象模型（DOM），让JS有能力与网页进行对话。eg:单击按钮可以改变文字的大小
3，浏览器对象模型（BOM）让JS有能力与浏览器进行对话。eg:单击按钮可以出现浏览器
JS特点
1，开发工具简单，记事本
2，不需要编译，直接由JS引擎负责执行。
3，弱类型语言有数据类型来决定 数据类型。
4，面向对象。
JS基本语法
-
浏览器内核的 作用
负责页面内容的渲染。内核主要由两部分组成：
1，内容排版引擎解析HTML和CSS
2,脚本解释引擎解析JavaScript。
3，不同浏览器内核不同。
-
JS运行环境
1，直接在浏览器Console中输入并执行JS
2，将JS脚本嵌入在HTML页面中执行。
JS使用方法
1.将JS代码嵌入在元素“事件”中：
onlick:当单击元素时所做的操作
div id="" onclick="JS代码">xxx</div>
<html>
<body>
<button onclick="console.log('Hello World');">
打印消息
</button>
</body>
</html>
console.log:注意单双引号的使用。
2.将JS代码嵌入在<script>标记中
<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 src="js文件路径"></script>
<html>
<head>
<script src="myscript.js"></script>
</head>
<body>
</body>
</html>
-
注意 如果script中引入src属性即src="a.js"再在下面内容中写入js代码是错误的。
<script src=""></script> 该对标记中，是不允许出现任何内容的以下是错误示范！！！
<script src="a.js"> console.log(); </script>
4.语法规范
4.1 语句
允许被JS引擎所解释的代码
使用 分号 来表示结束
console.log();
document.write();
大小写敏感
console.log();正确
Console.log()错误
英文标点符号
console.log("");正确
console.log( ’‘’‘ ) ； 错误
由表达式、关键字、运算符组成
4.2 注释
单行注释：//
多行注释：/* */
sublime text中 Ctrl+/
4.3 js在html中引用
JS变量
1. 什么是变量
内存：保存程序在运行过程中，所需要用到的数据8bit=1byte
1024byte=1kB
1024KB=1MB
1024MB=1GB
1024GB=1TB
变量：就是内存中的一段存储空间
名：内存空间的别名，可以自定义
值：保存在 内存空间中的数据
2.变量的声明
声明：var变量名；
赋值：
var userName;
var bookPrice=25.5;
变量名=值；
2.1语法
注意：声明过程中，尽量不要省略var关键字，否则生命的是“全局变量”
-
声明一个变量，保存值为25
var age;
age=25;
-
声明并直接赋值：
var age=25;
在console.log()或document.write()使用变量名 取代“”，打印变量stuName的值到控制台上：
var stuName="PP.xz";
console.log(stuName);//结果为pp.xz;
console.log("stuName");//结果为stuName,原因是有双引号“”3.
-
一次性声明多个变量并赋值
var name1,name2,name3;
var age1,age2=30;
-
变量名 命名规范
-
不允许使用JS的关键字和保留关键字
-
由字母，数字，下划线以及$组成
var stuName;
var stuName1;
var stu_name;
var stu$name;
-
不能以数字开头
var stuName1;
var 1stuName:false
var $stuName;true
-
尽量见名知意
var a,b,c,d,ab,ac,ad;
var stuName.stuAge;更推荐
-
可以采用“驼峰命名法
变量名为合成词时，第一个单词全小写，从第二个单词开始，每个单词首字符变大写
var stuName;
如果只有一个单词作为变量名，全小写
var age;
-
-
变量的使用
5.1
var stuName="小猪佩奇"；
console.log(stuName);//结果为 小猪佩奇。
var stuAge;
console.log(stuAge);//结果为undefined
变量声明后，从未赋值，称之为未经初始化的变量。
5.2 变量未被定义过，直接打印或使用console.log(stuHeight);结果为错误
5.3 对变量进行的存取操作
-
1.获取变量的值-GET操作
var oldPwd='123456';
console.log( userPwd);//123456
document.write( userPwd);//123456
var newPwd=uerPwd;//mewPwd=123456
-
2.保存（设置）变量的值-SET操作
var oldPwd='123';
oldPwd='456';//456
oldPwd=newPwd;//oldPwd=123456(newPwd的值)
3.数据类型
3.1 数据类型
-
number类型
1.可以表示32位的整数以及64位的浮点数
2.整数：32位即4字节
3.浮点数：即小数，64位，8字节
整数：var n1=0123;//八进制 var n2=0x123;//十六进制
小数：var n1=34.56; var n2=4.5e10;
-
字符串类型
1.表示一系列文本字符数据，由Unicode字符，数字，标点组成，Unicode下所有的字符，数字，标点 在内存中 都占2字节
2.“张”charCodeAt().toString(16)//结果为5f20(查看 字符 张 的十六进制 表现方式)
3.\u4e00:汉字的起始符 \u9fa5:汉字的结束符
-
布尔类型
1.作用：用于表示条件的结果
2.取值：true:真，肯定的结果 ；false:假，否定的结果 ；
var r1=true;
var r2=false;//除条件判断外，做运算时，true可以当做1运算，false可以当作0运算。
3.空 null
4.未定义undefined
4.1.声明变量未赋值
4.2.访问对象不存在啊的属性
-
弱类型
var stu;//undefined
var stu=25;//number
var stu="25";//string类型
3.2.隐式转换
2.1 函数
typeof()或typeof
var num1=15;
var s=typeof(num1); :获取num1的数据类型
var s1=typeof num1;:获取num1的数据类型
2.2 NaN
Not a Number不是一个数字
isNaN(数据)：判断 数据是否为 非数字
是不是一个数字
结果为boolean类型
结果为true : 不是一个数字
结果为 false： 是一个数字
注：所有的数据类型 与string 做+运算时，最后的结果都为string
3.3强制转换
3.1 toString()
-
将任意类型的数据转换为string 类型，变量.toString();会得到一个全新的结果，类型为string
var num=15;
var str=num+"";
3.2 parseInt()
-
整型：Integer
-
作用：获取 指定数据的整数部分
-
语法：var result=parselnt(数据)；
-
注意：parselnt,从左向右 依次转换，碰到第一个非整数字符，则停止转换，如果第一个字符就是非正式字符的话，结果为NaN
3.3 parseFloat()
-
Float:浮点类型->小数
-
作用：将指定数据转换成小数
-
语法：var result=parseFloat(数据)；
var result=parseFloat("35.25");//35.25
var result=parseFloat("35.2你好！")；//35.2
var result=parseFloat("你好35.2")；//NaN
3.4 Number（）
-
作用:将一个字符串解析为number
-
语法：var reult=Number(数据)；
-
注意：如果包含非法字符，则返回NAN
4.运算符与表达式
4.1什么是运算符与表达式
运算符：能够完成数据计算的一组符号，比如：+-*/······
表达式：有运算符和操作数所组成的式子叫做表达式，每个表达式都有自己的值。15+8；var a=15; //a变量的值为15，整个表达式的值也是15；
4.2运算符
4.2.1 算术运算符
+，-，*，/，%；
var num1=15;
var num2=18;
var str1="15";
"+"：可以表示链接
console.log(num1+num2);//33
console.log(num1+str1);//1515
"%":判断数字的奇偶性or获取数字的最后几位。
自增 & 自减
++：自增，在数值的基础上，进行+1操作
--：自减，在数值的基础上，进行-1操作
i++;//相当于i=i+1;
i=1;
j=i++;//i=2,j=1
i=1;
j=++i;//i=2,j=2;
4.3 关系运算符
-
作用：判断数据之间的大小关系
-
运算符
==：判断等于（不比较类型，只比较数值）
！=：不等于
===：全等（除 数值之外，连同 类型也会一起比较）
！==：不全等；
关系表达式的运算结果为boolean类型（true/false）
-
判断一个数据是否为数据类型
console.log(isNaN(input));
isNaN()会抛开数据类型来判断数据是否为数据，如果 数据 是数字类型，则返回false；否则 返回true;
4.4 逻辑运算符
-
作用：关联条件
判断考试分数是否在60~80之间
var score=52;
条件1：score>=60
条件2：score<=80;
-
逻辑运算符
逻辑与：&&；var result=score>=60&&score<=80;如果是则返回ture
逻辑或：||；var =result=bishi>=60||mainshi>=60;只要有一个满足条件为ture
逻辑非：！；对条件进行取反，只是一个操作数。
-
短路逻辑
-
短路&&
第一个条件为false，则不需要判断啊后面的条件，结果为false;
-
短路||
如果第一个条件的结果为true，则不需要判断第二个条件，结果为true。
-
-
条件运算符
-
三目运算符：运算符需要三个操作
-
语法：表达式1？表达式2：表达式3；
表达式1成立true执行表达式2，不成立false执行表达式3。
-
var=85;
var result=score>=80?"优秀"：（score>=60?"合格"：“不合格”）；
-
JS函数
5.1 什么是函数
-
函数（function），也可以被称之为方法(method)，或过程(procedure)。
是一段预定义号，并可以被反复使用的代码块。其中可以包好多条可执行语句。
预定义好：事先声明好，但不被执行。
反复使用：允许被多个地方（元素 函数中）所应用。
代码块：允许包含多条可执行的代码。
函数本质上是功能完整的对象。
function 函数名()
{
可执行语句；
}
function printHello()
{
console.log("hello");
console.log("world");
}
-
函数的调用
执行函数的内容，任何 JS 的合法位置处，都允许调用函数
语法：函数名称（）；
function sayHello()
{
console.log("hello");
console.log("world");
}
sayHello();//调用函数输出“hello”,"world";
-
定义函数的参数和返回值
parselnt(数据)；//将指定数据转换成 整数
parseFloat(数据)；//将指定的数据转换为 小 数
console.log(“要打印的话”)；
-
定义带参数的函数
function 函数名(参数列表声明)
{
//代码块（函数体，功能体，方法体）
}
参数列表：由一个或多个变量名称来组成，声明函数时定义的参数，可以称之为“形参”。
function printInfo(userName,userPwd)//函数名：print Info 形参：userName，userPwd
{
console.log('用户名：'+userName+‘密码:’+userPwd);
}
printInfo('Tom','123');//传递直接量，叫做实参（‘Tom’和‘123’）
-
定义带返回值的函数
1.声明
function 函数名（0或多个参数）
{
//代码块；
return 值；
}
2.调用
var 变量=函数名（参数）；
function add(num1,num2)
{
return num1+num2;
}
var result=add(10,20);
console.log(result);//输出30；（//实参10.20分别传给对应的num1,num2得到结果result30输出）
-
5.2变量的作用域
-
什么是作用域
作用域：就是变量或函数的可访问的范围。它控制着变量或函数的可见性和生命周期
在 JS 中，变量或函数的作用域可分为：
a:函数作用域，只在当前函数内可访问
函数作用域内的变量（局部变量）
b:全局作用域，一经定义，代码的任何位置都可以访问。
-
函数作用域
function add()
{
var sum=1+2;//局部变量
console .log(sum);//正确
}
console.log(sum);//脚本错误
-
全局作用域
var sum=0;
function add()
{
sum=1+2;
console.log(sum);//sum=3
}
console.log(sum);//sum=0
}
function add(0)
{
sum=1+2;
}
add();//必须调用一次函数，才能得到sum的值。
console.log(sum);
-
声明提前
JS 在正式执行之前，会将所有的var 声明的变量和function声明的函数，预读到所在作用域的顶部 但是，对变量的赋值，还保留在原来的位置处。
console.log(a);//不会出错，输出undefined
var a=100;
console.log(a);//100;
等同于以下
var a;//仅声明提前
console.log(a);//undefined
a=100;//赋值仍保留在原来位置
console.log(a);//100
-
按值传递
传参时，实际上是对 实参 赋值了一份副本传给了函数。在函数体内 对变量进行修改，实际上是不会影响到外部的实参变量的。
var n=100;//全局变量n
function fun(n)//参数变量也是局部变量
{
n-=3;//修改的是局部变量n
console.log(n);//输出的是局部变量n(97)
}
fun(n);//调用函数，按值传递，输出97
console.log(n);//输出全局变量100
JS 分支结构
1. if -else
1.1 程序的流程控制
程序=数据+算法
程序的三种结构：
-
顺序结构
-
分支结构
if (条件表达式)
{
语句块;
}
if(条件){ 语句块1；
}else{
语句块2；
}
-
循环结构
2. switch case
1.使用场合 ：优先用于 等值判断的条件中
特殊的分支语句，可以i根据一个表达式的不同取值，从不同的程序入口开始执行。
switch （表达式）{
case 值1：
语句1；
语句2；
break;
case 值2：
语句3；
语句4；
break;
default:
语句n;//如果没有碰到break则会继续向下执行。
-
循环结构
continue 关键字：用在循环中，用于终止本次循环，继续执行下次循环
Break 关键字：用在循环中，终止整个循环结构！！!
-
while循环：先判断后执行
var i=0;
while(i<100){
console.log(i);
if(i==5){
break;
}
i++;
}//输出结果：0，1，2，3，4，5.当i=5时，退出循环。
-
do-while循环：先执行后判断
do{
可执行语句；
}while(boolean表达式);
先执行循环操作，再判断循环条件，如果条件为真，则继续执行循环操作，若果条件为假，则终止循环即退出循环。
无论条件满足于否，至少要执行一次循环操作。
-
for循环
for(表达式1；表达式2；表达式3)
{
循环体语句；
}
var sum=0;
for(var i=0;i<100;i++){
sum+=i;
}
console.log("1到100的和为："+sum);
-
//猜数字游戏
JS数组
1 索引数组
下标为数字的数组
-
数组：
内存中连续存储多个数据的数据结构，在起一个名字。存储多个数据的时候使用数组。
-
创建数组
-
创建空数组：两种
数组直接量：var arr=[];
用new:var arr=new Array();//不知道数组中元素有多少时使用。
-
-
访问数组中元素
-
访问 ：下标，数组中唯一标识每个元素存储的位置的序号
-
特点：从0开始，连续不重复。
-
只要访问数组元素，只能用下标
-
数组名 [i]--用法和单个变量完全一样。
-
-
数组GET操作与SET操作
-
set
var scores=[95,88,100];
scores[2]=98;//将值为100的元素重新赋值为98
scores[3]=75;//在数组尾部添加一个新的元素
-
获取数组元素的值：get
var cities=new Array('南京'，‘杭州’，‘青岛’);
console.log(cities[1]);//杭州
console.log(cities[3]);//undefined 不会抛出数组下标越界异常
-
-
访问数组中的元素
数组的length属性：记录了数组中理论上的元素个数length属性的值永远是最大下标+1
var arr4=new Array(10);//创建10个空元素
console.log(arr4.length);//长度为10
var arr5=[ ];//长度为0
arr5[0]=87;//长度变为1
arr5[3]=98;//长度变为4
-
数组的的遍历
遍历数组元素，通常选择for 循环语句，元素的下标作循环遍历
var muns = [50,90,20,10];
for(var i=0;i<nums.length;i++)
{
nums[i]+=10;
}//元素下标从0开始，到length-1结束。
-
固定套路
-
获得数组最后一个元素：arr[arr.length-1]
-
获得倒数第n个元素的位置：arr[arr.length-n]
-
数组缩容：减小arr/length的数值，会删除结尾的多余元素
-
遍历数组：依次访问数组中每个元素，对每个元素执行相同的操作
for (var i=0;i<arr.length;i++){
arr[i]//当前正在遍历的元素
}
-
-
特殊：三个不限制
-
不限制数组元素的个数：长度可变
-
不限制下标越界：
获取元素值：不报错！ 返回undefined
修改元素值：不报错 ！自动在指定位置创建新元素，并且自动修改length属性为最大下标+1
如果下标不连续的数组--稀疏数组
-
不限制元素的数据类型
-
2 关联数组
可自定义下标名称的数组
-
数组
-
索引数组中数字下标没有明确的意义
-
只要希望每个元素都有专门的名称时，就使用关联数组
-
2步 ：
-
创建空数组
-
向空数组中添加新元素，并自定义下标名称。
-
-
-
创建方式
var bookInfo = [ ];
bookInfo[ 'bookName']='西游记';
bookInfo['price']=35.5;
由于关联数组的length属性值无法获取其中元素的数量，所以遍历关联数组只能用 for...in循环
for (var key in hash){
key;//只是元素的下标名
hash[key]//当前元素值
}
3 对比索引数组和关联数组
| 索引数组 | 关联数组 |
|---|---|
| 以字符串输出 | 不能用字符串输出 |
| 下标是数字 | 下标是自定义的字符串 |
| length属性有效 | length属性失效（=0） |
| 访问元素都用数组名["下标"] | 访问元素都用数组名["下标"] |
| 可用for循环遍历 | 不能用for循环遍历——for in |
| 查找遍历 | hash数组查找不用遍历 |
| 受存储位置影响 | 和存储位置无关 |
| 受数组元素个数影响 | 和数组中元素个数无关 |
JS数组API
1 数组转换字符串
-
String（arr):将arr中每个元素转换为字符串，用逗号分隔
固定套路：对数组拍照：用于鉴别是否数组被修改过
-
将字符组成单词：chars.join("")->无缝拼接
扩展：判断数组是空数组：arr.join("")==""
-
将单词组成句子：words.join("")
-
将数组转化为页面元素的内容：
“<开始标签>”+
arr.join("</结束标签><开始标签>")
+“</结束标签>”
-
-
arr.join(“连接符”)：将arr中每个元素转为字符串，用自定义的连接符分隔。
//将字符拼接为单词
var chars=["H","e","l","l","o"];
console.log(chars,join(""));//Hello
2 拼接和选取
不直接修改原数组，而返回新数组 ！
-
拼接： concat()拼接两个或更多的数组，并返回结果
var newArr=arr1.concat(值1，值2，arr2,值3，....)将值1，值2和arr2中每个元素，以及值3都拼接到arr1的元素之后，返回新数组，其中：arr2的元素会被先打散，再拼接
var arr1=[90,91,92];
var arr2[80,81];
var arr3[70,71,72,73];
var arr4=arr1.concat(50,60,arr2,arr3);
console.log(arr1 );//现有数组值不变
console.log(arr4 );//[90,91,91,50,60,80,81,70,71,72,73]
-
选取：slice()返回现有数组的一个子数组
var subArr=arr.slice(starti,endi+1)
选取arr中starti位置开始，到endi结束的所有
元素组成新数组返回——原数组保持不变
强调：*凡是两个参数都是下标的函数，都有一个特性：含头不含尾
var arr1=[10,20,30,40,50];
var arr2=arr1.slice(1,4);//20,30,40含头不含尾
var arr3=arr1.slice(2);//30,40,50//从头开始一直到最后
var arr4=arr1.slice(-4,-2);//反向选取，含头不含尾
console.log(arr1);//现有数组不变
-
选取简写
1 一直选取到结尾：可省略第二个参数
2 如果选区的元素离结尾近：可用倒数下标
arr.slice(arr.length-n,a,rr.length-m+1)
简写为arr.slice(-n,-m+1);
3 复制数组
arr.slice(0,arr.length);
简写为arr.slice();
-
-
修改数组
-
删除：splice 直接修改原数组
arr.splice(starti,n);
删除arr中starti位置开始的n个元素不考虑含头不含尾
其实，var deletes=arr.splice(starti,n);
返回值deletes保存了被删除的元素组成的临时数组
-
var arr1=[10,20,30,40,50];
var arr2=arr1.splice(2,1);//删除从下标为2的元素开始，删除1个,把30删除
var arr2=arr1.splice(2,2,21,22,23);//删除从下标2元素开始，删除2个，即把20，30删除，删除以后再把21，22，23填进去
var arr2=arr1.splice(2,2,[91,92,93]);
console.log(arr1);
console.log(arr2);
-
插入
arr.splice(starti,0,值1，值2，....)
在arr中starti位置，插入新值1，值2...原starti位置及其以后的值被向后顺移。
-
替换：
其实就是删除旧的，插入新的
arr.splice(starti,n,值1，值2...)
先删除arr中starti位置的n个值，再在starti位置插入
强调：删除的元素个数和插入的新元素个数不必一致。
-
颠倒：
reverse()颠倒数组中元素的顺序
arr.reverse();
console.log(arr1);
强调：仅负责原样颠倒数组，不负责排序
-
排序
将元素从小到大排序重新排列
-
排序API：
arr..sort():默认将所有元素转为字符串再排序
只能排列字符串类型的元素，所以使用自定义比较器函数
-
排序算法：
冒泡 快速 插入排序
-
-
3 DOM
-
DOM：document object model
是W3C的标准，是中立于平台和语法的接口，
-
DOM查找
-
按id属性，精确查找一个元素对象
var elem=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.getElementById("myList");
console.log(ul); -
按标签名找
var elems=parent.getElementsByTagName("tag");
查找指定parent节点下的所有标签为tag的子节点。
强调：
-
可用在任意父元素上
-
不仅查看直接子节点，而且查所有子代节点
-
返回一个动态集合
即使只找到一个元素，也返回集合，必须用[0],取出唯一元素
-
不但找直接节点，而且找所有子代。
<ul id="myList">
<li id="m1">首页</li>
<li id="m2">企业介绍</li>
<li id="m3">联系我们</li>
</ul>
var ul=document.getElementById("menuList");
var list=ul.getElmentsByTagName("li");
console.log(ul); -
-
name属性查找
document.getElmentsByName('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); -
class查找
朝朝父元素下指定的class属性的元素
var elems=parent.getElemnetsByClassName("class");
有兼容性问题：IE9+
<div id="news"> <p class="main Title"> 新闻标题1 </p> <p class="subTitle"> 新闻标题2 </p> <p class="mainTitle"> 新闻标题3 </p> </div> var div=document.getElementById('news'); var list=div.getElementsByClassName('main Title'); console.log(list); -
通过css选择器查找
只找一个元素：
var elem=parent.querySelector("selector")
selector支持一切css中选择器
如果选择器匹配的有多个，只返回第一个
找多个：
var elems=parent.querySelectorAll("selector")
selector API 返回的是非动态集合；
-
元素选择器
-
类选择器
-
Id选择器
-
后代选择器
-
子代选择器
-
群组选择器
-
//产生随机验证码 -
-
DOM修改
DOM标准：
| 核心DOM | HTML DOM |
|---|---|
| 可操作一切结构化文档的API | 专门操作hHTML文档的简化版DOM API |
| 包括HTML和XML | 仅对常用的复杂的API进行了简化 |
| 万能 | 不是万能的 |
| 繁琐 | 简单 |
开发：先用简单的，再用复杂的补充——以实线效果为目标
修改属性：
核心DOM4个操作：
-
读取属性值：2种
-
先获得属性节点对象，再获得节点对象的值：
var attrNode= elem.attributest[下标/属性名]；
var attrNode=elem.getAttributeNode(属性名)
attrNode.value——属性值
-
直接获得属性值
var value=elem.getAttribute("属性名")；
-
-
修改属性值：elem.setAttribute("属性名"，value);
var h1=document.getElementById("a1");
h1.setAttributeNode("name",zhengyuemei);
-
判断是否包含指定属性：
var bool=elem.hasAttribute("属性名")
element.hasAttribute("属性名")//true或false
document.getElementById('bt1').hasAttribute('onclick');
-
移除属性：elem.removeAttribute("属性名")
<a id="alink" class="slink" href="javascript:void(0)"onlink="jump">百度搜索<a>
var a=document.getElementById('alink');
a.removeAttribute('class');
修改样式
-
内嵌样式：elem.style.属性名
强调： 属性名：去横线，变驼峰
css:backgrouond-color=>backgroundColor
list-style-type=>listStyleType
4 DOM添加
添加元素步骤：
-
创建空元素
var elem=document.createElement("元素名")
var table+document.createElement('table');
var tr=document.createElement('tr');
var td=document.createElement('td');
var td=document.createElement('td');
console.log(table);
-
设置关键属性
a.innnerHTML="go to tmooc"
a.herf="http://tmooc.cn"
<a herf+"http://tmooc.cn">go to tmooc</a>
设置关键样式：
a.style.opacity="1";
a.style.cssText="width:100px;height:100px";
-
将元素添加到DOM树
-
parentNode.appendChild(childNode)
可用于将 为一个父元素追加最后一个子节点
var div=document.createElment('div');//创建一个元素div
var txt=document.createTexNode("版权声明");//创建一个文本文件内容为“版权声明 ”
div.appendChild(txt);//将txt文件内容放在div里面
document.body.appendChild(div);//将创建好的div放到body里面
-
parentNode,insertBefore(newChild,existingChild)
用于在父元素中的指定子节点之前添加一个新的子节点
-
- 首页
- 联系我们
var ul=document.getElementById('menu');
var newLi=document.createElement('li');
u.insertBefore(newLi,ul.lastChild);
添加元素优化：
-
文档片段：内存中，临时保存多个平级子元素的 虚拟父元素，用法和普通父元素完全一样。
创建片段：
var frag=document.createDocumentFragment();
2.将子元素div临时追加到frag种
frag.appendChild(div );
3.将frag追加到页面
parent.appendChild(frag);
强调：append之后，frag自动释放，不会占用元素。
5 BOM
-
BOM
专门操作浏览器窗口的API——没有标准，有兼容性问题
浏览器对象模型：
window history navigator document location screen event 代表整个窗口 封装当前窗口打开后，成功访问过的历史url记录 封装浏览器配置信息 封装当前正在加载的网页内容 封装当前窗口正在打开的url地址 封装了屏幕的信息 定义了网页中的事件机制 窗口大小：
完整窗口大小：
window.outerWidth/outerHeight
文档显示区大小：
window.innerWidth/innerHeight
-
定时器
-
定义：
让程序按指定时间间隔自动自行任务
网页动态效果、计时功能等
-
分类：
周期性定时器：让程序按照指定时间间隔自动执行一项任务
语法：
setInterval(exp,time):周期性出发代码exp;
exp:执行语句
time：时间间隔，单位为毫秒
setInterval(function(){
console.log("Hello World");
},1000);
停止定时器：
-
给定时器取名：
var timer=setInterval(function(){
console.log("Hello World");
},1000);
-
停止定时器
clearInterval(timer);
一次性定时器
让程序延迟一段时间执行
语法：
setTimeout(exp,time):一次性触发
exp:执行语句
time：间隔时间，单位为毫秒。
setTimeout(function(){
alert("恭喜过关")
}，3000)；
-
-
只要反复执行，就用周期性。之要执行一次，就用一次性。
-
魔方案例：