超级完整的JS学习笔记整理2020版本

一、javaScript是什么?
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
二、javaScript能干什么
可以写一些效果，网页增加色彩
表单验证
…
三、javaScript历史

开篇
大概在 1992 年，一家称作 Nombas 的公司开发了一种叫做 C 减减（C-minus-minus，简称 Cmm）的嵌入式脚本语言。
创始
Netscape 发明了 JavaScript在1995年
三足鼎立
微软进军,复制了一个javascript名称为：JScript
标准化
1997 年的全新脚本语言。ECMAScript

一、script标签

类型(type)：text/javascript
路径(scr)：script.js
字符集(charset)：utf-8

<script type="text/javascript" src="script.js" charset="utf-8"></script>

Java书写格式：
方式一:

<script type="text/javascript">

js代码

方式二：

<script type="text/javascript" src="script.js"></script>
Script.js：
alert("易驰web前端")

二、alert 、document.write 、console.log

1》alert() ===》系统弹出框

alert("易驰web前端")

2》document.write() ===》文档输入内容
****文档的输出

<script>document.write("易驰js")document.write("<hr />")document.write("11111111111111111")
</script>

3》console.log() ===》控制台中的console显示内容

<script>console.log("今天来易驰学习js了")
</script>

效果在浏览器中查看：

语法构成

1》区分大小写
ECMAScript中的一切,变量,函数和操作符都是严格区分大小写
name和Name或者NAME
2》标识符
1.第一个字符必须是字母、下划线或者$
2.其他字符可以是数字、字母、下划线、$
n11、KaTeX parse error: Expected group after '_' at position 9: a、_a a_̲
3》注释符
1. 单行注释 : //
2. 多行注释 : /**/
二、关键字和保留字
1. ECMAScript关键字：关键字是保留的，不能用作变量名或函数名
2.ECMAScript保留字：保留字在某种意思上是为将来的关键字而保留的单词。因此保留字不能被用作变量名或函数名。

变量

ECMAScript的变量是松散类型的，所谓的松散类型就是用来保存任何类型的数据。
定义变量时要使用var操作符，后面跟一个变量名称（变量名就是标识符）。
如果是汉字必须要加上引号（单双都可以）
声明变量：
var name = “易驰”
声明多个变量
var name = “易驰”,
age = 18,
sex = “男”;

分号

每个语句的结尾都要加上;证明语句已经结束
一、js中的数据类型
1》5种简单的
字符串(String)
加引号，引起来的都是字符串(单双引号都可以)
数字(Number)
整数、小数、负数
布尔(Boolean)
true >真（对）
false>假（错）
Undefined（未定义）
一个变量没有赋值就是undefined
Null（空）
****一种特殊的Object类型
2》1种复杂（对象）
Object
***********typeof 检测类型的
typeof返回的结果是字符串
例如:typeof(str) | typeof str

js中的数据类型转换

1》把字符串转换为数字类型a>Number()

//把字符串转换为       ---》【数字类型】
var str = "易驰web前端全套课程";   //字符串
var num = Number( str );
alert(num);//NaN
alert(typeof num);

b>parseInt()

//parseInt()
var str = "123.1";
var num = parseInt(str);
alert(typeof num);  // "number"
alert(num);

c>parseFloat()

parseFloat()
var str = "123";
var num = parseFloat(str);
alert(typeof num);  // "number"
alert(num);

2》把字符串转换为布尔类型
a》Boolean
***补充
NaN:属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。

一、js中的运算符：操作数据值
运算符包括：一元运算符（一目运算符），布尔运算符,算术运算符，三元运算符，赋值运算符，位运算符…
1》算术运算符
+

var num = 10;
var str = 20;
console.log(num/str);

1>如果是字符串类型和数字类型相加，最后返回的结果是连接操作,数字类型会隐式转换为字符串类型
-

var num1 = 8;
var num2 = 3;
console.log(num1%num2);

1》如果是字符串类型和数字类型相减，最后返回的结果是正常减法,字符串类型会隐式转换为数字类型
*

var num = 10;  //数字类型
var str = "20";  //字符串类型
var cont = num+str;     // 这里做了一个隐式的转换,把num转换为了string
console.log(cont);  // 这里的加号就是连接了   1020
console.log(typeof cont); //最后返回的结果是string

1》如果是字符串类型和数字类型相乘，最后返回的结果是正常乘,字符串类型会隐式转换为数字类型
/

var num1 = 30;     //数字类型
var str1 = "20";  //字符串类型
var count = num1-str1;  //这里的str1原来是字符串类型， 在这里呢隐式转换为了number
console.log(count);
console.log(typeof count);  //number

1》如果是字符串类型和数字类型相除，最后返回的结果是正常除,字符串类型会隐式转换为数字类型
%

var num2 = 5;
var str2 = "3";
var count = num2 % str2;
console.log(typeof count );

1》如果是字符串类型和数字类型求模，最后返回的结果是正常求模,字符串类型会隐式转换为数字类型

一、js中的赋值运算符
=

var num = 1;
alert(num);

+= : x+=y ====> x=x+y

var num1 = 1;
var num2 = 2;
num1+=num2;  // num1 = num1+num2      num1 = 1+2
alert(num1);
字符串和数值相加默认将转为字符串连接：
var num7 = 7;   //alert(typeof  num7);   // "number"
var str8 = "8";
num7+=str8;  //  num7 = 7+"8"
alert(num7);

