java云同桌学习系列（十四）——JavaScript语言

本博客java云同桌学习系列，旨在记录本人学习java的过程，并与大家分享，对于想学习java的同学，可以随着我的步伐一起进步，我希望这个系列能够鼓励大家一同与我学习java，成为“云同桌”。

每月预计保持更新数量三章起，每章都会从整体框架入手，介绍章节所涉及的重要知识点及相关练习题，并会设置推荐学习时间，每篇博客涉及到的点都会在开篇目录进行总览。（博客中所有高亮部分表示是面试题进阶考点）

学习时间：两周
学习建议：js语言是实现网页动态的核心，是前端开发的重点，学习js可以让网页动起来，并且动态网页可以具有一定的反爬作用，js语言的基础并不难，真正难点在于交互的部分，比较的繁杂，建议时多查看W3c的文档W3c js语言教程

1.JavaScript概述

首先，声明一点，JavaScript与Java没有任何关系，仅仅只是今日头条与今日油条的关系（/狗头）

JavaScript是一种轻量型、解释型、脚本语言、弱类型、基于对象的，可以嵌入HTML页面由不同浏览器解释执行的一种语言

JavaScript的组成：

与前端技术HTML、CSS的关系，一句话可以概括：HTML是名词，CSS是修饰词，JavaScript是动词，即JavaScript是采用事件驱动的脚本语言，可以实现动态网页

顺便这里帮大家复习一下解释型和编译型语言的区别：

解释型语言：每次运行时都要进行翻译，效率较低，跨平台性好，如：python，JavaScript

解释型语言：源代码—>中间代码—>机器语言

编译型语言：只需编译一次成为机器语言，以后执行无须重新编译，效率较高，跨平台性差，如C，C++

2.JavaScript的使用方式

如同CSS一样，JavaScript也分为内部，外部，内联的使用方式，使用时需要注意因为JavaScript是解释型语言，会一边一行一行翻译然后执行，因此将待操作的html元素写在JavaScript的上方以让其先执行

• 内部JavaScript使用：

    使⽤  <script>  ...  </script>  标签
  

  <script type="text/javascript">
  <!--
  	javaScript语⾔
  //-->
  </script>
  

• 外部JavaScript使用：

    通过外部导入.js文件，提高代码复用性
  

  <script type="text/javascript" src="my.js"></script>
  

• 内联JavaScript使用

    将JavaScript嵌入到某个html元素中去
  

  	<button onclick="javaScript语⾔"></button>
  	<a href="javascript:alert('aa');alert('bb')">点击</a>
  

3.JavaScript基础语法

（1）变量与数据类型

JavaScript是弱类型语言，变量在赋值时才会指定数据类型

因此创建变量时非常简单，只需要关键字var（也可以）

var a,b,c;
a = "list";//赋值时被定义为字符串类型
b = 10;
c = true;

数据类型	分类	描述
字符串（String）	值类型	可使用单引号或双引号创建
数字(Number)	值类型	可接收整型或者浮点型
布尔(Boolean)	值类型	只可以为true或者false
对空（Null）	值类型	没有任何值的变量
未定义（Undefined）	值类型	var定义了一个变量，但还未赋值的变量类型
Symbol	值类型	类似于内建对象类，具有静态属性和静态方法
对象(Object)	引用数据类型	键值对结构的数据类型{firstName:“John”, lastName:“Doe”}
数组(Array)	引用数据类型	变长数组
函数(Function)	引用数据类型	函数的数据类型

使用typeof关键字可以获取一个变量的类型

typeof "zhangsan"             // 返回 string 
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof true                   // 返回 boolean
typeof [10,20,30,40]          // 返回 object
typeof {name:'lisi', age:20}  // 返回 object
typeof new Date()             // 返回 object
typeof function(){}           // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

• 自动类型转换
  当变量进行输出时，会自动调用toString（）方法，自动将其转换为String类型

document.getElementById("demo").innerHTML = myVar;

myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

• 强制类型转换

    格式：
    1.新数据类型（变量）
     Boolean(value); 	// 把给定的值转换成 Boolean 型
     Number(value);	// 把给定的值转换成数字（可以是整数或浮点数）
     String(value) ;	// 把给定的值转换成字符串
     
    2.调用相关函数
    value.toString();		//把给定的值转换成字符串
    parseFloat("3.14")	//强转浮点数，返回 3.14
    parseInt("3.14") 		//强转整型，返回 3
  
    3.使用+转成string
  
    	var s,n;
    	s = "hhh"
    	n = 5
    	typeof (s + n) //返回string
  

（2）特殊运算符

JavaScript中的大多数运算符基本和之前的编程语言一致，接下来也罗列一些特殊的运算符

运算符	描述
===	等值等型（值相等并且类型相等为true）
!==	不等值或不等型（值不相等或类型不相等为true）
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。
delete	删除对象的某个属性，如：delete o.name;

（3）流程控制

1. 分支结构

     - if语句
     - if...else语句
     - if...else if...else语句
     - switch...case  语句
   

2. 循环结构

    - for  - 循环代码块⼀定的次数 	
    - for/in  - 循环遍历对象的属性 	
    
   	for(属性变量 in 被遍历对象){
   	  被执⾏的代码块
   	}
   
   
    - while  - 当指定的条件为  true 时循环指定的代码块 	
    - do/while  - 同样当指定的条件为  true  时循环指定的代码块
   

