22-javaScript基础(前端)

感谢你的路过，希望学生的笔记能给你一点微不足道的参考
Java基础思维导图，完整Java体系的链接

目录标题

一，概述
- 1.1什么是JavaScript？
- 1.2JavaScript的作用？
- 1.3JavaScript的历史（了解）？
二，JavaScript的用法
- 2.1HTML页面中的JavaScript
- 2.2外部的JavaScript
- 2.3标签属性中的JavaScript
三，JavaScript显示数据
四，JavaScript基本语法
- 4.1JavaScript变量
- 4.2JavaScript的语句
五，JavaScript的数据类型
- 5.1基本类型
- 5.2引用数据类型：
六，JavaScript对象
- 6.1JavaScript的String对象
- 6.2JavaScript的Array对象
- 6.3JavaScript的Date对象
- 6.4JavaScript的Math对象
七，JavaScript的函数
- 7.1isNaN(param)
- 7.2parseFloat(String)
- 7.3parseInt(string,radix)
- 7.4JavaScript的自定义函数
- 7.5JavaScript的匿名函数
八，JavaScript变量的作用域
- 8.1局部 JavaScript 变量
- 8.2全局 JavaScript 变量
- 8.3变量的生命周期
九，JavaScript自定义对象
十，JavaScript Window--浏览器对象模型
- 10.1浏览器对象模型 (BOM)
- 10.2BOM：
- 10.3window对象
- 10.4window对象属性
- 10.5history对象
- 10.6location对象
- 10.7window对象方法
十一，JavaScript之事件
- 11.1HTML事件
- 11.2常用的HTML事件
十二，JavaScript之DOM模型
十三，HTML DOM 元素 (节点)
十四，补充：
- 14.1正则表达式
- 14.2动态表格
练习
作业

一，概述

1.1什么是JavaScript？

JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译），一种轻量级的编程语言。可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。很容易入门。

1.2JavaScript的作用？

1、为网页添加各式各样的动态功能,
2、为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1.3JavaScript的历史（了解）？

1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为： C-- ，后来更名为：ScriptEase
   2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
   3. 1996年，微软抄袭JavaScript开发出JScript语言
   4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

二，JavaScript的用法

2.1HTML页面中的JavaScript

在html页面中的脚本必须位于script围堵标签之间，script标签放在head中可以，body中也可以，放在最后也可以，对位置要求不严格。
有些案例中可能会在 script 标签中出现type=“text/javascript”。现在完全可以省略了，JavaScript已经是所有现代浏览器以及 HTML5 中的默认脚本语言。
代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>js脚本位置-html页面中</title>      <script>alert("hello JavaScript1-1");</script><script>alert("hello JavaScript1-2");</script></head><body><script>alert("hello JavaScript2-1");</script><script>alert("hello JavaScript2-2");</script></body>
</html>
<script>alert("hello JavaScript3-1");
</script>
<script>alert("hello JavaScript3-2");
</script>

2.2外部的JavaScript

可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
   外部 JavaScript 文件的文件扩展名是 .js。
   当我们使用外部文件时，在HTML页面的script 标签的 “src” 属性中设置该 .js 文件：
      外部脚本不能包含 script 标签。
代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>引用外部文件</title><script type="text/javascript" src="js/myScript.js" ></script><script>fun1();</script></head><body></body>
</html>

2.3标签属性中的JavaScript

直接编写在HTML标签的一些属性中，用于简单的JavaScript代码的编写，用的偏少。
代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>js脚本位置-标签内部</title></head><body><a href="javascript:alert('hello js');">行内的js</a></body>
</html>

三，JavaScript显示数据

使用window.alert()弹出框
      PS：这里的window可以省略，等价于alert(“hello world”);
   使用document.write()将内容写入到html文档
   使用innerHTML写入到html元素
   使用console.log写入到浏览器控制台
代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>js显示数据的方式</title><script>//方式1：弹框输出alert("hello js");//方式2：在页面输出document.write("hello world1");           </script></head><body><div id="div1">div1</div><script>//方式3：要注意的问题，先加载完页面元素才能获取页面元素，即getElementById函数要在被获取的标签加载完毕才能使用document.getElementById("div1").innerHTML="hello world2";//方式4：输出内容到控制台console.log("hello world3");</script></body>
</html>

四，JavaScript基本语法

JavaScript 是一个脚本语言。它是一个轻量级，但功能强大的编程语言。 JavaScript语法跟Java很相似，但是也有区别。JavaScript是弱语言类型，即有些时候有些错误不影响运行，但是依然推荐大家按照规范去编写代码，语言弱，程序员不能弱。

4.1JavaScript变量

声明变量的关键字：var
   语法：var 变量名称；
   变量的命名规则：
      变量必须以字母开头
      变量也能以 $ 和 _ 符号开头
      变量名称对大小写敏感（y 和 Y 是不同的变量）
      不能使用关键字保留字
   变量的命名规范：见名知意。
      例如：breadPirce,userService等，避免无意义的a,b,c等
      推荐驼峰命名法，即第一个单词的首字母小写，以后每个单词的首字母大写。例如lastName
