JavaScript相关内容-CSDN博客

本文链接：https://blog.csdn.net/LiZongShao/article/details/130329330

1.JavaScript

一个网站是由html+css+js组成的

JavaScript是web开发者必学的三种语言之一

①HTML定义网页的内容

②CSS规定网页的布局

③JavaScript对网页行为进行编程

2.JS入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- onclick 是一个属性  点击事件
		 alert('嘻嘻...')  是js中封装好的一个函数
		 一个函数是一个功能  具有弹框效果的一个函数
		 -->
		<button onclick="alert('嘻嘻...')">点我啊</button>
	</body>
</html>

3.JS的三种引入方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 第三种写法
			类似于css外部的引入
			引入外部的js文件
		 -->
		 <script src="test.js"></script>
	</head>
	<body>
		<!-- 第一种  将js代码引入到html标签的属性中 
		onclick  点击状态
		-->
		<button onclick="alert('呵呵')">点点更健康</button>
		<!-- 第二种方式
		 在任意位置书写 <script></script>
		 在标签中去写 js代码即可
		 -->
		<script>
			 //在js中声明变量的语法格式  var  变量名字 = 初始化的值; 或者 变量名字 = 初始化的值;
			 num = 20;//定义一个变量 num = 20
			 console.log(num);//控制台打印
			 document.write(num);//浏览器上面显示
		</script>
	</body>
</html>

4.JS的数据类型

①number 数字（包括整数和小数）

②String字符串

③boolean布尔

④Object对象

⑤array数组（特殊的对象）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
	<script>
		
		
		// 单行注释
		/* 多行注释 
			JS中的数据类型
				number  包含整数和小数
				boolean 布尔类型的数据
				string 字符串类型的额数据
		*/
		var num = 250//;可以省略但是 必须是一行结束了  var 也可以省略
		console.log(num)
		console.log(typeof num)//number
		var num1 = 34.5
		console.log(num1)
		console.log(typeof num1)//number
		
		//布尔类型的数据
		var flag = false;
		console.log(flag)
		console.log(typeof flag)//boolean
		
		//在js中单引号和双引号都可以表示字符串
		var str = "虚拟";
		var str1 = '徐悲鸿大师你先说你';
		console.log(str)
		console.log(str1)
		
		//作业：
		//字符串的方法！！！
		
		
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//JS中的对象的语法格式
			// {键1:值1,,键2:值2,...}
			var stu = {"name":"张三", "age": 32, "info":"仨下买呢"};
			console.log(stu)
			console.log(typeof stu)
			//取值  咋取？ 通过键取值  对象.属性
			
			console.log(stu.name)
			console.log(stu.age)
			//还有其他种写法 对象["属性"]
			console.log(stu["info"])
			
			//JS数组
			//声明数组的第一种方式
			var  arr = new Array();//声明一个空的数组
			//对数组添加数据
			arr[0] = 12;
			arr[1] = "gouda";
			console.log(arr)
			//还有一种方式
			arr.push(true)
			console.log(arr)
			//js数组存的数据类型可以不一致
			//声明数组的第二种方式
			var arr1 = [1, 2, "xixi", false];
			console.log(arr1)
			console.log(typeof arr1)// 数组是特殊的Object对象
			
			//总结：  object==》｛｝   array====>[]
			//js中凡是｛｝叫对象   []  是数组
			//他们两个一般是可以结合写的  以后开发必用！！！
			//java 给前段一个json数据，这个json数据就是 对象和数组的形式  {}和[]组合
			//多个对象放到数组中
			var stus = [
				{"id":1, "name":"李四", "age":10},
				{"id":2, "name":"wangwu", "age":12},
				{"id":3, "name":"老六", "age":18}];
			//
			//对应Java 集合
			//ArrayList<Person>(); 数据库中查询所有数据   一行数据是一个对象   多行数据多个对象
			//想取值 老六
			console.log(stus[2].name);
			var stus1 = [
				{"id":1, "name":"李四", "age":10, "hobby":["篮球", "足球", "排球"]},
				{"id":2, "name":"wangwu", "age":12,  "hobby":["球", "唱歌", "跳球"]},
				{"id":3, "name":"老六", "age":18,  "hobby":["想", "尽善尽美", "四"]}];
			
			console.log(stus1[2].hobby[1])
			//碰到数组就使用下标   碰到对象使用.
		</script>
	</body>
</html>

5.JS的运算符

①算术运算符：+，-，*，/,%