3. break 语句，用于跳出循环。

4. continue 语句，用于跳过循环中的⼀个迭代。

（4）函数

1. 函数定义与调用

   格式：
   
   	function 函数名（[参数列表..]）{
   	  函数体。。。
   	  [return 返回值;]
   	}
   	
   定义函数的方式：
   
   1.function语句定义函数
   2.函数变量定义函数
   3.定义匿名函数并自调用
   

   	//1.使用function语句定义后调用
       function myFunction(params) {
           console.log("function语句定义与调用")
       };
       myFunction();
   
       //2.使用函数对象定义并调用
       var myFunction = function(params) {
           console.log("函数对象定义与调用方法")
       };
       myFunction();
   
       //3.匿名函数自调用
       (function(params) {
           console.log("匿名函数定义与自调用")
       })();
   

2. 函数参数

   在JavaScript里在给函数传递函数时，同时还会把每个参数传入一个arguments的内置数组变量中，通过数组下标可以调用，arguments[索引]---->实参的值

   function myFunction(a) {
       console.log(arguments[0])//控制台输出：10
   };
   myFunction(10);
   

3. 变量及作用域

   由于函数的出现，作用域分为了函数内和函数外

   局部变量：函数内定义的变量，只在函数内起作用
   全局变量：函数外定义的变量，在整个<script\></script\>内起作用，可以在函数内部使用
   

4. 常用内置函数

函数名	描述
escape()	URL中文编码
unescape()	URL中文解码
eval()	将参数字符串作为代码来执⾏
isNaN()	is not a number (判断，不是⼀个数值)，传入number变量返回false,传入非number变量返回true
parseInt()	强转为整型数字，尽可能转化原则
parseFloat()	强转为浮点型数字，尽可能转化原则

eval（）例子：

    var a = 5;
    str = "var a = 10;";
    console.log(a)//控制台输出：5
    eval(str);
    console.log(a);//控制台输出：10

（5）输入输出

• 输出

函数名	描述
alert()	浏览器弹出弹框输出
console.log()	控制台输出（F12或右键检查，选择Console项可以看到）
document.getElementById(“html显示元素id值”).innerHTML = msg	将html页面中指定id值的输出html元素的显示内容更改为msg

• 输入：

函数名	描述
prompt()	浏览器弹出弹输入框
comfirm()	浏览器弹出确认框，只能选择确定和取消，返回布尔值
document.getElementById(“html接收输入元素的id值”).value	将html页面中指定id值的接收用户输入的数据返回

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>
    <h1 id="test">html交互输入输出小例子</h1>

    <input type="text" id="input"></input>
    <button onclick="outInfo()">输出输入的值</button>
    <br>
    <span id="output"></span>

</body>

<script>
    function outInfo() {
        //1.接收输入的值
        var info = document.getElementById("input").value;
        //2.在html元素上输出该数据
        document.getElementById("output").innerHTML = info;
    }



</script>
</html>

效果图：

（6）数据类型——对象

JavaScript中，对象就是指具有属性和方法的数据类型

对象的定义方式	
1.直接初始化键值对定义对象，键与值使用冒号进行赋值

var o1 = {name : "张三",age : "18"};
console.log(o1,.name,o1.age)//控制台输出：张三 18

2.初始化空对象，后续创建键和值

var o2 = new Object();
o2.name = "李四"
o2.gender = "男"
console.log(o2.name,o2.gender)//控制台输出：李四 男

3.通过函数当作构造函数传入值，new该自定义函数创建对象

function constructor(name,wage) {
    this.name = name;
    this.wage = wage;
    this.myfunction = function(params) {
        console.log("我是对象" + this.name + "的内部函数，只能此对象调用")
    }
}
var o3 = new constructor("王五","5K")
console.log(o3.name + "的工资是" + o3.wage)//控制台输出：王五的工资是5K
o3.myfunction();//控制台输出：我是对象王五的内部函数变量，只能此对象调用

（7）数据类型——数组

JavaScript中的数组可以存放不同类型的值，并且是变长的

定义数组的方式：
1.定义一个空数组，然后往里面放值

//定义一个空数组，逐渐放入值
var array = new Array();
//向数组尾部放入值
array.push(81);
array.push("不同类型")
array[2] = {name : "张三"}
//forEach结构遍历查看数组内容
array.forEach(forEachFunction);
function forEachFunction(value) {
    console.log(value)
}
/*控制台输出：
81
不同类型
{name: "张三"}
*/

2.直接初始化数组数据

var array2 = [55,"haha",array]
//for in结构遍历输出数组的内容
for(var i in array2){
    console.log(array2[i])
}
/*控制台输出：
55
haha
[81, "不同类型", {…}]
    0: 81
    1: "不同类型"
    2: {name: "张三"}
*/

获取数组数据：

1.通过数组下标
数据 = 数组名[下标] 

2.通过pop()弹栈方法，弹出最后一个进入数组的数据
数据 = 数组名.pop();

修改数组数据

1.如果已经知道要修改的数据的下标,直接通过下标指定修改数据
数组名[下标] = 新数据

2.不知道所修改数据的下标
可以通过旧数据和indexOf（）方法找到其对应下标然后修改

var array = [1,"要修改的数据",8];
var index = array.indexOf("要修改的数据");
array[index] = "新数据";