-= : x-=y ====> x=x-y

var num3 = 3;
var num4 = 4;
num3-=num4 ;  // num3 = 3-4   ===> -1
alert(num3);
数值和字符串相减，默认将字符串转为数值：
var num9 = 9;
var str1 = "1";
num9-=str1;  //  num9 = 9-"1"
alert(num9);

1 * = : x*=y ====> x=x*y

var num5 = 5;
var num6 = 6;
num5*=num6;   //  num5 = 5*6   (30)
alert(num5);

/= : x/=y ====> x=x/y

var num7 = 5;
var num8 = 6;
num7/=num8;   //  num5 = 5/6   (0.8333)
alert(num7);

%= : x%=y ====> x=x%y（求余）

var num7 = 5;
var num8 = 6;
num7%=num8;   //  num5 = 5%6   5
alert(num7);

js中的比较运算符

== ：只比较值

var num1 = 3;
var num2 = 4;
document.write(  num1 == num2  ); //false

数值和字符串比较：

var num1 = 3;  //数字类型
var num2 = "3"; //字符串类型
document.write(   num1 == num2  );

// 因为num1可以比喻为3块钱 num2比喻为:我在纸上写了一个数字3
// 而num1和num2不是一个数据类型，根本就不是一个概念，但是结果是true？？？因为js是弱变量类型所以结果是true
===：比较值还比较类型

var num1 = 3;  //数字类型
var num2 = "3"; //字符串类型
document.write(  num1 === num2 );   //false

!= ：非等（不等于）

var num1 = 6;
var num2 = 5;
document.write(   num1!=num2 );  // num1不等于num2

var num1 = 3;
var num2 = 4;
alert(  num1 > num2 );

var num1 = 3;
var num2 = 4;
alert(  num1 < num2 );

>=
<=

var num3 = 7;
var num4 = 7;
alert(  num3<=num4 );   // 7>=7              num3>num4      num3==num4

比较运算符返回结果：布尔值(false,true)

一、js中的一元运算符（一目运算符）
i++：先赋值,再自加1

var num1 = 3;
var num2 = 4;
num1=num2++;
// 1>把num2的值赋值给num1   ===>num1 = num2
// 2>num2自加1             ===>num2+1
document.write(  num1+"======>"+num2);  // num1:4             num2:5

i–：先赋值,再自减1

var num1 = 3;
var num2 = 4;
num1 = num2--;
//1>num1=num2
//2>num2-1
alert( num1 +"====>" +num2);  // num1===>4      num2 ===>3

++i：先自加1 ，再赋值

var num1 = 5;
var num2 = 8;
num1=++num2;
//1> num2+1
//2> num2赋值给num1
alert(  num1 +"===>"+ num2);   // 9,9*/

–i : 先自减1，再赋值

var num6 = 12;
var num7 = 20;
num6=--num7;
//1>num7-1
//2>num7赋值给num6;
alert(  num6 +"===>"+num7 );    //19,19

//如果是–i这种情况结果是19,19 , 如果是i–这种情况结果是 20,19

JS中的二元运算符（二目运算符）[逻辑运算符]

&&（与）：格式:表达式1 &&表达式2…
1>表达式1和表达式2有一个为false，整体的结果为false

var a = 10;
var b = 20;
var c = 30;
alert(  a>b && b>c   ); //  10 > 20 && 20 > 30
or
var a = 10;
var b = 20;
var c = 30;
alert(  a<b && b<c   ); //  10 < 20 && 20 > 30

||（或）：格式：表达式1 || 表达式2
1>表达式1和表达式2有一个为true，整体的结果为true

var a = 10;
var b = 20;
var c = 30;
alert(  a>b || b<c  ); //  10<20 || 20>30
//表达式1为true  表达式2为false    整体结果为true
//表达式1为false  表达式2为true    整体结果为true

!（非）：取反

var bool = true;
alert(!bool);

JS中的三元运算符（三目运算符）

格式：
条件？执行结果1（true）:执行结果2（false）

var a = 10;
var b = 20;
// a<b?alert("对"):alert("错");
a>b?alert("对"):alert("错");

一、JS中的流程控制语句（if语句）
格式：
if(条件1){
如果条件1成立，执行这里代码
}else{
如果条件不成立,则执行这里代码
}

var num1 = 10;
var num2 = 20;
if(num1<num2){  //  10 < 20alert("您说的对");
}else{alert("您可能不对");
}

格式:
if(条件1){
如果条件1成立，执行这里代码
}else if(条件2){
如果条件2成立，执行这里代码
}else if(条件3){
如果条件3成立，执行这里代码
}…
else{
如果条件1到条件n都不成立，执行这里代码
}

var str = "晴天";
if(str=="阴天"){alert("阴天");
}else if(str=="晴天"){alert("11111111111111");
}else if(str=="雪天"){alert("雪天");
}else{alert("雾霾");
}

   嵌套格式：if(条件1){if(条件){如果条件成立,执行这里代码}}else{如果条件1不成立，执行这里代码}var num = 10;

var str = "您好";
if( num == 10 ){if(str=="您好"){alert("您好啊啊啊啊啊");}
}else{alert(2222);
}

流程控制例子：

 橙汁
