-
JavaScript-DOM编程
一、innerHTML innerText操作div和span
innerHTML和innerText属性有什么区别？
相同点：都是设置元素内部的内容
不同点：
innerHTML会把后面的“字符串”当做一段HTML代码解释并执行
innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待示例代码：
<style type="text/css"> #div1{ background-color: aqua; width: 300px; height: 300px; position: absolute; left: 100px; top: 100px; } </style> <script type="text/javascript"> window.onload = function(){ var dtnElt = document.getElementById("dtn"); dtnElt.onclick = function(){ //设置div的内容 //第一步:获取div的内容 var div1Elt = document.getElementById("div1"); //第二步:使用innerHTML属性来设置元素内部的部分 // div1Elt.innerHTML = "用户名输入为空！"; // div1Elt.innerHTML = "用户名输入为空！"; div1Elt.innerText = "用户名输入为空！"; } } </script> <input type="button" value="设置div的属性" id="dtn"> javascript<div id="div1"></div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
二、JS的正则表达式（Regular Expression）
1、什么是正则表达式，有什么用？
正则表达式是一门独立的学科，基本每个语言都支持。
正则表达式不是JS专属的。不过在JS中使用居多。
通常使用正则表达式进行字符串格式匹配。正则表达式是有一堆特殊的符号组成的一个表达式。
每一个特殊的符号都有特殊的代表含义。例如：
qq号的正则表达式。
邮箱地址的正则表达式。邮箱地址格式验证：
程序中有一个邮箱地址的正则表达式。
用户输入了一个邮箱地址。
那么邮箱地址的正则表达式和邮箱地址进行匹配，能匹配成功，表示合法，反之表示不合法。2、对于javascript程序员来说，对于正则表达式掌握到什么程度？
第一：能够看懂正则表达式
第二：简单的正则要会写
第三：要能够独立的从网络当中搜索到你想要的正则表达式（搜索能力要有）
第四：要会创建JS的正则表达式对象。
第五：要会调用JS正则表达式对象的方法。3、常见的正则表达式符号有哪些？
. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束*重复零次或更多次 0-N次
+重复一次或更多次 1-N次
? 重复零次或一次 0或1次
{n} 重复n次 n次
{n,} 重复n次或更多次 n+次
{n,m} 重复n到m次 n到m次
注意：数量永远匹配的都是前面的那个字符出现的次数。\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[a-z]{1} a到z所有的字符中的任意1个。[a-zA-Z0-9]{3,} 前面这堆中的任意字符至少出现3个。
[1-9] 没有指定数量的时候，默认是1个。
5、在JS中怎么创建正则表达式对象呢？
第一种方式：直接量语法
var regExp = /正则表达式/标记第二种方式：使用内置类RegExp类。
var regExp = new RegExp(“正则表达式”, “标记”)标记是可选项！！！！！都有哪些值可选呢？
g：全局 global
i: 忽略大小写 ignorecase
gi: 全局扫描，并且忽略大小写。6、正则表达式对象有一个很重要的方法：
var emailRegExp = /^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$/
var ok = emailRegExp.test(“用户输入的字符串”);
返回值ok是true表示，匹配成功了。>其实在JS中，字符串String也是支持正则表达式的。
7、正则表达式对象的test()方法
true / false = 正则表达式对象.test(用户填写的字符串)；
true ： 字符串格式匹配成功
false ： 字符串格式匹配失败三、去除字符串前后空白trim函数
示例代码：
<body> <script type="text/javascript"> //自定义去除前后空白方法 String.prototype.trim = function(){ return this.replace(/^\s+/,"").replace(/\s+$/,""); } window.onload = function(){ document.getElementById("btn").onclick = function(){ var username = document.getElementById("username").value; username = username.trim(); alert("--->" + username + "<----"); } } </script> <input type="text" id="username" /> <br> <input type="button" value="获取用户名" id="btn" /> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
四、表单验证
满足条件
（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码一致
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
（7）文本框再次获得焦点后，清空错误提示信息
（8）最终表单中所有项均合法方可提交示例代码：
<body> <script type="text/javascript"> window.onload = function(){ var usernameErrorElt = document.getElementById("usernameError"); var usernameElt = document.getElementById("username"); //失去焦点事件 usernameElt.onblur = function(){ //获取用户输入的用户名值 var username = usernameElt.value; //去除前后空格 username = username.trim(); //alert("-->" + username + "<--"); //判断输入的用户名是否为空 if(username === ""){ //用户名为空时执行此逻辑 usernameErrorElt.innerText = "用户名不能为空！"; }else{ //用户名不为空时执行此逻辑 //用户名必须在[6-14]位之间 if(username.length < 6 || username.length >14){ //此时输入长度不符 usernameErrorElt.innerText = "用户名的长度必须是6-14之间"; }else{ var regExp = /^[A-Za-z0-9]+$/; var ok = regExp.test(username); if(!ok){ //表示不符合规则 usernameErrorElt.innerText = "用户名只能有数字和字母组成，不能含有其它符号"; } usernameErrorElt.innerText = ""; } } } //获得焦点事件 usernameElt.onfocus = function(){//出错点,函数内的逻辑（不包含在if语句)肯定会执行!,if判断语句一定要在前!!!!! //当用户名文本框获得焦点时,清空文本框非法内容 if(usernameErrorElt.innerText != ""){ usernameElt.value = ""; } //当用户名文本框获得焦点时span清空 usernameErrorElt.innerText = ""; } //获取密码验证标签 var userpwdErrorElt = document.getElementById("userpwdError"); //获取确认密码标签 var userpwd2Elt = document.getElementById("userpwd2"); //失去焦点事件 userpwd2Elt.onblur = function(){ //获取密码标签 var userpwdElt = document.getElementById("userpwd"); //获取值 var userpwd = userpwdElt.value; var userpwd2 = userpwd2Elt.value; if(userpwd === userpwd2){ userpwdErrorElt.innerText = ""; }else{ userpwdErrorElt.innerText = "密码输入错误"; } } //绑定获得焦点事件 userpwd2Elt.onfocus = function(){ if(userpwdErrorElt.innerText != ""){ userpwd2.value = ""; } //当用户名文本框获得焦点时span清空 userpwdErrorElt.innerText = ""; } //获取邮箱验证标签 var emailErrorElt = document.getElementById("emailError"); //获取邮箱标签 var emailElt = document.getElementById("email"); //绑定邮箱失去焦点事件 emailElt.onblur = function(){ //获取值 var email = emailElt.value; var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; var ok = emailRegExp.test(email); if(ok){ emailErrorElt.innerText = ""; }else{ emailErrorElt.innerText = "邮箱输入格式不对！"; } } //绑定邮箱获得焦点事件 emailElt.onfocus = function(){ if(emailErrorElt.innerText != ""){ emailElt.value = ""; } emailErrorElt.innerText = ""; } //获取注册按钮标签 var btnElt = document.getElementById("btn"); //定义鼠标单击事件 btnElt.onclick = function(){ //系统自动获取和失去焦点,先获得焦点再失去焦点 usernameElt.focus(); usernameElt.blur() userpwd2Elt.focus(); userpwd2Elt.blur(); emailElt.focus(); emailElt.blur(); if(usernameErrorElt.innerText == "" && userpwdErrorElt.innerText == "" && emailErrorElt.innerText == ""){//如果数据合法就跳转 //获取表单标签 var userformElt = document.getElementById("userform"); // formElt.action = "http://localhost:8080/jd/save"; //专用方法,提交表单 userformElt.submit(); } } } </script> <!-- 这个表单提交应该使用post，这里为了检测，所以使用get --> <form id="userform" action = "http://localhost:8080/jd/save" method="get"> 用户名： <input type="text" name="username" id="username" /><span id="usernameError"></span> <br> 密码： <input type="text" name="userpwd" id="userpwd" /> <br> 确认密码：<input type="text" id="userpwd2" /><span id="userpwdError"></span> <br> 邮箱： <input type="text" name="email" id="email" /><span id="emailError"></span> <br> <!-- <input type="submit " value="注册" /> --> <input type="button" value="注册" id="btn"> <input type="reset " value="重置" /> </form> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
注意：此程序表单提交如果要跳转页面需要使用后台服务器，如果没服务器，页面不会跳转
页面跳转（没有服务器时）：
五、复选框全选和取消全选
document.getElementById()
document.getElementsByName()
document.getElementsByTagName()示例代码：
<body> <script type="text/javascript"> window.onload = function(){ //获取多选框数组 var aihaos = document.getElementsByName("aihao"); //获取多选框标签 var firstChkElt = document.getElementById("firstChk"); //设置鼠标单击事件 firstChkElt.onclick = function(){ for(var i=0;i<aihaos.length;i++){ //每个多选框都和头部多选框保持一致 aihaos[i].checked = firstChkElt.checked; } } for(var i=0;i<aihaos.length;i++){ //给所有多选框设置鼠标单击事件 var all = aihaos.length; aihaos[i].onclick = function(){ var checkedCount = 0; //总数量和多选框数量相同的时候,第一个复选框选中 for(var i=0;i<aihaos.length;i++){ if(aihaos[i].checked){ checkedCount++ } } firstChkElt.checked = (all == checkedCount); } } } </script> <input type="checkbox" id="firstChk" /><br> <input type="checkbox" name="aihao" value="smoke" />抽烟<br> <input type="checkbox" name="aihao" value="drink" />喝酒<br> <input type="checkbox" name="aihao" value="tt" />烫头 </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
六、获取下拉列表项中项的value
change事件
示例代码：
<body> <!-- 第一种方式 --> <!-- <select onchange="alert(this.value)"> <option value="001">河南省</option> <option value="002">河北省</option> <option value="003">山东省</option> <option value="004">山西省</option> </select> --> <!-- 第二种方式 --> <script type="text/javascript"> window.onload = function(){ //获取下拉标签 var firstOptionElt = document.getElementById("firstOption"); firstOptionElt.change = function(){ alert(firstOptionElt.value); } } </script> <select id="firstOption" onchange="alert(this.value)"> <option value="001">河南省</option> <option value="002">河北省</option> <option value="003">山东省</option> <option value="004">山西省</option> </select> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
七、显示网页时钟
window.setInterval()
window.clearInterval()
主要两个函数示例代码：
<body> <script type="text/javascript"> //出错点,start不能放在onload里!!!!!!!!! function displayTime(){ var time = new Date(); var strTime = time.toLocaleString(); document.getElementById("div").innerHTML = strTime; } //设置显示的事件一直会变化 function start(){ v = window.setInterval("displayTime()",1000); } function stop(){ window.clearInterval(v); } </script> <input type="button" value="显示系统当前时间" onclick="start();" /> <input type="button" value="时间停止" onclick="stop();" /> <div id="div"></div> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
-
相关阅读:
深入浅出理解机器学习算法—神经网络（前向传播）
让交互更加生动！有意思的鼠标跟随 3D 旋转动效
阿里云短信业务 登入功能 Gitee源码分享 vue3+springboot
iOS 17.4 Not Installed
(ICRA 2020) Instance Segmentation of LiDAR Point Clouds
内存取证之NSSCTF-OtterCTF 2018（复现赛）
PostgreSQL JIT(Just-In-Time Compilation）With LLVM 的实现原理
MyBatis基础教程
个人编程笔记 - C++ 中的 const
【VIO】练习1 IMU标定
- 原文地址：https://blog.csdn.net/qq_46096136/article/details/127128490