代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>变量</title><script>  var myCompany;     //声明变量myCompany='开课吧'; //赋值var x=5;//声明的同时赋值var y=6;var z=x+y;//变量也可以存储表达式    console.log(z);</script>  </head><body></body>
</html>

4.2JavaScript的语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。 JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
JavaScript中也有分支结构和循环结构，语法与java类似，一般一行只写一条语句，每句结尾编写分号结束。

五，JavaScript的数据类型

5.1基本类型

字符串String
   数字Number
      JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
   布尔Boolean
      只能有两个值：true 或 false。
   空Null
   未定义Undefined
      表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。共有4中情况会出现undefined的值：
      1、变量声明且没有赋值；
      2、获取对象中不存在的属性时；
      3、函数需要实参，但是调用时没有传值，形参是undefined；
      4、函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefined。
   Symbol
      Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值

5.2引用数据类型：

对象(Object)、数组(Array)、函数(Function)
   JavaScript拥有动态类型
      这意味着相同的变量可用作不同的类型，不推荐这种写法。尽量开始声明变量的时候就确定好将要盛放什么类型的值，以后尽量不随意改变。
   JavaScript中的运算符
      算数运算符：+ - * / % 、 ++ 、 –
      赋值运算符：= 、 +=、 -= 、*= 、 /= 、 %=
      字符串的连接符：+
      逻辑运算符： && || ！
      条件运算符：？:
      比较运算符： == 、！= 、 > 、= 、 <=
      以上运算符的运算规则与java一样，在这里不再赘述。接下来强调两个新的比较运算符：
         比较运算描述
            === 绝对等于（值和类型均相等）
            !== 不绝对等于（值和类型有一个不相等，或两个都不相等）
代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>数据类型</title><script>//1、字符串类型var gameName = "英雄联盟";var hairstylist = 'tony';//PS：注意引号嵌套var message1 = '我的发型师是"tony"老师';var message2 = "我的发型师是'tony'老师";//2、数字 Numbervar breadPrice = 15.9;var gameLevel = 66;//极大或极小的数字可以通过科学计数法来书写：var myMoney1 = 666e5; //66600000var myMoney2 = -666e-5; //-0.00666//3、布尔类型  Booleanvar isUnderstand = true;var isSingle = false;//4、空 nullvar email = null;//5、未定义 undefinedvar obj;alert(obj); //obj值为undefinedalert(obj.name); //报错信息： "Uncaught TypeError: Cannot read property 'name' of undefined"function printNum(num) {alert(num);}var result = printNum(); //调用函数未传递参数，执行函数的时候num的值是undefinedalert(result); //result的值也是undefined，因为printNum()没有返回值</script></head><body></body>
</html

六，JavaScript对象

6.1JavaScript的String对象

String对象属性–长度属性：length
String对象方法 JavaScript中的String对象方法与java的String方法很多都类似甚至一样，这里不再一一赘述。

6.2JavaScript的Array对象

Array 对象用于在变量中存储多个值，也就是数组。
大家需要注意的length是数组的属性，不是方法，所以调用的时候没有括号。
Array对象的方法方法比较多，这里不再给大家一一讲述，给大家一个表格参考表格。感兴趣的同学自行查阅。

6.3JavaScript的Date对象

创建日期对象
      var date1 = new Date();
      var date2 = new Date(milliseconds);
      var date3 = new Date(dateString);
      var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);
   日期对象的常用方法

6.4JavaScript的Math对象

Math常用属性
      var pi=Math.PI;//返回圆周率
   Math常用方法
      var num=Math.random();// 返回 0 ~ 1 之间的随机数。
      var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。
      var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。
代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>js内置对象</title><script>/*js内置对象1：======字符串对象*/var str = "我喜欢看NBA,最喜欢的球员是\'小学生\'库里";//注意：字符串中出现的\'是一个字符，转义为一个单引号console.log(str);//获取字符串的长度：，切记：所有转移符号的长度都算一个，即\'长度为1           console.log("字符串的长度=" + str.length); //22/*js内置对象2：======Array对象*///声明数组方式1：var names=new Array();for(var i=0;i<4;i++){names[i]="贾宝玉"+(i+1);}for(var i=0;i<names.length;i++){document.write(names[i]+"<br/>");}//声明数组方式2：var carNames=["保时捷","法拉利","玛莎拉蒂"];for(var i=0;i<carNames.length;i++){document.write(carNames[i]+"<br/>");}//声明数组方式3：var classNames=new Array("1班","海贼班","Superman班级");for(var i=0;i<classNames.length;i++){document.write(classNames[i]+"<br/>");}/*js内置对象3：======Date对象*///创建日期对象：4个方法var date1=new Date();var date2=new Date(256942572525);var date3=new Date("2020-12-12 12:23:34");var date4=new Date(2020,1,4,12,34,45,19);console.log(date1.getFullYear());console.log(date1.getMonth());console.log(date1.getDate());console.log(date1.getDay());console.log(date1.getHours());console.log(date1.getMinutes());console.log(date1.getSeconds());console.log(date1.getMilliseconds());/*js内置对象4：======Math对象*/            var pi=Math.PI;//返回圆周率document.write("pi="+pi+"<br/>");var random=Math.random();document.write("random="+random+"<br/>");var max=Math.max(12,43.5,332,-454,211);document.write("max="+max+"<br/>");var min=Math.min(12,43.5,332,-454,211);document.write("min="+min+"<br/>");</script></head><body></body>
</html>

