超级完整的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("
")
    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
a>b?alert("对"):alert("错");

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

var num1 = 10;
var num2 = 20;
if(num1<num2){
       //  10 < 20
    alert("您说的对");
}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+"
");
}

比喻：

（起始条件）        （终止条件）			（步长值）
发车时间			末班车时间				发车周期
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+"
");
    }
}
or
for(var i=0;i<=3;i++){
     
    for(var j=1;j<5;j++){
     
        document.write(j+"
");
    }

乘法表：

for(var i=1;i<=9;i++){
     
    for(var j=1;j<i+1;j++){
     
        document.write(  j+"*"+i +"="+j*i+"   "    );
    }
    document.write("
");
}

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|03
    function 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+"  删除";
    //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")   );