橙子===》装瓶====》瓶子广告===》卖
橙子===》瓶子广告===》装瓶====》卖
一、js中的系统输入框
prompt()
isNaN():
如果isNaN(10)写的是数字返回结果为false
如果isNaN(“哈哈”)写的不是数字返回结果为true

var str = prompt("判断您的成绩是否符合要求");
if(isNaN(str)){alert("必须输入数字");
}else if(str==100){alert("满分");
}else if(str>=60){alert("及格");
}else if(str<=59){alert("不及格");
}

JS中流程控制语句（switch语句）

 格式：switch(条件表达式){case 常量1:执行;break;case 常量2:执行;break;case 常量3:执行;break;......default:执行}

var str = "晴天";
switch (str){case "阴天":alert("阴天");break;case "晴天":alert("1111111111111111111");break;case "雨天":alert("雨天");break;default:alert("都不满足执行:default");
}

JS中的循环语句（for循环）

循环语句：在有限的条件内，反复不断的执行一些事
for循环格式：
for(起始条件;终止条件;步长值){
循环体;
}

for(var i=1;i<=100;i++){document.write(i+"<br />");
}

比喻：

（起始条件）        （终止条件）         （步长值）
发车时间            末班车时间               发车周期
5:00                    23:00                       每5分钟一趟车
5:05                    23:00                       每5分钟一趟车
5:10                    23:00                       每5分钟一趟车

…
22:50 23:00 每5分钟一趟车
22:55 23:00 每5分钟一趟车
23:00 23:00 每5分钟一趟车
23:05(没有车)

for(var i=0;i<3;i++){document.write(i);
}
alert(i);

JS中的for循环语句嵌套

格式：
for(起始条件; 终止条件;步长值){
for(起始条件;终止条件;步长值){
循环体;
}
循环体;
}

