javascript第九天-CSDN博客

本文链接：https://blog.csdn.net/m0_59708269/article/details/124499795

一.复习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			
			var str = prompt("请输出任意的内容:");
			
			//var arr = str.split("");
			
			//arr.reverse();
			
			//str = arr.join("");
			
			str = str.split("").reverse().join("");
			
			alert(str);
			
		</script>
	</head>
	<body>
		
	</body>
</html>

二.正则表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 创建一个正则表达式检查一个字符串中是否含有aaa
			 */
			
			/*
			 * 量词
			 * 	- 通过量词可以设置一个内容出现的次数
			 * 	- 量词只对它前边的一个内容起作用
			 * 	- {n} 正好出现n次
			 * 	- {m,n} 出现m-n次
			 * 	- {m,} m次以上
			 * 	- + 至少一个，相当于{1,}
			 * 	- * 0个或多个，相当于{0,}
			 * 	- ? 0个或1个，相当于{0,1}
			 */
			var reg = /a{3}/;
			//ababab
			reg = /(ab){3}/;
			
			reg = /b{3}/;
			
			reg = /ab{1,3}c/;
			
			reg = /ab{3,}c/;
			
			reg = /ab+c/;
			
			reg = /ab*c/;
			
			reg = /ab?c/;
			
			//console.log(reg.test("abbc"));
			
			/*
			 * 检查一个字符串中是否以a开头
			 * 	^ 表示开头
			 * 	$ 表示结尾
			 */
			reg = /^a/; //匹配开头的a
			
			reg = /a$/; //匹配结尾的a
			
			//console.log(reg.test("abcabca"));
			
			/*
			 * 如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
			 */
			reg = /^a$/;
			
			//console.log(reg.test("bbca"));
			
			/*
			 * 创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
			 * 
			 * 手机号的规则：
			 * 	1 3 567890123 （11位）
			 * 	
			 * 	1. 以1开头
			 *  2. 第二位3-9任意数字
			 * 	3. 三位以后任意数字9个
			 * 
			 *  ^1   [3-9]  [0-9]{9}$  
			 * 
			 */
			
			var phoneStr = "13067890123";
			
			var phoneReg = /^1[3-9][0-9]{9}$/;
			
			console.log(phoneReg.test(phoneStr));
		</script>
	</head>
	<body>
	</body>
</html>

三.正则表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 检查一个字符串中是否含有 .
			 * . 表示任意字符
			 * 在正则表达式中使用\作为转义字符
			 * \. 来表示.
			 * \\  表示\
			 * 
			 * 注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，
			 * 	如果要使用\则需要使用\\来代替
			 */
			var reg = /\./;
			
			reg = /\\/;
			
			reg = new RegExp("\\.");
			reg = new RegExp("\\\\");
			
			/*
			 * \w
			 * 	- 任意字母、数字、_  [A-z0-9_]
			 * \W
			 * 	- 除了字母、数字、_  [^A-z0-9_]
			 * \d
			 * 	- 任意的数字 [0-9]
			 * \D
			 * 	- 除了数字 [^0-9]
			 * \s
			 * 	- 空格
			 * \S
			 * 	- 除了空格
			 * \b
			 * 	- 单词边界
			 * \B
			 * 	- 除了单词边界
			 */
			
			reg = /\w/;
			reg = /\W/;
			
			reg = /\d/;
			reg = /\D/;
			
			reg = /\s/;
			reg = /\S/;
			
			/*
			 * 创建一个正则表达式检查一个字符串中是否含有单词child
			 */
			
			reg = /\bchild\b/;
			
			//console.log(reg.test("hello child "));
			
			//接收一个用户的输入
			//var str = prompt("请输入你的用户名:");
			
			var str = "              he      llo                ";
			
			//去除掉字符串中的前后的空格
			//去除空格就是使用""来替换空格
			console.log(str);
			
			//str = str.replace(/\s/g , "");
			
			//去除开头的空格
			//str = str.replace(/^\s*/, "");
			//去除结尾的空格
			//str = str.replace(/\s*$/, "");
			// /^\s*|\s*$/g 匹配开头和结尾的空格
			str = str.replace(/^\s*|\s*$/g,"");
			
			
			console.log(str);
			
		</script>
	</head>
	<body>
	</body>
</html>

四.邮件的正则

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 电子邮件
			 * 	hello  .nihao          @     abc  .com.cn
			 * 
			 * 任意字母数字下划线    .任意字母数字下划线  @   任意字母数字     .任意字母（2-5位）   .任意字母（2-5位）
			 * 
			 * \w{3,}  (\.\w+)*  @  [A-z0-9]+  (\.[A-z]{2,5}){1,2}
			 */
			
			var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
			
			var email = "abc.hello@163.com";
			
			console.log(emailReg.test(email));
			
		</script>
	</head>
	<body>
	</body>
</html>

五.DOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			
			/*
			 * 浏览器已经为我们提供 文档节点 对象这个对象是window属性
			 * 	可以在页面中直接使用，文档节点代表的是整个网页
			 */
			//console.log(document);
			
			//获取到button对象
			var btn = document.getElementById("btn");
			
			//修改按钮的文字
			btn.innerHTML = "I'm Button";
		</script>
	</body>
