JavaScript_javascript最新版-CSDN博客

应用场景：

JavaScript用来做前端页面校验；

JavaScript可以实现网页的一些动画效果，列如：轮番图；

JavaScript介绍：

JavaScript 是一门跨平台、基于对象的脚本语言，来控制网页行为的，它能使网页可交互。

JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。

JavaScript（简称：JS）在 1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准。

ECMAScript 6 (ES6) 是最新的 JavaScript 版本（发布于 2015 年)。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript语言不需要编译，直接由各大浏览器解析运行。学习JavaScript语言不需要单独安装软件，只需要浏览器即可。

1.3 JavaScript特点

脚本语言

浏览器分成两部分：渲染引擎和JS引擎。渲染引擎:用来解析HTML和CSS,俗称内核，例如chrome浏览器的blink。JS引擎：也称为JS解释器。用来读取网页中的JS代码，对其处理后运行，例如chrome浏览器的V8。浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行执行代码时逐行解释每一行源码(转换为机器语言)，然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

弱类型

JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。

JavaScript的组成

组成部分作用;

ECMAScript 构成了JavaScript核心的语法基础;

BOM Browser Object Model 浏览器对象模型，用来操作浏览器上的对象;

DOM Document Object Model 文档对象模型，用来操作网页中的元素(标签);

二.JavaScript引入方式；

内部脚本语言：

将 JS代码定义在HTML页面中，JavaScript 代码必须位于<script> </script>标签之间。

在 HTML 文档中可以在任意地方，放置任意数量的。

一般把脚本置于元素的底部，可改善显示速度，因为脚本执行会拖慢显示

注意下面的代是js代码只是放在HTML里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert("出现一个弹框");//alert出现一个弹框;
    </script>
    
</body>
</html>

外部脚本：

将 JS代码定义在外部 JS文件中，通过标签引入到 HTML页面中

标签要么用于定义内部脚本，要么用于引入外部js文件，不能混用

标签不能自闭合

js代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="D:\visual.Code\day8-16\js\damo01.js"> </script>
    
</body>
</html>

三.JavaScript基础语法。

3.1 JavaScript的书写语法。

区分大小写

每行的结尾分号可有可无

注释：单行注释：// 多行注释： /*注释内容*/。

3.2JavaScript的三种输入方式：

弹出警告框：window.alert("helloJs~")；