for(var i in array){
console.log(array[i])
/*输出：
1
新数据
8
*/

4.JavaScript内置对象

JavaScript中内置了一些常用功能的对象来供程序员方便的使用其功能。此处不会全面的介绍，只会介绍重点，详细内容请参阅菜鸟编程JavaScript内置对象

（1）date时间对象

• 创建date对象

  //获取此时的时间戳
  new Date()
  //第二种可以直接创建指定时间的date对象
  new Date(year, month, day, hours, minutes, seconds, milliseconds)
  

• 获取及修改时间属性

  date对象提供了若干get（）方法可以获取其中的年月日时分秒

  方法名	描述
  getDate()	以数值返回天（1-31）
  getDay()	以数值获取周名（0-6）
  getFullYear()	获取四位的年（yyyy）
  getHours()	获取小时（0-23）
  getMonth()	获取月（0-11）
  getSeconds()	获取秒（0-59）
  getTime()	获取时间（从 1970 年 1 月 1 日至今）

  对应的set（）系列方法可以修改年月日时分秒

（2）String字符串对象

字符串对象提供了一系列处理文本字符串的方法

方法名	描述
charAt()	返回在指定位置的字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
match()	查找找到一个或多个正则表达式的匹配。
replace()	在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。
search()	查找与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
split()	把字符串分割为字符串数组。
substring()	提取字符串中两个指定的索引号之间的字符。
trim()	去除字符串两边的空白

（3）RegExp正则表达式对象

正则表达式用于对字符串模式匹配及检索替换，使用正则表达式构造对象后，调用对象检索的方法进行匹配

<1>正则表达式语法

正则表达式可以分为两部分，字符和量词，构成了特指某一字符串的表达式

元字符：拥有特殊含义的字符

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找字母，数字，下划线字符。
\W	查找非字母，数字，下划线字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
方括号：表示符合要求的字符
表达式	描述
–	–
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。

量词：表示要匹配到满足要求的字符的数量

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串,可以等同为n+
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

+，*，?在匹配是会遵循贪婪匹配的原则，尽可能多的进行匹配

.*	表示匹配尽可能多任意字符
.*? 表示匹配一个字符组，内部会匹配尽可能多任意字符
\d+ 表示匹配尽可能多的，且至少为一个数字

<2>js中正则表达式的使用方式

正则表达式的应用非常广泛，在各大语言中几乎都是通用的，只不过的使用方式的区别罢了

JavaScript语言中的正则的使用格式为：

/pattern/modifiers/
pattern是表达式串
modifiers是修饰符

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配

JavaScript中String的有一些方法支持传入一个正则表达式作为参数

方法名	描述
search	检索与正则表达式相匹配的值。
match	找到一个或多个正则表达式的匹配。
replace	替换与正则表达式匹配的子串。
split	把字符串分割为字符串数组。

例如，我们使用正则表达式执行替换的操作：

//正则匹配abc，修饰符i忽略大小写，将其替换成def
"abcABCdef".replace(/abc/i,"def");
//结果:"defdefdef"

正则表达式不单单可以传入方法使用，也可以通过正则表达式对象进行使用

var re = new RegExp(正则匹配串, 修饰符);

然后由对象调用方法执行相关的操作

方法名	描述
exec	检索字符串中指定的值。返回找到的值，并确定其位置。
test	检索字符串中指定的值。返回 true 或 false。
toString	返回正则表达式的字符串。

<3>java中正则表达式的使用方式

基本主流语言中正则表达式的语法都是通用的，没有什么大的差异，不同语言之间正则表达式的差异主要在于使用方式上。

java中使用正则表达式的步骤：

1. Pattern.compile(正则表达式“)设置匹配表达式
2. pattern.matcher(”要匹配的字符串“)
3. matcher.matches()执行正则全部匹配，及当所有字符串都匹配上才会返回true
3. matcher.find()执行正则部分匹配，及只要字符串中有匹配上的则返回true
4. 得到匹配后的matcher对象，获取匹配结果等等，包含分组匹配等等信息

全部匹配和部分匹配的区别，简单区别如下，详细区别见 浅谈fin()与matches()的区别

比如有字符串123
- 全部匹配 ：
正则[2|-2]，就会失败，因为只匹配到了2这个字符，剩余字符没有匹配到，一般全部匹配搭配分组使用，即全部匹配后，分组取出想用的数据
- 部分匹配：
-正则[2|-2],就会成功，因为匹配到了2这个字符

获取分组信息可以使用matcher.group()方法，可不传参数或传int参数

不传和传0表示获取整个匹配结果，
传1表示获取匹配到的第一个分组结果，以此类推
或者还可以给分组命别名的方式，group取出时传入别名获取

示例代码：

String file ="{aaa}---{bbb}---{ccc}";
        Pattern pattern = Pattern.compile("\\{(.*)\\}---\\{(.*)\\}---\\{(?<name>.*)\\}");
        Matcher matcher = pattern.matcher(file);
        matcher.matches();
        System.out.println(matcher.group(0));
        System.out.println(matcher.group(1));
        System.out.println(matcher.group(2));
        System.out.println(matcher.group("name"));
        /*输出：
        {aaa}---{bbb}---{ccc}
		aaa
		bbb
		ccc
		*/

实例：个人信息注册界面

要求：用户输入各种信息，利用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>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            background-color: lightskyblue;
        }

        h3{
            position: relative;
            margin: 50px 500px;
        }

        #body{
            width: 600px;
            height: 400px ;

            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: auto

        }

        form{
            border:2px solid black;
        }

        input{
            height:20px;
            margin: 10px;
        }

        span{
            color: gray;
        }
        
    </style>