七，JavaScript的函数

JavaScript的常用全局函。JavaScript中有个常用的全局属性NaN,即非数值（Not a Number），NaN 属性用于引用特殊的非数字值，该属性指定的并不是不合法的数字。

7.1isNaN(param)

用于检查其参数是否是非数字值。是数值的返回false，不是数值返回true

7.2parseFloat(String)

可解析一个字符串，并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。
   字符串中只返回第一个数字。
   开头和结尾的空格是允许的。
   如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

7.3parseInt(string,radix)

可解析一个字符串，并返回一个整数.
      参数描述
      string 必需。要被解析的字符串。
      radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。
   当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。
   当忽略参数 radix , JavaScript 默认数字的基数如下:
      如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。
      如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
      如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。
   只有字符串中的第一个数字会被返回。开头和结尾的空格是允许的。如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制的基数。
代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>全局函数</title></head><body>   </body></html>
<script>//1、isNaN(param)console.log(isNaN(666)); //falseconsole.log(isNaN(1 + 2)); //falseconsole.log(isNaN("hello")); //true //2、parseFloat(String)console.log(parseInt("10", 10)); //10console.log(parseInt("010")); //10console.log(parseInt("10", 8)); //8console.log(parseInt("0x10")); //16console.log(parseInt("10", 16)); //16console.log(parseFloat("66")); //66console.log(parseFloat("199.99")); //199.99console.log(parseFloat("1024 2048 4096")); //1024console.log(parseFloat(" 128 ")); //128console.log(parseFloat("10年")); //10console.log(parseFloat("今天是8号")); //NaN//3、 parseInt(string,radix)   console.log(parseInt("66")); //66console.log(parseInt("199.99")); //199console.log(parseInt("1024 2048 4096")); //1024console.log(parseInt(" 128 ")); //128console.log(parseInt("10年")); //10console.log(parseInt("今天是8号")); //NaN
</script>

7.4JavaScript的自定义函数