②关系运算符：>，<，>=，<=，==，===

③逻辑运算符：&&，||，！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			console.log(3 > 4)//false
			console.log(3 + 4.3)
			
			console.log(3 == 3)//true
			console.log(3 == "3")//true ==在js中是不看数据类型的
			console.log(3 === "3")//false  ===在js中是判断数据类型的
			
			console.log((2 >1) && (3 < 1))
		</script>
	</body>
</html>

6.JS的分支结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			if (2 > 3) {
				console.log("嘻嘻")
			} else {
				console.log("哈哈")
			}
			//练习：  在浏览器页面显示  成绩等级 100~90  优秀   90~80  良好 .... if-else if
			//
			var score = 78;
			if (score >= 90 && score <= 100) {
				document.write("优秀")
			} else if (score >= 80) {
				document.write("良好")
			} else if (score >= 70) {
				document.write("一般")
			} else {
				document.write("不及格")
			}
			
			var num4 = 2;
			switch (num4){
				case 1:
					document.write("xixi");
					break;
				case 2:
					document.write("haha");
					break;
				default:
					break;
			}
		</script>
	</body>
</html>

7.JS循环结构

JavaScript支持不同类型的循环：

①for——多次遍历代码块

②for/in——遍历对象属性（重点）

for in *循环遍历person对象

每次迭代返回一个键，键用于访问键的值

③while——当指定条件为true时循环一段代码块

④do/while——当指定条件为true时循环一段代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//while循环
			var num = 0;
			while (num < 5) {
				console.log(num)
				num++;
			}
			//for循环
			for (var i = 0; i < 4; i++) {
				console.log(i)
			}
			//for-in循环  可以遍历对象
			var stu = {"name":"李四", "age":34, "info":"西安几年时间"};
			for (var stuKey in stu) {
				console.log(stuKey)//循环遍历的是键
				//console.log(stu.stuKey)
				console.log(stu[stuKey])
			}
			//打印等腰三角形
			for (var i = 1; i < 4; i++) {
				for (var j = 1; j <= 4 - i; j++) {//打印空格
					document.write("&nbsp;&nbsp;")
				}
				for (var j = 1; j <= (2 * i) -1; j++) {//打印*
					document.write("*")
				}
				document.write("<br>")
			}
			
		</script>
	</body>
</html>

8.JS函数

JavaScript函数通过function关键字进行定义，其后是函数名和括号（），函数名的命名规则和Java一样。

函数中的代码将在其他代码调用该函数时执行：

①当事件发生时（用户点击按钮）

②当JavaScript代码调用时

③自动的（自调用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="test()">点我调用方法</button>
		<script>
			function test () {
				console.log("嘻嘻")
			}
			//当 JavaScript 代码调用时
			//test();
			//没有方法的名字  借助于一些事件来调用
			//window窗体被加载的时候（事件） 就会执行 后面的匿名函数
			window.onload = function () {
				console.log("haha")
			}
			
			//有参无返回值的函数
			function test1 (a) {
				console.log(a)
				
			}
			test1("sajn");
			//有参有返回值的函数
			function test2 (a, b) {
				return a + b;
			}
			var str = test2("嘻嘻" , 89)
			console.log(str)
			
			//匿名函数
			var fun = function () {
				console.log("匿名函数")
			}
			fun();
		</script>
	</body>
</html>

9.JS事件

HTML事件可以是浏览器或用户做的某些事情

onclick	点击HTML元素
ondbclick	双击HTML元素
onmouseover	把鼠标移动到HTML元素上
onmouseout	把鼠标从HTML元素上移走
onkeydown	按下键盘按键
onfous	获取焦点事件（与input输入框有关）
onblur	失去焦点事件（与input输入框有关）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <button onclick="test()">单击事件</button> -->
		<!-- <button ondblclick="test()">双击事件</button> -->
		<!-- <button onmouseover="test()">鼠标放上去事件</button>
		<button onmouseout="test1()">鼠标移开事件</button>
		<button onkeydown="test1()">键盘按下</button> -->
		<!-- <input type="text" onfocus="alert('请输入3~6个字符')"/> -->
		<input type="text" onblur="alert('别闹你走吧')">
		<script>
			function test () {
				document.write("<h1>这个是一个页面</h1>")
			}
			function test1 () {
				document.write("<font color='red' font-size='20px'>嘻嘻 你走了！！！</font>")
			}
		</script>
	</body>
</html>

