本文主要是介绍JS(决定了网页中标签的功能及动态效果)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、JS
（1）特点：（实现网页的交互）
1）基于对象：(区别于面向对象)，可以通过对象调用方法 obj.fn()
2）事件驱动：网页文档中的HTML标签事件触发JS代码执行
3）解释型：边解释边执行(不会先对网页进行编译生成中间文件)
4）脚本语言：JS不会独立运行，依赖于网页文件(HTML文件)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS初体验</title><style type="text/css">.btnStyle{width: 200px;height: 35px;background: lightcoral;border: 0px;color: white;border-radius: 4px;font-weight: bold;}</style><script type="text/javascript">// 函数function test(){//弹窗alert("Hello World!");var m = 10/0;}</script></head><body><input type="button" value="测试按钮" class="btnStyle" onclick="test()"></body>
</html>（2）作用：
1）动态改变网页中HTML标签的属性
2）动态改变网页中HTML标签的样式
3）对用户输入的数据进行合法性校验(格式检查)
4）动态操作网页中的HTML标签（增、删、改）
5）实现页面数据的异步通信(在不阻塞页面加载和用户交互的情况下，与服务器进行数据交换)
不能做什么：
1）虽然JS是在用户的浏览器中执行，但是JS不能访问用户的本地文件
2）JS不能操作来自不同服务的网页文档
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS作用</title><script type="text/javascript">// 函数function test() {//操作HTML标签的属性document.getElementById("img1").width = 200;document.getElementById("img1").height = 200;//操作HTML标签的样式document.getElementById("img1").style.borderRadius = "50%";//移出HTML标签（DOM操作）document.getElementById("img1").remove();}</script></head><body><img id="img1" src="imgs/img1.jpg"><br><input type="button" value="测试按钮" onclick="test()"></body>
</html> （3）位置：
1）写在body中(常用)、body后、head中
2）在外写个js文件，在head里面调用
2、script标签可以引用一个js标签，也可以自定义js代码实现
1）引用js文件的话必须是双标签
2）script标签用来引用js文件之后，当前script标签就不能再自定义js代码
3）如果引用js文件，还要进行自定义js代码实现，需要重新写一个script标签
3、js需要通过事件触发才执行
6、变量用var，可以存任何类型
7、引用数据类型： {} 对象、 []数组
(1)对象可以随时添加
{}表示对象类型，js对象的属性名可以直接定义，并且对象的属性支持扩展
var stu = {stuNum:"1001",stuName:"王二狗"};
stu.stuGender = "男";
(2)定义学生数组
数组 var arr1 = new Array();
var arrays=[{"uid":14,"uname":"张三"},{"uid":15,"uname":"张三"}]
8、null用于清空一个变量的值
9、=== 表示绝对等于(值和类型都相同)
10、for循环、for(v in stu)循环
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS流程控制</title></head><body><button onclick="testFor()">测试for循环</button><button onclick="testForIn()">测试forIn</button><script type="text/javascript">function testFor(){for(var i=0;i<3;i++){console.log(i);}}//遍历JS对象和数组function testForIn(){var stu = {stuNum:"1001",stuName:"张三",stuGender:"男"};for(j in stu){// 遍历对象的属性名+值console.log(j+":"+stu[j]);}var arr = ["aaa","bbb","ccc"];for(i in arr){//遍历数组的索引和值console.log(i+":"+arr[i]);}}</script></body>
</html>11、throw创建自定义错误/错误信息
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>错误处理</title></head><body><button onclick="testError()">测试错误处理</button><script type="text/javascript">function testError(){try{console.log("----------try");var m =10;var n = 2;if(n !=0){var k = m/n;}else{throw "n的值不能为0";}console.log("k的值为："+k);}catch(e){//TODO handle the exceptionconsole.log(e);}finally{console.log("----------finally");}}</script></body>
</html>12、js中如果是局部变量的话他会变量提升，将变量的声明提升至最前面
13、创建对象
（1）通过{}创建
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS对象</title></head><body><button onclick="testObj()">通过{}创建js对象</button><script type="text/javascript">function testObj(){var obj = {id:"1001",name:"张三",test1:function(){console.log("test1");}};console.log(obj);console.log(obj.id);console.log(obj.name);obj.test1();}</script></body>
</html>(2)自定义JS构造函数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS对象</title></head><body><button onclick="testObj2()">使用构造函数创建js对象</button><script type="text/javascript">//自定义JS构造函数function Student(num,name){// this.stuNum = "1001";// this.stuName = "张三";//定义属性this.stuNum = num;this.stuName = name;//定义方法this.method1 = function(a){console.log("Student----method1:"+a);}this.method2 = myMethod2;}function myMethod2(){console.log("Student----method2");}function testObj2(){var s1 = new Student("1001","张三");console.log(s1);s1.method1("wahhha");s1.method2();var s2 = new Student("1002","李四");console.log(s2);s2.method1("hhehheeh");}</script></body>
</html>14、扩展属性
对象扩展属性：s1.stuGender = “男”，
构造器扩展属性：Student.prototype.stuGender="男"：//（ 需要另外输出
console.log(s1.stuGender);因为tostring没照顾到新的属性）
15、JavaScript提供的构造器：
16、String:
var str1 = "Hello,World";
var str2 = new String("你好");
charAt("str")、split、indexOf、lastIndexOf、substring、substr(起始，个数)、toUpperCase、toLowerCase、正则表达式
正则表达式：
var str3 = "13030303300";var reg = "^1[3,5,7,9]\\d{9}$";var b = str3.match(reg);console.log(b);注意：利用String的match函数进行正则校验，b匹配的话返回本身，不匹配返回null
17、正则表达式：RegExp
1）test
function testRegExp(){var str = "13030303300";var reg = new RegExp("^1[3,5,7,8]\\d{9}$");var b = reg.test(str);console.log(b);}注意：test匹配返回true，不匹配返回false
/d匹配任意数字、/s 空白字符、/b单词边界、/u???? 匹配unicode字符
a+至少一个a、a* 0-n个a、a？ 0-1个a、a{m}m个a、a{m,n} m-n个a
18、Math:
1）常量 var e = Math.E、 var p = Math.PI;
2）静态数学函数：Math.random、Math.round(四舍五入)、Math.floor(只舍不入，获取比参数小的最大整数)、Math.ceil（只入不舍，获取大于等于参数的最小整数）、Math.abs获取绝对值、Math.sqrt获取平方根
19、Array：长度可变，可以存储多种数据类型
数组的定义：
1）通过构造器创建
var arr2 = new Array("aaa","bbb");2）静态初始化数组
var arr3 = ["aaa","bbb","ccc"];var arr1 = new Array();
arr1[0] = "aaa";
arr1[1] = "bbb";添加元素，数组长度=最大下标+1
3)遍历：for循环、forin循环
for(var i in arr){console.log(arr[i]);}| arr.join("-") | 把数组里面的元素用-穿起来 |
| arr.slice(2,4) | 截取数组，起末，左闭右开 |
| arr.reverse() | 反转数组 |
20、Date
| var date = new Date();console.log(date); | 不好理解的时间 |
| var year = date.getYear(); | 距离1900年的时间 |
| var year = date.getYear()+1900; | 正确的2023 |
| var year1 = date.getFullYear(); | 2023 |
| var month = date.getMonth()+1; | 月份 |
| var d = date.getDate(); | 20号 |
| var hour = date.getHours(); | 21点 |
| var min = date.getMinutes(); | 59分 |
| var sec = date.getSeconds(); | 2秒 |
| var ms = date.getMilliseconds(); | 获取毫秒 |
| var day = date.getDay(); | 获取星期几 星期五 |
| date.setFullYear(2029); date.setMonth(11); date.setDate(28); | set设置时间:2029年12月28号 |
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>内置对象Date</title></head><body><button onclick="testDate()">测试Date</button><script type="text/javascript">function testDate(){var date = new Date();//不好理解的时间console.log(date);// set设置时间:2029年12月28号date.setFullYear(2029);date.setMonth(11);date.setDate(28);//距离1900年的时间// var year = date.getYear();//正确的2023var year = date.getYear()+1900;//2023var year1 = date.getFullYear();//月份var month = date.getMonth()+1;//20号var d = date.getDate();//21点var hour = date.getHours();//59分var min = date.getMinutes();//2秒var sec = date.getSeconds();//获取毫秒var ms = date.getMilliseconds();//获取星期几 星期五var day = date.getDay();console.log(year);console.log(year1);console.log(month);console.log(d);console.log(hour);console.log(min);console.log(sec);console.log(ms);console.log(day);}</script></body>
</html>21、function：
全局对象（预定义的对象）,全局函数直接调用，也可以用window调用
| parseInt | 将字符串转整数 |
| parseFloat | 将字符串转为浮点数 |
| encodeURI | 对网址的参数部分进行编码（特殊符号和中文） |
| decodeURI | 对编码后的网址进行解码 |
| escape | 对字符串中的特殊符号和中文进行编码 |
| unescape | 对字符串中的特殊符号和中文进行解码 |
| var jsonStr = "{stuNum:'1001',stuName:'张三'}"; eval("("+jsonStr+")"); | 将满足json格式的字符串转换成JS对象 |
对象：var s1 = {stuNum:'1001',stuName:'张三'};
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>function</title></head><body><button onclick="testFunction()">测试按钮</button><script type="text/javascript">function testFunction(){var str1 = "3.14";var i = parseFloat(str1);var url = "http://www.qfedu.com/?param=中华有我";//对网址的参数部分进行编码（特殊符号和中文）var newUrl = encodeURI(url);//对编码后的网址进行解码var url2 = decodeURI(newUrl);// console.log(newUrl);// console.log(url2);var str2 = "My name is 王大力";//对字符串中的特殊符号和中文进行编码var s = escape(str2);//对字符串中的特殊符号和中文进行解码var s1 = unescape(s)// console.log(s1);//对象var s1 = {stuNum:'1001',stuName:'张三'};// console.log(s1);//当一个字符串满足JS中对象的格式（JSON格式），可以通过eval转换成对象模式var jsonStr = "{stuNum:'1001',stuName:'张三'}";// 将满足json格式的字符串转换成JS对象var stu = eval("("+jsonStr+")");var stu = window.eval("("+jsonStr+")");console.log(stu.stuName);// console.log(jsonStr.stuNum);}</script></body>
</html>22、clog快速打出console.log
23、BOM浏览器对象模型
24、BOM对象模型
（1） BOM对象属性：
| window.navigator | 看浏览器类型（safari、chrome） |
| window.screen | 设备的屏幕 |
| window.location | 地址栏 |
| window.history | 历史记录 |
| window.document | 文档内容 JS代码 |
//看浏览器类型（safari、chrome）var v = window.navigator;//设备的屏幕var s = window.screen;//地址栏var l = window.location;//历史记录var h = window.history;//文档内容 JS代码var a = window.document;25、BOM-window对象
（1）属性：
1）浏览器窗口属性：
| window.name = "w1"; | 设置当前浏览器窗口的名字 |
| window.status="🌟"; | 设置当前浏览器窗口的状态栏 |
| window.closed | 获取当前窗口是否关闭 |
| var h = window.innerHeight; var w = window.innerWidth; | 获取浏览器的内部高/宽度 |
| var oh = window.outerHeight; var ow = window.outerWidth; | 获取浏览器的外部高/宽度 |
//设置/获取当前浏览器窗口的名字window.name = "w1";//设置/获取当前浏览器窗口的状态栏window.status="🌟";//获取当前窗口是否关闭window.closed//获取浏览器的内部高/宽度var h = window.innerHeight;var w = window.innerWidth;//获取浏览器的外部高/宽度var oh = window.outerHeight;var ow = window.outerWidth;2）窗口对象属性：
| window.self | 指的是自己 |
| window.parent | 父容器 |
| window.top | 祖先容器 |
26、弹窗函数
| alert("请注意，倒车！"); | 弹窗，无返回值 |
| confirm("确定删除吗？"); | 有返回值，点击确定才返回true，其他false |
| prompt("请输入生日："); var s =window.prompt("请输入生日：","2023"); | 有返回值，点击确定返回内容,否则返回null，2023这个是设置默认值 |
//无返回值window.alert("请注意，倒车！");//有返回值，点击确定才返回true，其他falsevar s = window.confirm("确定删除吗？");//有返回值，点击确定返回内容,否则返回null// var s =window.prompt("请输入生日：");//2023这个是设置默认值var s =window.prompt("请输入生日：","2023");console.log(s);27、窗口函数
2）关闭打开窗口函数：
| var w = window.open(URL,"度",features,true); | 参数1：新打开的窗口显示的网址 参数2：新打开的窗口的名字 参数3：新打开的窗口的属性 参数4：是否替换当前窗口 Tru为替换 返回值：打开的窗口对象 |
var URL = "https://www.baidu.com";//参数1：新打开的窗口显示的网址//参数2：新打开的窗口的名字//参数3：新打开的窗口的属性//参数4：是否替换当前窗口 Tru为替换// 返回值：打开的窗口对象// var w = window.open(URL);// var w =window.open(URL,"百度")var features = "width = 200，height = 100";// var w =window.open(URL,"百度",features);var w = window.open(URL,"百度",features,true);console.log(w.name);
3）窗口操作函数：
var w = window.open("https://www.baidu.com","百度官网","width=300,height=300",true);| w.resizeTo(800,600); | 把宽高修改为800，600 |
| w.resizeBy(800,600); | 把宽高额外增加800，600 |
| w.moveTo(200,100); | 将窗口移动到指定位置 距左200 距上100 |
| w.moveBy(200,100); | 将窗口在原基础上再移动 左200 上100 |
| window.scrollTo(200,300); | 滚动滚动条(针对当前窗口的滚动条操作) |
| window.scrollBy(-100,-200); | 滚动滚动条在原基础上再移动 右100 下300 |
var w = window.open("https://www.baidu.com","百度官网","width=300,height=300",true);//把宽高修改为800，600w.resizeTo(800,600);// 把宽高增加800，600w.resizeBy(800,600);// 将窗口移动到指定位置 距左200 距上100w.moveTo(200,100);// 将窗口在原基础上再移动 左200 上100w.moveBy(200,100);//滚动滚动条(针对当前窗口的滚动条操作)window.scrollTo(200,300);// 滚动滚动条在原基础上再移动 右100 下300window.scrollBy(-100,-200);28、延时函数：（重）
| var task1 = setTimeout(showDate, 3000); | 设置延迟3秒显示 |
| clearTimeout(task1); | 关闭未执行的延时任务 |
29、循环任务：
| var task2 = setInterval(showDate, 3000); | 设置每3秒显示一次 |
| clearInterval(task2); | 关闭循环任务 |
注意：window可删 直接： task2 = setInterval("showDate()", 3000);
（1）两种表示：
var task = setInterval("show()", 1000);var task = setInterval(show, 1000);30、 BOM-srceen：只读对象
| screen.height; screen.width; | 获取屏幕宽度和高度（分辨率） |
| screen.availHeight;screen.availWidth | 获取屏幕宽度和高度（除掉状态栏） |
| screen.deviceXDPI; screen.deviceYDPI | 获取屏幕硬件一英寸的物理像素点 |
//获取屏幕宽度和高度（分辨率）var h= screen.height;var w= screen.width;// alert(w+"*"+h);// 获取屏幕宽度和高度（除掉状态栏）var ah= screen.availHeight;var aw= screen.availWidth;// alert(aw+"*"+ah);// 获取屏幕硬件一英寸的物理像素点var xdpi = screen.deviceXDPI;var ydpi = screen.deviceYDPI;alert(xdpi+"*"+ydpi);31、BOM-navigator对象：只读对象
| navigator.appName; | 返回浏览器的名称 |
| navigator.appCodeName; | 返回浏览器的代码名 |
| navigator.appVersion; | 返回浏览器的平台及版本信息 |
| navigator.browserLanguage; | 返回浏览器的语言环境（看浏览器支持） |
| navigator.cookieEnabled; | 检查当前浏览器是否启用Cookie（重） |
//返回浏览器的名称var name = navigator.appName;// 返回浏览器的代码名var code = navigator.appCodeName;// 返回浏览器的平台及版本信息var version = navigator.appVersion;// 返回浏览器的语言环境（看浏览器支持）var lang = navigator.browserLanguage;// 检查当前浏览器是否启用Cookie（重）var b = navigator.cookieEnabled;console.log(b);32、BOM-location对象（多）
| location.href; | 获取地址栏完整的网址 http://127.0.0.1:8848/demo3/page19-BOM-Location.html |
| location.href = "http://www.baidu.com"; | 修改地址栏完整的网址（可以实现页面跳转）（多） |
| location.protocol; | 获取地址栏网址的协议 http |
| location.port; | 获取地址栏网址的端口 8848 |
| location.host; | 获取主机和端口号：127.0.0.1:8848 |
| location.hostname; | /获取主机号：127.0.0.1 |
| location.pathname; | 获取路径参数demo3/page19-BOM-Location.html |
| location.reload(); | 重新载入当前网页（刷新网页） |
| location.replace("http:www.baidu.com"); | 使用网址替换当前地址栏的网址（实现页面跳转） |
//获取地址栏完整的网址 http://addr:port/aa?key=nalue// 协议 主机 端口 端口// http://127.0.0.1:8848/demo3/page19-BOM-Location.htmlvar s1 = location.href;// 获取地址栏网址的协议 httpvar s2 = location.protocol;// 获取地址栏网址的端口 8848var s3 = location.port;//获取主机和端口号：127.0.0.1:8848var s4 = location.host;//获取主机号：127.0.0.1var s5 = location.hostname;// 获取路径参数demo3/page19-BOM-Location.htmlvar s6 = location.pathname;// 修改地址栏完整的网址（可以实现页面跳转）（多）location.href = "http://www.baidu.com";// location函数// 重新载入当前网页（刷新网页）location.reload();//使用网址替换当前地址栏的网址（实现页面跳转）location.replace("http:www.baidu.com");console.log(s6);33、BOM-history对象：（多）
| history.back(); | 返回上一个页面 |
| history.forward(); | 切换到下一个页面 |
| history.go(num); | 正前进负后退 |
| var len = history.length; | 获取历史记录中网址的个数 |
注意：go数字代表跳几个页面，前提是有过历史记录
34、DOM对象模型：
35、概念
（1）元素：标签以及标签所包含的内容 元素的属性：标签的属性
（2）节点：元素，属性，文本都叫做节点
（元素——标签节点，属性——属性节点，文本——文本节点）
（3）节点名称：标签节点的节点名就是标签名，属性节点的节点名就是属性名，文本节点的节点名是test
36、DOM document对象：
指代的就是一个网页文档，他提供的属性、函数大多是为了获取网页文档中的元素
（1）集合属性：
| document.all; | 获取当前文档所有元素 |
| document.images; | 获取当前网页文档中所有图片 |
| document.forms; | 获取当前网页文档中的form元素 |
| var arr4 = document.links; | 获取当前网页文档中所有的链接（a,area） |
1）其他属性：
| document.body; | 获取当前网页文档中的body元素 |
| document.title; document.title = "千锋Java"; | 获取当前网页文档中的标题内容 设置当前文档的标题 |
| document.URL; | 获取当前网页文档的URL |
| document.cookie = "key=value"; document.cookie = "key2=value2"; | 向cookie中添加新的数据（累加） |
| document.cookie; | 获取cookie中缓存的内容 |
37、获取节点对象：document.getElementById
| getElementById("img2"); | 根据标签的id属性获取一个标签 |
| getElementsByName("m1"); | 根据标签的name属性获取多个标签（数组） |
| getElementsByClassName("cc"); | 根据标签的class属性获取一组标签（数组） |
| getElementsByTagName("p"); | 根据标签名获取一组标签（数组） |
<img class="cc" src="imgs/img1.jpg" height="100"><br><img id="img2" src="imgs/img2.jpg" height="100"><br><img name="m1" src="imgs/img3.jpg" height="100"><br><p>p1</p><p class="cc">p3</p><p>p3</p>38、改变HTML
| document.write("从前有座山<br/>"); |
换行输出（依靠浏览器支持） |
| document.open(); | 打开并使用一个新的流 |
| document.close(); | 关闭当前网页的输出流，关闭之后如果执行write，则会打开新的流 |
| document.getElementById().innerHTML | 获取与设置标签中间的内容(可以识别标签) |
| document.getElementById().innerText | 获取与设置标签中间的内容(不可以识别标签) |
| document.getElementById().value | 获取与设置input标签输入框中值 |
38、获取节点对象：document.getElementById
39、对HTML标签的操作
（1）操作标签属性
// 操作标签属性// 获取属性值var s = img.src;// 设置属性值img.src = "imgs/img3.jpg";（2）操作标签样式
// 操作标签样式// 设置标签的样式属性img.style.border = "2px rgba(255,0,0,0.5) solid";// 样式属性在css中以“-”分割，在js中操作要使用驼峰命名img.style.borderRadius = "50%";var m = img.style.border;console.log(m);（3）操作标签对象的class属性
<style type="text/css">.imgStyle{width: 200px;height: 200px;border-radius: 50%;transform: rotate(45deg);}</style> var img3 = document.getElementById("img3");// 标签对象的class属性 使用className进行操作img3.className = "imgStyle";console.log(img3.class);<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.imgStyle{width: 200px;height: 200px;border-radius: 50%;transform: rotate(45deg);}</style></head><body><img src="imgs/img1.jpg" height="200"> <br><img id = "img2" src="imgs/img2.jpg" height="200"> <br><img id = "img3" src="imgs/img3.jpg" height="200"> <br><button onclick="testAttrOper()">操作标签属性</button><button onclick="testStyleOper()">操作标签样式</button><button onclick="testClassOper()">操作标签class属性</button><script type="text/javascript">function testAttrOper(){var img = document.getElementById("img2");// 操作标签属性// 获取属性值var s = img.src;// 设置属性值img.src = "imgs/img3.jpg";}function testStyleOper(){var img = document.getElementById("img2");// 操作标签样式// 设置标签的样式属性img.style.border = "2px rgba(255,0,0,0.5) solid";// 样式属性在css中以“-”分割，在js中操作要使用驼峰命名img.style.borderRadius = "50%";var m = img.style.border;console.log(m);}function testClassOper(){var img3 = document.getElementById("img3");// 标签对象的class属性 使用className进行操作img3.className = "imgStyle";console.log(img3.class);}</script></body>
</html>40、表单校验
form_validate.js
function doValidate() {console.log("------doValidate");var userName = document.getElementById("userNameInput").value;var label1 = document.getElementById("userNameTipsLabel");//校验用户名if (userName == null || userName == "") {//进行提示label1.innerHTML = "请输入用户名！";label1.style.color = "red";return false;} else if (userName.length < 8 || userName.length > 20) {label1.innerHTML = "用户名长度必须为8-20个字符！"label1.style.color = "red";return false;} else if (!new RegExp("^[0-9a-zA-Z]*$").test(userName)) {label1.innerHTML = "用户名只允许包含数字和字母";label1.style.color = "red";return false;} else {label1.innerHTML = "用户名输入正确！";label1.style.color = "green";}// 校验密码var userPwd = document.getElementById("userPwdInput").value;var label2 = document.getElementById("userPwdTipsLabel");if (userPwd == null || userPwd == "") {//进行提示label2.innerHTML = "请输入密码！";label2.style.color = "red";return false;} else if (userPwd.length < 8 || userPwd.length > 16) {label2.innerHTML = "密码长度必须为8-16个字符！"label2.style.color = "red";return false;}else {label2.innerHTML = "密码输入正确！";label2.style.color = "green";}//校验重复输入密码var rePwd = document.getElementById("rePwdInput").value;var label3 = document.getElementById("rePwdTipsLabel");if (rePwd == null || rePwd == "") {//进行提示label3.innerHTML = "密码不能为空！";label3.style.color = "red";return false;} else if (userPwd != rePwd) {label3.innerHTML = "两次密码输入不一致！"label3.style.color = "red";return false;}else {label3.innerHTML = "重复密码输入正确！";label3.style.color = "green";}//校验手机号var userPhone = document.getElementById("userPhoneInput").value;var label4 = document.getElementById("userPhoneTipsLabel");if(userPhone == null || userPhone == "") {//进行提示label4.innerHTML = "手机号不能为空！";label4.style.color = "red";return false;}else if(!new RegExp("1[3579]\\d{9}").test(userPhone)){label4.innerHTML = "手机号只允许1开头，且中间为3579的11位数！";label4.style.color = "red";return false;}else {label4.innerHTML = "手机号输入正确！";label4.style.color = "green";}//校验邮箱var userEmail = document.getElementById("userEmailInput").value;var label5 = document.getElementById("userEmailTipsLabel");if(userEmail == null || userEmail == "") {//进行提示label5.innerHTML = "邮箱不能为空！";label5.style.color = "red";return false;}else if(!new RegExp("^[0-9a-zA-Z]{10}@qq\.com$").test(userEmail)){label5.innerHTML = "邮箱只允许10位数字或字母，且以@qq.com结尾的格式！";label5.style.color = "red";return false;}else {label5.innerHTML = "邮箱输入正确！";label5.style.color = "green";}console.log(userName);return false;
}<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单校验</title><script type="text/javascript" src="js/form_validate.js"></script></head><body><!-- onsubmit表单提交事件，如果返回false则不执行，返回true才执行 --><form action="https://www.baidu.com" onsubmit=" return doValidate()"><fieldset><legend>用户注册-数据校验</legend><p>账号：<input id="userNameInput" type="text" placeholder="请输入用户名"><label id="userNameTipsLabel"></label></p><p>密码：<input id="userPwdInput" type="password" placeholder="请输入密码"><label id="userPwdTipsLabel"></label></p><p>确认密码：<input id="rePwdInput" type="password" placeholder="请再次输入密码"> <label id="rePwdTipsLabel"></label></p><p>手机号：<input id="userPhoneInput" type="text" placeholder="请输入手机号"> <label id="userPhoneTipsLabel"></label></p><p>邮箱：<input id="userEmailInput" type="text" placeholder="请输入邮箱"> <label id="userEmailTipsLabel" ></label></p><p><input type="submit" value="提交"></p></form></fieldset></body>
</html>41、节点操作
（1）说明
节点：元素，属性，文本都叫做节点
节点操作：使用js完成节点的增加、插入、替换、删除
1）节点属性：
| 节点类型 | nodeType | nodeName | nodeValue |
| 标签节点 | 1 | 标签名 | null |
| 属性节点 | 2 | 属性名 | 属性值 |
| 文本节点 | 3 | #text | 文本内容 |
2）方法
| body.attributes; | 获取当前标签的属性列表 |
| div.childNodes; | 获取当前标签的子节点（包括标签节点，文本节点） |
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>节点属性</title></head><body style="color: red;" bgcolor="green"><div id="div1">hello<h3>枫桥夜泊</h3><p>月落乌啼霜满天，</p><p>江枫渔火对愁眠。</p><p>姑苏城外寒山寺，</p><p>夜半钟声到客船。</p></div><input type="button" value="测试" onclick="test()"><script type="text/javascript">function test(){var body = document.body;// 所有标签对象的都可以调用attributes属性，获取当前标签的属性列表var attrsArr = body.attributes;// 属性节点var attrNode = attrsArr[0];console.log(attrNode.nodeType);console.log(attrNode.nodeName);console.log(attrNode.nodeValue);// 所有标签对象的都可以调用childNodes属性，获取当前标签的子节点（包括标签节点，文本节点）var div = document.getElementById("div1");var nodesArr = div.childNodes;//文本节点 var textNode = nodesArr[0];console.log(textNode.nodeType);console.log(textNode.nodeName);console.log(textNode.nodeValue);//标签节点var tagNode = nodesArr[1];console.log(tagNode.nodeType);console.log(tagNode.nodeName);console.log(tagNode.nodeValue);}</script></body>
</html>(2)常用方法
| document.createElement("img"); | 创建标签节点（元素） |
| document.createAttribute("name"); | 创建属性节点 |
| document.createTextNode("hello world!"); | 创建文本节点 |
| document.setAttributeNode(srcAttr); | 将属性节点添加到标签节点中 |
| document.setAttribute("src","imgs/img2.jpg"); | 给标签节点添加/修改属性 |
| document.removeAttribute("alt"); | 从标签节点上移除一个属性 |
| document. appendChild() | 建立上下级关系 |
| document.insertBefore（） | 插入子节点 |
| document. replaceChild | 替换子节点 |
| document. removeChild() | 删除子节点 |
(2)创建节点: document.createElement
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>创建新节点</title></head><body><input type="button" value="测试创建新节点" onclick="test()"></body><script type="text/javascript">function test(){// 创建标签节点（元素）var tagNode = document.createElement("img");//打印标签的内容// console.log(tagNode.outerHTML);console.log(tagNode.nodeType);console.log(tagNode.nodeName);console.log(tagNode.nodeValue);// 创建属性节点var attrNode = document.createAttribute("name");console.log(attrNode.nodeType);console.log(attrNode.nodeName);console.log(attrNode.nodeValue);// 创建文本节点var textNode = document.createTextNode("hello world!");console.log(textNode.nodeType);console.log(textNode.nodeName);console.log(textNode.nodeValue);}</script>
</html>（3）节点的属性操作
// 创建标签节点var imgTag = document.createElement("img");// -----------------begin// 1、// 创建属性节点var srcAttr = document.createAttribute("src");srcAttr.nodeValue="imgs/img1.jpg";// 将属性节点添加到标签节点中imgTag.setAttributeNode(srcAttr);// -----------------end// 2、给标签节点添加/修改属性imgTag.setAttribute("src","imgs/img2.jpg");imgTag.setAttribute("width","200");imgTag.alt = "图片无法显示";// 从标签节点上移除一个属性imgTag.removeAttribute("alt");2）建立上下级关系 appendChild()
// 拼接子节点 将标签节点拼接到body标签里面（最后面） var body = document.body;body.appendChild(imgTag);3）插入子节点 insertBefore（）
//插入子节点，将imgTag插入到body里面btnTag之前var btnTag = document.getElementById("btn_test");body.insertBefore(imgTag,btnTag);（3）替换子节点 replaceChild
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>替换节点</title><style type="text/css">#container{border: #F08080 2px solid;width: 400px;height: 300px;}</style></head><body><div id="container"><p>hello</p><p id="p">我是一个图片</p><p>world</p></div><img id="img3" src="imgs/img3.jpg" height="100" ><input id="btn_test" type="button" value="测试" onclick="test()"><script type="text/javascript">function test(){// 使用一个图片标签，替换div中的p标签// 创建新节点var imgTag = document.createElement("img");imgTag.src = "imgs/img1.jpg";imgTag.height=100;//获取网页中已经存在的图片标签// 如果使用网页中已经存在的标签，替换的时候A会发生移动，而不是拷贝A去替换Bvar imgTag = document.getElementById("img3");//替换子节点// 使用imgTag替换oldChildvar parentTag = document.getElementById("container");var oldChild = document.getElementById("p");parentTag.replaceChild(imgTag,oldChild);}</script></body></html>（4）删除子节点 removeChild()
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>替换节点</title><style type="text/css">#container{border: #F08080 2px solid;width: 400px;height: 300px;}</style></head><body><div id="container"><p>hello</p><p id="p">我是一个图片</p><p>world</p></div><img id="img3" src="imgs/img3.jpg" height="100" ><input id="btn_test" type="button" value="测试" onclick="test()"><script type="text/javascript">function test(){var div =document.getElementById("container");var p = document.getElementById("p");// 删除自节点// 从div中删除子标签pdiv.removeChild(p);}</script></body></html>42、事件绑定
（1）内联绑定：
在HTML标签上添加事件属性，绑定对应的js函数
<button onclick="test1()">测试按钮1</button><script type="text/javascript">function test1(){console.log("------------test1");}</script>（2）脚本外联绑定(推荐):
不再HTML标签上写事件属性，通过JS获取HTML元素，调用事件属性绑定JS函数
<button id="btn2" >测试按钮2</button><script type="text/javascript">var btn2 = document.getElementById("btn2");btn2.onclick = function(){console.log("------------test2");}</script>43、HTML常用事件
鼠标事件、键盘事件（表单标签）、window事件、监听事件
44、鼠标事件：
用户的鼠标在HTML标签上产生点击、双击、移动、放上、离开等动作
| onclick | 单击 |
| ondblclick | 双击 |
| onmouseover | 鼠标移动到HTML标签上 |
| onmouseout | 鼠标从HTML标签上移走 |
| onmousemove | 鼠标在HTML标签上移动 |
| onmousedown | 鼠标在HTML标签上左键按下 |
| onmouseup | 鼠标在HTML标签上左键松开 |
| onsubmit | 表单提交事件 |
<img src="imgs/img1.jpg" width="200" onclick="test1()" ><script type="text/javascript">function test1(){console.log("------test1");}</script>表单提交：注意 false不提交 onsubmit那里直接show07()的话都会false也会提交
<form action="index23.html" method="get" onsubmit="return show07()"><input type="text" name="uname" /><input type="submit" value="提交" /></form>function show07() {return true;}45、键盘事件（表单标签）：
主要是针对于表单中的输入标签
| onkeydown | 键盘按下（未松开就一直加） |
| onkeyup | 键盘抬起 |
| onkeypress | 键盘按下（未松开也就一次） |
46、window事件
| window.onload = function() | 当网页中body标签内容加载完毕触发 |
| window.onunload = function() | 当前网页关闭或刷新时执行 用于回收资源 |
| window.onscroll = function() | 当网页发生滚动时触发执行 |
| window.οnresize= function() | 窗口的尺寸发生变化时触发 |
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><img src="imgs/img1.jpg" height="300"><script type="text/javascript">//当网页中body标签内容加载完毕触发window.onload = function(){console.log("------onload");}// 当前网页关闭或刷新时执行 用于回收资源window.onunload = function(){console.log("------onunload");}// 当网页发生滚动时触发执行window.onscroll = function(){console.log("------onscroll");}// 窗口的尺寸发生变化时触发window.onresize= function(){console.log("------onresize");}</script></body>
</html>例如：（如果在HTML的head标签中通过js绑定事件，必须写在window.onload = function()中，因为不然的话找不到id=btn的标签）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">window.onload = function(){var btn = document.getElementById("btn");btn.onclick = function(){console.log("------hello");}}</script></head><body><button id="btn">测试按钮</button></body>
</html>47、监听事件:
键盘事件通常绑定在表单输入标签，但是表单输入标签支持的事件不止键盘事件
| onfocus | 当表单标签获得焦点时触发 |
| onblur | 当表单标签失去焦点时触发 |
| onchange | 当表单标签中的值发生变化触发（输入框输入完成失去焦点后判断） |
| onselect
| 当输入框中输入的内容被选中时触发 select标签也支持onchange事件 |
| onsubmit | 绑定在form元素上，当此表单被提交时触发 |
| onreset | 绑定在form元素上，当此表单被重置时触发 |
<th><input type="checkbox" id="checkall" οnchange="checkall();">全选</th>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text" id="userName"><select id="num"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><form action="http://www.baidu.com"><input type="text"><input type="submit"><input type="reset"></form><script type="text/javascript">var userNameInputTag = document.getElementById("userName");// 当表单标签获得焦点时触发userNameInputTag.onfocus = function(){console.log("--------test1");}// 当表单标签失去焦点时触发userNameInputTag.onblur = function(){console.log("--------test2");}// 当表单标签中的值发生变化触发（输入框输入完成失去焦点后判断）userNameInputTag.onchange = function(){console.log("--------test3");}// 当输入框中输入的内容被选中时触发userNameInputTag.onselect = function(){console.log("--------test5");}// select标签也支持onchange事件document.getElementById("num").onchange = function(){console.log("-----test4");}// 绑定在form元素上，当此表单被提交时触发document.forms[0].onsubmit = function(){console.log("---------test6");// 阻止表单提交return false;}// 绑定在form元素上，当此表单被重置时触发document.forms[0].onreset = function(){console.log("---------test7");// 阻止表单提交return false;}</script></body>
</html>44、Event事件对象：
js将标签发生的动作抽象为事件对象、
Event对象用来描述HTML标签与发生的动作的组合
(1)获取Event对象：
1)内联获取：使用window对象调用event属性获取触发当前JS函数的event对象
<button ondblclick="test1()">按钮</button><img src="imgs/img1.jpg" height="100" id="img""><script type="text/javascript">function test1(){// 获取当前事件对象var ev = window.event;}</script>2）js脚本获取：如果使用JS脚本绑定函数，也可以使用函数的参数直接获取
<img src="imgs/img1.jpg" height="100" id="img""><script type="text/javascript">var img = document.getElementById("img");img.onclick = function(ev){console.log(ev);}</script>（2）event对象属性：
| var tag = event.srcElement; | event对象调用srcElement，获得触发此事件的标签（<button οnclick="test1()">按钮</button>） |
| var type = event.type; | event对象调用type属性，获取事件的类型（click） |
45、事件冒泡：子标签发生的事件触发了当前标签上层父标签绑定的函数
阻止：
| event.cancelBubble = true; | 阻止事件冒泡 |
| event.stopPropagation(); | 阻止事件冒泡 |
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="div" style="padding: 50px; width: 100px; height: 100px; background: rgba(255,0,0,0.5);"><button id="btn">测试按钮</button><img src="imgs/img1.jpg" height="50"></div><script type="text/javascript">var div = document.getElementById("div");div.onclick = function() {console.log("-------test1");}var arr = div.childNodes;for (var i = 0; i < arr.length; i++) {var node = arr[i];if (node.nodeType == 1) {node.onclick = function(event){//阻止事件冒泡event.cancelBubble = true;}}}</script></body>
</html>46、JSP的内置对象：
Request对象、Response对象、out对象、session对象、application对象、PageContext对象、Config对象、Page对象、Exception对象。
47、NaN+ 任何 =NaN 无重载
48、typeof()==>用于获取变量数据类型
49、增强for里面的每个值是索引
50、οnsubmit="return checkedLogin()" 函数里面默认true
51、css写 style js写script
52、两种按钮
（1）<input type="button" value="根据id来获取" οnclick="show01()"> 验证
（2）<input type="submit" value="提交"> 必须form里面
53、getElementsByClassName("max")语法
document.getElementsByClassName("max").value 这个语句是错误的，因为 getElementsByClassName() 方法返回的是一个数组，而 value 属性是只读的，所以不能直接访问。可以通过 arrays[0].value 来访问第一个元素的 value 属性。
54、样式、属性写法
（1）样式写法：（head里面）
<style>table{border: 1px red solid;}</style>（2）属性写法
<table style="border: 1px solid red; "><table border="1px" cellspacing="0px" >55、table标签举例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>tr th {height: 20px;}tr td {height: 50px;text-align: center;}</style></head><body><table border="1px" cellspacing="0px" width="300px"><!-- 第一行 --><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><!-- 第二行 --><tr><td>小花</td><td>12</td><td>女</td></tr><!-- 第三行 --><tr><td>小淑</td><td>32</td><td>女</td></tr><!-- 第四行 --><tr><td>兰兰</td><td>20</td><td>男</td></tr><!-- 第五行 --><tr><td>倾听</td><td>23</td><td>男</td></tr></table><!-- //获取所有的行数 --><script>//得到所有的tr标签var arrays = document.getElementsByTagName("tr");for (var i = 0; i < arrays.length; i++) {//判断是否是偶数行if ((i + 1) % 2 == 0) {//是偶数行，则改变背景颜色arrays[i].style.backgroundColor = "red"}}</script></body>
</html>56、text-align: center;也可用于表示里面的内容居中
<style>div{background-color: gray;width: 280px;height: 60px;text-align: center;}</style></head><body><div>验证码： <input type="text" /><input type="button" value="确定" /></div>57、存入数组
var nums = [];
nums.push(letter);
58、合并字符串
var combined = nums.join('');
59、数字转成字母
var letter = String.fromCharCode(num1);
60、table无样式标签
61、window.οnlοad=show() 启动时加载
62、js无equals 只有==
63、操作样式：节点对象.style.属性名=属性值
64、两种button
<button onclick="testFor()">我是button标签</button><input type="button" value="我是input标签下的button" />区别：
<button> 和 <input type="button"> 的主要区别在于 <button> 标签可以包含更多的HTML元素，并且通常用于更大的、可包含文本的按钮，而 <input type="button"> 则用于更小的按钮，并且通常只包含一个词或者短语。另外，<button> 标签在大多数浏览器中支持JavaScript事件处理程序，而 <input type="button"> 则不支持。
65、onsubmit表单提交事件，如果返回false则不执行，返回true才执行
66、onchange监听条目改变
67、方法传参
function changeCitys(index){
68、字符串多维数组
var arrays = [["昌平区","海淀区","朝阳区"],["名媛区","酒吧区","小姐姐区"],["越秀区","白云区","天河区"]];
JSON格式的数组，该数组包含两个对象
[{"uid":14,"uname":"张三"},{"uid":15,"uname":"张三"}]
69、float: left;
margin-top: 50px;
margin-right: 10px;
设置容器里面的标签的位置，先让他变成float的浮动布局
70、<input type="button" id="btn" />
btn.disabled = true; 设置未到时间前不能点击
71、JS绑定事件
（1）直接在标签中绑定
<button onclick="document.getElementsByTagName('p')[0].style.color='red'">
点击</button>（2）使用函数绑定
1）（多）
<input type="button" value="点击" onclick="showInfo()" /><script>function showInfo() {alert("热火2-1凯尔特人");}</script>2)（多）
<input id="tv_btn" type="button" value="点击" /><script>document.getElementById("tv_btn").onclick = function() {alert("热火2-1凯尔特人")}</script>3)使用提供的方法进行绑定
| addEventListener("事件的名称","执行函数","执行的规则(true 由内到外触发事件,false相反)") | 增加事件 |
| removeEventListener("事件的名称","执行函数","执行的规则(true 由内到外触发事件,false相反)") | 删除事件 |
A.事件没有on前缀
B.触发的函数 没有双引号 没有括号
C.addEventListener 可以给同一个标签增加相同的事件
D.addEventListener 可以给同一个标签增加多种不同的事件
E.addEventListener 可以给Windows窗口对象来增加事件
<script>document.getElementById("tv_but").addEventListener("click", showInfo, true);function showInfo() {alert("哈哈哈");}</script>72、设置里面的字体颜色的话需要 ePro.style.color = "red"; 。不能只是color
73、html里面left:'250px'没有效果,要加上position: relative;才有效果
元素的定位属性（如left、top、position等）需要结合起来使用才能实现定位效果。如果你只设置了left属性而没有设置position属性，那么浏览器将无法确定元素的定位参照点和定位方式，因此元素的位置不会发生变化
相对定位元素的left、top、right和bottom属性都应该是相对于其原始位置的偏移量，而不是相对于父元素或屏幕的偏移量。如果需要将元素相对于父元素或屏幕进行定位，需要使用其他定位方式（如绝对定位、固定定位等）
74、window.οnlοad=show01(); 一开始就生成想要的结果
75、console.log("你好");没反应
HTML代码中出现了JavaScript的console.log。这个是在浏览器控制台中打印信息的方法，它并不是HTML的一部分，而是JavaScript的一部分。
如果你想在网页上看到"你好"这个信息，你需要将console.log("你好");这行代码放入一个<script>标签内
76、随机生成验证码并校验
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div {background-color: grey;width: 380px;text-align: center;}a:link {text-decoration: none;color: white;font-size: 10px;}a:visited {color: white;}span {color: red;}#yzm {color: white;margin-bottom: 300px;}#ndiv{margin-bottom: 0px;}#sjyzm{font-size: 20px;}</style></head><body><div><span id="sjyzm"></span><a href="#" onclick="show01()">看不清换一张</a><form action="#"><span id="yzm">验证码： </span><input type="text" id="admin"/><input type="button" value="确定" onclick="show02()"/></form></div><script>window.onload=show01();var combined = " ";/*** 生成验证码*/function show01() {//随机生成1311avar i = 0;// var num = parseInt(Math.random() * 10 + 1);var nums = [];while (i < 6) {//生成字母if (i == 5) {var num1 = parseInt(Math.random() * 58 + 66);//截取需要的范围if ((num1 >= 65 && num1 <= 90) || (num1 >= 97 && num1 <= 122)) {//转化成字母var letter = String.fromCharCode(num1);nums.push(letter);break;}}else{//生成数字var num = parseInt(Math.random() * 10);nums.push(num);i++;}}//转为字符串combined = nums.join('');//输出到验证码位置去document.getElementById("sjyzm").innerText=combined;}/*** 验证输入的内容与验证码是否相同*/function show02(){// 得到输入框的内容//得到输入框的标签var admin = document.getElementById("admin");//得到标签的内容var content = admin.value;var combined01 = String(combined);//判断if(combined01 == content){alert("输入正确！")}else{alert("输入错误！")}}</script></body>
</html> 注意：使用String(combined)可以将combined转换为字符串类型，确保在比较时不会出现类型不匹配的问题。如果直接使用combined进行比较，可能会因为combined是数字类型而引发错误
77、设置为不可见：
78、html块状元素、行内块元素、行内元素的区别
（1）块状元素：总是开始于新的一行，占据其父元素的整个宽度
最常见的块级元素有 <div>, <p>, <h1> 到-<h6>, <ol>, <ul>, <li>, <menu>, <form>, <section>, <article>, <header>, <footer>等
1）特点：
1、有默认的宽高，宽是父元素的100%，高度是内容所称起来的高度
2、宽高是可以设置的
3、独占一行
4、可以容纳其他的块状元素、行内元素、行内块元素
5、可以设置外边距、内边距、边框
注意:h标签、p标签尽量的不要去容纳块状元素
（2）行内块元素
行内块元素不会开始新的一行，它和行内元素一样排成一行，但是它像块级元素一样有自己的宽度、高度、上下边距和左右边距（可以设置它的宽度、高度、上下内边距、上下边框）
常见的行内块级元素有 <img>, <input>, <textarea>, <button>, <select>, <datalist>
1）特点：
1、 有默认的宽高，就是自带的宽高
2、可以设置宽高
3、可以与相邻的行内元素和行内块元素在同一水平线下显示
4、外边距、内边距、边框都是可以设置的
（3）行内元素
行内元素不会开始新的一行，它会和其他元素排成一行。它只能包含文本或者其他行内元素
常见的行内元素包括<span>, <a>, <b>, <strong>, <em>, <i>, <sub>, <sup>
1）特点：
1、有默认宽高，都是内容所撑起来的
2、宽高设置无效
3、与相邻的行内元素或者行内块元素同一行上显示
4、可以去包含行内元素，但是不能包含块状元素及行内块元素
5、水平方向上的外边距和内边距是可以设置的，垂直方向无效，边框也是可以设置
注意：a标签可以去包含块状元素以及行内元素 ，链接里面不能再放链接
（4）元素的转化
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
显示问题：
document.getElementById("menu-ul").style.display="block";这行代码找到的元素（上一步的结果）并将其display属性设置为"block"。在CSS中，display属性决定了元素如何显示。在这种情况下，"block"意味着元素将会块级显示，也就是说它会占据一整行空间，而不是与其他元素并排显示
79、window.onload的用法
window.onload = show();function show() {80、diasbled的用法(不能点击)
81、通用
*{/* 设置取消下划线 */text-decoration: none;/* 设置不要列表前面的. */list-style-type: none;/* 设置各自的边框为0 */margin: 0px;/* 设置所有的文字为黑色 */color: black;}82、ch.checked
ch.checked 是 JavaScript 中 checkbox 对象的一个属性，表示 checkbox 是否被选中。当 checkbox 被选中时，ch.checked的值为 true；当 checkbox 未被选中时，ch.checked 的值为 false。
这篇关于JS(决定了网页中标签的功能及动态效果)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