</html>

六.事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			我们可以在事件对应的属性中设置一些js代码，
				这样当事件被触发时，这些代码将会执行
				
			这种写法我们称为结构和行为耦合，不方便维护，不推荐使用	
		-->
		<!--<button id="btn" onmousemove="alert('讨厌，你点我干嘛！');">我是一个按钮</button>-->
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			
			/*
			 * 事件，就是用户和浏览器之间的交互行为，
			 * 	比如：点击按钮，鼠标移动、关闭窗口。。。
			 */
			

			//获取按钮对象
			var btn = document.getElementById("btn");
			
			/*
			 * 可以为按钮的对应事件绑定处理函数的形式来响应事件
			 * 	这样当事件被触发时，其对应的函数将会被调用
			 */
			
			//绑定一个单击事件
			//像这种为单击事件绑定的函数，我们称为单击响应函数
			btn.onclick = function(){
				alert("你还点~~~");
			};
			
		</script>
	</body>
</html>

七.文档的加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			/*
			 * 浏览器在加载一个页面时，是按照自上向下的顺序加载的，
			 * 	读取到一行就运行一行,如果将script标签写到页面的上边，
			 * 	在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载
			 * 	会导致无法获取到DOM对象
			 */

			/*
			 * onload事件会在整个页面加载完成之后才触发
			 * 为window绑定一个onload事件
			 * 		该事件对应的响应函数将会在页面加载完成之后执行，
			 * 		这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
			 * 	
			 */
			window.onload = function(){
				//获取id为btn的按钮
				var btn = document.getElementById("btn");
				//为按钮绑定一个单击响应函数
				btn.onclick = function(){
					alert("hello");
				};
			};
			
			
		</script>
	</head>
	<body>
		
		<button id="btn">点我一下</button>
		
		<!--<script type="text/javascript">
			
			/*
			 * 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码
			 */
			//获取id为btn的按钮
			var btn = document.getElementById("btn");
			//为按钮绑定一个单击响应函数
			btn.onclick = function(){
				alert("hello");
			};
			
		</script>-->
		
	</body>
</html>

八.DOM查询

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			window.onload = function(){
				
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//查找#bj节点
					var bj = document.getElementById("bj");
					//打印bj
					//innerHTML 通过这个属性可以获取到元素内部的html代码
					alert(bj.innerHTML);
				};
				
				
				//为id为btn02的按钮绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个，也会封装到数组中返回
					var lis = document.getElementsByTagName("li");
					
					//打印lis
					//alert(lis.length);
					
					//变量lis
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
				};
				
				
				//为id为btn03的按钮绑定一个单击响应函数
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					//查找name=gender的所有节点
					var inputs = document.getElementsByName("gender");
					
					//alert(inputs.length);
					
					for(var i=0 ; i<inputs.length ; i++){
						/*
						 * innerHTML用于获取元素内部的HTML代码的
						 * 	对于自结束标签，这个属性没有意义
						 */
						//alert(inputs[i].innerHTML);
						/*
						 * 如果需要读取元素节点属性，
						 * 	直接使用 元素.属性名
						 * 		例子：元素.id 元素.name 元素.value
						 * 		注意：class属性不能采用这种方式，
						 * 			读取class属性时需要使用 元素.className
						 */
						alert(inputs[i].className);
					}
				};

				//查找#city下所有li节点
				//返回#city的所有子节点
				//返回#phone的第一个子节点
				//返回#bj的父节点
				//返回#android的前一个兄弟节点
				//读取#username的value属性值
				//设置#username的value属性值
				//返回#bj的文本值
			};
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male"/>
				Male
				<input class="hello" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>

九.练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#outer{
				width: 500px;
				margin: 50px auto;
				padding: 10px;
				background-color: greenyellow;
				/*设置文本居中*/
				text-align: center;
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 点击按钮切换图片
				 */
				
				//获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				/*
				 * 要切换图片就是要修改img标签的src属性
				 */
				
				//获取img标签
				var img = document.getElementsByTagName("img")[0];
				
				//创建一个数组，用来保存图片的路径
				var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];
				
				//创建一个变量，来保存当前正在显示的图片的索引
				var index = 0;
				
				//获取id为info的p元素
				var info = document.getElementById("info");
				//设置提示文字
				info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				
				
				//分别为两个按钮绑定单击响应函数
				prev.onclick = function(){
					
					/*
					 * 切换到上一张，索引自减
					 */
					index--;
					
					//判断index是否小于0
					if(index < 0){
						index = imgArr.length - 1;
					}
					
					img.src = imgArr[index];
					
					//当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				};
				
				next.onclick = function(){
					
					/*
					 * 切换到下一张是index自增
					 */
					index++;
					
					if(index > imgArr.length - 1){
						index = 0;
					}
					
					//切换图片就是修改img的src属性
					//要修改一个元素的属性 元素.属性 = 属性值
					img.src = imgArr[index];
					
					//当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
					
				};
				
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="outer">
			
			<p id="info"></p>
			
			<img src="img/1.jpg" alt="冰棍" />
			
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
			
		</div>
	</body>
</html>