</head>
<body>

    <h3>个人信息登记表</h3>

    <div id="body">
        <form action="" method="post" name="myform" onsubmit="return doSubmit();">
            登陆账号：<input type="text" name="name" onblur="checkName()"><span>6-18位有效字符（字母、数字、下划线）</span><br>
            登陆密码：<input type="password" name="password" onblur="checkPassword()"><span>6-18位任意字符</span><br>
            重复密码：<input type="password" name="confirm_password" onblur="checkConfirmPassword()"><span>重复密码与登陆密码一致</span><br>
            性  别  ：<input type="radio" name="sex" value="male" checked>男
                    <input type="radio" name="sex" value="female">女<br>
            年  领  ：<input type="number" name="age" onblur="checkAge()"><span>大于0的任意两位数</span><br>
            手机号码：<input type="tel" name="telephone" onblur="checkTelephone()"><span>由1开头的11位整数</span><br>
            邮  箱  ：<input type="email" name="email" onblur="checkEmail()"><span>有效的Email地址</span><br>
            学  历  ：<select name="education" id="education">
                        <option value ="doctor">博士</option>
                        <option value ="master">硕士</option>
                        <option value="bachelor">本科</option>
                        <option value="Associate">专科及以下</option>
                    </select><br>
            <input type="submit" value="提交">
            <input type="reset" value="清除">
        </form>
    </div>
</body>
<script>
    
    function checkName() {
        //获取账号
        var name = document.myform.name.value;
        //验证
        if(name.match(/^\w{6,18}$/) == null){
            document.querySelectorAll("span")[0].style.color="red"
            return false;
        }
        document.querySelectorAll("span")[0].style.color="gray"
        return true;
    }


    var password
    function checkPassword() {
        //获取登陆密码
        password = document.myform.password.value;
        
        //验证
        if(password.match(/^.{6,18}$/) == null){
            document.querySelectorAll("span")[1].style.color="red"
            return false;
        }
        document.querySelectorAll("span")[1].style.color="gray"
        return true;
    }


    function checkConfirmPassword() {
        //获取重复密码
        var confirm_password = document.myform.confirm_password.value;

        //验证
        if(password != confirm_password){
            document.querySelectorAll("span")[2].style.color="red"
            return false;
        }
        document.querySelectorAll("span")[2].style.color="gray"
        return true;
    }


    function checkAge() {
        //获取年龄
        var age = document.myform.age.value;
        //验证
        if(age.match(/^[1-9][0-9]$/) == null){
            document.querySelectorAll("span")[3].style.color="red"
            return false;
        }
        document.querySelectorAll("span")[3].style.color="gray"
        return true;
    }


    function checkTelephone() {
        //获取手机号
        var telephone = document.myform.telephone.value;
        //验证
        if(telephone.match(/^1\d{10}$/) == null){
            document.querySelectorAll("span")[4].style.color="red"
            return false;
        }
        document.querySelectorAll("span")[4].style.color="gray"
        return true;
    }

    function checkEmail() {
        //获取邮箱
        var email = document.myform.email.value;
        //验证
        if(email.match(/^\w+@\w+(.\w){1,2}$/) == null){
            document.querySelectorAll("span")[5].style.color="red"
            return false;
        }
        document.querySelectorAll("span")[5].style.color="gray"
        return true;
    }

    function doSubmit() {

        console.log("submit!");

        var count = 0;
        if (checkName()) {
            count++;
        } else if(checkPassword()) {
            count++;
        }else if(checkConfirmPassword()) {
            count++;
        }else if(checkAge()) {
            count++;
        }else if(checkTelephone()) {
            count++;
        }else if(checkEmail()) {
            count++;
        }

        console.log(count);

        if (count == 6) {
            //全部提交没有问题
            alert("信息提交成功！")
            return true;
        }else{
            alert("请按照提示填写信息！")
            return false;
        }       
    }

</script>
</html>

5.JavaScript与HTML、XML交互

JavaScript语言为了实现网页的动态,与html的交互是极其重要的一部分

下面编写两个小例子了解一下最通用的交互模式:

• html元素触发JavaScript函数

<!DOCTYPE html>
<html lang="en">
<body>
    <button onclick="buttonFunction()">交互测试</button>
</body>
<script> 
    function buttonFunction(){
        alert("你点击了测试按钮");
    }
</script>
</html>

• JavaScript控制页面html元素

<!DOCTYPE html>
<body>
    <p id="p1">这是p1的值</p>
    <p id="p2"></p>
</body>
<script>
    p1 = document.getElementById("p1").innerHTML;
    document.getElementById("p2").innerHTML = p1;
</script>
</html>

重点是JavaScript控制html元素,其中,最常用的是getElementById 方法,通过id值找到要控制的html元素，这也就是JavaScript中很重要的DOM编程

HTML DOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型。

通过DOM模型，JavaScript可以实现以下这些强大的功能：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

HTML DOM 方法是能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是能够设置或改变的 HTML 元素的值。

（1）HTML DOM Document 对象

如果希望访问 HTML 页面中的任何元素，那么总是应该从访问 document 对象开始

• 查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

• 改变 HTML 元素

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

• 添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

（2）JavaScript HTML DOM 事件