for(var i=1;i<=100;i++){if(i%10==0){document.write(i+"<br />");}
}
or
for(var i=0;i<=3;i++){for(var j=1;j<5;j++){document.write(j+"<br />");}

乘法表：

for(var i=1;i<=9;i++){for(var j=1;j<i+1;j++){document.write(  j+"*"+i +"="+j*i+"&nbsp;&nbsp;&nbsp;"    );}document.write("<br />");
}

JS中的循环语句

1》while
格式：
while(终止条件){
循环体;
步长值;
}

var i = 0;
while(i>5){   //这里的条件返回的是false，则不执行循环体代码document.write(i);i++;
}

2》do…while
格式：
do{
循环体;
步长值;
}while(终止条件)

var i = 0;
do{document.write(i);i++;
}while(i>5);  //这里的条件返回的是false，则最少执行一次循环体

****while和do…while的区别
如果终止条件不成立：
1》whlie则不执行循环体代码
2》do…while则最少执行一次循环体代码
二、JS中的跳出语句
1》break：跳出当前循环
2》continue:不会执行continue以下代码, 但是会继续执行循环
一、什么是函数
复用性特别强
二、函数声明
格式： function 函数名称(){
}

function demo(){alert(111111111111);
}

demo();
不会立即执行
三、函数调用
格式: 函数名称()
四、函数参数

格式：
function 函数名称(形参1,形参2,形参3.....){

}
函数名称(实参1,实参2,实参3…);
形参：虚的、形容的一个东西
实参：实实在在存在,是一个真实的东西

function demo(str ,aaa ,num){alert(num);
}
demo(  "你","好",123456  );

1》参数是用逗号分割开的,
2》实参和形参都是对应的关系
一、arguments对象

function demo(str1,str2){alert(arguments[2]);
}
demo(4,5,"你好");

理解：只看实参的一个对象
二、return ===>返回
返回是输出,但是没有任何的效果,可以在调用函数的时候用,console.log、alert、document.write…

function fn(){return 1;
}
alert(  fn()                     );   // 弹出1
document.write(     fn()        );   // 在页面中document.write(1)
console.log(        fn()        );   //console.log(1)

return的其他用法：一次定义多次调用

function num(){var nums = 0;for(var i=0;i<arguments.length;i++){nums+=arguments[i];}return nums;
}
1：<script src="script.js"></script>
<script>
alert(  num(10,20,30)  );
</script>
2：
<script src="script.js"></script>
<script>alert(  num(3,3,3) );
3：
<script src="script.js"></script>
<script>document.write( num(8,8,8)  );
</script>

一、匿名函数
格式：
function(){}

function(){alert(11111111);
}

****以上格式在js中会报错，原因就是本身格式有问题,没办法调用
二、函数表达式
格式：
var 名称 = function(){}
调用：名称()

var fns = function(){alert(1111);
}
fns();

函数声明和函数表达式的区别：
1》函数声明是不看调用或者函数本身的执行顺序的

alert(  fn() );
function fn(){return "fn";
}

2》函数表达式必须要看执行顺序,从上到下

var fnName = function(){return "fnName";
}
alert(   fnName()   );

三、匿名函数自我执行：不用调用,自己执行函数体
格式：(function(形参1,形参2…){
函数体
})(实参1 ,实参2…)

(function(num1,str1){alert(str1);
})(4,"js");

补充***
调用函数的时候, 加上()代表执行函数，不加（）代表打印函数整体
一、函数执行环境
如果在函数体内定义局部变量，在全局打印不出来

(function(){var a = 10;window.a=a;  //把局部的A 给了全局的A
})();
alert(a);

如果在函数体内定义全局变量，在全局可以打印出来

function fn(){window.num = 2222222222;document.write(num);return num;
}
fn();
alert(num);

什么是BOM？

B: Browers
O:Object
M:model
浏览器对象模型
二、window对象下的属性或者方法

<input type="button" value="点击" id="btn">
<script src="script.js"></script>
Js:
btn.onclick = function(){window.open("a.html","_blank","width=300,height=300,left=1000,top=200");// window.close();
}

打开页面格式：window.open(url地址,打开方式,设置参数,是否替换原有页面)
关闭页面格式: window.close()
火狐浏览器问题：脚本不得关闭非脚本打开的窗口。
**注意
1》在全局下，声明变量或者函数,都是属于 window对象
2》单击事件,格式：
元素.onclick = funciton(){
点击后,要执行的代码
}
a.html:

<input type="button" value="按钮" id="btn">
<script>btn.onclick = function(){window.open("b.html");}
</script>

B.html:

<input type="button" value="按钮" id="btn">
<script>btn.onclick = function(){window.close();}
</script>

一、History子对象:浏览器历史记录对象
length 表示当前页面的历史记录条数
back() 返回上一条历史记录页面
forward() 进入下一条历史记录页面
go() 进入指定的历史记录页面
go常用的方法就是go(1) 和go(-1)
go(1)相当于forward()函数
go(-1)相当于back()函数
案例：点击AAAAAAA后会来回的闪烁

<script>history.back();
</script><a href="a.html">AAAAAAAAAAAAAAA</a>
<script src="script.js"></script>history.go(1);

二、location子对象：浏览器位置信息对象
href 用于获取或者设置当前页面的完整URL地址
location.href = “a.html” ===》跳转到a.html页面中
location.href ====》获取到URL

<a href="?act=123&userName=admin#锚点之后">AAAAAAAA</a>
<form action=""><input type="text" id="userName"><input type="password" id="uPwd"><input type="button" value="登录" id="btn">
</form>
<script src="script.js"></script>

hash 获取URL锚点之后的内容，主要用来获取锚点名
取到：#之后的所有内容

btn.onclick = function(){alert(location.hash);
}

search 获取页面get传参值的字符串
取到：?之后的所有内容

btn.onclick = function(){// alert(location.hash);alert(location.search);
}

Navigator子对象：浏览器信息检测对象

userAgent  用户代理信息  返回客户端发送给服务器的
language  当前浏览器的语言
platform  平台信息

alert(navigator.userAgent);
alert(navigator.language );
alert(navigator.platform );
二、Screen子对象：屏幕子对象
width 当前屏幕分辨率的宽度
height 当前屏幕分辨率的高度
alert(screen.width);
alert( screenLeft);
alert( screenTop);（距离顶端的像素距离）
一、定时器:间歇调用
格式：
setInterval(函数，毫秒)

setInterval(function(){alert(1);
},1000)

二、停止定时器
格式：
clearInterval(停止的定时器)

function demo(){document.write(1);
}
var time = setInterval(demo,500);
clearInterval( time );

三、超时调用
格式：
setTimeout(函数,毫秒)

setTimeout( function(){document.write(1);
},50);

一、获取ID元素
document.getElementById(id名称)

var dom = document.getElementById("box");

        //文档  的   获取元素对象为ID的（box）

dom.style.display = "none";

二、获取集合元素(标签名称获取)
document.getElementsByTagName(节点名称)

var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){lis[i].style.background = "pink";
}

三、给元素添加样式
元素.style.属性名称 = 值
四、鼠标移入事件:onmouseover
Js: 实现图片的轮转和鼠标点击暂停的功能

var lis = document.getElementsByTagName("li");
var box = document.getElementById("box");
var index = 0;
var time = setInterval(function(){for(var i=0;i<lis.length;i++){lis[i].style.display = "none";}index++;if(index>2){index=0;}lis[index].style.display = "block";
},1000);
box.onmouseover = function(){clearInterval(time);
}

html:

<style>*{margin:0;padding:0}#box{width:790px;height:340px;border:1px solid #ccc;margin:50px auto;overflow: hidden;position: relative;}ul{list-style: none;}ul li{width:790px;height:340px;}#box span{color:#fff;width:50px;height:100px;text-align: center;background: #ccc;opacity: 0.5;font-size: 50px;line-height: 100px;}#left{position: absolute;top:120px;left:0;}#right{position: absolute;top:120px;right:0;}
</style>
<body>
<div id="box"><ul><li><img src="img/1.jpg" alt=""></li><li><img src="img/2.jpg" alt=""></li><li><img src="img/3.jpg" alt=""></li></ul><div><span id="left"> &lt; </span><span id="right"> &gt; </span></div>
</div>

数组是什么？

使用单独的变量名来存储一系列的值。

var arr = new Array(1,2,3);
alert(arr);

二、数组可以干什么？
存放内容
三、数组的使用
两种创建数组的方法：
1>构造函数的形式：new Array()
2>字面量的形式：[]
获取数组的长度：
数组.length
获取数组中的某一个值:
数组[0]

var arr = ["张三",2,3,"js","王五"];
//alert(arr.length);
//alert(   arr[3]   );
for(var i=0;i<arr.length;i++){alert( arr[i] )
}

