目录
①getElementById()方法：返回带有指定ID的元素引用
②getElementsByTagName()方法：返回带有指定标签名的所有元素
一：JavaScript介绍
JavaScript是互联网上最流行的脚本语言，这门语言可用于HTML和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备
JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。
JavaScript是Net scape网景公司的产品，最早取名为LiveScript；为了吸引更多的程序员，更名为JavaScript
为什么学习JavaScript？
①HTML定义了网页的内容
②CSS描述了网页的布局
③JavaScript控制了网页的行为
学到的主要内容：
①直接写入HTML输出流：document.write()
②对事件的反应
<button type="button" onclick="alert('欢迎!')">点我!</button>③改变HTML内容
x=document.getElementById("demo"); //查找元素
x.innerHTML="Hello JavaScript"; //改变内容④改变HTML图像
⑤改变HTML样式
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式⑥验证输入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>JS是弱类型，Java是强类型
弱类型：类型可变
强类型：在定义变量的时候，类型已确定，而且不可变
特点：
1.交互性（信息的动态交互）
2.安全性（不允许直接访问本地硬盘）
3.跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）
二：JavaScript和html代码的结合方式
2.1：概述
HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。
2.2：在head或者body中的JavaScript
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
2.2.1：head中的JavaScript函数
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>2.2.2：body中的JavaScript函数
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>2.3：外部的JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件
外部脚本中不能包含<script>标签
三：JavaScript输出
JavaScript没有任何打印或者输出的函数
JavaScript可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1><p>我的第一个段落。</p>
<script>window.alert(5 + 6);
</script>
</body>
</html>- 使用 document.write() 方法将内容写到 HTML 文档中。
<!DOCTYPE html><html>
<body><h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>document.write(Date());
</script>
</body>
</html>- 使用 innerHTML 写入到 HTML 元素。
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：
<!DOCTYPE html><html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>- 使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>四： JavaScript语法
JavaScript 是一个脚本语言。
它是一个轻量级，但功能强大的编程语言。
在编程语言中，一般固定值称为字面量，如 3.14。
变量是一个名称，字面量是一个值
4.1：变量（用于存储数据值）
变量是用于存储信息的“容器”
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量和数据类型</title>
<script>
var i;
//alert(i); //undefined
i = 12;
//typeod()是JavaScript语言提供的一个函数
//alert(typeof(i)); //number
//它可以取变量的数据类型返回
i = 'abc';
alert(typeof (i)); //String
var a = 12;
var b = '123';
alert(a * b); //NAN是非数字，非数值
</script>
</head>
<body>
</body>
</html>4.2：关系运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关系运算</title>
<script>
var a = '10';
var b = 10;
alert(a == b);//true
// 只是简单的做字面值的比较
alert(a === b);//false
// 除了做字面值的比较之外，还会比较两个变量的数据类型
</script>
</head>
<body>
</body>
</html>4.3：逻辑运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>逻辑运算</title>
<script>
/* 在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量
去使用
0、null、undefined、""(空串) 都认为是false
*/
var a = 0;
if (a) {
alert("零为真");
} else {
alert("零为假");//零为假
}
// 剩余三个如上所写
/*
&&：且运算
有两种情况：
①当表达式全为真的时候，返回最后一个表达式的值
②当表达式中有一个为假的时候，返回第一个为假的表达式的值
||：或运算
有两种情况
①当表达式全为假时，返回最后一个表达式的值
②只要有一个表达式为真，就会返回第一个为真的表达式的值
上述两种情况有短路：
就是说，当&&和||有了结果之后，后面的表达式就不再执行
*/
</script>
</head>
<body>
</body>
</html>4.4：数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组</title>
<script>
var arr = [];//定义一个空数组
//alert(arr.lenght); //0
arr[0] = 12;
//alert(arr[0]); //12
//alert(arr.length); //1
//JavaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动过的给
//数组做扩容操作
arr[2] = "abc";
alert(arr.length);//3
alert(arr[1]);//undefined
// 数组遍历
for (var i = 0; i < arr.length; i++) {
alert(arr[i]);
}
</script>
</head>
<body>
</body>
</html>4.5：函数
函数是由事件驱动的或者当它调用时执行的可重复使用的代码块。
函数就是包裹在花括号中的代码块，前面使用了function
4.5.1：函数定义的第一种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数</title>
<script>
// 定义一个无参函数
function fun() {
alert("无参函数被调用了！")
}
// 调用函数,才会执行
fun();
// 定义一个有参函数
function fun2(a, b) {
alert("有参函数fun2()被调用了，a = " + a + " " + "b = " + b);
}
fun2(10, 20);
// 定义带有返回值的函数
function sum(num1, num2) {
var result = num1 + num2;
return result;
}
alert((10, 20));
</script>
</head>
<body>
</body>
</html>4.5.2：函数定义的第二种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数</title>
<script>
var fun = function () {
alert("无参函数");
}
fun();
var fun2 = function name(a, b) {
alert("有参函数,a = " + a + " " + "b = " + b);
}
fun2(10, 10);
var fun3 = function (num1, num2) {
return num1 + num2;
}
alert(fun3(10, 100));
</script>
</head>
<body>
</body>
</html>4.6：JS不允许函数重载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数重载</title>
<script>
function fun() {
alert("无参函数fun()...");
}
function fun(a, b) {
alert("有参函数fun(a,b)...");
}
fun();
</script>
</head>
<body>
</body>
</html>4.7：隐形参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隐形参数</title>
<script>
function fun() {
/*
函数的arguments隐形参数（只在function函数内）
隐形参数在function函数中不需要定义，但却可以直接用来获取所有参数
的变量。我们管它叫隐形参数。
隐形参数就相当于java中的可变长参数一样public void fun(Object... args);
可变长参数是一个数组，那么JS中的隐形参数也跟java的可变参数一样，操作类似于数组
*/
// alert(arguments.length); //可以看参数个数
// alert(arguments[0]);
// alert(arguments[1]);
// alert(arguments[2]);
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);
}
alert("无参函数fun()...");
}
fun(a, "abc", true);
</script>
</head>
<body>
</body>
</html>4.8：JavaScript对象
4.8.1：概述
在JavaScript中，几乎所有的事物都是对象
JavaScript 对象是拥有属性和方法的数据
4.8.2：自定义对象
①Object形式的自定义对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义对象</title>
<script>
/*
对象的定义：
var 变量名 = new Object(); //对象实例（空对象）
变量名.属性名 = 值; //定义一个属性
变量名.函数名 = function(){} //定义一个函数
*/
var obj = new Object();
obj.name = "华仔";
obj.age = 18;
obj.fun = function () {
alert("姓名：" + this.name + "，年龄：" + this.age);
}
alert(obj.fun());
</script>
</head>
<body>
</body>
</html>②大括号形式的自定义对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义对象</title>
<script>
var obj = {
name: "张三",
age: 10,
fun: function () {
alert("姓名：" + this.name + "，年龄：" + this.age);
}
}
alert(obj.fun())
</script>
</head>
<body>
</body>
</html>4.9：JS中的事件
定义：事件是电脑输入设备与页面进行交互的响应
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
通常，当事件发生时，你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件</title>
<script>
/*
一：常用的事件：
onload：加载完成事件
页面加载完成之后，常用于做页面JS代码初始化操作
onclick：单击事件
常用于按钮的点击响应操作
onblur：失去焦点事件
常用于输入框失去焦点后验证其输入内容是否合法
onchange：内容发生改变事件
常用于下拉列表和输入框内容发生改变后操作
onsubmit：表单提交事件
常用于表单提交前验证所有表单项是否合法
二：事件的注册又分为静态注册和动态注册两种
事件的注册（绑定）：告诉浏览器，当事件相应后要执行哪些操作代码，叫事件注册或事件绑定
静态注册事件：通过html标签的事件属性直接赋予事件相应后的代码
动态注册事件：是指先通过js代码得到标签的dom对象，然后通过dom对象.事件名 = function(){}
这种形式赋予事件相应后的代码
动态注册基本步骤：
①获取标签对象
②标签对象.事件名 = function(){}
*/
</script>
</head>
<body>
</body>
</html>4.9.1：onload 加载完成事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onload：加载完成事件</title>
<script>
//onload事件的方法
function onloadFun() {
alert("静态注册onload事件，所有代码");
}
//onload事件动态注册，是固定的写法
window.onload = function () {
alert("动态注册的onload事件");
}
</script>
</head>
<!--
静态注册onload事件
onload事件是浏览器解析完页面以后就会自动触发的事件
<body onload="onloadFun();">
-->
<body>
</body>
</html>4.9.2：onclick 单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onclick：单击事件</title>
<script>
function onclickFun() {
alert("静态注册onclick事件");
}
//动态注册onclick事件
window.onload = function () {
//1.获取标签对象
/*
document 是JavaScript提供的一个对象（文档）
get 获取
Element 元素（就是标签）
By 通过...
Id id属性
getElementById通过ID属性获取标签对象
*/
var btnobj = document.getElementById("btn01");
// alert(btnobj);
//2.通过标签对象.事件名 = function(){}
btnobj.onclick = function () {
alert("动态注册的onclick事件")
}
}
</script>
</head>
<body>
<!-- 静态注册onclick事件 -->
<button onclick="onclickFun();">按钮一</button>
<!-- 动态注册onclick事件 -->
<button id="btn01">按钮二</button>
</body>
</html>4.9.3：onblur 失去焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onblur：失去焦点事件</title>
<script>
//静态注册失去焦点事件
function onblurFun() {
//console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
//log()是打印的方法
console.log("静态注册失去焦点事件");
}
//动态注册onblur事件
window.onload = function () {
//1.获取标签对象
var passwordObj = document.getElementById("password");
// alert(passwordObj);
//2.通过标签对象对象.事件名 = function(){};
passwordObj.onblur = function () {
console.log("动态注册失去焦点");
}
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun();">
密码：<input id="password" type="text"><br />
</body>
</html>4.9.4：onchange 内容发生改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onchange：内容发生改变事件</title>
<script>
function onchangeFun() {
alert("女神已经改变了")
}
window.onload = function () {
//获取标签对象
var selObj = document.getElementById("sel01");
// alert(selObj);
//通过标签对象.事件名 = function(){}
selObj.onchange = function () {
alert("男神已经改变了");
}
}
</script>
</head>
<body>
<!-- 静态注册onchange事件 -->
请选择你心中的女神：
<select onchange="onchangeFun();">
<option>--女神--</option>
<option>芳芳</option>
<option>佳佳</option>
<option>娘娘</option>
</select>
<!-- 动态注册onchange事件 -->
请选择你心中的男神：
<select id="sel01"">
<option>--男神--</option>
<option>国哥</option>
<option>峰哥</option>
<option>华仔</option>
</select>
</body>
</html>4.9.5：onsubmit 表单提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onsubmit：表单提交事件</title>
<script>
//静态注册表单提交事务
function onsubmitFun() {
//要验证所有表单项是否合法，如果有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return false;
}
//动态注册
window.onload = function () {
//1.获取标签对象
var formObj = document.getElementById("form01");
//2.通过标签对象.事件名 = function(){}
formObj.onsubmit = function () {
alert("动态注册表单提交事件----发现合法");
}
return true;
}
</script>
</head>
<body>
<!-- return false 可以组织表单提交 -->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册">
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册">
</form>
</body>
</html>4.10：DOM模型
DOM全称是Document Object Model 文档对象模型，是HTML和XML文档的编程接口
简单来说就是使用document对象的API完成对网页HTML文档的动态修改，以实现网页数据和样式动态变化效果的编程
解释：就是把文档中的标签，属性，文本，转换为对象来管理
HTML DOM定义了访问和操作HTML文档的标准方法
定义1：什么是 DOM？
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
定义2：什么是 XML DOM？
XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
定义3：什么是 HTML DOM？
HTML DOM 是：
- HTML 的标准对象模型
- HTML 的标准编程接口
- W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
4.10.1：Document对象
理解：
①Document它管理了所有的HTML文档内容
②Document它是一种树结构的文档。有层级关系
③它让我们把所有的标签都对象化
④我们可以通过Document访问所有的标签对象
4.10.2：DOM的属性、方法
编程接口：
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
方法是您能够执行的动作（比如添加或修改元素）。
属性是您能够获取或设置的值（比如节点的名称或内容）。
一些常用的 HTML DOM 方法（是我们可以在节点（HTML元素）上执行的动作）：
- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性（是我们可以在节点（HTML元素）设置和修改的值）：
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
-
一些 DOM 对象方法
方法 描述 getElementById() 返回带有指定 ID 的元素。 getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 appendChild() 把新的子节点添加到指定节点。 removeChild() 删除子节点。 replaceChild() 替换子节点。 insertBefore() 在指定的子节点前面插入新的子节点。 createAttribute() 创建属性节点。 createElement() 创建元素节点。 createTextNode() 创建文本节点。 getAttribute() 返回指定的属性值。 setAttribute() 把指定属性设置或修改为指定的值。 -
①getElementById()方法：返回带有指定ID的元素引用
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>getElementById</title> <script> /* 需求：当用户点击了校验按钮，要获取输入框中的内容，然后验证其是否合法 验证的规则：必须有字母、数字、下划线组成，并且长度是5-12位 */ function onclickFun() { //1.当我们要操作一个标签打的时候，一定要先获取这个对象 var usernameObj = document.getElementById("username"); // alert(usernameObj); //[object HTMLInputElement] 这就是dom对象 var usernameText = usernameObj.value; //如何验证字符串符合某个规则，需要使用正则表达式技术 var patt = /^\w{5,12}$/; var usernameSpanObj = document.getElementById("usernameSpan"); //innerHTML：表示起始标签和结束标签的内容 //innerHTML：这个属性可读、可写 usernameSpanObj.innerHTML = "峰哥真努力！"; /* test()方法用于测试某个字符串是不是匹配我的规则 匹配就返回true，不匹配就返回false */ if (patt.test(usernameText)) { // alert("用户名合法"); // usernameSpanObj.innerHTML = "用户名合法！"; usernameSpanObj.innerHTML = "<img src=\"right.webp\" width=\"20\" height=\"20\">"; } else { // alert("用户名不合法"); // usernameSpanObj.innerHTML = "用户名不合法！"; usernameSpanObj.innerHTML = "<img src=\"error.webp\" width=\"20\" height=\"20\">"; } } </script> </head> <body> 用户名：<input type="text" id="username" value="jyf"> <span id="usernameSpan" style="color: red;"></span> <button onclick="onclickFun();">校验</button> </body> </html>②getElementsByTagName()方法：返回带有指定标签名的所有元素
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>getElementsByTagName</title> <script> function checkAll() { /* document.getElementsByTagName(); 按照指定标签名来进行查询并返回集合 这个集合的操作和数组一样 集合中的每个元素都是dom对象 这个集合中的元素顺序是他们在HTML页面中从上到下的顺序 */ var inputs = document.getElementsByTagName("input"); // alert(inputs); [object HTMLCollection] for (var i = 0; i < inputs.length; i++) { inputs[i].checked = true; } } </script> </head> <body> 兴趣爱好： <input type="checkbox" value="cpp" checked="checked">C++ <input type="checkbox" value="java">Java <input type="checkbox" value="js">JavaScript <br /> <button onclick="checkAll()">全选</button> </body> </html>
注：
document对象的三个查询方法：
如果有id属性，优先使用getElementById方法来进行查询
如果没有id属性，则优先使用getElementsByName方法来进行查询
如果id属性和name属性都没有，最后再使用getElementByTagName方法来进行查询
以上三个方法，一定要在页面加载完成以后执行，才能查询到标签对象
4.10.3：正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
什么是正则表达式？
语法：/正则表达式主体/修饰符（可选）
正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作
①使用字符串方法
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
var str = "Visit Runoob!"; var n = str.search(/Runoob/i); 输出结果：6replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。
//使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob : var str = document.getElementById("demo").innerHTML; var txt = str.replace(/microsoft/i,"Runoob"); 输出结果：Visit Runoob!
②正则表达式修饰符
修饰符 可以在全局搜索中不区分大小写:
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
③正则表达式模式
方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| (x|y) | 查找任何以 | 分隔的选项。 |
元字符是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| \d | 查找数字。 |
| \s | 查找空白字符。 |
| \b | 匹配单词边界。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词:
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
④使用RegExp对象
在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。
⑤使用test()
test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
以下实例用于搜索字符串中的字符 "e"：
var patt = /e/; patt.test("The best things in life are free!"); 字符串中含有 "e"，所以该实例输出为： true
⑥使用exec()
exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
以下实例用于搜索字符串中的字母 "e":
/e/.exec("The best things in life are free!"); 字符串中含有 "e"，所以该实例输出为: e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正则表达式：RegExp</title>
<script>
//查看要求的字符串中，是否包含字母e
//第一种表示方法：
// var patt = new RegExp("e");
//第二种表示方法：
// var patt = /e/;
// 查看要求字符串中，是否包含字母a或b或c
// var patt = /[abc]/;
//查看要求字符串中，是否包含小写字母
// var patt = /[a-z]/;
//查看要求字符串中，是否包含大写字母
// var patt = /[A-Z]/;
//查看要求字符串中，是否包含任意数字
// var patt = /[0-9]/;
//查看要求字符串中，是否包含字母、数字、下划线
// var patt = /\w/;
//查看要求字符串中，是否至少包含一个a
// var patt = /a+/;
//查看要求字符串中，是否包含零个或多个a
// var patt = /a*/;
//查看要求字符串中，至少有3个连续的a，最多5个连续的a(超过5个仍然是正确的)
// var patt = /a{3,5}/;
//查看要求字符串，从头到尾必须完全匹配
var patt = /^a{3,5}$/;
//查看要求字符串必须以a结尾
// var patt = /a$/;
//查看要求字符串必须以a开头
// var patt = /^a/;
var str = "aaaaaa";
alert(patt.test(str));
</script>
</head>
<body>
</body>
</html>4.10.4：节点的常用属性和方法
在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
HTML DOM 节点树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
HTML DOM 树实例
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
我们常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）。
- 每个节点都有父节点、除了根（它没有父节点）。
- 一个节点可拥有任意数量的子节点。
- 同胞是拥有相同父节点的节点。
下面的图片展示了节点树的一部分，以及节点之间的关系：
请看下面的 HTML 片段：
<html>
<head>
<meta charset="utf-8">
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 课程1</h1>
<p>Hello world!</p>
</body>
</html>从上面的 HTML 中：
- <html> 节点没有父节点；它是根节点
- <head> 和 <body> 的父节点是 <html> 节点
- 文本节点 "Hello world!" 的父节点是 <p> 节点
并且：
- <html> 节点拥有两个子节点：<head> 和 <body>
- <head> 节点拥有两个子节点：<meta> 与 <title> 节点
- <title> 节点也拥有一个子节点：文本节点 "DOM 教程"
- <h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点
并且：
- <head> 元素是 <html> 元素的首个子节点
- <body> 元素是 <html> 元素的最后一个子节点
- <h1> 元素是 <body> 元素的首个子节点
- <p> 元素是 <body> 元素的最后一个子节点
五：JavaScript数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
5.1：JavaScript对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"John", lastname:"Doe", id:5566};
上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行：
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];5.2：声明变量类型
当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object;
JavaScript变量均为对象。当你声明一个变量时，就创建了一个新的对象 ！
5.3：typeof、null和undefined
5.3.1：typeof操作符
typeof 操作符检测变量的数据类型。
typeof "John" // 返回 string typeof 3.14 // 返回 number typeof false // 返回 boolean typeof [1,2,3,4] // 返回 object typeof {name:'John', age:34} // 返回 object
5.3.2：null
在 JavaScript 中 null 表示 "什么都没有"。
null是一个只有一个值的特殊类型。表示一个空对象引用。
用typeof检测null返回是object
你可以设置为 null 来清空对象:
var
person = null; // 值为 null(空), 但类型为对象5.3.3：undefined
在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
var person; // 值为 undefined(空), 类型是undefinedvar person; // 值为 undefined(空), 类型是undefined
person = undefined; // 值为 undefined, 类型是undefined
5.3.4：undefined和null的区别
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true5.4：类型转换
Number() 转换为数字， String() 转换为字符串， Boolean() 转换为布尔值。
5.4.1：javascript数据类型
在 JavaScript 中有 6 种不同的数据类型：
- string
- number
- boolean
- object
- function
- symbol
3 种对象类型：
- Object
- Date
- Array
2 个不包含任何值的数据类型：
- null
- undefined
5.4.2：typeof操作符
typeof "John"
// 返回 string
typeof 3.14
// 返回 number
typeof NaN
// 返回 number
typeof false
// 返回 boolean
typeof [1,2,3,4]
// 返回 object
typeof {name:'John', age:34}
// 返回 object
typeof new Date()
// 返回 object
typeof function () {}
// 返回 function
typeof myCar
// 返回 undefined (如果 myCar 没有声明)
typeof null
// 返回 object请注意：
- NaN 的数据类型是 number
- 数组(Array)的数据类型是 object
- 日期(Date)的数据类型为 object
- null 的数据类型是 object
- 未定义变量的数据类型为 undefined
如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是返回 object。
5.4.3：constructor属性
constructor 属性返回所有 JavaScript 变量的构造函数。
"John".constructor // 返回函数 String() { [native code] } (3.14).constructor // 返回函数 Number() { [native code] } false.constructor // 返回函数 Boolean() { [native code] } [1,2,3,4].constructor // 返回函数 Array() { [native code] } {name:'John', age:34}.constructor // 返回函数 Object() { [native code] } new Date().constructor // 返回函数 Date() { [native code] } function () {}.constructor // 返回函数 Function(){ [native code] }
5.4.4：类型转换
JavaScript 变量可以转换为新变量或其他数据类型：
- 通过使用 JavaScript 函数
- 通过 JavaScript 自身自动转换
①数字转换为字符串
全局方法 String() 可以将数字转换为字符串。
该方法可用于任何类型的数字，字母，变量，表达式：
String(x) // 将变量 x 转换为字符串并返回 String(123) // 将数字 123 转换为字符串并返回 String(100 + 23) // 将数字表达式转换为字符串并返回
②布尔值转换为字符串
全局方法 String() 可以将布尔值转换为字符串。
String(false) // 返回 "false" String(true) // 返回 "true"
③日期转换为字符串
Date() 返回字符串。
Date() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
④字符串转换为数字
全局方法 Number() 可以将字符串转换为数字。
字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。
Number("3.14") // 返回 3.14 Number(" ") // 返回 0 Number("") // 返回 0 Number("99 88") // 返回 NaN
⑤布尔值转换为数字
全局方法 Number() 可将布尔值转换为数字。
Number(false) // 返回 0 Number(true) // 返回 1
⑥日期转换为数字
全局方法 Number() 可将日期转换为数字。
d = new Date(); Number(d) // 返回 1404568027739
⑦自动转换类型
当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。
以下输出结果不是你所期望的：
5 + null // 返回 5 null 转换为 0 "5" + null // 返回"5null" null 转换为 "null" "5" + 1 // 返回 "51" 1 转换为 "1" "5" - 1 // 返回 4 "5" 转换为 5
⑧自动转换为字符串
当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：
document.getElementById("demo").innerHTML = myVar; myVar = {name:"Fjohn"} // toString 转换为 "[object Object]" myVar = [1,2,3,4] // toString 转换为 "1,2,3,4" myVar = new Date() // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"数字和布尔值也经常相互转换：
myVar = 123 // toString 转换为 "123" myVar = true // toString 转换为 "true" myVar = false // toString 转换为 "false"
六：字符串
6.1：特殊字符和转义字符
在 JavaScript 中，字符串写在单引号或双引号中。
因为这样，以下实例 JavaScript 无法解析：
"We are the so-called "Vikings" from the north."
字符串 "We are the so-called " 被截断。
如何解决以上的问题呢？可以使用反斜杠 (\) 来转义 "Vikings" 字符串中的双引号，如下:
"We are the so-called \"Vikings\" from the north."
反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：
转义字符 (\) 可以用于转义撇号，换行，引号，等其他特殊字符。
下表中列举了在字符串中可以使用转义字符转义的特殊字符：
| 代码 | 输出 |
|---|---|
| \' | 单引号 |
| \" | 双引号 |
| \\ | 反斜杠 |
| \n | 换行 |
| \r | 回车 |
| \t | tab(制表符) |
| \b | 退格符 |
| \f | 换页符 |
6.2：字符串可以是对象
通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"
但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John")
var x = "John"; var y = new String("John"); typeof x // 返回 String typeof y // 返回 Object
6.3：字符串属性和方法
原始值字符串，如 "John", 没有属性和方法(因为他们不是对象)。
原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。
6.3.1：字符串属性
| 属性 | 描述 |
|---|---|
| constructor | 返回创建字符串属性的函数 |
| length | 返回字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
6.3.2：字符串方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将 Unicode 转换为字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式相匹配的值 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割为子字符串数组 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLowerCase() | 把字符串转换为小写 |
| toString() | 返回字符串对象值 |
| toUpperCase() | 把字符串转换为大写 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某个字符串对象的原始值 |
6.4：模版字符串
①JavaScript 中的模板字符串是一种方便的字符串语法，允许你在字符串中嵌入表达式和变量。
②模板字符串使用反引号 `` 作为字符串的定界符分隔的字面量。
③模板字面量是用反引号（`）分隔的字面量，允许多行字符串、带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构。
④模板字符串中可以同时使用单引号和双引号：
let text = `He's often called "Runoob"`;
若要转义模板字面量中的反引号（`），需在反引号之前加一个反斜杠（\）。
`\`` === "`"; // true①模板字面量用反引号（`）括起来，而不是双引号（"）或单引号（'）。
②除了普通字符串外，模板字面量还可以包含占位符——一种由美元符号和大括号分隔的嵌入式表达式：${expression}。
③字符串和占位符被传递给一个函数（要么是默认函数，要么是自定义函数）。默认函数（当未提供自定义函数时）只执行字符串插值来替换占位符，然后将这些部分拼接到一个字符串中。
模板字符串中允许我们使用变量：
const name = 'Runoob';
const age = 30;
const message = `My name is ${name} and I'm ${age} years old.`; ①以上实例中，${name} 和 ${age} 是模板字符串的表达式部分，它们被包含在 ${} 内部，并在运行时求值。
②模板字符串允许你在字符串中引用变量、执行函数调用和进行任意的JavaScript表达式。
③模版字符串允许我们使用表达式
④模板字符串当作 HTML 模板使用
let header = ""; let tags = ["RUNOOB", "GOOGLE", "TAOBAO"]; let html = `<h2>${header}</h2><ul>`; for (const x of tags) { html += `<li>${x}</li>`; } html += `</ul>`;
七：JSON格式
7.1：前端中对象与字符串的相互转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/* JSON格式的语法
var personStr = '{"属性名":"属性值","属性名":{},"属性名":["","",""],"属性名":[{},{},{}]}'
属性名必须用""包裹上
属性值的字符串必须用""包裹好，数字可以不处理
*/
// 这是一个JSON格式的字符串
var personStr = '{"name":"张三","age":10,"dog":{"dname":"小花"},"loveSingers":["张小明","李四","王五"],"friends":[{"fname":"赵四"},{"fname":"余钱"}]}'
// 通过JSON.parse()可以将一个JSON串转换为一个对象
var person = JSON.parse(personStr)
console.log(personStr)
console.log(person)
console.log(person.name)
console.log(person.dog.dname)
console.log(person.loveSingers[0])
console.log(person.friends[0].fname)
// 通过JSON.stringify()将一个对象转换为JSON串
var personStr2 = JSON.stringify(person)
console.log(personStr2)
</script>
</head>
<body>
</body>
</html>7.2：后端中对象与字符串的相互转换
package com.jiayifeng.test;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.jiayifeng.pojo.Dog;
import com.jiayifeng.pojo.Person;
import org.junit.Test;
/**
* @BelongsProject: JavaWeb
* @BelongsPackage: com.jiayifeng.test
* @Author: 小贾
* @CreateTime: 2023-11-22 15:09
* @Description: TODO
* @Version: 1.0
*/
public class TestJson {
@Test
public void testWriteJson() throws JsonProcessingException {
//实例化Person对象，将Person对象转换为JSON串
Dog dog = new Dog("小黄");
Person person = new Person("张三",10,dog);
//将Person对象转换为一个字符串
ObjectMapper objectMapper = new ObjectMapper();
String personStr = objectMapper.writeValueAsString(person);
System.out.println(personStr);
}
@Test
public void testReadJson() throws JsonProcessingException {
//将字符串转换为对象
String personStr = "{\"name\":\"张三\",\"age\":10,\"dog\":{\"name\":\"小黄\"}}";
ObjectMapper objectMapper = new ObjectMapper();
Person person = objectMapper.readValue(personStr, Person.class);
System.out.println(person);
}
}
八：BOM编程
8.1：什么是BOM？
- BOM是Browser Object Model的简写，即浏览器对象模型
- BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法（通过window对象及属性的一系列方法，控制浏览器行为的一种编程）
- BOM没有统一的标准（每种客户端都可以自定标准）
- BOM编程是将浏览器窗口的各个组成部分抽象成各个对象，通过各个对象的API操作组件行为的一种编程
8.2：通过BOM编程控制浏览器行为演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
window对象是由浏览器提供给我们使用，无需自己new
window.：可以省略不写
三种弹窗方式
alert
prompt
confirm
定时任务
*/
function fun1(){
window.alert("hello")
}
function fun2(){
var res = window.prompt("请输入姓名")
console.log(res)
}
function fun3(){
var res = window.confirm("确认要删除吗？")
console.log(res)
}
function fun4(){
window.setTimeout(function(){
console.log("hello")
},2000)
}
</script>
</head>
<body>
<button onclick="fun1()">信息提示框</button>
<button onclick="fun2()">输入框</button>
<button onclick="fun3()">信息确认框</button>
<button onclick="fun4()">两秒后向控制台打印Hello</button>
</body>
</html>8.3：通过BOM编程实现会话级和持久级数据存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
window对象是由浏览器提供给我们使用，无需自己new
window.：可以省略不写
三种弹窗方式
alert
prompt
confirm
定时任务
history 窗口的访问历史
location：修改地址栏中的url
sessionStorage：用于存储一些会话级数据（浏览器关闭数据清除）
localStorage：用于存储一些持久级数据（浏览器关闭数据还在）
console
*/
function funD(){
// 向sessionStorage中存储数据
sessionStorage.setItem("key1","value1")
// 向localStorage中存储数据
localStorage.setItem("key2","value2")
}
function funE(){
console.log(sessionStorage.getItem("key1"))
console.log(localStorage.getItem("key2"))
}
function funF(){
sessionStorage.removeItem("key1")
localStorage.removeItem("key2")
}
function funC(){
location.href = "http://www.baidu.com"//修改地址栏中的url
}
function funA(){
// 向前翻页
history.forward()
history.go(1)//向前翻1页
}
function funB(){
// 向后翻页
history.back()
}
function fun1(){
window.alert("hello")
}
function fun2(){
var res = window.prompt("请输入姓名")
console.log(res)
}
function fun3(){
var res = window.confirm("确认要删除吗？")
console.log(res)
}
function fun4(){
window.setTimeout(function(){
console.log("hello")
},2000)
}
</script>
</head>
<body>
<button onclick="funD()">存储数据</button>
<button onclick="funE()">读取数据</button>
<button onclick="funF()">清空数据</button>
<hr>
<button onclick="funC()">百度</button>
<hr>
<button onclick="funA()">上一页</button>
<button onclick="funB()">下一页</button>
<a href="http://www.baidu.com">百度</a>
<hr>
<button onclick="fun1()">信息提示框</button>
<button onclick="fun2()">输入框</button>
<button onclick="fun3()">信息确认框</button>
<button onclick="fun4()">两秒后向控制台打印Hello</button>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