10.JS正则表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<script>
			var pattern = /e/
			var flag = pattern.test("abcd")
			console.log(flag)
			
			//^n	匹配任何以 n 开头的字符串。 ^1  以1开头
			//[abc]	查找括号之间的任何字符
			//\d	查找数字。
			//n{X}	匹配包含 X 个 n 的序列的字符串。
			//n$	匹配任何以 n 结尾的字符串。
			var pattern1 = /^1[3456789]\d{8}(\d)$/
			var flag1 = pattern1.test(11203601672)
			console.log(flag1)
			
			//邮箱验证
			var pattern2 = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
			var flag2 = pattern2.test("99472392qq.com")
			console.log(flag2)
		</script>
	</body>
</html>

11.JSDOM操作

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

通过对象模型，JavaScript获得创建动态HTML的所有标签对象：

JavaScript能改变页面中的所有HTML元素

JavaScript能改变页面中的所有HTML属性

JavaScript能改变页面中的所有CSS样式

JavaScript能删除已有的HTML元素和属性

JavaScript能添加新的HTML元素和属性

JavaScript能对页面中所有已有的HTML事件做出反应

JavaScript能在页面中创建新的HTML事件

11.1查找html元素对象（重要）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="div1">
			我本将心向明月，奈何明月照沟渠
		</div>
		<div id="div2">
			天狗
		</div>
		<div class="cls">十年生死两茫茫</div>
		<div class="cls1">两情若是长久时</div>
		<div class="cls1">今朝有酒今朝醉</div>
		
		<span>x嘻嘻</span>
		<span>哈哈</span>
	</body>
	<script>
		//getElementById  通过id的属性值 获取当前元素的对象
		var div = document.getElementById("div1")
		console.log(div)
		//getElementsByClassName  通过class的属性值获取对象的集合形式  必须是集合形式
		var clss = document.getElementsByClassName("cls")
		console.log(clss)
		//getElementsByTagName  
		var spans = document.getElementsByTagName("span")
		console.log(spans[0])
		
		
	</script>
</html>

11.2改变html元素

在DOM中，所有的HTML元素都被定义为对象。属性是能够获取或设置的值（如改变HTML元素的内容）。方法是能够完成的动作（如添加或删除HTML元素）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.cls2 {
				color:red;
				font-size: 30px;
			}
			footer {
				color: aqua;
				font-size: 40px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<p>黄河之水养鱼</p>
		</div>
		
		<div class="cls1" id="div2">
			上厕所了
		</div>
		
		<footer style="color:green;">
			不可以
		</footer>
		<footer>
			陈可以
		</footer>
		<footer>
			学计算机
		</footer>
		<button onclick="changeDiv()">点击改变div的内容</button><br>
		<button onclick="changeAttr()">点击改变元素的属性</button><br>
		<button onclick="changeCSS()">点击改变元素的样式</button>
	</body>
	<script>
		function changeDiv () {
			//1.找到这个div
			var div = document.getElementById("div1")
			//元素对象.innerHTML  ===><p>黄河之水养鱼</p>
			//innerHTML 属性可用于获取或替换 HTML 元素的内容。
			//innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。
			//console.log(div.innerHTML)
			//2.替换
			//div.innerHTML = "<h1>狗蛋</h1>"
			//innerText 获取是文本信息 标签没有的
			console.log(div.innerText)
		}
		function changeAttr () {
			//1.找到这个div
			var div = document.getElementById("div2")
			//2.获取class的属性值   getAttribute
			console.log(div.getAttribute("class"))
			//3.设置class属性
			div.setAttribute("class", "cls2")
		}
		//处理了标签元素的内容  ，属性 
		//
		function changeCSS() {
			var footers = document.getElementsByTagName("footer")
			//获取footers  是一个集合
			console.log(footers[0].style.color);
			footers[1].style.color = "tomato";
			for (var i = 0; i < footers.length; i++) {
				footers[i].style.color = "tomato";
				//css 叫 font-size  js 中fontSize
				//background-color  js 中  backgroundColor
				footers[i].style.fontSize = "20px";
				footers[i].style.fontWeight = "normal";
			}
		}
	</script>
</html>

11.3动态的添加和删除标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#goudan {
				color:red;
				font-size: 40px;
				
			}
		</style>
	</head>
	<body id="b1">
		
		<button id="btn1">点击添加一个div在body标签中</button>
		<button id="btn2">点击删除一个div在body标签中</button>
	</body>
	<script>
		var btn1 = document.getElementById("btn1")
		btn1.onclick = function () {
			//1.获取body对象
			var body1 = document.getElementById("b1")
			//2.创建一个div对象
			var div1 = document.createElement("div")
			//3.给div加内容
			div1.innerHTML = "今天的是你扥生日主内生日快想你"
			//4.加属性
			div1.setAttribute("id", "goudan")
			//5.加样式
			div1.style.color = "blue"
			div1.style.fontSize = "20px";
			div1.style.height = "300px";
			div1.style.width = "300px";
			div1.style.backgroundColor = "yellow";
			//3.得把这个div给body
			body1.appendChild(div1)
		}
		
		var btn2 = document.getElementById("btn2")
		btn2.onclick = function ()  {
			//1.获取body对象
			var body1 = document.getElementById("b1")
			//2.删除div
			var div1 = document.getElementById("goudan")
			//3.删除
			body1.removeChild(div1)
		}
	</script>