案例：实现自动抽奖的简单逻辑：html &&js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{border:1px solid #ccc;width:300px;height:300px;text-align: center;line-height: 300px;font-size: 50px;}</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="开始" id="btn">
<input type="button" value="停止" id="stop">
<script src="script.js"></script>
</body>
</html>

Js:

//1》先有一个数组 var arr = ["米线","面条","盖饭","鱼香肉丝","宫保鸡丁","饼","馒头"];
//2》点击开始按钮， 启用定时器,
//3》点击停止按钮,  停止定时器
var arr = ["米线","面条","盖饭","鱼香肉丝","宫保鸡丁","饼","馒头"];
var btn = document.getElementById("btn"),stop = document.getElementById("stop"),box = document.getElementById("box"),index = 0,time = null;
btn.onclick = function(){time = setInterval(function(){box.innerHTML = arr[index];index++;if(index>arr.length-1){index=0;}},50);
}
stop.onclick = function(){clearInterval( time );
}

二维数组和三维数组

一、JS中的二维数组
格式：
[
[],
[]
]

var arr = ["地区",["你好","我很好"]];
alert( arr[1][0] );

三、JS中的三维数组
格式:
[
[ [] ]
]

var arr = ["北京",["海淀",["上地","西二旗","西三旗"],"朝阳",["1","2","3"],"昌平",["A","B","C"]]
]
alert(  arr[1][1][1] );

一、数组中的属性
length
设置或返回数组中元素的数目。

var arr =[1,2,3,"JS"];
alert(arr.length);

二、数组中的方法
方法描述
concat()
连接两个或更多的数组，并返回结果。
join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 || 用分隔符分割数组，
最后变成一个字符串
pop()
删除并返回数组的最后一个元素
push()
向数组的末尾添加一个或更多元素，并返回新的长度。 || 向数组中添加元素，返回新的长度
reverse()
颠倒数组中元素的顺序。 || 翻转字符串
shift()
删除并返回数组的第一个元素
slice()
从某个已有的数组返回选定的元素 || 截取功能
sort()
对数组的元素进行排序
splice()
删除元素，并向数组添加新元素。
toString()
把数组转换为字符串，并返回结果。
unshift()
向数组的开头添加一个或更多元素，并返回新的长度。
concat()
连接两个或更多的数组，并返回结果。

var arr = ["张三"];
var brr = ["李四"];
var crr = arr.concat(brr);
alert(crr);

join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 || 用分隔符分割数组，最后变成一个字符串

var arr =[1,2,3];
var str = arr.join("====>");
alert(str);

pop()
删除并返回数组的最后一个元素

var arr =["a","b","c"];
var brr = arr.pop();
alert(brr);
alert(arr);

push()
向数组的末尾添加一个或更多元素，并返回新的长度。 || 向数组中添加元素，返回新的长度

var arr = ["a","b","c"];
var brr = arr.push("**************");
alert(brr);

reverse()
颠倒数组中元素的顺序。 || 翻转字符串

var arr = ["a","b","c"];
var brr = arr.reverse();
alert(brr);

shift()
删除并返回数组的第一个元素

var arr = [1,2,3];
var brr = arr.shift();
alert(brr);
alert(arr);

slice()
从某个已有的数组返回选定的元素 || 截取功能

var arr = ["a","b","c","d","e"];
var brr = arr.slice(2,5);
alert(brr);

//参数1》代表了下标位置：从0开始
//参数2》代表了实际位置:从1开始
sort()
对数组的元素进行排序

var arr = [3,5,1,4,7,11,6];
var brr = arr.sort();
alert(brr);

splice()
删除元素，并向数组添加新元素。

var arr = ["a","b","c","d","e"];
var brr = arr.splice(0,4,"**************");
alert(arr);
alert(brr);

toString()
把数组转换为字符串，并返回结果。

var arr = ["a","b","c"];
var str = arr.toString()
alert(typeof  str);

unshift()
向数组的开头添加一个或更多元素，并返回新的长度。

var arr = [1,2,3];
var brr = arr.unshift("*************");
alert(brr);
alert(arr);

案例：冒泡排序

var arr = [3,5,2,4,1,66,88];
//冒泡排序  ： 冒大泡    冒小泡
//冒大泡 : 88 66 5 4 3 2 1
//冒小泡 ： 1 2 3 4 5 66 88
for(var i=0;i<arr.length;i++){for(var j=i+1;j<arr.length;j++){if(arr[i]>arr[j]){var brr = arr[i];arr[i]=arr[j];arr[j]=brr;}}
}
document.write(arr);

一、JS中的字符串创建方式
1》字符串字面量形式
如： var str = “js字符串”

var str = "js字符串";
document.write(str[4]);

2》字符串构造函数形式
如：var str = new String(“js字符串”);

var str = new String("js字符串00000000000");
alert(typeof str);  //---->object
var arr = new Array(1,2,3);
alert(typeof arr);
var num = new Number(1);
alert(typeof num);

二、JS中的字符串属性
1》length ====》长度（个数）

var str = "js字符串rkrgi3u43bj4iu3fjdiryiry棒freererererwiury34yuo343y4io3y43ioy4o3yo4i3fghjdgeu你";
document.write(  str[str.length-1] );

一、字符串中的方法
1》charAt() ====》返回指定位置字符串 (从0开始算起)

var str = "abc";
alert(          str.charAt(5)        );

2》indexOf() ====》返回字符在字符串中的位置(如果没有返回-1)

var str1 = "abc";
alert(  str1.indexOf("o")  );

3》lastIndexOf() ===》返回字符在字符串中“最后一次”出现的位置

var str2 = "cabc";
alert(str2.lastIndexOf("c"));

4》replace() ====》替换,将字符串的部分内容，替换成另外的内容

var str3 = "aaa";
var str4 = str3.replace(str3,123);
document.write(str4);
var str3 = "aaa";
var str4 = str3.replace("aaa","1");
document.write(str4);

5》slice() ===>截取

var str5 = "abcdefghijklmn";
var str6 = str5.slice(1,5);
document.write(str6);

一、字符串中的方法
1》substring() : 截取和slice异曲同工

document.write( str.slice(1,3) );
document.write( str.slice(2) );
document.write( str.substring(1,3) );
document.write( str.substring(2) );

*slice和substring区别
slice参数如果是负数,则从后到前截取
substring参数如果是负数,则返回整个字符串
document.write( str.slice(-2) );//从后往前两位数值
document.write( str.substring(-1) );//打印全部内容
2》trim() ：去除字符串前和后空格

var str = "  学习了js中  的trim方法  "
console.log(   str.trim()  );

3》toUpperCase ：将字符串转换为大写

var str = "abc";
document.write( str.toUpperCase() );

4》toLowerCase ：将字符串转换为小写

var str = "ABC";
document.write(  str.toLowerCase()  );

5》split() ：将字符串，用分隔符拆分，返回数组

var str = "get-element-by-id";
var arr = str.split("-");
document.write(arr);

案例：//封装一个函数，实现：首字母大写： GetElementById

var str = "get-element-by-id";
function fn(s){//1》get element by id 这4块内容先得到var arr = s.split("-");  // arr===>数组var str1 = "";//2》[get,element,by,id]  因为数组中的每一个下标首字母都要转化转换为大写，所以循环for(var i=0;i<arr.length;i++){//3>获取g  e  b  i 转换为大写str1 = arr[i+1][0].toUpperCase()+arr[i+1].substring(1);//str1 += arr[i+1][0].toUpperCase()+arr[i+1].substring(1);}alert(str1);return str1;
}
document.write(         fn(str)             );

一、数学对象:Math
方法：
1>Math.min(参数1，参数2，参数3…) :求出参数中最小值

var min = Math.min(43,43,54,5564,6,523,232);
document.write(min);

2>Math.max(参数1，参数2，参数3…) :求出参数中最大值

var max = Math.max(43,43,54,5564,6,523,232);
document.write(max);

3>Math.floor() 舍掉小数，得到整数

var num1 = 3.999999;
document.write(  Math.floor(num1) );
document.write(  parseInt(num1)  );

4>Math.ceil() 进一取整(舍去小数部分，得到整数部分+1)

var num2 = 3.001;
document.write(     Math.ceil(num2)     );

5>Math.abs() 绝对值

var num3 = -5;
document.write(  Math.abs(num3)   );

6>Math.sqrt() 开平方的

var num4 = 64;
document.write(   Math.sqrt(num4)   );

7>Math.random() 随机数（范围：0-1）

document.write(   Math.random()   );
//0 1 2 3 4 5
document.write(     Math.floor(  Math.random()*5  )           );

8>Math.round() 四舍五入

var num5 = 3.5;
document.write(  Math.round(num5)  );

案例：form表单验证
Html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>

<!--用户名
密码
验证码===》(数字)4位数随机   (混合：数字、字母)4位数随机
以上所有内容都完成了（true）&#45;&#45;》登录按钮，跳转页面-->
<form action="">用户名：<input type="text" id="userName"><hr />密码：<input type="password" id="userPwd"><hr />验证码：<input type="text" id="yzm"><span id="spans"></span><hr /><input type="button" value="登录" id="btn">
</form>
<script src="script.js"></script>
</body>
</html>

JS：

//1》验证码随机    innerHTML  往元素中,写入html代码
//2》用户名和密码必须都是: admin
//3》验证码必须是页面中的随机数
//4》以上用户名对了，才去验证密码，用户名和密码都对了，才去验证随机数
//5》如果以上内容都对，点击登录按钮，跳转到login.html页面中
var spans = document.getElementById("spans"),btn =document.getElementById("btn"),userName = document.getElementById("userName"),userPwd = document.getElementById("userPwd"),yzm = document.getElementById("yzm");var str = "abcdeftehtierui放大地府黑人一二一24i24y32f4fd7f9d4e7r9e43f156sdfs";
var str1 = "";
for(var i=0;i<4;i++){str1+=str[   Math.floor( Math.random()*str.length )   ];
}
spans.innerHTML = str1;
//Math.floor( Math.random()*9000 )+1000;
btn.onclick = function(){if(userName.value=="admin"){if(userPwd.value=="admin"){if(yzm.value  == spans.innerHTML){location.href = "login.html";}else{alert("验证码不对");}}else{alert("密码不对");}}else{alert("用户名不对");}
}

一、js中的日期对象
new Date():返回当前的日期和时间

https://www.w3school.com.cn/tiy/t.asp?f=jsrf_date
var date = new Date();
alert(date);

二、日期对象的方法
语法：日期对象.方法
1>getTime() ===》时间戳
从1970年1月1日0点0分开始，到现在的毫秒数

document.write( date.getTime() );

2>getFullYear() ===》年

document.write( date.getFullYear() );
3>getMonth() ===》月
中国：1-12
国外：0-11

document.write( date.getMonth()+1  );

4》getDate() ====》日

document.write(  date.getDate() );

5》getDay() ===》星期

document.write( date.getDay() );

6》getHours ===》小时

document.write(  date.getHours() );

7》getMinutes() ===》分钟

document.write( date.getMinutes() );

8》getSeconds() ===>秒

document.write(   date.getSeconds() );

案例：时间日期的显示： html和JS：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body style="background: #000;color: #fff;font-size: 60px">
<span id="hours">00</span>
:
<span id="minutes">00</span>
:
<span id="seconds">00</span>
<script src="script.js"></script>
</body>
</html>

js:

//1>获取到3个盒子的id
var hours = document.getElementById("hours"),minutes = document.getElementById("minutes"),seconds = document.getElementById("seconds");
//2>改变盒子内的文本function fn(){var date = new Date();hours.innerHTML  = time(date.getHours());minutes.innerHTML = time(date.getMinutes());seconds.innerHTML = time(date.getSeconds());}
//3>因为有动的效果，所以写入定时器操作（改变）setInterval(function(){fn();},1000)
//4>如果时间是1|2|3....应该变为01|02|03function time(str){if(str<10){return "0"+str;}else{return str;}}
//5》因为一刷新页面，出现的是00:00:00这是定时器的原因,因为定时器是1000毫秒才会改变文本内容，所以在一刷新页面的时候，就要调用fn函数来改变这个问题
fn();

DOM文档对象模型

一、DOM

document   object  model（文档对象模型）

二、获取节点
1》doucment.getElementById()===>选取有Id节点

//var box = document.getElementById("box");
var uls = document.getElementById("uls");
//var lis = document.getElementsByTagName("li");//文档对象  的   所有的li节点

2》document.getElementsByTagName()===》选取节点名称

var lis = uls.getElementsByTagName("li");//uls  的   所有的li节点
for(var i=0;i<lis.length;i++){lis[i].style.background = "red";
}

3》document.getElementsByClassName() ===》获取有class节点
******在IE8或者IE8以下不支持
案例：对于浏览器版本不支持的情况需要使用函数来封装实现获取CLASS的节点：
HTML:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul><li>1</li><li class="aaa lis">2</li><li>3</li><li class="lis">4</li><li>5</li>
</ul>
<script src="script.js"></script>
</body>
</html>

Js:

//封装函数，实现可以获取到class名的节点
function fn(cName){//1>把页面上所有的节点选取到//2>每一个节点的class名称和参数(cName)做比较//3>如果相等，把节点添加到数组中，//4>最后return 数组（返回数组）var dom = document.getElementsByTagName("*");var arr = [];for(var i=0;i<dom.length;i++){if(dom[i].className==cName || dom[i].className.indexOf(" "+cName) != -1 || dom[i].className.indexOf(cName+" ") != -1 || dom[i].className.indexOf(" "+cName+" ") != -1){arr.push(dom[i]);}}return arr;
}
for(var i=0;i<fn("lis").length;i++){fn("lis")[i].style.background = "red";
}

css:

*{margin:0;padding:0}
#container{width:790px;height:340px;margin:50px auto;overflow: hidden;position: relative;
}
ul,ol{list-style: none;
}
ul li{float:left;width:790px;height: 340px;}
#container div{width:30px;height: 60px;background: #ccc;opacity: 0.5;line-height: 60px;position: absolute;top:140px;color:#fff;font-size:30px;text-align: center;display: none;
}
#left{left:0px;
}
#right{right:0px;
}
ol{position: absolute;bottom: 20px;left:333px;
}
ol li{width:20px;height:20px;border-radius: 100%;background: #ffffff;float:left;margin-left:5px;
}.bg{background: red;
}

