自学JavaScript的回顾（2/2）

最新推荐文章于 2024-04-21 18:50:55 发布

zourenqiang

最新推荐文章于 2024-04-21 18:50:55 发布

阅读量108

点赞数

分类专栏：小白自学文章标签： js 正则表达式 javascript

本文链接：https://blog.csdn.net/qq_39993973/article/details/107403474

版权

小白同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

自学

29 篇文章 0 订阅

订阅专栏

自学JavaScript的回顾（2/2）

正则表达式
DOM
复选框的全选
时间获取
数组
BOM
JSON

正则表达式

什么是正则表达式？
正则表达式：Regular Expression
是用来匹配字符串的格式的
常见的正则表达式符号有哪些：
1、.：匹配除换行符之外的字符
2、\：转义字符，将一些正则表达式的符号转义为正常的符号
3、[]：代表范围之间的字符集
4、\d：代表数字字符 \D：不是数字的字符
5、\s：代表空白符 \S：不是空白符
6、\w：代表字母数字下划线汉字等字符 \W：不代表字母数字下划线等字符
7、*：匹配前一个字符零次或者无限次
8、+：匹配前一个字符一次或者无限次
9、？：匹配前一个字符零次或者一次
10、{m}：匹配前一个字符m次
11、{m,n}：匹配前一个字符m到n次
12、{m,}：匹配前一个字符m次或者无限次
13、^：匹配字符串的开始
14、$：匹配字符串的结束
例如邮箱的正则表达式：

^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

有两种创建正则表达式的方法：
（1）var i=/正则表达式/flags;
（2）var i=new RegExp(“正则表达式”,“flags”);

flags参数是可选参数：
常见的flags参数有哪些：
（1）g：全文查找
（2）i：忽略大小写
（3）m：多行查找

如何验证正则表达式的正确与否？
test()函数返回布尔类型来验证正则表达式的正确。

扩展：对字符串去空白的方法：trim()

<html>
	<head>
		<title>exp</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
				document.getElementById("button").onclick=function(){
					var i=document.getElementById("text").value.trim();
					var exp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
					var success=exp.test(i);
					alert(success);
				}
			}
		</script>
		<input type="text" id="text"></input>
		<input type="button" id="button" value="判断邮箱是否格式正确"></input>
	</body>
</html>

DOM

JavaScript中分为三大组成部分：ECMAScript、DOM、BOM
其中ECMAScript包含了语言的基本语法(var、for、if、array等)和数据类型。
DOM是操作浏览器页面中的节点。
BOM是操作浏览器上的功能，例如前后访问、url地址等

DOM重要的两个方法：innerText、innerHTML
innerText和innerHTML是对获取的元素进行添加元素，区别是innerText中的参数是纯文本，innerHTML中的参数的纯文本是可以参与html语句的编译的。

<html>
	<head>
		<title>inner</title>
		<style type="text/css">
			#div{
			background-color:red;
			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 but1=document.getElementById("button1");
				but1.onclick=function(){
					var div=document.getElementById("div");
					var text=document.getElementById("text").value;
					div.innerText=text;
				}
				var but2=document.getElementById("button2");
				but2.onclick=function(){
					var div=document.getElementById("div");
					div.innerHTML="<input type=\"button\" value=\"按钮\"></input>";
				}
			}
		</script>
		<input type="button" id="button1" value="添加文本"></input>
		<input type="text" id="text"></input>
		<br>
		<input type="button" id="button2" value="添加按钮"></input>
		<div id="div"></div>
	</body>
</html>

复选框的全选

<html>
	<head>
		<title>复选框</title>
	</head>
	<body>
		<script>
		window.onload=function(){
			var checkbox=document.getElementById("all");
			checkbox.onclick=function(){
				var checkboxson=document.getElementsByName("checkbox1");
				for(var i=0;i<checkboxson.length;i++){
					checkboxson[i].checked=checkbox.checked;
				}
			}
			var checkboxson=document.getElementsByName("checkbox1");
			for(var i=0;i<checkboxson.length;i++){
				checkboxson[i].onclick=function(){
					var count=0;
					for(var i=0;i<checkboxson.length;i++){
						if(checkboxson[i].checked){
						count++;
					}
					checkbox.checked=(checkboxson.length==count);
					}
				}
			}
		}
		</script>
		<input type="checkbox" id="all"></input>
		<br>
		<input type="checkbox" name="checkbox1">1</input>
		<br>
		<input type="checkbox" name="checkbox1">2</input>
		<br>
		<input type="checkbox" name="checkbox1">3</input>
	</body>