我们上面的例子给button设置的触发方式是onclik，即单机触发，实际上，常用的触发方式还有如下几种：

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载
onmouseenter	当鼠标指针移动到元素上时触发。
onmouseleave	当鼠标指针移出元素时触发，通常和enter配对使用
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发

在事件的触发函数内部，可以用this关键字指代事件源，即调用此触发函数的元素对象

（3）DOM节点

document对象作为整个html文档的根结点，可以通过节点关系name属性来指定某个html元素对象

document.父元素name属性.子元素name属性

比如：html网页中有存在着某种嵌套关系，就可以通过子父关系的name属性值定位到某个html元素，例子请参见下面的（4）计算器实例

（4）简易网页计算器实例

要求：在网页上制作一个输入数字后可以实现加减乘除功能的计算器

<!DOCTYPE html>
<body>
    <form action="" method="get" name="myform">

        输入第一个数：<input type="text" name="input1">
        输入第二个数：<input type="text" name="input2">
        <br>
        结果：<input name="result" readonly></input>
        <br>
        选择要执行的运算符：
        <br>
        <input type="button" name="add" onclick="button(1)" value="加">
        <input type="button" name="sub" onclick="button(2)" value="减">
        <input type="button" name="multiplication" onclick="button(3)" value="乘">
        <input type="button" name="division " onclick="button(4)" value="除">

    </form>
</body>
<script>
    function button(param) {
        var input1 = parseInt(document.myform.input1.value);
        var input2 = parseInt(document.myform.input2.value);

        var res;
        switch (param) {
            case 1:
                res = input1 + input2 ;
                break;
            case 2:
                res = input1 - input2 ;
                break;
            case 3:
                res = input1 * input2 ;
                break;
            case 4:
                res = input1 / input2 ;
                break;
        }

        document.myform.result.value = res.toString();
    }
</script>
</html>

效果图：

（5）JS 浏览器BOM

浏览器对象模型 (BOM) 使 JavaScript 可以与浏览器进行交互。

BOM中最顶级的对象是WIndow对象，甚至document也是其属性之一，它是浏览器的实例化表示

1.所有浏览器都支持 window 对象。它表示浏览器窗口。
2.所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
3.全局变量是 window 对象的属性。
4.全局函数是 window 对象的方法。
5.其中的一些对象在使用时可以省略Window

WIndow对象的常用属性及方法功能十分强大，以下只罗列一些常用的方法

方法名（部分省略了Window）	描述
window.open()	打开新窗口
window.close()	关闭当前窗口
window.moveTo()	移动当前窗口
window.resizeTo()	调整当前窗口的尺寸
history.back()	与在浏览器点击后退按钮相同
history.forward()	与在浏览器中点击向前按钮相同
alert()	警告框
confirm()	确认框
prompt()	提示框
setInterval()	间隔指定的毫秒数不停地执行指定的代码。
setTimeout()	在指定的毫秒数后执行指定代码。

常用属性（省略Window）	描述
screen.availWidth	可用的屏幕宽度
screen.availHeight	可用的屏幕高度
location.hostname	返回 web 主机的域名
location.pathname	返回当前页面的路径和文件名
location.port	返回 web 主机的端口 （80 或 443）
location.protocol	返回所使用的 web 协议（http: 或 https:）

（6）XML DOM

学习XML DOM中，想要更加细致的了解建议观看W3school的XML DOM教程
菜鸟编程 XML DOM教程

类似与HTML DOM，XML DOM也 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

现代的大多数浏览器都提供了xml的解析器，所以可以通过js将xml文档加载进来进行操作

方法名	描述
loadXML()	方法加载字符串（文本）
load()	用于加载文件。

通用浏览器中的方式示例

• 加载xml文件

xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";
xmlDoc.load("books.xml");

• 加载xml字符串

parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");

XML 文档中的每个成分都是一个节点。

- 整个文档是一个文档节点
- 每个 XML 标签是一个元素节点
- 包含在 XML 元素中的文本是文本节点
- 每一个 XML 属性是一个属性节点
- 注释属于注释节点

XML DOM文档被视作一颗节点树：

对于节点树中的每个节点，都有三个固定的属性：

1.nodeName

	nodeName 是只读的
	元素节点的 nodeName 与标签名相同
	属性节点的 nodeName 是属性的名称
	文本节点的 nodeName 永远是 #text
	文档节点的 nodeName 永远是 #document

2.nodeValue
	元素节点的 nodeValue 是 undefined
	文本节点的 nodeValue 是文本自身
	属性节点的 nodeValue 是属性的值

3.nodeType

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

通过节点与节点之间的子父关系，找到要操作的节点，然后就可以根据节点类型，获取不同节点的值

xmlDoc对象是整个xml的父节点，通过Node属性可确定其他节点element对象

Node属性

属性	描述
childNodes	返回节点的子节点的节点列表。可使用下标选择要操作的节点
firstChild	返回节点的第一个子节点。
lastChild	返回节点的最后一个子节点。
nodeName	返回节点的名称，根据其类型。
nodeType	返回节点的类型。
nodeValue	设置或返回节点的值，根据其类型。

Element 对象方法

方法	描述
appendChild()	把新的子节点添加到节点的子节点列表末尾。
getAttribute()	返回属性的值。
setAttribute()	添加新属性。
getElementsByTagName()	返回匹配的元素节点及它们的子节点的 NodeList。

XML DOM获取节点信息和属性信息实例