自定义函数语法
      使用function关键字定义函数。
      function 自定义函数名称(参数列表){ //函数体 }
      自定义函数实例
      注意：
         1、函数的形参直接写参数名称，不需要声明类型，即不需要写var.
         2、函数的返回取决于函数体中是否有return关键字。
代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>自定义函数</title><script>//无参无返回function print(){document.write("无参无返回<br/>");}//有参无返回function printNum(num){document.write("<br/>有参无返回:num="+num);}function getSum(a,b){document.write("<br/>有参无返回:求和结果="+(a+b));}//有返回值:取决于是否有returnfunction getSum2(a,b){//document.write("<br/>有参无返回:求和结果="+(a+b));return a+b;}//函数的调用print();printNum(12); getSum(1,2);var res=getSum2(23,23);document.write("<br/>有返回值的方法调用结果res="+res);</script></head><body></body>
</html>

7.5JavaScript的匿名函数

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>js函数-匿名函数</title><script>var fun1=function (){document.write("hello function--匿名函数");}//调用匿名函数fun1();        </script></head><body></body>
</html>

八，JavaScript变量的作用域

8.1局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问。在不同的函数中可以声明名称相同变量，因为局部变量出该函数就失效了。

8.2全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

8.3变量的生命周期

JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>变量的作用域</title><script>var money=1000;//全局变量，任何位置都能访问function fun1() {var name = "库里1";//局部变量，只在当前函数中生效document.write(name+"<br/>");document.write(money+"<br/>");}function fun2() {var name = "库里2";document.write(name+"<br/>");document.write(money+"<br/>");}fun1();fun2();</script></head><body></body></html>
<script>document.write("最后的脚本：" + money)function fun3() {var name = "库里3";document.write(name+"<br/>");document.write(money)+"<br/>";}fun3();
</script>

九，JavaScript自定义对象

对象也是一个变量，但对象可以包含多个值（多个变量）。
   定义对象：对象中可以有属性，也可以有方法
   对象的属性可以说 “JavaScript 对象是变量的容器”。但是，我们通常认为 “JavaScript 对象是键值对的容器”。键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为对象属性。
   访问对象的属性
   访问对象的方法
代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>js自定义对象</title><script>//定义对象var student={name:"贾宝玉",age:14,height:188.5};//定义JavaScript对象：对象可以跨域多行，空格和换行不是必须的var student2={name:"贾宝玉",age:14,height:188.5,study:function(){document.write("study---好好学习，天天向上！<br/>")},doHomework:function(){document.write("doHomework---多敲代码！<br/>");}}//访问student对象的属性：//方式1：var name=student.name;document.write("<br/>student.name="+name);          var age=student.age;document.write("<br/>student.age="+age);//方式2：var height=student['height'];document.write("<br/>student.height="+height);//访问student2对象的方法student2.study();student2.doHomework();</script></head><body></body>
</html>

十，JavaScript Window–浏览器对象模型

10.1浏览器对象模型 (BOM)

使 JavaScript 有能力与浏览器"对话"。

10.2BOM：

Browser Object Model，中文浏览器对象模型。虽然现在BOM尚无正式标准，但是由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此window常被认为是 BOM 的方法和属性。

10.3window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。（没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象）。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。 Window 对象表示浏览器中打开的窗口。

10.4window对象属性

属性描述
   document 对 Document 对象的只读引用。
   history 对 History 对象的只读引用。
   location 用于窗口或框架的 Location 对象。
   name 设置或返回窗口的名称。
代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>window对象属性</title>        </head><body>       <a href="javascript:window.open('https://www.baidu.com')">打开百度</a><br /><a href="javascript:window.open('index.html')">打开-index.html</a><br /><a href="javascript:window.close()">关闭当前页面</a><br />       <br /><br /><a href="javascript:window.history.forward()">前进-forward</a><a href="javascript:window.history.back()">后退-back</a><a href="javascript:window.history.go(1)">前进go</a><a href="javascript:window.history.go(-1)">后退go</a><br /><br /><a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a><br /><br /><a href="javascript:window.location.reload()">刷新</a><br /><br /><a href="javascript:window.location.replace('index.html')">跳转到index.html</a><br /><br /><a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br /><br /><a href="05-js对象1-内置对象.html">函数</a><br /><br /></body>
</html>

10.5history对象

window.history 对象包含浏览器的历史。
   window.history对象在编写时可不使用 window 这个前缀。
      常用方法：
         history.back() - 与在浏览器点击后退按钮相同
         history.forward() - 与在浏览器中点击向前按钮相同
         history.go(1/-1)-- 参数为1：等同于history.forward()，参数为-1，等同于history.back()

10.6location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
      常用属性和方法：
         window.location 对象在编写时可不使用 window 这个前缀。
         href 当前窗口正在浏览的网页地址
         replace(url) 转向到url网页地址
         reload() 重新载入当前网址，如同按下刷新按钮

10.7window对象方法

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>window对象常用的弹框方法</title><script>//window对象常用的弹框方法//1、基本弹框window.alert("只有一个确定按钮的对话框");//2、对话框：有确定和取消两个看你，点击确定返回true，点击取消返回falsevar res=window.confirm("确认要关闭吗？");if(res){alert("点击了确定按钮");}else{alert("点击取消按钮");}//3、输入框：prompt(提示信息，默认值)var age=prompt("请输入年龄：",19);alert("输入的年龄信息是："+age);//打开新页面function myOpen(){window.open("index.html");}</script></head><body><a href="javascript:window.open('index.html');" >打开index.HTML页面</a><a href="javascript:window.close();">关闭当前页面页面</a></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>定时器</title><script>function showTime1(){var time=new Date();var y=time.getFullYear();var mon=time.getMonth();var d=time.getDate();var h=time.getHours();var m=time.getMinutes();var s=time.getSeconds();             document.getElementById("today1").innerHTML=y+"年"+mon+"月"+d+"日    "+h+":"+m+":"+s;}function showTime2(){var time=new Date();var y=time.getFullYear();var mon=time.getMonth();var d=time.getDate();var h=time.getHours();var m=time.getMinutes();var s=time.getSeconds();document.getElementById("today2").innerHTML=y+"年"+mon+"月"+d+"日    "+h+":"+m+":"+s;flag2=window.setTimeout("showTime2()",1000);}//定时器setInterval(定时调用的函数,时间间隔毫秒)var flag1=window.setInterval("showTime1()",1000);//setTimeout(调用的函数,延迟时间调用指定函数的时间)在指定的毫秒数后调用函数或计算表达式。 var flag2=window.setTimeout("showTime2()",1000);</script></head><body><div id="today1">div1--显示时间1</div><div id="today2">div2--显示时间2</div><a href="javascript:window.clearInterval(flag1)">停止定时器clearInterval</a><a href="javascript:window.clearTimeout(flag2)">停止定时器clearTimeout</a></body>
</html>

十一，JavaScript之事件

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

11.1HTML事件

HTML 事件可以是浏览器行为，也可以是用户行为。例如页面加载完成、你点击个按钮、文本框输入了文字等等，都是HTML事件的案例。通过当事件发生时，我们希望可以做些事情，例如点击完毕按钮之后希望跳转页面、文本框输入完毕之后验证有效性等，那么这些要做的事情我们就可以通过JavaScript实现。

11.2常用的HTML事件

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>事件</title><script>function fun1(){alert('选择的内容发生了变化');}function fun2(){alert("触发了单击事件");}function fun3() {document.getElementById("btn").innerHTML="鼠标移动到按钮上了";}function fun4() {document.getElementById("btn").innerHTML="点击我试";}function fun5() {alert("键盘按下了");}function fun6() {alert("获取到了焦点");}function fun7() {alert("input失去了焦点");}function myLoad(){alert("页面加载完毕");}</script></head><body onload="myLoad()">       用户名：<input id="userName" onkeydown="fun5()" onfocus="fun6()" onblur="fun7()"/><br/>密码：<input id="password" type="password" /><br/><button id="btn" type="button" onclick="fun2()" onmouseover="fun3()" onmouseout="fun4()">点击我试试</button><select id="month" onchange="fun1()"><option>1月份</option><option>2月份</option></select></body>
</html>

十二，JavaScript之DOM模型

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 DOM:Document Object Model,文档对象模型。当网页被加载时，浏览器会创建页面的文档对象模型。 HTML DOM 模型被构造为对象的树：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应。

document对象
      当浏览器载入 HTML 文档, 它就会成为 Document 对象。 Document 对象是 HTML 文档的根节点。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
   document对象常用方法
      查找 HTML 元素常用方法

   修改 HTML 内容和属性
      修改内容
      修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
   修改 HTML 元素的内容的语法：
      document.getElementById(id).innerHTML=新的 HTML。
   绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。
   修改 HTML 属性
      修改 HTML 元素属性的语法：
         方式1：document.getElementById(id).attribute=新属性值
         方式2：document.getElementById(id).setAttribute(属性名，属性值);
   修改 HTML 元素的css
      修改 HTML 元素css的语法： document.getElementById(id).style.property=新样
代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>DOM-获取HTML元素</title><script>function myLoad(){//页面加载完毕之后再去获取页面上的元素，否则获取不到//根据ID 获取元素，只能获取到唯一元素（如果有重名的ID元素，获取到的是第一个元素）var div=document.getElementById("myDiv");console.log(div);//根据指定的类样式的名称获取元素，返回集合var list=document.getElementsByClassName("demo");console.log("根据类样式的名称获取到的元素的集合长度是："+list.length);for(var i=0;i<list.length;i++){console.log(list[i]);}//根据指定HTML标签名称获取元素，返回集合var list2=document.getElementsByTagName("li");console.log("根据标签的名称获取到的元素的集合长度是："+list2.length);for(var i=0;i<list2.length;i++){console.log(list2[i]);}//根据指定HTML元素的name属性获取元素，返回集合var list3=document.getElementsByName("myli");console.log("根据标签的名称属性获取到的元素的集合长度是："+list3.length);for(var i=0;i<list3.length;i++){console.log(list3[i]);}}</script>        </head><body><p  class="demo"></p><div id="myDiv" class="demo">di</div><img id="myimg" src="img/a.png" title="我是一只熊" /><script>//修改HTML页面元素的内容和属性var mydiv=document.getElementById("myDiv");mydiv.innerHTML="新的div的内容";var classSttribute=mydiv.getAttribute("class");console.log(classSttribute);mydiv.setAttribute("class","demo2");classSttribute=mydiv.getAttribute("class");console.log(classSttribute);var img=document.getElementById("myimg");img.src="img/x2.jpg";</script><ul class="demo"><li>li11111111111</li><li id="myli">li11111111111</li><li>li11111111111</li><li name="myli">li11111111111</li> </ul><button type="button" onclick="change1()">点击我修改li的样式</button><script>function change1(){document.getElementById("myli").style.color="red";document.getElementById("myli").style.fontFamily="微软雅黑";document.getElementById("myli").style.fontSize="24px";}</script></body>
</html>

十三，HTML DOM 元素 (节点)

创建新的 HTML 元素
      要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。
   替换 HTML 元素 -replaceChild()
   删除元素 -removeChild()

案例：
      表单验证
      全选/全不选
      动态表格
      省市级联
代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>function createNewP(){var newElementP=document.createElement("p");//创建一个新的段落元素var text=document.createTextNode("这是我新创建的段落");//新创建的文本节点//将文本的节点添加到新创建的元素中newElementP.appendChild(text);//获取一个页面已经存在的元素var div=document.getElementById("div1");//添加新创建的元素p到已经存在的元素div中div.appendChild(newElementP);}function createNewP2(){var newElementP=document.createElement("p");//创建一个新的段落元素var text=document.createTextNode("这是我新创建的段落p2");//新创建的文本节点//将文本的节点添加到新创建的元素中newElementP.appendChild(text);//获取一个页面已经存在的元素var div=document.getElementById("div1");var p1=document.getElementById("p1");//添加新创建的元素p到已经存在的元素div中div.insertBefore(newElementP,p1);}function changeElemnt(){var newElementP=document.createElement("p");//创建一个新的段落元素var text=document.createTextNode("这是我新创建的段落p");//新创建的文本节点//将文本的节点添加到新创建的元素中newElementP.appendChild(text);//获取要被替换的元素p1及其父元素divvar div=document.getElementById("div1");var p1=document.getElementById("p1");//将div中的元素p1替换为新创建的元素div.replaceChild(newElementP,p1);}function deleteElement(){var div=document.getElementById("div1");var p1=document.getElementById("p1");//从父元素div中删除子元素p1div.removeChild(p1);}function deleteElement2(){var p1=document.getElementById("p1");//p1.parentNode：作用就是获取要删除元素p1的父元素divp1.parentNode.removeChild(p1);}</script></head><body><button type="button" onclick="createNewP()">动态添加一个元素--appendChild</button><button type="button" onclick="createNewP2()">动态添加一个元素--insertBefore</button><button type="button" onclick="changeElemnt()">替换p1</button><button type="button" onclick="deleteElement()">删除p1-方式1</button><button type="button" onclick="deleteElement()">删除p1-方式2</button><div id="div1"><p id="p1">这是段落1</p><p id="p2">这是段落2</p></div></body>
</html>

十四，补充：

14.1正则表达式

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表单验证</title><script>function validateName(){//所有的表单项元素都value属性var name=document.getElementById("userName").value;var msg=document.getElementById("nameMsg");if(name==null || name ==""){msg.innerHTML="用户名不能为空！";msg.style.color="red";return false;} else if(name.length<6){msg.innerHTML="用户名长度必须为大于6的！";msg.style.color="red";return false;}msg.innerHTML="用户名可用";msg.style.color="green";return true;}function validatePwd(){var password1=document.getElementById("password1").value;var msg=document.getElementById("pwdMsg1");if(password1==null || password1 ==""){msg.innerHTML="密码不能为空！";msg.style.color="red";return false;} else if(password1.length<8){msg.innerHTML="密码的长度必须为大于8的！";msg.style.color="red";return false;}msg.innerHTML="密码合法";msg.style.color="green";return true;}function confirmPwd(){var pwd1=document.getElementById("password1").value;var pwd2=document.getElementById("password2").value;var msg=document.getElementById("pwdMsg2");if(pwd1!=pwd2){msg.innerHTML="两次输入的密码不一致！";msg.style.color="red";return false;}msg.innerHTML="两次输入的密码一致";msg.style.color="green";return true;}function validateGender(){var gender=document.getElementById("gender").value;if(gender==-1){alert("性别为必选项！");return false;}return true;}function register(){return validateName()&&validatePwd()&&confirmPwd()&&validateGender();}</script></head><body><h1>英雄会注册</h1><form action="提交.html" method="get" onsubmit="return register()">*用户名:<input type="text" id="userName" placeholder="请输入用户名" onblur="validateName()" /><span id="nameMsg">用户名长度至少6位</span><br />*密码：<input type="password" id="password1" placeholder="请输入密码" onblur="validatePwd()"/><span id="pwdMsg1">密码长度至少8位</span><br />*确认密码：<input type="password" id="password2" placeholder="请确认密码" onblur="confirmPwd()" /><span id="pwdMsg2">确认密码与密码一致</span><br />*性别：<select id="gender"><option value="-1">请选择性别</option><option value="0">女</option><option value="1">男</option></select><br /><br /><button type="submit">注册</button><button type="reset">重置</button></form></body>
</html>

概念 RegExp：是正则表达式（regular expression）的简写。
   正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。
   语法：
      语法： var reg=new RegExp(/正则表达式主体/,修饰符(可选));
      或更简单的方法 var reg=/正则表达式主体/修饰符(可选);
   案例：
      var reg=new RegExp(/kaikeba/i);
      var reg = /kaikeba/i; //此处定义了一个一个正则表达式。
      kaikeba 是一个正则表达式主体 (用于检索)。 i 是一个修饰符 (搜索不区分大小写)。
   修饰符
      可以在全局搜索中不区分大小写:
      修饰符描述
         i 执行对大小写不敏感的匹配。
         g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
         m 执行多行匹配。
   正则表达式模式
      方括号用于查找某个范围内的字符：
      表达式描述
         [a-z] 查找方括号之间的任何字符。
         [0-9] 查找任何从 0 至 9 的数字。
         (x|y) 查找任何以 | 分隔的选项。
      元字符是拥有特殊含义的字符：
      元字符描述
         \d 查找数字。
         \s 查找空白字符。
          \b 匹配单词边界。
         \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
   量词:
      量词描述
         n+ 匹配任何包含至少一个 n 的字符串。
         n* 匹配任何包含零个或多个 n 的字符串。
         n? 匹配任何包含零个或一个 n 的字符串。
      正则表达式的方法test(str)
         test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>正则表达式案例</title><script>var reg = /kaikeba/i;var res = reg.test("开课吧的汉语拼音为kaikeba");//console.log(res); //truevar reg = /^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/;var str = "a公司拼音为9";var res = reg.test(str);//console.log(res); //true//console.log(reg.test("a你好239")); //false</script><script>/*检查输入的身份证号是否正确*/function checkCard(str) {/*15位数身份证正则表达式:* 编码规则顺序从左至右依次为6位数字地址码，6位数字出生年份后两位及日期，3位数字顺序码。[1-9]\d{5}                  前六位地区，非0打头    \d{2}                       出生年份后两位00-99((0[1-9])|(10|11|12))       月份，01-12月(([0-2][1-9])|10|20|30|31)  日期，01-31天\d{3}                       顺序码三位，没有校验码*/var arg1 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;if (arg1.length == 15 && !arg1.test(arg1)) {return false;}               /** 18位数身份证正则表达式:* 编码规则顺序从左至右依次为6位数字地址码，8位数字出生年份日期码，3位数字顺序码，1位数字校验码（可为x）。[1-9]\d{5}                 前六位地区，非0打头(18|19|([23]\d))\d{2}      出身年份，覆盖范围为 1800-3999 年((0[1-9])|(10|11|12))      月份，01-12月(([0-2][1-9])|10|20|30|31) 日期，01-31天\d{3}[0-9Xx]：              顺序码三位 + 一位校验码*/var arg2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;if (arg2.length == 18 && !arg2.test(sfzhmcode)){return false;}return true;}/*是否是小数*/function isDecimal(strValue) {var objRegExp = /^\d+\.\d+$/;return objRegExp.test(strValue);}/*校验是否中文名称组成 */function ischina(str) {    var reg = /^[\u4E00-\u9FA5]{2,4}$/; /*定义验证表达式*/return reg.test(str); /*进行验证*/}/*校验是否全由8位数字组成 */function isNum(str) {    var reg = /^[0-9]{8}$/; /*定义验证表达式*/return reg.test(str); /*进行验证*/}/*校验电话码格式 :座机和手机*/function isTelCode(str) {    var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;return reg.test(str);}/*校验手机号*/function isPhoneNum(str) { //如果你要精确验证手机号码，那个你可以使用第一个正则。这是根据电信，移动，联通目前发行的号码来的。验证比较精确。 var reg = /^1[3|4|5|7|8][0-9]{9}$/;// 如果因为现有的号码不能满足市场需求，电信服务商会增大号码范围。所以一般情况下我们只要验证手机号码为11位，且以1开头。 var reg = /^^1[0-9]{10}$$/;return reg.test(str);}/*校验邮件地址是否合法 */function IsEmail(str) {    var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;return reg.test(str);}/*检查输入的URL地址是否正确  */function checkURL(str) {if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i) == null) {return false;} else {return true;}}function validateEmail(){var str=document.getElementById("email").value;var msg=document.getElementById("emailMsg");if(IsEmail(str)==false){msg.innerHTML="邮箱格式不合法！";msg.style.color="red";return false;}msg.innerHTML="邮箱合法！";msg.style.color="green";return true;}function validatephone(){var str=document.getElementById("phone").value;var msg=document.getElementById("phoneMsg");if(isPhoneNum(str)==false){msg.innerHTML="phone格式不合法！";msg.style.color="red";return false;}msg.innerHTML="phone合法！";msg.style.color="green";return true;}function validatecardID(){var str=document.getElementById("cardID").value;var msg=document.getElementById("cardIDMsg");if(checkCard(str)==false){msg.innerHTML="cardID格式不合法！";msg.style.color="red";return false;}msg.innerHTML="cardID合法！";msg.style.color="green";return true;}function myValidate(){return validateEmail()&&validatephone()&&validatecardID();}</script></head><body><form method="get" action="提交.html" onsubmit="return myValidate()">邮箱：<input id="email" name="email"  onblur="validateEmail()"/><span id="emailMsg"></span><br />电话:<input id="phone" name="phone" onblur="validatephone()"/><span id="phoneMsg"></span><br />身份证号:<input id="cardID" name="cardID" onblur="validatecardID()"/><span id="cardIDMsg"></span><br /><button type="submit">提交</button><button type="reset">重置</button></form></body></html>

14.2动态表格

表格的属性和方法描述
      table.rows 获取表格中的所有行
      tr.cells 获取表格中某一行的所有单元格
      tr.rowIndex 获取表格中某一行的下标索引（从0开始）
   td.cellIndex 获取单元格的下标索引
      table.insertRow() 在表格中创建新行，并将行添加到rows集合中 t。able.deleteRow() 从表格即rows集合中删除指定行 tr.insertCell() 在表格的行中创建新的单元格，并将单元格添加到cells集合中

练习

js案例1-全选·

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>全选</title><script>function myAll(){var all=document.getElementById("all");var flag=all.checked;var oneList=document.getElementsByName("one");for(var i=0;i<oneList.length;i++){oneList[i].checked=flag;}}function myOne(){var all=document.getElementById("all");var oneList=document.getElementsByName("one");for(var i=0;i<oneList.length;i++){if(oneList[i].checked==false){all.checked=false;return false;}}all.checked=true;}</script></head><body><table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="160px"><tr><th>全选<input id="all" type="checkbox" onclick="myAll()" /></th><th>序号</th><th>名称</th><th>单价</th><th>数量</th><th>总计</th></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>1</td><td>小熊饼干1</td><td>￥125</td><td>1</td><td>￥125</td></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>2</td><td>小熊饼干2</td><td>￥125</td><td>1</td><td>￥125</td></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>3</td><td>小熊饼干3</td><td>￥125</td><td>1</td><td>￥125</td></tr></table></body>
</html>

js案例2-动态表格

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>动态表格</title><style>td,th{padding: 10px;}</style><script>function bianli(){var tab=document.getElementById("myTable");//获取到了表格的js对象//获取表格的所有行var trArr=tab.rows;//遍历行for(var i=0;i<trArr.length;i++){var trObj=trArr[i];//alert("行的下标索引："+trObj.rowIndex);//获取每行的单元格的集合var tdArr=trObj.cells;//遍历每个单元格var str="";for(var j=0;j<tdArr.length;j++){var tdObj=tdArr[j];var html=tdObj.innerHTML;//获取每个单元格中的内容var index=tdObj.cellIndex;//获取每个单元格的下标索引str+=index+"-"+html+"=====";}console.log("行的下标索引："+trObj.rowIndex+":"+str);}}function addRow(){//获取到表格的对象var tab=document.getElementById("myTable");//给表格添加一行var newTr=tab.insertRow();//创建了一个空行，在页面上看不出来//给新创建的行添加列var newTd1=newTr.insertCell();//给新的行创建了一个新的单元格var newTd2=newTr.insertCell();var newTd3=newTr.insertCell();var newTd4=newTr.insertCell();var newTd5=newTr.insertCell();//给每一个单元格中添加内容var num=parseInt(Math.random()*10)+1;newTd1.innerHTML=num;newTd2.innerHTML="小熊饼干"+num;newTd3.innerHTML="$125";newTd4.innerHTML="1";             newTd5.innerHTML='<button name="delBtn" οnclick="delRow(this)">删除</button>';}function delRow(btn){var tab=document.getElementById("myTable");//btn:表示点击的当前的删除按钮，//btn.parentNode获取的按钮的父元素td,btn.parentNode.parentNode获取的按钮的父元素td的父元素trvar trIndex=btn.parentNode.parentNode.rowIndex;//根据行的下标索引删除行tab.deleteRow(trIndex);}</script></head><body><button type="button" onclick="bianli()">遍历表格</button><button type="button" onclick="addRow()">添加-请在外部浏览器测试</button><table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%"  style="text-align: center;"><tr><th>序号</th><th>名称</th><th>单价</th><th>数量</th><th>总计</th></tr><tr><td>1</td><td>小熊饼干1</td><td>￥125</td><td>1</td><td><button name="delBtn" onclick="delRow(this)">删除</button></td></tr><tr><td>2</td><td>小熊饼干2</td><td>￥125</td><td>1</td><td><button name="delBtn" onclick="delRow(this)">删除</button></td></tr></table></body>
</html>

js案例3-省市级联

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>省市级联</title></head><body><select onchange="changeCity(this.value)"><option>--请选择省份--</option><option value="0">北京</option><option value="1">浙江省</option><option value="2">河北省</option><option value="3">广东省</option></select><select id="city"></select></body>
</html>
<script>//创建二维数组存储省份和对应的城市var cityList=new Array();cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");function changeCity(val){//获取到城市的下拉列表框var city=document.getElementById("city");//先去清空原有的列表内容city.options.length=0;var arr=cityList[val];for(var i=0;i<arr.length;i++){//创建option元素节点var option=document.createElement("option");//设置option元素节点的内容和valueoption.innerHTML=arr[i];option.value=arr[i];//将新创建的option节点添加到城市下拉框中city.appendChild(option);}}
</script>

作业

需求1：

需求2：

需求1效果：（有动态效果的，但我不会生成动态图）
效果2效果：（外表没什么变化，但是加入了js的方法）

参考：距离记笔记的时候过了一段时间，如果我的笔记有明显借鉴了您的内容，请见谅。（我记忆力很差的，当初写笔记的时候，参考文档记录的可能不全）
资料下载链接（笔记+代码+其他）：百度网盘
链接：https://pan.baidu.com/s/12mPMj02WHHEEkJeE1h9cmg
提取码：1111
感谢阅读，祝你从此一帆风顺。