</html>

11.4获取input输入框中的输入的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="user" id="name"/>
		<button id="btn">点我获取</button>
	</body>
	<script>
		// 当点击的时候才获取input输入框中的数据
		//首先找到button
		var btn = document.getElementById("btn")
		btn.onclick = function () {
			//获取input输入框中的内容
			//首先de找打input输入框啊
			var input = document.getElementById("name")
			//控制台打印一下  input 获取输入值的是是value
			console.log(input.value)
			
		}
	</script>
</html>

11.5全选和取消全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="all">全选</button>
		<button id="none">取消全选</button><br>
		
		<input type="checkbox" class="cls" >篮球<br>
		<input type="checkbox" class="cls">足球<br>
		<input type="checkbox" class="cls">信球<br>
		<input type="checkbox" class="cls">排球<br>
		<input type="checkbox" class="cls">台球<br>
		
		
		
	</body>
	<script>
		var quanxuan = document.getElementById("all")
		var inputs = document.getElementsByClassName("cls")
		quanxuan.onclick = function () {
			//改变checkbox  
			for (var i = 0; i < inputs.length; i++) {
				inputs[i].checked = true
			}
		}
		var quxiaoquanxuan = document.getElementById("none")
		quxiaoquanxuan.onclick = function () {
			//改变checkbox
			for (var i = 0; i < inputs.length; i++) {
				inputs[i].checked = false
			}
		}
	</script>
</html>

11.6BOM

有两个属性可用于确定浏览器窗口的尺寸，这两个属性都以像素返回尺寸：

window.innerHeight——浏览器窗口的内高度

window.innerWidth——浏览器窗口的内宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>点击我跳转</button>
	</body>
	<script>
		var btns = document.getElementsByTagName("button")
		btns[0].onclick = function () {
			window.location.href = "2全选和取消全选.html"
		}
	</script>
	
</html>

12.XML

XML指的是可扩展标记语言，XML被设计用来传输和存储数据

分析：①声明xml文件头信息

②写自定义的标签

③在根元素中写子元素

<?xml version="1.0" encoding="utf-8"?>

<bookstore>
    <book category="历史">
        <title>明朝那些事</title>
        <author>不是我</author>
        <year>1956</year>
        <price>9.9</price>
    </book>
    <book category="历史">
        <title>宋朝那些事</title>
        <author>还不是我</author>
        <year>1989</year>
        <price>91.9</price>
    </book>
    <book category="历史">
        <title>清朝那些事</title>
        <author>依旧不是我</author>
        <year>199</year>
        <price>1.9</price>
    </book>
</bookstore>

注意：①一个xml中只能有一个根元素

②xml标签对大小写是敏感的

③必须是双边标签，而且是自定义的

④必须正确嵌套

⑤xml关注的是内容，是存储的数据

13.XML约束

在真实开发中xml标签不是自己随便定义的，有一定的约束。主要有两种：①DTD约束②Schema约束

13.1DTD约束

DTD（文档类型定义）的作用是定义XML文档的合法构建模块。

DTD可被成行的声明于XML文档中，也可以作为一个外部引用

（1）外部要写一个DTD文件，后缀是.dtd