一、DOM树
日常能见到的树：
树的部分：树枝、树干、果实…
看不到：树（根）===》最主要的东西

var box = document.getElementById("box");
alert(box);   // object HTMLDIVElement  ----> 对象  HTMLDIV元素
html--->head|body---->div|p|h1....
document文档中的老大哥
document---> html--->head|body---->div|p|h1....

二、节点 : DOM “对象”
div
p
h1
input
span…
三、DOM对象（节点）的属性
语法：
DOM对象.属性名称
1>childNodes : 返回所有"子节点"的一个集合
****子节点(元素节点、文本节点、属性节点)

alert(  uls.childNodes.length );

2>nodeName:返回节点名称
*****(大写)

for(var i=0;i<uls.childNodes.length;i++){if(uls.childNodes[i].nodeName=="LI"){uls.childNodes[i].style.background ="red";}
}

3>nodeType：返回数字（节点类型）
***返回的是：1 =》代表元素节点
返回的是：3=》代表文本节点

for(var i=0;i<uls.childNodes.length;i++){if(uls.childNodes[i].nodeType==1){uls.childNodes[i].style.background ="red";}
}

四、节点的分类

: 元素节点

123

: (123)文本节点
：属性节点
** 对象有属性|对象有方法
一、节点属性

var uls = document.getElementById("uls");
alert(  uls.firstChild  );
alert( uls.childNodes[0] );
uls.lastChild.style.background = "red";
alert(uls.firstChild);
alert( uls.firstElementChild );
alert(  uls.parentNode );firstChild：获取到第一个子元素
alert(uls.firstChild);lastChild：获取到最后一个子元素
alert(uls.lastChild);firstElementChild：获取到第一个元素节点（子元素）lastElementChild：获取到最后一个元素节点（子元素）
alert( uls.firstElementChild );
alert( uls.lastElementChild );parentNode ：获取到父节点
alert(  uls.parentNode );nodeValue：文本节点的值
var box = document.getElementById("box");
alert(box.innerHTML);
alert(box.childNodes[0].nodeValue);