</html>

时间获取

<html>
	<head>
		<title>time</title>
	</head>
	<body>
		<script type="text/javascript">
			var newtime=new Date();
			var year=newtime.getFullYear();
			var month=newtime.getMonth();
			var day=newtime.getDay();
			var time=newtime.toLocaleString();
			document.write(year+'年'+month+'月'+day+'日');
			document.write("<br>");
			document.write(time);
			var mm=newtime.getTime();
			document.write("<br>");
			document.write(mm+'毫秒');
			document.write("<br>");
			function displayTime(){
				var newtime=new Date();
				var time=newtime.toLocaleString();
				document.getElementById("div").innerHTML=time;
			}
			function start(){
				window.setInterval("displayTime()",1000);
			}
			start();
		</script>
		<div id="div"></div>
	<body>
</html>

数组

java中数组是{}，javascript中数组是[]，{}是json。

<html>
	<head>
		<title>array</title>
	</head>
	<body>
		<script type="text/javascript">
		var a=[12,23];
		var str=a.join("_");//以字符为分隔符打印数组中的全部元素
		document.write(str);//12_23
		a.push(2334);//压栈
		document.write("<br>");
		var str2=a.join("_");
		document.write(str2);//12_23_2334
		a.pop();//弹栈
		document.write("<br>");
		var str3=a.join("_");
		document.write(str3);//12_23
		a.reverse();//反转
		var str4=a.join("_");
		document.write(str4);//23_12
		</script>
	<body>
</html>

BOM

BOM有几个常用的操作：
1、页面的前进与返回：

<html>
	<head>
		<title>1</title>
	</head>
	<body>
		<script type="text/javascript">
		</script>
		<input type="button" onclick=window.open("返回.html","_self"); value="打开返回界面"></input>
		<input type="button" onclick=window.close(); value="关闭当前窗口"></input>
		<input type="button" onclick=window.history.go(1); value="前进"></input>
	<body>
</html>

<html>
	<head>
		<title>2</title>
	</head>
	<body>
		<script type="text/javascript">
		</script>
		<input type="button" onclick=window.history.back(); value="返回上一界面"></input>
	<body>
</html>

2、弹出确认框：

<html>
	<head>
		<title>confirm</title>
	</head>
	<body>
		<script type="text/javascript">
		function queren(){
			var ok=window.confirm("确认么");
			if(ok){
				alert("你已确认");
			}else{
				alert("取消");
			}
		}
		</script>
		<input type="button" onclick=queren(); value="弹出确认框"></input>
	<body>
</html>

JSON

什么是JSON？
一种系统之间交换数据，类似于数据库，它易解析，编写方便。
其中有个重要的方法：eval(）函数，它能将其他语言传过来的字符串当做JS代码执行并解析，常用来接受数据。
JSON语法：

var json={
	key1:value1;
	key2:value2;
	.....
}

如何将传过来JSON数据打印在html上？

<html>
	<head>
		<title>json</title>
	</head>
	<body>
	<!--eval函数是将字符串当做一段JS代码执行，将java发过来的字符串用JS解析-->
		<script type="text/javascript">
		var student={
			"base":[{"no":1,"name":"zhangjin"}
					,{"no":2,"name":"zhangsi"}
					,{"no":3,"name":"zhangwu"}
			]
		};
		window.onload=function(){
			var button=document.getElementById("button");
			button.onclick=function(){
			var base=student.base;
			var str="<table border=\"1px\" width=\"50%\"><tr><th>学号</th><th>姓名</th></tr><tbody id=\"empty\"></tobody></table>";
			var str2="";
			document.getElementById("div").innerHTML=str;
			for(var i=0;i<base.length;i++){
				str2+=("<tr>"+"<td>"+base[i].no+"</td>"+"<td>"+base[i].name+"</td>"+"</tr>");
				}
			document.getElementById("empty").innerHTML=str2;
			}
		}
		</script>
		<input type="button" value="打印数据" id="button"></input>
		<div id="div">
		</div>
	<body>
</html>