<!DOCTYPE html>
<body> 
</body>
<script>
    var xml_text = '<persons><person id="10001" groupid="1"><name>李四</name><age>18</age></person><person id="10002" groupid="1"><name>李四</name><age>20</age></person></persons>';
            /* XML字符串结构如下：
            <persons>
                <person id="10001" groupid="1">
                    <name>李四</name>
                    <age>18</age>
                </person>
                <person id="10002" groupid="1">
                    <name>李四</name>
                    <age>20</age>
                </person>
            </persons>
            */
    var parser=new DOMParser();
    xmlDoc=parser.parseFromString(xml_text,"text/xml");
    
    console.log(xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue);    
    console.log(xmlDoc.getElementsByTagName("person")[1].getAttribute("id"));
    /*控制台输出：
    李四
    10002
    */
</script>
</html>

实例：随机点名器

效果图：

打开网页，首先会进入这样一个丑爆了的画面

然后鼠标按下开始按钮不松开，中间就会快速的开始显示数组中的人名，直到松开鼠标，中间才会停止跳动

最后，停止后显示如下，点击开始可以再次开始随机点名

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名器</title>
    <style>
        *{
            /*清除所有控件内外空白*/
            margin: 0px;
            padding: 0px;

            background-color: chocolate;
        }

        #random-caller{
            width: 600px;
            height: 200px;
            /*div块上下左右居中*/
            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto;

            /*文本居中,上下居中通过行高=高度*/
            text-align: center;
            line-height: 200px;

            font-size: 70px;

            background-color:darkgrey;
        }

        .button{
            width: 200px;
            height: 100px;
            
            position: absolute;
            top: 70%;
            left: 0px;
            right: 0px;
            margin: auto;

            font-size: 30px;

            background-color: darkolivegreen;

        }

        .button:hover{
            cursor: pointer;
            background-color: green;
        }
        .button:active{
            background-color: hotpink;
        }

    </style>
</head>
<body>
    <div id="random-caller">
        随机点名器
    </div>
    <button class="button" onmousedown="buttonFunction(true)" onmouseup="buttonFunction(false)">
        开始
    </button>  
</body>

<script>
    //创建数据数组
    var name_array = ['小A','小B','小C','小D','小E','小F'];
    //循环归零变量
    var i = 0;
    //定时清除id值变量，注意必须是全局变量，这样才能在退出触发函数后仍保存数据直到再次进入触发函数时用于清除定时器
    var myTimer
    //定时函数
    function timeFunction(){
        document.getElementById("random-caller").innerHTML = name_array[i];  
        i++;
        if (i == name_array.length) {
            i = 0;
        }   
    }
    //按钮触发函数
    function buttonFunction(mode){
    
        if (mode) {
            console.log("计时已开启");
            document.getElementsByClassName("button")[0].innerHTML = "停止";
            myTimer = setInterval(timeFunction,100);
            console.log("计时器id：" + myTimer);
        } else {
            console.log("计时已关闭");
            console.log("计时器id：" + myTimer);
            document.getElementsByClassName("button")[0].innerHTML = "开始";
            if(clearInterval(myTimer)){
                console.log("清除定时成功");
            }
        }
        
    }
    

</script>

</html>

实例：轮播图

推荐这位大佬的代码最简单的原生js轮播图

创作不易，都学习到这里了，不妨点个关注吧~

6.JavaScript库——JQuery

（1）JQuery概述

jQuery可以看做是一个JavaScript的库，里面封装了大量的JavaScript操作，可以更加简便的代替JavaScript与网页进行交互，极大的简化了JavaScript编程

使用jQuery也非常简单，下载jQuery文件，然后导入jQuery的js文件即可

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

或在浏览器中加载也可以，Google浏览器：

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

（2）jQuery语法

jQuery的使用和css有些类似，可以通过css选择器操作HTML元素及属性

基础语法是：$(selector).action()

美元符号定义 jQuery语句
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

在JavaScript中我们知道，操作某个元素必须要在某个元素被加载后才可以进行操作，jQuery提供就绪函数，来使jQuery语句在所有元素加载完毕后开始执行

$(document).ready(function(){

--- jQuery functions go here ----

});

或者直接这样写：

$(function(){

--- jQuery functions go here ----

});

（3）jQuery选择器

jQuery中选择器的使用和CSS中选择器的使用是相同的，大家可以看我上一篇博客中对于选择器的介绍
Java云同桌学习系列（十三）——前端技术之HTML与CSS

在此简单复习一下常用的选择器：

选择器	实例	选取

• |KaTeX parse error: Expected 'EOF', got '#' at position 13: ("*")| 所有元素 #̲id |(“#lastname”) |id=“lastname” 的元素
  .class| $(“.intro”) |所有 class=“intro” 的元素
  element| $(“p”) |所有 <p> 元素
  .class.class| $(".intro.demo")|所有class="intro"且class="demo"的元素:eq(index)|$(“ul li:eq(3)”) |列表中的第四个元素（index 从 0 开始）
  :contains(text) |$(":contains{(}^{\prime }W3Schoo{l}^{\prime })")|包含指定字符串的所有元素[attribute]|$(“[href]”) |所有带有 href 属性的元素
  [attribute=value] |KaTeX parse error: Expected 'EOF', got '#' at position 10: ("[href='#̲']") |所有 href 属…(“:input”)| 所有 元素
  :text| $(“:text”) |所有 type=“text” 的 元素
  :password| $(“:password”) |所有 type=“password” 的 元素