注意：在IE8或者8以下版本
firstChild这个属性，是获取到第一个元素节点（子元素）
firsteElementChild这个属性，在低级版本不认识
案例：隐藏某一行的内容：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul><li>1<a href="javascript:;">隐藏</a></li><li>2<a href="javascript:;">隐藏</a></li><li>3<a href="javascript:;">隐藏</a></li><li>4<a href="javascript:;">隐藏</a></li><li>5<a href="javascript:;">隐藏</a></li><li>6<a href="javascript:;">隐藏</a></li>
</ul>
<script src="script.js"></script>
</body>
</html>

Js:

//1>给谁加入onclick事件====》给所有的A加入onclick事件
var oA = document.getElementsByTagName("a");
for(var i=0;i<oA.length;i++){oA[i].onclick = function(){this.parentNode.style.display = "none";}
}

一、节点方法
getAttribute() :获取属性值

var imgs = document.getElementById("imgs");
alert(  imgs.getAttribute("id")  );setAttribute() :设置属性值
var box = document.getElementById("box");
alert( box.getAttribute("style") );removeAttribute() : 删除属性
imgs.setAttribute("src","2.png");
imgs.removeAttribute("src");

案例：实现固定时间的图形位置和大小的变化显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body style="background: #000">
<img src="1.png" alt="" id="imgs">
<script src="script.js"></script>
</body>
</html>