<!--xml文件中的跟元素必须是  students 根标签的子元素必须是student-->
<!ELEMENT students (student *)>
<!--student标签中 子元素必须是name, age, sex, info-->
<!ELEMENT student (name, age, sex, info)>
<!--#PCDATA 是文本的数据类型-->
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
<!ELEMENT sex (#PCDATA)>
<!ELEMENT info (#PCDATA)>
<!--对student  加属性 id-->
<!--<!ATTLIST 元素名称 属性名称 属性类型 默认值>
<student id=""></student>
<student id=""></student>
-->
<!ATTLIST student id ID #REQUIRED>

（2）写XML文件

<?xml version="1.0" encoding="utf-8" ?>

<!--<!DOCTYPE 根元素 SYSTEM "文件名">-->
<!--绝对路径-->

<!DOCTYPE students SYSTEM "C:\Users\bowang\IdeaProjects\day39_bobo\src\com\qf\b_dtd\student.dtd">

<students>
    <student id="1">
        <name>狗蛋</name>
        <age>12</age>
        <sex>男</sex>
        <info>那就潇洒</info>
    </student>
    <student id="2">
        <name>狗蛋</name>
        <age>19</age>
        <sex>女</sex>
        <info>三年</info>
    </student>
</students>

13.2Schema约束

XML Schema是基于XML的DTD替代者（升级版）

（1）书写一个后缀为.xsd文件

（2）在XML文件中引入.xsd文件

<?xml version="1.0" encoding="utf-8"?>
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema"
            targetNamespace="http://www.goudan.com/xml"
            xmlns="http://www.goudan.com/xml"
            elementFormDefault="qualified">
    <!-- xmlns:xs="http://www.w3.org/2001/XMLSchema"-->
    <!-- 显示 schema 中用到的元素和数据类型来自命名空间 "http://www.w3.org/2001/XMLSchema"。同时它还规定了来自命名空间 "http://www.w3.org/2001/XMLSchema" 的元素和数据类型应该使用前缀 xsd
    ：-->
    <!-- targetNamespace="http://www.qfedu.com/xml" -->
    <!-- 显示被此 schema 定义的元素 (note, to, from, heading, body) 来自命名空间： "http://www.w3school.com.cn"。-->
    <!-- xmlns="http://www.qfedu.com/xml" -->
    <!-- 指出默认的命名空间是 "http://www.qfedu.com/xml"。-->
    <!--     elementFormDefault="qualified">-->
    <!--    指出任何 XML 实例文档所使用的且在此 schema 中声明过的元素必须被命名空间限定。s-->
    <!-- 根节点名字和包含的内容，内容是自定义studentType -->
    <!--    根节点students-->
    <xsd:element name="students" type="studentsType"/>
    <!-- studentsType类型声明  告诉你  -->
    <xsd:complexType name="studentsType">
        <xsd:sequence>
            <!-- students根节点中存放的是student类型  type="studentType" 要求student的个数从0开始 个数不限制 -->
            <xsd:element name="student" type="studentType" minOccurs="0" maxOccurs="unbounded"/>
        </xsd:sequence>
    </xsd:complexType>
    <!-- studentType声明 -->
    <xsd:complexType name="studentType">
        <xsd:sequence>
            <!-- 要求student标签内有name，age，sex子标签，并且要求对一个对应保存的数据类型是type指定 -->
            <xsd:element name="name" type="xsd:string"/>
            <!-- ageType 和 sexType 是自定义数据约束 -->
            <xsd:element name="age" type="ageType" />
            <xsd:element name="sex" type="sexType" />
        </xsd:sequence>
        <!-- 给予Student标签属性 属性为id，要声明idType， use="required"不可缺少的 -->
        <xsd:attribute name="id" type="idType" use="required"/>
    </xsd:complexType>
    <!-- sexType性别类型声明 -->
    <xsd:simpleType name="sexType">
        <xsd:restriction base="xsd:string">
            <!-- 有且只有两个数据 male female -->
            <xsd:enumeration value="male"/>
            <xsd:enumeration value="female"/>
        </xsd:restriction>
    </xsd:simpleType>
    <xsd:simpleType name="ageType">
        <xsd:restriction base="xsd:integer">
            <!-- 0 ~ 256 要求范围，是一个integer类型 -->
            <xsd:minInclusive value="0"/>
            <xsd:maxInclusive value="256"/>
        </xsd:restriction>
    </xsd:simpleType>
    <xsd:simpleType name="idType">
        <xsd:restriction base="xsd:string">
            <!-- ID类型，要求zz_xxxx(四位数字) -->
            <xsd:pattern value="zz_\d{4}"/>
        </xsd:restriction>
    </xsd:simpleType>
</xsd:schema>
        <!--麻烦，还好咱们以后开发不用写dtd  xsd文件，只需要使用被人封装好的即可-->