• JavaScript——Document Object Model

    文章目录

    06 DOM

    DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当做一棵DOM树来看待。

    var domObj = document.getElementById("id");

    • 1

    DOM和BOM的区别：

    • BOM的顶级对象是：window
    • DOM的顶级对象是：document
    • 实际上BOM是包括DOM的！
      - [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4478QAhQ-1659115655025)(../../../Pictures/JS/image-20220729192214255.png)]

    函数模板
    通过点击按钮框绑定一个事件
    获取事件id的事件，在这个事件中获取单机按钮框的事件

    window.onload = function(){
	var xx = document.getElementById("id属性值");
    xx.onclick = function(){
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5

    而且document.write(“输出语句”);
    相当于java的system.out.println();

    6.1 文本框value

    1. 页面加载执行回调函数
    2. 回调函数获取id事件
    3. 通过id事件绑定单击按钮执行函数

    1.通过点击按钮框获取value值

    <script type="text/javascript">
window.onload = function(){
  var btnElt = document.getElementById("btn");
  btnElt.onclick = function(){
	  /*
	  // 获取username节点
	  var usernameElt = document.getElementById("username");
	  var username = usernameElt.value;
	  alert(username);
	  */
	 // alert(document.getElementById("username").value);

 // 可以修改它的value
 document.getElementById("username").value = "zhangsan";
  }
}
script>

<input type="text" id="username" />
<input type="button" value="获取文本框的value" id="btn"/>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    2.将第一个文本框中的value赋值到第二个文本框上

    <script type="text/javascript">
	window.onload = function(){
		document.getElementById("setBtn").onclick = function(){
			document.getElementById("username2").value = document.getElementById("username1").value;
		}
	}
script>


<input type="text" id="username1" />
<br>
<input type="text" id="username2" />
<br>
<input type="button" value="将第一个文本框中的value赋值到第二个文本框上" id="setBtn" />

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    3.失去焦点对象获取value值，通过this指针

    

<input type="text" onblur="alert(this.value)" />

    • 1
    • 2
    • 3

    6.2 inner HTML和innerText属性

    inner HTML和innerText是属性不是方法

    相同点：

    • 都是设置元素内部的内容。

    不同点：

    • innerHTML会把后面的“字符串”当做一段HTML代码解释并执行。
    • innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待
    <head>
	<meta charset="utf-8">
	<title>DOM编程-innerHTML和innerText操作div和spantitle>
	<style type="text/css">
		#div1{
			background-color: aquamarine;
			width: 300px;
			height: 300px;
			border: 1px black solid;
			position: absolute;
			top: 100px;
			left: 100px;
		}
	style>
head>
<body>
    <script type="text/javascript">
        window.onload = function(){
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                // 设置div的内容
                // 第一步:获取div对象
                var divElt = document.getElementById("div1");
                // 第二步:使用innerHTML属性来设置元素内部的内容
                // divElt.innerHTML = "fjdkslajfkdlsajkfldsjaklfds";
                // divElt.innerHTML = "用户名不能为空！";
                divElt.innerText = "用户名不能为空！";
            }
        }
    script>
	<input type="button" value="设置div中的内容" id="btn"/>
	<div id="div1">div>
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

    6.3 正则表达式

    正则表达式（Regular Expression）：主要用在字符串格式匹配方面

    6.3.1 常用正则表达式符号

    符号功能
    .匹配除换行符以外的任意字符
    \w匹配字母或数字或下划线或汉字
    \s匹配任意的空白符
    \d匹配数字
    \b匹配单词的开始或结束
    ^匹配字符串的开始
    $匹配字符串的结束

    6.3.2 常用限定符符号

    符号功能
    *重复零次或更多次
    +重复一次或更多次
    ?重复零次或一次
    {n}重复n次
    {n,}重复n次或更多次
    {n,m}重复n到m次

    6.3.3 常用的反义代码

    符号功能
    \W匹配任意不是字母，数字，下划线，汉字的字符
    \S匹配任意不是空白符的字符
    \D匹配任意非数字的字符
    \B匹配不是单词开头或结束的位置
    [^x]匹配除了x以外的任意字符
    [^aeiou]匹配除了aeiou这几个字母以外的任意字符

    • 正则表达式当中的小括号()优先级较高。

      • [1-9] 表示1到9的任意1个数字（次数是1次。）
      • [A-Za-z0-9] 表示A-Z、a-z、0-9中的任意1个字符
      • [A-Za-z0-9-] 表示A-Z、a-z、0-9、- ，以上所有字符中的任意1个字符

    • 简单的正则表达式要会写

      • QQ号的正则表达式：

        ^ [1-9][0-9]{4,}$

        • 1

      • email正则：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$

    6.3.4 创建表达式对象以及调用方式

    创建方式：

    • 第一种创建方式：
      var regExp = /正则表达式/flags;
    • 第二种创建方式:使用内置支持类RegExp
      var regExp = new RegExp(“正则表达式”,“flags”);

    关于flag后面的参数：

    • g：全局匹配
    • i：忽略大小写
    • m：多行搜索（ES规范制定之后才支持m）
      • 当前面是正则表达式的时候，m不能用
      • 只有前面是普通字符串的时候，m才可以使用

    调用方式：

    正则表达式对象的test()方法

    true / false = 正则表达式对象.test(用户填写的字符串);

    • 1
    • true : 字符串格式匹配成功
    • false: 字符串格式匹配失败

    6.3.5 验证邮箱格式

    1.代码示例验证邮箱是否正确
    光标如果回去需要将验证正确与否剔除

    <body>