JS:

var imgs = document.getElementById("imgs");
function fn(max,min){var str=  Math.random()*(max-min)+min;return str;
}
imgs.setAttribute("style","width:"+fn(10,100)+"px;position:absolute;left:"+fn(0,1300)+"px;top:"+fn(0,650)+"px");

一、创建节点

1》创建元素节点语法：document.createElement(节点名称)2》创建文本节点语法：document.createTextNode(内容)
var oDiv = document.createElement("div");
//创建元素节点
document.body.appendChild(oDiv);
//追加节点
var box = document.getElementById("box");
var text = document.createTextNode("我是box");
box.appendChild(text);

二、添加节点

1》追加语法：父元素.appendChild(追加的子元素)2》前置语法：父元素.insertBefor(添加的内容,添加到谁前面)
var uls = document.getElementById("uls");
var oLi = document.createElement("li");
var lis = document.getElementsByTagName("li");
uls.appendChild(oLi);
uls.insertBefore(oLi,lis[1]);

三、删除节点
语法：父元素.removeChild(删除的元素==>子元素)

var lis = document.getElementsByTagName("li");
var uls = document.getElementById("uls");
lis[1].style.background = "red";
//删除ul
uls.removeChild(lis[1]);

案例：简易留言板：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>ul{list-style: none}#box{margin-top: 30px;width:300px;height:300px;border:1px solid #ccc;}
</style>
<body>
<h1>简易留言板</h1>
<input type="text" id="txt">
<input type="button" value="留言" id="btn">
<div id="box"><ul id="uls"></ul>
</div>
<script src="script.js"></script>
</body>
</html>

Js:

var btn = document.getElementById("btn"),uls = document.getElementById("uls"),txt = document.getElementById("txt");
btn.onclick = function(){var lis = document.getElementsByTagName("li");var oLi = document.createElement("li");//1》创建li元素节点// uls.appendChild(oLi);uls.insertBefore(oLi,lis[0])//2》放入到ul元素节点中/*var t = document.createTextNode(txt.value);oLi.appendChild(t);*/oLi.innerHTML = txt.value+"<a href='javascript:;'>  删除</a>";//3》把text的value放入到li节点中var oA = document.getElementsByTagName("a");for(var i=0;i<oA.length;i++){oA[i].onclick = function(){uls.removeChild(this.parentNode);}}
}

总结样式

一、元素样式
box.style.样式名称 ===》只能获取到行内样式
**如何获取到样式表中的样式
1》非IE:
getComputedStyle(元素,null).样式名称
2》IE:
元素.currentStyle. 样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>
#box{width:300px;height: 300px;background: red;opacity: 0.5;border:10px solid #ccc;
}
</style>
<body>
<div id="box"></div>
<script src="script.js"></script>
</body>
</html>

Js:

var box = document.getElementById("box");
//alert(   box.style.width   );
//alert(  getComputedStyle(box,null).width )
//alert( box.currentStyle.width )function getAttr(dom,value){if(  dom.currentStyle  ){return dom.currentStyle[value];}else{return getComputedStyle(dom,null)[value];}
}
alert(   getAttr(box,"width")   );