（4）jQuery事件

jQuery中的事件处理比较的常用，是jQuery的核心，详细内容可以查看jQuery 参考手册 - 事件

我自己常使用的事件方法如下：

方法	描述
bind()	向匹配元素附加一个或更多事件处理器
blur()	触发、或将函数绑定到指定元素的 blur 事件
click()	触发、或将函数绑定到指定元素的 click 事件
dblclick()	触发、或将函数绑定到指定元素的 double click 事件
mouseleave()	触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()	触发、或将函数绑定到指定元素的 mouse move 事件
mousedown()	触发、或将函数绑定到指定元素的 mouse down 事件
mouseover()	触发、或将函数绑定到指定元素的 mouse over 事件
ready()	文档就绪事件（当 HTML 文档就绪可用时）
submit()	触发、或将函数绑定到指定元素的 submit 事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。

基本大多数都对应着CSS中的事件，这里单独说一下bind（）方法

使用bind（）方法可以为一个元素添加多个事件处理函数

语法：
$(selector).bind(event,data,function)

event	必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。

举例：点击鼠标时，点击或隐藏<p>标签
$("button").bind("click",function(){
  $("p").slideToggle();
});

（5）jQuery的DOM操作

既然操作html元素，那就自然离不开对元素属性或内容的操作，jQuery 提供一系列与 DOM 相关的方法，使访问和操作元素和属性变得很容易。

• text() - 设置或返回所选元素的文本内容
  获得的是标签之间的文本，譬如a标签，获得的是a标签中间的中文介绍
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
  获得的是标签的html语句，譬如a标签，获得的是整个a标签的html语句
• val() - 设置或返回表单字段的值
  常用于表单中获取输入的值，通过找到该表单对象后调用此方法

（6）jQuery操作属性

找到html节点对象后，可以调用操作属性的方法更改其属性

方法	描述
addClass()	向匹配的元素添加指定的类名。
attr()	设置或返回匹配元素的html属性和值。
css()	设置或返回CSS样式属性**
hasClass()	检查匹配的元素是否拥有指定的类。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。

其中attr（）方法是最为常用的方法，功能也十分强大，根据传参不同，可以添加属性、修改属性

方法	描述
attr(attribute)	获取该元素的attribute属性的值
attr(attribute,value)	将该元素attribute属性的值更改为value
attr({attribute:value, attribute:value …})	可以同时对该元素的多个属性和值进行操作

实例：使用jQuery重做轮播图

效果图：

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
    margin: 0px;
    padding:0px;
    list-style: none;
}
#flash{ /*根据图片的大小来设置外层div的大小*/
    width: 500px;
    height: 300px;
    margin: 0 auto;
    position: relative; /*设置div定位，方便之后图片及圆点位置的设定*/
    border:1px solid black;
}
#flash img{
    width: 100%;
    height: 100%;
    position: absolute; /*设置所有图片重叠*/
    left: 0px;
    top: 0px;
    display: none; /*设置所有图片隐藏*/
}
#flash ul{
    width: 150px;
    height: 25px;
    border-radius: 20px;
    position: absolute;
    
    bottom: 5%;
}
#flash ul li{
    width: 12px;
    height: 12px;
    margin-top:5px;
    border-radius: 50%;
    margin-left: 15px;
    float: left;
}
#flash ul .li_1{
    background-color:white; /*设置第一个圆点背景色为白色*/
}
#flash .right{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    right: 2%;
    top: 45%;
    background-color: rgba(255,255,255,0.5);
}
#flash .right span{
    width: 100%;
    height:100%;
    color:rgba(0,0,0,0.5);
    font-size: xx-large;
    font-weight: 700;
    line-height: 50px;
    margin-left: 15px;
    cursor: pointer;
}
#flash .left{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    left: 2%;
    top: 45%;
    background-color: rgba(255,255,255,0.5);
}
#flash .left span{
    width: 100%;
    height:100%;
    color:rgba(0,0,0,0.5);
    font-size: xx-large;
    font-weight: 700;
    line-height: 50px;
    margin-left: 15px;
    cursor: pointer;
}
</style>
<script src="./jquery-3.5.0.min.js"></script>
</head>
<div id="flash">
    <img src="./source/img1.png" alt="" style="display: block">
    <img src="./source/img2.png" alt="">
    <img src="./source/img3.png" alt="">
    <img src="./source/img4.png" alt="">
    <img src="./source/img5.png" alt="">
    <ul>
        <li class="li_1"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="right">
        <span> > </span>
    </div>
    <div class="left">
        <span> < </span>
    </div>