输出数据到页面：doucument.write(hello Js~");

输出到游览器到控制台：console.log(hello Js~");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
        alert("学习js的第一天");//弹出警告框aiert;
        document.write("js有点难受奥")//输出数据到页面上，
        console.log("简简单单");//输出到游览器控制台
        </script>
    
</body>
</html>

3.3JavaScript定义变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量

JavaScript 是一门弱类型语言，变量可以存放不同类型的值

ES 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明

ES6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
        //Es6之前用的是var定义变量;
       var i=10;
       console.log(i);
       var n="hello";
       console.log(n);

       //Es6之后就是用let来定义变量;
       let i=10;
       console.log(i);
       let n="hello";
       console.log(n);

       //Es6定义常量使用const,常量的值不可以改变；
       const s=3.14;
       console.log(s);
        </script>
    
</body>
</html>

JavaScript数据类型；

原始类型

number：数字（整数，小数，NaN；

string ：字符，字符串，单双引皆可；

boolean：布尔 true false；

null ：对象为空；

nudefined：当声明的变量未初始化时，该变量的默认值是nudefined；

引用数据类型：

就是对象。Object Date等

使用typeof运算符可以获取数据的类型；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
       //number (整数 小数 NaN)  
             let v01=10;    

            console.log(v01);    

            console.log(typeof v01); 


            let v02=1-"a";  

            console.log(v02);  

            console.log(typeof v02);  


            //string 字符类型        
            let v03="hello";   

            console.log(v03);    

            console.log(typeof v03);  


            //布尔类型  true false        
            let v04=true;  

            console.log(v04); 

            console.log(typeof v04);  
            
            
             //null:空对象类型     

             let v05=null;

             console.log(v05); 

           console.log(typeof v05);  

           //undefined:未定义类型    

            let v06;     

            console.log(v06);     

            console.log(typeof v06);     

            //引用数据类型 Object Date等        
            let date = new Date();
            //获取当前系统时间       
             console.log(date);
        </script>
    
</body>
</html>

JavaScript运算符：

一元运算符：++，--

算术运算符：+，-，*，/，%

赋值运算符：=，+=，-=...

关系运算符：>，<，>=，<=，!=，==，===...

逻辑运算符：&&，||，!

三元运算符：条件表达式 ? 值1 : 值2；

共同点：其实上面的运算符都跟java里面的运算符用法一样，

不同点就是关系预算符里面的：==和===的区别；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
         /*           
          == 和 ===区别           
           ==:非严格比较,会进行类型转换,               
           如果两端的数据类型不一致,会尝试将两端的数据转换成number,再对比number大小            
           ===:严格比较,不会进行类型转换,                
           如果两端数据类型不一致,直接返回false,数据类型一致在比较是否相同       
            */       
           let i=10;       
           let j='10';       
           console.log(i==j);//true       
           console.log(i===j);//false       
           /*            
           逻辑运算符: && || !            
           1.&& 短路与:遇false则false  false && true            
           2.|| 短路或:遇true则true    true || false            
           3.在JS中有六种false                
           false  0   空字符串""  NaN  null  undefined                
           在JS中逻辑运算符可以针对任意类型进行运算       
           */       
          if(0 && true){            
            console.log("真的");                   
        }else{            
            console.log("假的");       
        }  

        if("" && true){            
            console.log("真的");                   
        }else{
            console.log("假的");      
         }
        
        </script>
    
</body>
</html>

JavaScript全局函数

其他类型转换为数字：parseInt(数值)，将参数数值转换为整数，从左向右解析，遇到非数值就停止解析。

如果字面值不是数字，则转为NaN。

布尔类型转换为整数：Number()，true 转为1，false 转为0

其他类型转为 boolean：Boolean(value)

number：0和NaN转为false，其他的数字转为true

string：空字符串转为false，其他字符串转为true

null:转为false

undefined：转为false

在JavaScript中有全局函数概念：不归属任何对象，即可以理解为不需要任何对象就可以调用的函数；注意：所有的全局函数都可以使用浏览器窗口对象调用，即window对象调用，但可以省略不写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
        //整数的转换
       let c = "1554hello";
       let d = parseInt(c);
       document.write(d);//1554

       let c1 = "3.14";
       let d1 = parseInt(c);
       document.write(d);//3

       let c2 = "hello100";
       let d3 = parseInt(c);
       document.write(d);//NAN
        </script>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
        //布尔类型转换为整数；
        let a =true;
        let b=Number(a);
        document.write(b);//1

        let a1 =false;
        let b1=Number(a1);
        document.write(b1);//0

        //其他类型转换为布尔类型
        let a2 =1;
        let b2=Boolean(a2);
        document.write(b2);//true
        let a3 =0;
        let b3=Boolean(a3);
        document.write(b3);//false;
        </script>
    
</body>
</html>

JavaScript流程控制语句

switch

for

while

do...while

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
     //打印99乘法表：
     for(let i=1;i<=9;i++){            
        for(let j=1;j<=i;j++){                
            document.write(i+"*"+j+"="+i*j+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")            
        }            
        document.write("<hr/>");        
    }
        </script>
    
</body>
</html>

JavaScript函数(重要部分）:

方式一：

定义：JavaScript 函数通过 function 关键词进行定义

形式参数不需要类型。因为JavaScript是弱类型语言

返回值也不需要定义类型，可以在函数内部直接使用return返回即

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
    /*  function functionName(参数1,参数2..){                
    要执行的代码            
    }            
    调用函数:函数名(实参,....); 函数必须被调用才能执行        
    */              
    function fn01(){            
    console.log("fn01....");       

}       
    fn01();       
        function fn02(n,m){            
        console.log(n+"......"+m);            
        return n+m;      
 }     
        let sum=fn02(2,3); 

         console.log(sum);
         
        </script>
    
</body>
</html>

跟java里面的方法有些类似；但是java里面比较严谨一些；

方式二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
    /* 
               匿名函数:没有名字的函数
                格式:            
                let 函数名=function(参数列表){
                                函数体            
                                }        
                                */        
                               //将匿名函数赋值给一个变量      

                               let add=function(n,m){      

                                console.log(n+"..."+m);
                                return n+m;       
                             }       
                              //调用函数        
                              let sum=add(2,3);       
                               console.log(sum);


        </script>
    
</body>
</html>

注意事项：

匿名函数还可以作为另一个函数的参数传递

在JavaScript中没有函数重载概念，如果存在函数名一样的函数，后出现的函数就会覆盖之前的函数名

在JavaScript中调用无参函数可以传递实参；调用有参函数可以不传递实参.数据没有丢失会放到js的一个内置数组对象中 arguments

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
   //匿名函数还可以作为另一个函数的参数传递        
   function fn01(x){          
      /*               
       x=function(){    
                       
       console.log("匿名函数...");
         }  
                 */           
                 console.log("fn01......");            
                 x();       
                 }                
                 fn01(function(){            
                    console.log("匿名函数...");                   
                 });       
                  //在JavaScript中没有函数重载概念，如果存在函数名一样的函数，        
                  //后出现的函数就会覆盖之前的函数名        
                  function fn02(){            
                    console.log("fn02...");        
                 }        
                 function fn02(a,b){            
                    console.log("fn02..."+a+"..."+b);         
                }        
                fn02(10,20); //fn02...10...20        
                fn02();//fn02...undefined...undefined        
                //在JavaScript中调用无参函数可以传递实参；        
                //调用有参函数可以不传递实参.数据没有丢失会放到js的一个        
                //内置数组对象中 arguments        
                function fn03(){            
                    console.log("fn03...");            
                    for(let i=0;i<arguments.length;i++){                
                        console.log(arguments[i]);            
                    }
                }        
                fn03(2,3);
        </script>
    
</body>
</html>

JavaScript对象：

3.1数组对象Array

3.1.1:定义格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
   /*      
   创建数组对象方式一：采用Array方式     
   */    let arr = new Array(1,2,1.2,"哈哈");   
    //遍历数组   
     //使用增强for    
     // for(let x of arr){//x表示数组的数据    
     //     console.log(x);   
      // }    
      //1.采用方式一即上述方式定义数组注意：如果只给一个number类型的值，
     // 那么此时数值表示数组长度，数组中的数据都是empty    
     let arr1=new Array(10);    
     console.log(arr1.length);//10         
     //2.采用方式一即上述方式定义数组注意：如果只给一个number类型的值，那么此时数值表示数组长度，要求不能给小数，数组长度不能是小数    
      let arr2=new Array(3.14); 
       console.log(arr2.length);      
        //3.采用方式一即上述方式定义数组注意：如果只给一个非number类型的值， 那么此时数值表示数组的元素    
        let arr3=new Array("华哥");    
         console.log(arr3.length);//长度是1   数据是 ['华哥']    
         //4.js中的数组长度是可变的   
          let arr4=new Array(10,20,1.2,"柳岩");//数组长度是4      
          //给索引是7的位置添加数据   
           arr4[7]="牛";//表示索引为7的添加一条数据   
           //数据： [10, 20, 1.2, '柳岩', empty × 3, '牛']  长度变为8


           let arr5=new Array(10,20,1.2,"柳岩");//数组长度是4      
           //更改长度    
           arr5.length=2;//[10, 20]


            //创建对象方式二：
           let arr5=[10,1.2,"呵呵"];    
           //定义数组    
           let arr5=[10]; //10表示数组元素，长度是1
        </script>
    
</body>
</html>

常见属性和函数：

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

splice();根据索引删除数组里面的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
        /*
        数组Array对象中的函数 
        */   
        let arr = [10, 1.2, '哈哈'];    
        //push()    向数组的末尾添加一个或更多元素，并返回新的长度。  
        arr.push(true,100,10); 
         console.log(arr);//长度为:6      
         /*       
          2.splice(index,n)   
          从数组中删除元素。           
           index表示从哪个索引删除           
            n表示删除数据的个数     
            */     
           let arr1 = [10, 1.2, '哈哈'];     
           //需求:删除数据1.2 哈哈     
           arr1.splice(1,2); //根据数组的索引进行删除   
           //第一个参数1表示arr1数组的索引，从1索引开始删除  
           //第二个参数2表示删除2个数据
        </script>
    
</body>
</html>

3.2正则对象RegExp

直接量：注意不要加引号；

var reg = /^正则表达式符号$/;

创建RegExp对象；

Var reg = new RegExp("^正则表达式符号$");

方法：

test(str):判断指定字符串是否符合规则，返回true或则 false

语法：

^表示开始

$：表示结束

[]:代表某个范围内的单个字符，比如： [0-9] 单个数字字符

.:代表任意单个字符，除了换行和行结束符

\w:代表单词字符：字母、数字、下划线(_)，相当于 [A-Za-z0-9_]

\d:代表数字字符：相当于 [0-9]

量词：

+:至少一个*:零个或多个?:零个或一个

{x}:x个

{m,}:至少m个

{m,n}:至少m个，最多n个

只能输入数字: ^[0-9]*$

6到16位的数字: ^\d{6,16}$

字母开头6-16位: ^[a-zA-Z][a-zA-Z0-9]{5,15}$

需求：使用正则表达式验证指定的字符串是否满足长度为6；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
      /*           
       test(被验证的字符串) 如果被验证的字符串满足正则对象中的表达式   
                则test函数返回true，否则返回false   
                     需求：验证指定字符串长度是否是6    
                       */       //1.创建正则对象    
                          //let reg=new RegExp("^.{6}$");     
                            let reg=/^.{6}$/;     
                          //2.使用正则的对下调用验证的函数test    
                            let b=reg.test("abcdefg");     
                             //3.判断      
                              if(b){         
                                console.log("通过校验");    
                               }else{          
                               console.log("校验失败");     
                             }
        </script>
    
</body>
</html>

String对象：

定义格式：

let 变量名 = new String (s);//方式一

let str = new string ("hello");

let 变量名 = s；//方式二

let str = "hello";

let str = 'hello';

属性：

length：字符串的长度。

方法：

charAt() 返回在指定位置的字符串；

indexo() 返回字符串第一次出现索引的位置；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
    /*    
          String字符串对象    
           */    
          //1.创建对象 了解   
           let s = new String("abc");   
            console.log(s);    
            console.log(s.toString());//"abc"   
             //2.创建对象  掌握   
              let s1="abc";   
           console.log(s1);//"abc"    
           //3.创建对象 掌握    
           let s2='abc';
           console.log(s2);//"abc"   
           //4.常见属性：length 表示求字符串的字符个数或者字符串长度    
           console.log(s2.length);//3   
          //5.常见函数    
           //5.1 charAt()   返回在指定位置的字符。 参数表示索引，索引从0开始   
           //创建对象   
            let s3="helloworld";    
            console.log(s3.charAt(5));//w
            //5.2.indexOf() 检索字符串。    
            //查找字符串在指定字符串中存在的索引，如果不存在返回-1    
           console.log(s3.indexOf("wor"));//5
        </script>
    
</body>
</html>

自定义对象（重要）

格式：

let 对象名 ={

属性名称1：属性名称1;

属性名称2：属性名称2;

...

函数名称：function(形象列表）{

...

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script >
 let person ={       
         //属性名:属性值         
        name:"柳岩",        
         address:"湖南",            
         age:18,            
         //定义函数  函数名:function(形参列表){}           
          eat:function(){           
     //TODO:如果在自定义对象中使用当前自定义对象中的其他属性或者函数那么格式：this.属性名或者this.函数名(实参);            
     console.log("干饭人，干饭魂..."+this.address);//this表示当前对象即person            
     console.log("干饭人，干饭魂..."+person.address);//this表示当前对象即person           
      }       
     };
     //获取name和age的值并输出控制台       
      console.log(person.name);//柳岩  获取属性值：对象名.属性名       
       console.log(person.age);//18       
        //调用函数  对象名.函数名(实参);        
        person.eat();
        </script>
    
</body>
</html>

BOM对象

Browser Object Model 浏览器对象模型。JavaScript 将浏览器的各个组成部分封装为对象

Window ：浏览器窗口对象。对象表示浏览器中打开的窗口。

Navigator：浏览器对象。对象包含有关浏览器的信息。

Screen：屏幕对象。对象包含有关客户端显示屏幕的信息。

History：历史记录对象。对象包含用户（在浏览器窗口中）访问过的 URL。

Location：地址栏对象。对象包含有关当前 URL 的信息。

window对象

直接使用window调用window对象中的属性和函数，其中window可以省略不写。

属性：获取其他BOM对象，

函数

alert()显示带有一段消息和一个确认按钮的警告框。

prompt()方法用于显示可显示可提示用户进行输入的对话框。回用户输入的字节的字符串。

window.confirm(提示信息）确认框返回true/false。

let 变量名 = window.setInterval(匿名函数,毫秒)；该函数表示JavaScript中的定时器，每隔多少毫秒就会执行一次匿名函数体中的函数体。

window.clearInterval(定时器变量名)：取消定时器

let 变量名 = window.setTimeout(匿名函数,毫秒)；该函数表示JavaScript中的定时器，每隔多少毫秒就会执行一次匿名函数体中的函数体，只会执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //做一个警告框的定时器
        window.setTimeout(function(){//window可以省略不写
                console.log("暑假好");//函数里面的内容
        },5000);//每隔5秒输出一次
        

    </script>
</body>
</html>

history:

获取：使用window.history获取，其中window.可以省略不写：

window.history.方法()：

方法:

forward()：加载history列表中的下一个URL

back()：加载history列表中的前一个URL

操作：第一步先建立两个文件

第一个文件的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href ="demo02.html">跳转到demo02下面</a>
    <button onclick="fn01()">前进</button>
    <script>
      function fn01(){
        window.history.forward();
      }

    </script>
</body>
</html>

文件二的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="fn02()">后退</button>
    <script>
        function fn02(){
            window.history.back();
        }
    </script>
</body>
</html>

location（重点）

获取：使用window.location获取，其中window.可以省略

wind.location.方法();

属性：href:设置或者返回完整的URL；

例如：做一个5秒后跳转到百度网页的小练习；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <script>
       setInterval(function(){
        window.location.herf="https://www.baidu.com";//window可以省略不写
       },5000);//设置5秒后跳转网页到百度
    </script>
</body>
</html>

DOM（重点）

DOM对象概述：

Document Object Model 文档对象模型。将标记语言的各个组成部分封装为对象。

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

注意事项：

DOM:文档对象模型，操作html标签的文本属性 css样式以及事件的。

DOM中将所有的标签封装成对象 img标签 ===>Image

对象所有标签的父对象是Element。

2.2 获取 Element

获取：使用Document对象的方法来获取

getElementById：根据id属性值获取，返回一个Element对象

getElementsByTagName：根据标签名称获取，返回Element对象数组

getElementsByName：根据name属性值获取，返回Element对象数组

getElementsByClassName：根据class属性值获取，返回Element对象数组

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="img/off.gif" id="myImg"/>  //可以去去网上自己找一张灯泡的图片
      <div class="cls">hello</div>   
       <div class="cls">world</div>    
       <input type="checkbox" name="hobby"/>吃饭    
       <input type="checkbox" name="hobby"/>睡觉   
        <input type="checkbox" name="hobby"/>打游戏    
        <script>       
         //getElementById：根据id属性值获取，返回一个Element对象      
           //获取img标签        
           let img=document.getElementById("myImg");        
           console.log(img);

           //getElementsByTagName：根据标签名称获取，返回Element对象数组       
            //获取上述所有的div标签        
            let divs01=document.getElementsByTagName("div");        
            console.log(divs01);  

            //getElementsByName：根据name属性值获取，返回Element对象数组        
            //获取上述所有的name属性值是hobby的标签       
             let inputs=document.getElementsByName("hobby");        
             console.log(inputs); 
                   
              //getElementsByClassName：根据class属性值获取，返回Element对象数组        
              //获取class是cls的标签        let divs02=document.getElementsByClassName("cls");       
               console.log(divs02);    
               </script>
   
   
</body>
</html>

操作Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="img/off.gif" id="myImg"/>    
    <div class="cls">hello</div>   
    <div class="cls">world</div>    
    <input type="checkbox" name="hobby"/>吃饭    
    <input type="checkbox" name="hobby"/>睡觉    
    <input type="checkbox" name="hobby"/>打游戏    
    <script>        
    //修改图片地址 src属性:设置或返回图像的 URL。         
    let img=document.getElementById("myImg");        
    img.src="img/on.gif";        
    //设置字体颜色为红色:element.style 设置或返回元素的 style 属性。         
    //更改文本:element.innerHTML 设置或返回元素的内容。         
    let divs01=document.getElementsByTagName("div");        
    for(let i=0;i<divs01.length;i++){            
        let div=divs01[i];            
        div.style.color="green";            
        div.innerHTML="你好";        
    }        
    //设置复选框被选中:checked 设置或返回 checkbox 是否应被选中。         
    let inputs=document.getElementsByName("hobby");        
    for(let i=0;i<inputs.length;i++){
        let input=inputs[i];           
         input.checked=true;        
         }    
         </script>
</body>
</html>

三.事件监听：

3.1 事件概述

事件：HTML 事件是发生在 HTML 元素上的“事情”。

比如：

按钮被点击

鼠标移动到元素之上

按下键盘按键

事件监听：JavaScript 可以在事件被侦测到时执行代码

3.2 事件绑定

事件绑定有两种方式：

方式一：通过 HTML标签中的事件属性进行绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <!-- 方式一: -->    <!-- 给下面的标签绑定单击事件,只要单击下面的按钮就会执行对应函数 -->   
       <input type="button" value="点我试试" onclick="fn01()"/>    
       <script>       
       function fn01(){            
        alert("我被点击了");      
     }    
     </script>   
      <!-- 方式二: -->   
        <input type="button" value="点我试试" id="btn" class="cls"/>   
         <script>       
          // document.getElementById("btn").onclick=function()
          //     alert("我又被点击了");        
          // }       
           //只有是标签对象才可以绑定事件，如果是数组不能直接绑定需要遍历数组取出每个标签对象绑定事件       
            //错误的，document.getElementsByClassName("cls")是数组      
              // document.getElementsByClassName("cls").onclick=function(){       
               //     alert("我又被点了");        
               // }        
               document.getElementsByClassName("cls")[0].onclick=function(){            
                alert("我又被点了");        
                 }   
                 </script>

</body>
</html>

3.3常见事件：

onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="register" action="#">        
        <input type="text" name="username" id="username"/>        
        <input type="submit" value="提交">
    </form>    
    <script>        
    //给form表单绑定提交事件,如果输入框输入值则可以提交表单，如果输入框没有输入值不能提交表单        
    //1.给表单绑定事件        
    document.getElementById("register").onsubmit=function(){       

        //2.获取输入框输入的值            
        let inputValue=document.getElementById("username").value;   

         //3.判断usernameValue是否是空字符            
         if(inputValue===""){    
                        
            //4.不能提交表单                
            //对于onsubmit事件来说，如果可以提交表单，那么绑定的匿名函数返回true(默认的)，反之返回false               
             return false;           
             }else{                
                //5.可以提交表单               
                 return true;            
              }       
          }    
     </script>

</body>
</html>

注意：表单提交事件onsubmit()。对于该事件，如果阻止表单提交，绑定的匿名函数体返回false。可以提交表单返回true。

3.3.2 onload事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>      
      /*            
      TODO:如果将获取form标签的js代码放到form标签上面，那么js引擎在执行js代码的时候例如：           
      document.getElementById("register") 由于浏览器还没有将form标签加载到内存中，因此这行代码           
      document.getElementById("register")是获取不到form标签的           
       TODO:解决问题：我们可以先让浏览器加载下面的html标签，然后回来在执行下面的js代码即可            
       可以将操作html标签的js代码放到onload时间绑定的函数中即可       
       */       
       //console.log(document.getElementById("register"));               
        window.onload=function(){               
         document.getElementById("register").onsubmit=function(){                
             //2.获取输入框输入的值               
            let inputValue=document.getElementById("username").value;               
            //3.判断usernameValue是否是空字符               
          if(inputValue===""){               
        //4.不能提交表单                   
          //对于onsubmit事件来说，如果可以提交表单，那么绑定的匿名函数返回true(默认的)，反之返回false
          return false;               
         }else{                   
             //5.可以提交表单                  
               return true;               
             }          
             }       
          }     
        </script>
        </head>
        <body>    
         <form id="register" action="#">        
       <input type="text" name="username" id="username"/>       
      <input type="submit" value="提交">   
      </form>
</body>
</html>