<script type="text/javascript">
window.onload = function(){
	   // 给按钮绑定click
	   document.getElementById("btn").onclick = function(){
		   var email = document.getElementById("email").value;
		   var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
		   var ok = emailRegExp.test(email);
		   if(ok){
				//合法
				document.getElementById("emailError").innerText = "邮箱地址合法";
		   }else{
			   // 不合法
			   document.getElementById("emailError").innerText = "邮箱地址不合法";
		   }
	   }
	   // 给文本框绑定focus
	   document.getElementById("email").onfocus = function(){
		   document.getElementById("emailError").innerText = "";
	   }
   }


script>

<input type="text" id="email" />
	<span id="emailError" style="color: red; font-size: 12px;">span>
	<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
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    输入邮箱验证成功

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bFSL47Y2-1659115655028)(../../../Pictures/JS/image-20220729201203713.png)]

    如果光标回去文本框 需要清除右边那个提示，则需要绑定其他

    // 给文本框绑定focus
document.getElementById("email").onfocus = function(){
	document.getElementById("emailError").innerText = "";
}

    • 1
    • 2
    • 3
    • 4

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DEBCXeJv-1659115655029)(../../../Pictures/JS/image-20220729201213941.png)]

    6.3.6扩展字符串trim函数

    去除字符串的前后空白trim

    <body>
	<script type="text/javascript">	
		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" />
	<input type="button" value="获取用户名" id="btn" />
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 低版本的IE浏览器不支持字符串的trim()函数,
    • 解决办法：对String类扩展一个全新的trim()函数，重写覆盖新的tim函数，在trim函数中写正则表达式
    String.prototype.trim = function(){
	// 去除当前字符串的前后空白
	// 在当前的方法中的this代表的就是当前字符串.
	//return this.replace(/^\s+/, "").replace(/\s+$/, "");
	return this.replace(/^\s+|\s+$/g, "");
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    return this.replace(/^\s+/, "").replace(/\s+$/, "");

    • 1

    这行代码第一个replace是前空格字符串，后一个replace是后空格字符串，
    / 字符串/ ，^是开头，$是结尾，\s是空白字符串，+1个到多个字符串。

    prototype可以扩展属性

    6.4 表单验证

    需求：
    （1）用户名不能为空
    （2）用户名必须在6-14位之间
    （3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
    （4）密码和确认密码一致，邮箱地址合法。
    （5）统一失去焦点验证
    （6）错误提示信息统一在span标签中提示（不能用div，div会换行）并且要求字体12号，红色。
    （7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
    （8）最终表单中所有项均合法方可提交

    书写的页面表单的html：

    

<form id="userForm" 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="pwdError">span><br>
	邮箱<input type="text" name="email" id="email" />
    	<span id="emailError">span><br>
	
	<input type="button" value="注册" id="submitBtn"/>
	<input type="reset" value="重置" />
form>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    写后面表单的错误显示，加一个css样式

    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    书写一个js表单事件判断

    其中的代码注意事项

    • 判断username是否为空，可以在if语句中用username，或者是长度，或者直接与空字符串进行比较
    • 获得焦点事件onfocus，如果显示错误，光标回去的时候要自动清除错误字体

    判断是否密码一致

    • 用确认密码的句柄，去判断获取对象之后在内容中也获取密码的框，两者进行比较value。相同与否影响后面的span标签提示
    // 获取密码错误提示的span标签
var pwdErrorSpan = document.getElementById("pwdError");
// 获取确认密码框对象
var userpwd2Elt = document.getElementById("userpwd2");
// 绑定blur事件
userpwd2Elt.onblur = function(){
   // 获取密码和确认密码
   var userpwdElt = document.getElementById("userpwd");
   var userpwd = userpwdElt.value;
   var userpwd2 = userpwd2Elt.value;
   if(userpwd != userpwd2){
	   // 密码不一致
	   pwdErrorSpan.innerText = "密码不一致";
   }else{
	   // 密码一致
   }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    绑定focus也相同，不合法之后回去要清除显示的错误

    // 绑定focus事件
userpwd2Elt.onfocus = function(){
   if(pwdErrorSpan.innerText != ""){
	   userpwd2Elt.value = "";
   }
   pwdErrorSpan.innerText = "";
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    邮箱同理

    逻辑判断：
    在提交按钮的情况中，如果都不合法，点击提交还是会提交过去没有审核。所以此处用button的类型按钮，在该按钮中书写js代码

    获取表单，通过submit函数提交

    
<input type="button" value="注册" id="submitBtn"/>

    • 1
    • 2

    通过普通按钮提交表单，并且完善表单的功能

    
<form id="userForm" method="get">

    • 1
    • 2

    在提交表单的js代码中可以这样书写，后面都没有错误的时候提交

    // 当所有表单项都是合法的时候,提交表单
if(usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == ""){
       // 获取表单对象
       var userFormElt = document.getElementById("userForm");
       // 可以在这里设置action,也可以不在这里.
       userFormElt.action = "http://localhost:8080/jd/save";
       // 提交表单
       userFormElt.submit();
	}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    但是如果都不填写后面也没有错误，会自动成功提交空的，所以要在前面添加代码
    此处前面不用加on，是代码自动执行，先获得焦点focus，在blur失去焦点的判断

    // 触发username的blur userpwd2的blur email的blur
// 不需要人工操作,使用纯JS代码触发事件.
usernameElt.focus();
usernameElt.blur();

userpwd2Elt.focus();
userpwd2Elt.blur();

emailElt.focus();
emailElt.blur();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    完整代码演示：

    <script type="text/javascript">
window.onload = function(){
	   // 获取username的span标签
	   var usernameErrorSpan = document.getElementById("usernameError");
	   // 给用户名文本框绑定blur事件
	   var usernameElt = document.getElementById("username");
	   usernameElt.onblur = function(){
		   // 获取用户名
		   var username = usernameElt.value;
		   // 去除前后空白
		   username = username.trim();
		   // 判断用户名是否为空
		   /*
		   if(username){
			   // 代表username不是空字符串
			   alert("username = " + username);
		   }else{
			   // 代表username是空字符串
			   alert("username是空字符串");
		   }
		   */
		   // if(username.length == 0){}
		   if(username === ""){
			   // 用户名为空
			   usernameErrorSpan.innerText = "用户名不能为空";
		   }else{
			   // 用户名不为空
			   // 继续判断长度[6-14]
			   if(username.length < 6 || username.length > 14){
				   // 用户名长度非法
				   usernameErrorSpan.innerText = "用户名长度必须在[6-14]之间";
			   }else{
				   // 用户名长度合法
				   // 继续判断是否含有特殊符号
				   var regExp = /^[A-Za-z0-9]+$/;
				   var ok = regExp.test(username);
				   if(ok){
					   // 用户名最终合法
				   }else{
					   // 用户名中含有特殊符号
					   usernameErrorSpan.innerText = "用户名只能由数字和字母组成";
				   }
			   }
		   }
	   }   
   // 给username这个文本框绑定获得焦点事件
   usernameElt.onfocus = function(){
	   // 清空非法的value
	   if(usernameErrorSpan.innerText != ""){
		   usernameElt.value = "";   
	   }
	   // 清空span
	   usernameErrorSpan.innerText = "";
   }
   
   // 获取密码错误提示的span标签
   var pwdErrorSpan = document.getElementById("pwdError");
   // 获取确认密码框对象
   var userpwd2Elt = document.getElementById("userpwd2");
   // 绑定blur事件
   userpwd2Elt.onblur = function(){
	   // 获取密码和确认密码
	   var userpwdElt = document.getElementById("userpwd");
	   var userpwd = userpwdElt.value;
	   var userpwd2 = userpwd2Elt.value;
	   if(userpwd != userpwd2){
		   // 密码不一致
		   pwdErrorSpan.innerText = "密码不一致";
	   }else{
		   // 密码一致
	   }
   }
   
   // 绑定focus事件
   userpwd2Elt.onfocus = function(){
	   if(pwdErrorSpan.innerText != ""){
		   userpwd2Elt.value = "";
	   }
	   pwdErrorSpan.innerText = "";
   }
   
   // 获取email的span
   var emailSpan = document.getElementById("emailError");
   // 给email绑定blur事件
   var emailElt = document.getElementById("email");
   emailElt.onblur = function(){
	   // 获取email
	   var email = emailElt.value;
	   // 编写email的正则
	   var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
	   var ok = emailRegExp.test(email);
	   if(ok){
		   // 合法
	   }else{
		   // 不合法
		   emailSpan.innerText = "邮箱地址不合法";
	   }
   }
   
   // 给emailElt绑定focus
   emailElt.onfocus = function(){
	   if(emailSpan.innerText != ""){
		   emailElt.value = "";
	   }
	   emailSpan.innerText = "";
   }
   
   // 给提交按钮绑定鼠标单击事件
   var submitBtnElt = document.getElementById("submitBtn");
   submitBtn.onclick = function(){
	   // 触发username的blur userpwd2的blur email的blur
	   // 不需要人工操作,使用纯JS代码触发事件.
	   usernameElt.focus();
	   usernameElt.blur();
	   
	   userpwd2Elt.focus();
	   userpwd2Elt.blur();
	   
	   emailElt.focus();
	   emailElt.blur();
	   
	   // 当所有表单项都是合法的时候,提交表单
	   if(usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == ""){
		   // 获取表单对象
		   var userFormElt = document.getElementById("userForm");
		   // 可以在这里设置action,也可以不在这里.
		   userFormElt.action = "http://localhost:8080/jd/save";
		   // 提交表单
		   userFormElt.submit();
	   }
   }
}
script>

    • 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
    • 130
    • 131
    • 132
    • 133

    6.5 复选框的全选和取消全选

    书写一个html的页面
    将所有的框都书写成相同的name属性值

    <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" />烫头<Br>

    • 1
    • 2
    • 3
    • 4

    在添加一个js的逻辑代码

    form表单中的checked属性是勾选则为true，如果没勾选则为false
    通过document.getElementsByName(“aihao”);获取按钮狂中相同的name属性存储在一个数组中
    通过判定，如果勾选复选框，将其一一弄为true，同理为false

    window.onload = function(){
	var firstChk = document.getElementById("firstChk");
	firstChk.onclick = function(){
		// 获取第一个复选框的选中状态(复选框对象checkbox对象)
		//alert(firstChk.checked);
		// 根据name获取所有元素
		var aihaos = document.getElementsByName("aihao");
		if(firstChk.checked){
			// 全选
			for(var i = 0; i < aihaos.length; i++){
				aihaos[i].checked = true;
			}
		}else{
			// 取消全选
			for(var i = 0; i < aihaos.length; i++){
				aihaos[i].checked = false;
			}
		}
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    优化代码的格式，将其与复选框相同即可

    window.onload = function(){
    var firstChk = document.getElementById("firstChk");
    firstChk.onclick = function(){
        var aihaos = document.getElementsByName("aihao");
        for(var i = 0; i < aihaos.length; i++){
            aihaos[i].checked = firstChk.checked;
        }
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    添加额外的功能：如果复选框的子框都选上了，则复选框都选上；

    代码逻辑：页面加载的时候，将其所有子框进行遍历绑定一个鼠标单机按钮，如果单机一个子框，在其功能中再将其遍历，判断是否为总数都单击了

     window.onload = function(){	
    var firstChk = document.getElementById("firstChk");
        firstChk.onclick = function(){
            var aihaos = document.getElementsByName("aihao");
            for(var i = 0; i < aihaos.length; i++){
                aihaos[i].checked = firstChk.checked;
            }
        }
     
     
    var all = aihaos.length;
    for(var i = 0; i < aihaos.length; i++){
        aihaos[i].onclick = function(){//绑定回调函数，并不是执行
            var checkedCount = 0;
            // 总数量和选中的数量相等的时候,第一个复选框选中.
            for(var i = 0; i < aihaos.length; i++){
                if(aihaos[i].checked){
                    checkedCount++;
                }
            }
            firstChk.checked = (all == checkedCount);
            /*
            if(all == checkedCount){
                firstChk.checked = true;
            }else{
                firstChk.checked = false;
            }
            */
        }
    }
}

    • 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

    完整代码演示：

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复选框的全选和取消全选title>
	head>
	<body>
		<script type="text/javascript">
			/*
			window.onload = function(){
                var firstChk = document.getElementById("firstChk");
                firstChk.onclick = function(){
                    // 获取第一个复选框的选中状态(复选框对象checkbox对象)
                    //alert(firstChk.checked);
                    // 根据name获取所有元素
                    var aihaos = document.getElementsByName("aihao");
                    if(firstChk.checked){
                        // 全选
                        for(var i = 0; i < aihaos.length; i++){
                            aihaos[i].checked = true;
                        }
                    }else{
                        // 取消全选
                        for(var i = 0; i < aihaos.length; i++){
                            aihaos[i].checked = false;
                        }
                    }
                }
			}
			*/
		window.onload = function(){
			var aihaos = document.getElementsByName("aihao");
			var firstChk = document.getElementById("firstChk");
			firstChk.onclick = function(){
				for(var i = 0; i < aihaos.length; i++){
					aihaos[i].checked = firstChk.checked;
				}
			}
			// 对以上数组进行遍历
			var all = aihaos.length;
			for(var i = 0; i < aihaos.length; i++){
				aihaos[i].onclick = function(){
					var checkedCount = 0;
					// 总数量和选中的数量相等的时候,第一个复选框选中.
					for(var i = 0; i < aihaos.length; i++){
						if(aihaos[i].checked){
							checkedCount++;
						}
					}
					firstChk.checked = (all == checkedCount);
					/*
					if(all == checkedCount){
						firstChk.checked = true;
					}else{
						firstChk.checked = false;
					}
					*/
				}
			}
		}
	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" />烫头<Br>	
body>
html>

    • 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

    6.6 获取下拉列表选项中的value

    通过onchange的事件获取当前下拉列表的值，this代表当前

    <select onchange="alert(this.value)">
	<option value="">--请选择省份--option>
	<option value="001">河北省option>
	<option value="002">河南省option>
	<option value="003">山东省option>
	<option value="004">山西省option>
select>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    可以通过书写js代码。换一种形式

    <script type="text/javascript">
	window.onload = function(){
		var provinceListElt = document.getElementById("provinceList");
		provinceListElt.onchange = function(){
			// 获取选中项的value
			alert(provinceListElt.value);
		}
	}
script>
<select id="provinceList">
	<option value="">--请选择省份--option>
	<option value="001">河北省option>
	<option value="002">河南省option>
	<option value="003">山东省option>
	<option value="004">山西省option>
select>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    6.7 内置支持类

    6.7.1 获取日期/日期Date

    var nowTime = new Date();
document.write(nowTime);

    • 1
    • 2

    不符合当前的日期格式视角
    转换成具有本地语言环境的日期格式

    nowTime = nowTime.toLocaleString();

    • 1

    如果需要自已整合一个日期格式可以这样写

    • 获取年份信息getFullYear();
    • 获取月份日期getMonth();
    • 获取当日信息getDate();
    • 获取当前系统的毫秒数(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数)getTime();
    // 当以上格式不是自己想要的,可以通过日期获取年月日等信息,自定制日期格式.
var t = new Date();
var year = t.getFullYear(); // 返回年信息,以全格式返回.
var month = t.getMonth(); // 月份是:0-11
// var dayOfWeek = t.getDay(); // 获取的一周的第几天(0-6)
var day = t.getDate(); // 获取日信息.
document.write(year + "年" + (month+1) + "月" + day + "日");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    通过结合按钮框，一点击就显示有系统时间

    系统开始时间setInterval(“函数名”, 间隔毫秒时间数)
    终止系统时间，通过传输开始执行的数据clearInterval(传输开始执行的数据)

    <script type="text/javascript">
	function displayTime(){
		var time = new Date(); //新建一个date对象
		var strTime = time.toLocaleString(); // 转换为字符串
		document.getElementById("timeDiv").innerHTML = strTime; //显示html格式
	}
    // 每隔1秒调用displayTime()函数
    function start(){
        // 从这行代码执行结束开始,则会不间断的,每隔1000毫秒调用一次displayTime()函数.
        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="timeDiv">div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    6.7.2 数组内置类

    • 数组定义用中括号，而java的数组定义用{}
    • 数组类型随意
    • 数组可越界扩容
    // 创建长度为0的数组
var arr = [];
alert(arr.length);

// 数据类型随意
var arr2 = [1,2,3,false,"abc",3.14];
alert(arr2.length);

// 下标会越界吗
arr2[7] = "test"; // 自动扩容.

document.write("
    "    );

// 遍历
for(var i = 0; i < arr2.length; i++){
	document.write(arr2[i] + "
    "    );
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    另一种创建数组对象的方式

    var a = new Array();
alert(a.length); // 0

var a2 = new Array(3); // 3表示长度.
alert(a2.length);

var a3 = new Array(3,2);
alert(a3.length); // 2

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    数组的相关方法

    • 连接字符串join(“连接符”);
    • 数组末尾添加元素push(压栈);
    • 数组末尾弹出元素pop();
    • 反转数组reverse();
    var a = [1,2,3,9];
var str = a.join("-");
alert(str); // "1-2-3-9"

// 在数组的末尾添加一个元素(数组长度+1)
a.push(10);
alert(a.join("-"));

// 将数组末尾的元素弹出(数组长度-1)
var endElt = a.pop();
alert(endElt);
alert(a.join("-"));

// 注意:JS中的数组可以自动模拟栈数据结构:后进先出,先进后出原则.
// push压栈
// pop弹栈

// 反转数组.
a.reverse();
alert(a.join("="));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

  • 相关阅读:
    Redis主从复制流程
    我的创作纪念日
    开发一款抖音小游戏大致的研发成本是多少
    Java HashMap 的扩容因子为什么是 0.75
    Vue框架学习大纲
    Java native 关键字
    Vue2 - 网易云音乐项目笔记（基于Vant UI组件库）
    七夕情人节表白网页代码大全(浪漫的html表白源代码)
    信息化发展56
    python用内省优化显示
  • 原文地址：https://blog.csdn.net/m0_61163395/article/details/126066840