</div>
<body>
<script>
    //jQuery的入口
    $(function () {
        //通过jQuery语句获取到各元素对象
        var div = $("#flash");
        var img = $("img");
        var ul = $("ul");
        var li = $("li");
        
        var div_r = $(".right");
        var div_l = $(".left");
        console.log(li);//测试
        var len = img.length;
        //代表各图片
        var count = 0;

        function run(){ 
            count++;
            count = count==5?0:count; 
            //使当前count位图片显示，圆点变为白色
            for(var i=0;i<len;i++){   
                //使用JQuery语句的css方法修改css属性 
                img.eq(i).css("display","none"); 
            }
            //使用JQuery语句的css方法修改css属性
            img.eq(count).css("display","block");
            for(var i=0;i<li.length;i++){
                //使用JQuery语句的css方法修改css属性
                li.eq(i).css("backgroundColor","gray");
            }
            //使用JQuery语句的css方法修改css属性
            li.eq(count).css("backgroundColor","white");
        }


        //将任务函数给定时器，定时1s循环
        var timer = setInterval(run,1000); 

        //将鼠标停在图片上，图片停止转动，清除定时器
        div.mouseover(function(){
            clearInterval(timer);
        }); 
            
        //鼠标移出后，继续转动，和enter相配合
        div.mouseleave(function(){
             timer = setInterval(run,1000);
        }); 
           
        //将对应圆点的图片进行显示
        for(var i=0;i<len;i++){
            li.eq(i).index = i; 
           
            //鼠标移到元素上触发
            li.eq(i).mouseenter(function(){
                for(var i=0;i<len;i++){

                    li.eq(i).css("backgroundColor","gray");
                    img.eq(i).css("display","none");
                }
                
                $(this).css("background","white");
                img.eq($(this).index()).css("display","block"); /*使圆点对应的图片显示*/
                
             });
        }

        div_r.click(function(){
            run();/*直接把事件添加到他的父级*/
        });
            

        //左右方向键控制后要重新设置函数
        function reverse(){
            count--;
            count = count==-1?4:count;
            for(var i=0;i<len;i++){
                img.eq(i).css("display","none"); 
            }
            img.eq(count).css("display","block"); 
            for(var i=0;i<li.length;i++){
                li.eq(i).css("backgroundColor","gray");
            }
            li.eq(count).css("backgroundColor","white");
        }
            div_l.click(function(){
                reverse(); /*重新设置函数*/
            });
    });
</script>
</body>
</html>

遇到的问题：

1.对于给html设置css属性的问题
之前使用js语言，是通过DOM操作进行设置
   var li = ul.getElementsByTagName('li'); 
   li[i].style.background = 'gray';
换成jQuery语句后，应该等价为：
    var li = $("li");
    li.eq(i).css("backgroundColor","gray");

需要注意：jQuery语句获取的元素数组，不可以直接通过下标调用，需要使用eq（index）方法传入下标，设置属性需使用css（“属性名”，“属性值”）

2.this对象的区别
直接通过js获取当前对象，只需要使用this，获取当前对象所在数组的下标，只需使用this.index属性获得
	this.index
jQuery语句中，将this转为jQuery对象后调用index（）方法才可以获得当前对象所在数组的下标
	$(this).index()

实例：JS生成二维码

JS实现简易二维码生成

7.Bootstrap响应式框架、layer弹出框架

• 目前最受欢迎的前端响应式界面：BootStrap下载地址及使用介绍

• 轻便好用的弹出窗口框架：Layer弹出层框架

  • layer使用步骤:

          1.  下载layer , 并将解压后的layer文件夹 移动到项目中
          2.  引入jquery.js
          3.  引入layer.js
    

  • layer - msg函数

    用于弹出信息提示框 
    
    格式1.
        layer.msg("文本");
    
    格式2. 抖动显示
        layer.msg("文本",function(){
            //弹窗结束后会执行
        });
    格式3：定时关闭
    	layer.msg("文本",{time:1000});
    

  • layer - load函数

    格式:
        弹出loading:
            var index = layer.load(数字0-2); 
            // 参数表示 loading的图表
            //loading窗口在弹出时, 不允许进行操作.
        关闭loading:
            layer.close(index);
    
    格式2.
        超时自动关闭的loading
    
            var index = layer.load(数字0-2,{time:毫秒数字})
            //在指定的毫秒后 ,如果没有使用layer.close关闭, 则自动关闭
    

  • layer - msg函数(load效果)

    格式:
        弹出的格式:
            var index = layer.msg("文本",{icon:16,shade:0.01})
            //因为是msg函数, 所以此窗口会自动消失.
        关闭的格式:
            layer.close(index);
    

  • layer - alert函数 信息提示窗

    格式:
    
        layer.alert("文本内容",{icon:图片编号});
    
        //图片编号: 0-16之间 
    

  • layer - tips函数 提示层

    格式:
        layer.tips("文本内容","选择器",{tipsMore:true,tips:数字});
    
        参数:
            1.  参数: tipsMore    :   是否允许同时存在多个弹出的tips
            2.  参数: tips        :   取值为数字1-4 , 分别表示弹出在元素的 上/右/下/左 . 默认弹出在右边
    

  • layer 所有弹出层的关闭

    layer.closeAll();
    

    作用: 用于在网页中 循环展示固定的布局数据 .
    
    格式1.    
            给元素添加属性:    v-for="item of 数组名" 
    格式2.
            给元素添加属性:    v-for="(item,index) of 数组名"
    
    注意: 上述格式中的
                数组名指的是:     data中的数据key , 这个key对应的数据必须是数组
                item 指的是:   每次循环时, 从数组中取出的数据的key , 可以使用插值表达式来显示 {{item}}
                index 指的是:  循环的轮数, 类似数据的下标.
    
    案例:
    
                <body>
                    <div id="content">
                        <ul>
                            <li v-for="item of msgs">{{item}}</li>
                        </ul>
                    </div>
                </body>
                <script type="text/javascript">
                    var v1 = new Vue({
                        el:"#content",
                        data:{
                            msgs:["锄禾日当午","石鹏和魏洋","停车坐爱枫林晚","一墙红杏出墙来","哈哈哈哈哈哈哈"]
                        }
                    });
                </script>