处女提交

yunbocheng · Jul 4, 2021 · 19040f2 · 19040f2
1 parent ad95296
commit 19040f2
Show file tree

Hide file tree

Showing 137 changed files with 6,685 additions and 0 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/.name b/.idea/.name
diff --git a/.idea/copyright/cyb.xml b/.idea/copyright/cyb.xml
diff --git a/.idea/copyright/profiles_settings.xml b/.idea/copyright/profiles_settings.xml
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/HTML.iml b/HTML.iml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
diff --git a/Hbuilder/JavaScript/根据id获取元素.html b/Hbuilder/JavaScript/根据id获取元素.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>根据id获取页面中的某个节点</title>
+	</head>
+	<body>
+
+		<!-- 脚本快 -->
+		<script type="text/javascript">
+			function getDivElt(){
+				/* 获取div节点对象 */
+				/* 
+					document对象是JS内置的对象，全部小写，可以直接拿来使用。
+					document对象代表的是浏览器窗口中的网页(文档)
+					DOM树：
+						对于document来说是一个HTML文档。
+						对于这个文档来说我们称为DOM树。
+						DOM树上有很多节点，每一个节点都有ID属性。
+						获取DOM树上的一个节点，可以根据id来获取。
+						
+						
+					window对象是JS内置的对象，全部小写，可以直接拿来使用。
+					window对象代表当前浏览器窗口。
+				 */
+				var mydivElt = document.getElementById("mydiv");
+				console.log(mydivElt);
+
+				var usernameElt = document.getElementById("username");
+				 console.log(usernameElt);
+			}
+		</script>
+
+		<!-- div节点对象 -->
+		<div id="mydiv">我是一个div对象</div>
+
+		<!-- input输入域 -->
+
+		<input type="text" id="username" />
+
+		<input type="button" value="获取div节点元素" onclick="getDivElt()"/>
+	</body>
+</html>
diff --git a/Hbuilder/JavaScript/获取或设置div中的内容.html b/Hbuilder/JavaScript/获取或设置div中的内容.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>获取或设置div中的内容</title> 
+	</head>
+	<body>
+
+		<!-- 
+		
+			innerHTML：这是一个属性，不是一个函数。
+			
+			innerHTML有两个作用：
+				1. 获取元素内部的内容。
+				2. 设置元素内部的内容。
+		 -->
+		<script type="text/javascript">
+			function getContent(){
+				// 在这里获取div的内容
+				// 首先要获取div，之后在获取其中的内容。
+				// 获取div
+				var divElt1 = document.getElementById("mydiv1");
+				// 获取div中的内容
+				// innerHTML是一个非常重要的属性，它可以获取也可以设置元素内部的内容。
+				// 这个是获取div1中的内容
+				/* console.log(divElt1.innerHTML); */
+				/* console.log(divElt1.innerHTML); */
+				// 下边的是获取div2
+				var divElt2 = document.getElementById("mydiv2");
+
+				/* 
+				下边这行代码的让mydiv2输出固定的值 即固定。。。
+					divElt2.innerHTML = "固定。。。"*/
+				// 这行代码的含义 ：将mydiv1中的内容赋值给mydiv2。
+				divElt2.innerHTML = divElt1.innerHTML;
+			}
+		</script>
+
+		<!-- div元素 -->
+		<div id="mydiv1">
+			hello ,jack, welcome yo china!
+		</div>
+
+		<!-- 书写第二个div -->
+		<div id="mydiv2" style="background-color: aqua;" >
+
+		</div>
+
+		<!-- 按钮 -->
+		<input type="button" value="获取div中的内容" onclick="getContent()" />
+	</body>
+</html>
diff --git a/out/production/HTML/JavaScript/JS事件/JS的事件.html b/out/production/HTML/JavaScript/JS事件/JS的事件.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>JS的事件</title>
+	</head>
+	<!-- load事件在什么时候发生？在页面元素全部加载完毕之后才会发生。 -->
+	<body onload="console.log('页面加载完毕了，load事件发生了！')">
+		<!-- 
+			JS中有哪些常见的事件：
+				(1) blur失去焦点
+				(2) change下拉列表选中项改变，或文本框内容改变
+				(3) click鼠标单机
+				(4) dblclick鼠标双击
+				(5) focus获得焦点
+				(6) keydown键盘按下
+				(7) keyup键盘弹起
+				(8) load页面加载完毕
+				(9) mousedown鼠标按下
+				(10) mouseover鼠标经过
+				(11) mousemove鼠标移动
+				(12) mouseout鼠标离开
+				(13) mouseup鼠标弹起
+				(14) reset表单重置
+				(15) select文本被选定
+				(16) submit表单提交
+		 -->
+		 blur事件：<input type="text" onblur="console.log('失去焦点了！')"/>
+		 <br>
+
+		 <!-- change事件：下拉列表项被改变时发生-->
+		 change事件：
+		 <select name="garde" onchange="console.log('下拉列表发生改变了')">
+		 	<option value="gz">高中</option>
+			<option value ="zk">专科</option>
+			<option value ="bk">本科</option>
+		 </select>
+		 <br>
+
+		 dblclick事件：
+		 <input type="button" value="鼠标双击" ondblclick="console.log('鼠标双击了！')"/>
+		 <br>
+
+		 focus事件：
+		 <input type="text" onfocus="console.log('获取到了焦点！')"/>
+		 <br>
+
+		 keydown和keyup事件：
+		 <input type="text" onkeydown="console.log('键盘按下了')" onkeyup="console.log('键盘弹起了')"/>
+		 <br>
+
+		mousemove鼠标移动：
+		<input type="text" onmousemove="console.log('鼠标移动了！')"/>
+		<br>
+
+		mouseout鼠标离开：
+		<input type="button" onmouseout="console.log('鼠标离开了！')"/>
+
+
+	</body>
+</html>
diff --git a/out/production/HTML/JavaScript/JS函数以及变量/JS函数不存在重载.html b/out/production/HTML/JavaScript/JS函数以及变量/JS函数不存在重载.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>JS中的函数不存在重载</title>
+	</head>
+	<body>
+		<script type="text/javascript">
+		/* 以下代码测试JS函数可不可以重载 */
+
+			/* 声明第一个函数：存在两个参数 */
+			function test1(a,b){
+				alert("test1(a,b)");
+			}
+
+			/*  声明第二个函数，和第一个函数的函数名相同，只是参数列表不用，
+				测试JS函数能不能重载
+			*/
+			function test1(){
+				alert("test1()");
+			}
+
+			// 调用函数
+			test1(1,2);  // 显示的结果为：test1()
+
+			/* 
+				重点：
+					在JS中，函数不会重载，上边结果之所以那么显示，不是因为就近原则的存在
+					而是在JS中，如果声明两个同名的函数，那么第二个函数会替代第一个函数，
+					这里只的并不是覆盖，而是第一个函数会消失，只剩第二个函数
+					
+				注意：
+					在编写JS函数名的时候，谨慎一些，以放将其他的函数删除掉。
+			 */
+
+		</script>
+
+		<!-- 显示的结果是 ：test1()，说明在JS中函数不呢个进行重载。 -->
+		<input type="button" value="重载" onclick="test1(111,222)"/>
+
+
+	</body>
+</html>
diff --git a/out/production/HTML/JavaScript/JS函数以及变量/JS变量.html b/out/production/HTML/JavaScript/JS函数以及变量/JS变量.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>JS变量</title>
+	</head>
+	<body>
+		<script type="text/javascript">
+			/* JS中声明变量使用var */
+
+			/*
+				Java语言是一种强类型语言：
+					Java语言在定义变量的时候必须指定变量的数据类型。
+					int i = 100;
+					在Java中，变量的数据类型在编译阶段确定下来了。
+					Java中的变量i一旦声明为int类型，这一辈子只能是int类型。不能在变为其他类型。
+					
+				JavaScript是一种弱类型语言 ：
+					JavaScript不需要编译，是脚本语言，直接浏览器打开执行。
+					而且JavaScript定义变量的时候不需要指定数据类型。
+					例如 ：
+						var i;
+						var j;
+						var k;
+					并且JS中的变量可以赋值任何类型的值。
+					JS中的变量是一个万能的口袋。什么类型的数据都能放进去。
+					
+			 */
+			// JS的变量怎么定义呢？
+			// 语法格式 ：var 变量名
+			// JS的变量如何赋值呢？
+			// 变量名 = 值
+
+			// 定义一个age变量
+			var age;
+
+			// 变量没有赋值的时候默认值是undefined
+			// undefined是JS中的一个具体存在的值，系统的默认值。
+			// 以下的这行代码表示将数据输出到控制台上(控制台怎么调出来？F12)
+
+			console.log(age)
+
+			// 给age变量赋值
+			age = 20;
+			console.log("age = " + age);
+
+			// age可以赋值一个布尔类型的数据嘛？
+			age = false;
+			console.log("age = " + age);
+
+			age = 3.14;
+			console.log("age = " + age);
+
+
+			age = "abc";
+			console.log("age = " + age);
+
+			age = 'text';
+			console.log("age = " + age);
+
+			// 声明变量的同时赋值
+			var k = 20;
+			console.log("age = " + k);
+
+			// 一行上声明多个变量
+			var x,y,z = 300;
+			console.log("x的值为 ：" + x); // x的值为：undefined
+			console.log("y的值为 ：" + y); // y的值为：undefined
+			console.log("z的值为 ：" + z); // z的值为：300
+
+			var username = "zhangsan";
+			console.log("username = " + username); // username = zhangsan
+		</script>
+	</body>
+</html>