JavaScript
一：JS的引入：
什么是JS:
JavaScript（简称JS）是一种高级的动态编程语言，通常用于在网页上为用户提供交互式功能。它可以通过在网页中嵌入脚本来实现各种功能，例如验证表单、创建动画效果、响应用户操作等。JavaScript是一种解释性语言，不需要编译，可以直接在浏览器中执行。它是一种多范式语言，支持面向对象、函数式和基于原型的编程风格。JavaScript是目前最流行的前端开发语言之一，被广泛用于网页开发和移动应用程序开发。
引入方式一：
内嵌式，可以内嵌在HTML中任何位置，但是一般建议在head中。
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Surprise Page</title>
<style>
.text{
font-family: Arial, sans-serif;
text-align: center;
background-color: #c42929;
padding: 20px;
width: 300px;
height: 50px;
}
</style>
<script>
function Surprise(){
alert("hello,我是惊喜")
}
</script>
</head>
<body>
<button class="text" onclick="Surprise()">点击有惊喜</button>
</body>
</html> 引入方式二：
外部引入：
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Surprise Page</title>
<style>
.text{
font-family: Arial, sans-serif;
text-align: center;
background-color: #c42929;
padding: 20px;
width: 300px;
height: 50px;
}
</style>
<script src="test.js/01.js" type="text/javascript"></script>
</head>
<body>
<button class="text" onclick="Surprise()">点击有惊喜</button>
</body>
</html>
js
复制代码
function Surprise(){
alert("hello,我是惊喜")
} 效果展示：
二：数据类型与运算符：
数据类型：
JS是弱类型的，在声明时，不指定具体类型，统统为var。可以用console.log()输出在控制台。
注意，可以用typeof来判断类型。如果未赋值，那就是undefined。
注意，在JS中有function类型，可以让一个变量等于一个函数。
引用数据类型：引用数据类型对象是Object类型，各种对象和数组在 JS中都是Object类型。
在JS中，如果给一个变量赋值为null，其数据类型是Object，可以通过typeof判断数据类型。
数组，在JS中，数组是这么定义的：var cities == ["北京","上海","深圳","武汉","西安","成都"];。
运算符：
其中需要注意的是 / 和 %：/0时，结果是Infinity ，而不是报错；
%在模0时，结果是NaN,意为not a number ，而不是报错；
三：流程控制语句：
IF结构：
if结构几乎和JAVA中的一样，需要注意的是：
if()中的非空字符串会被认为是true；
if()中的非0数会被认为是 true；
补充------prompt函数：
prompt函数是JavaScript中用于在浏览器中显示一个对话框，让用户输入信息或做出选择的函数。它通常用于与用户交互，例如要求用户输入用户名或密码，或者让用户确认一个操作。prompt函数接受一个字符串作为参数，该字符串会显示在对话框中，提示用户应该输入什么信息。用户可以在对话框中输入信息后点击确认或取消按钮来确定他们的选择。prompt函数会返回用户输入的信息作为字符串，或者返回null如果用户点击了取消按钮。以下是一个简单的示例：
javascript
复制代码
var name = prompt("请输入您的名字:");
if (name != null) {
alert("您好，" + name + "!");
} else {
alert("您取消了输入。");
} 在这个示例中，prompt函数会显示一个对话框，提示用户输入他们的名字。如果用户输入了名字并点击了确认按钮，那么会显示一个包含用户姓名的欢迎消息。如果用户点击了取消按钮，那么会显示一个消息表示用户取消了输入。需要注意的是，prompt函数通常用于简单的用户输入，如果需要更复杂的用户界面交互，可以考虑使用其他更强大的工具和技术。
------document.write()：
该方法可以直接在网页上输出内容，例如：
html
复制代码
<!DOCTYPE html>
<html>
<head>
<title>Print on Web Page</title>
</head>
<body>
<script>
document.write("Hello, World!");
</script>
</body>
</html> 注意，可以用这种方法和HTML一些方法配合使用。比如：document.write("<hr>");
在foreach中，循环遍历与JAVA有一定的区别：
js
复制代码
var cities =="北京","上海","深圳","武汉","西安","成都"?
document.write("<ul>")
for(var index in cities){
document.write("<li>"+cities[index]+"</li>")
}
document.write("</ul>") 函数：
注意，函数的参数列表中的参数因为都是弱类型，所以没有必要声明类型，直接就是变量即可。
其次，调用函数时,实参和形参的个数可以不一致。后面的参数无效。
js
复制代码
/*
语法1
function 函数名 (参数列表){函数体}
*/
function sum(a, b){
return a+b;
}
var result =sum(10,20);
console.log(result)
/*
语法2
var 函数名 = function (参数列表){函数体}
*/
var add = function(a, b){
return a+b;
}
var result = add(1,2);
console.log(result); 当然，函数也可以作为参数去传递：
四：JS的对象和JSON:
4.1.对象的创建：
（1）：new Object () 创建：
js
复制代码
var person =new ObLect();
// 给对象添加属性并赋值
person.name="张小明";
person.age=10;
person.foods=["苹果","橘子","香蕉","葡萄"];
// 给对象添加功能函数
person.eat= function (){
console.log(this.age+"岁的"+this.name+"喜欢吃:")
for(var i = 0;i<this.foods.length;i++){
console.log(this.foods[i])
}
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat(); (2)：{} 创建：
js
复制代码
var person ={
"name":"张小明",
"age":10,
"foods":["苹果","香蕉","橘子","葡萄"],
"eat":function (){
console.log(this.age+"岁的"+this.name+"喜欢吃:")
for(var i = 0;i<this.foods.length;i++){
console.log(this.foods[i])
}
}
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat(); 4.2.JSON:
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和编写。它基于JavaScript的对象字面量语法，但可以被多种编程语言使用。JSON格式由键/值对组成，数据以键值对的形式表示，键和值之间用冒号分隔，不同键值对之间用逗号分隔，整个数据用大括号{}包围。JSON格式常用于Web应用程序中，用于传输和存储数据。
js
复制代码
/* 定义一个JSON串 */
var personStr ='{"name":"张小明","age":20,"girlFriend":{"name":"铁铃","age":23},"foods":["苹果","香蕉","橘子","葡萄"],"pets":[{"petName":"大黄","petType":"dog"},{"peNtame":"小花","petType":"cat"}]}'
console.log(personStr)
console.log(typeof personStr)
/* 将一个JSON串转换为对象 */
var person =JSON.parse(personStr);
console.log(person)
console.log(typeof person)
/* 获取对象属性值 */
console.log(person.name)
console.log(person.age)
console.log(person.girlFriend.name)
console.log(person.foods[1])
console.log(person.pets[1].petName)
console.log(person.pets[1].petType)
Java
复制代码
/* 将对象转换成JSO0字符串 */
var personStr =JSON.stringify(person)
console.log(personStr)
console.log(typeof personStr) 举例第三方jar包导入后后端json和类的互化:
假设我们有一个第三方的JSON解析库，比如Gson，我们想要在后端将一个JSON字符串转换成一个Java对象。
首先，我们需要导入Gson库到我们的项目中。假设我们已经将gson-2.8.6.jar这个jar包导入到我们的项目中。
接下来，我们可以使用以下代码示例来实现JSON字符串和Java对象的互相转换：
java
复制代码
import com.google.gson.Gson;
public class Main {
public static void main(String[] args) {
// JSON字符串
String jsonString = "{\"name\":\"Alice\",\"age\":25}";
// 创建一个Gson对象
Gson gson = new Gson();
// 将JSON字符串转换成Java对象
Person person = gson.fromJson(jsonString, Person.class);
// 输出Java对象的属性
System.out.println("Name: " + person.getName());
System.out.println("Age: " + person.getAge());
// 创建一个新的Java对象
Person newPerson = new Person("Bob", 30);
// 将Java对象转换成JSON字符串
String newJsonString = gson.toJson(newPerson);
// 输出JSON字符串
System.out.println(newJsonString);
}
// 定义一个Person类
static class Person {
private String name;
private int age;
public Person(String name, int age) {
this.name = name;
this.age = age;
}
public String getName() {
return name;
}
public int getAge() {
return age;
}
}
} 在这个示例中，我们使用Gson库将一个JSON字符串{"name":"Alice","age":25}转换成一个Person对象，并将一个Person对象转换成JSON字符串{"name":"Bob","age":30}。
同理，举例Map_List_Array与json的转化:
假设我们有一个第三方的JSON解析库，比如Gson，我们想要在后端将一个Map、List、Array对象转换成JSON字符串，或者将JSON字符串转换成Map、List、Array对象。
首先，我们需要导入Gson库到我们的项目中。假设我们已经将gson-2.8.6.jar这个jar包导入到我们的项目中。
接下来，我们可以使用以下代码示例来实现Map、List、Array对象和JSON字符串的互相转换：
java
复制代码
import com.google.gson.Gson;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class Main {
public static void main(String[] args) {
// 创建一个Map对象
Map<String, Object> map = new HashMap<>();
map.put("name", "Alice");
map.put("age", 25);
// 创建一个List对象
List<String> list = new ArrayList<>();
list.add("apple");
list.add("banana");
list.add("cherry");
// 创建一个Array对象
String[] array = {"red", "green", "blue"};
// 创建一个Gson对象
Gson gson = new Gson();
// 将Map对象转换成JSON字符串
String mapJsonString = gson.toJson(map);
System.out.println("Map JSON: " + mapJsonString);
// 将List对象转换成JSON字符串
String listJsonString = gson.toJson(list);
System.out.println("List JSON: " + listJsonString);
// 将Array对象转换成JSON字符串
String arrayJsonString = gson.toJson(array);
System.out.println("Array JSON: " + arrayJsonString);
// 将JSON字符串转换成Map对象
Map<String, Object> newMap = gson.fromJson(mapJsonString, Map.class);
System.out.println("New Map: " + newMap);
// 将JSON字符串转换成List对象
List<String> newList = gson.fromJson(listJsonString, List.class);
System.out.println("New List: " + newList);
// 将JSON字符串转换成Array对象
String[] newArray = gson.fromJson(arrayJsonString, String[].class);
System.out.println("New Array: " + newArray);
}
} 在这个示例中，我们使用Gson库将一个Map对象、List对象、Array对象转换成JSON字符串，并将JSON字符串转换成Map对象、List对象、Array对象。
4.3.常见对象：
4.3.1.数组：
创建数组的四种方式
new Array() 创建空数组
new Array(5) 创建数组时给定长度
new Array(ele1,ele2,ele3,... ... ,elen); 创建数组时指定元素值
[ele1,ele2,ele3,... ... ,elen]; 相当于第三种语法的简写
4.3.2 Boolean对象
4.3.3 Date对象
4.3.4 Math
方法
描述
abs(x) 返回 x 的绝对值。
acos(x) 返回 x 的反余弦值。
asin(x) 返回 x 的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 Ex 的指数。
floor(x) 对 x 进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y,z,...,n) 返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n) 返回 x,y,z,...,n中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 四舍五入。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
tanh(x) 返回一个数的双曲正切函数值。
trunc(x) 将数字的小数部分去掉，只保留整数部分。
4.3.5 Number
4.3.6 String
五：事件：
5.1.什么是事件
HTML 事件可以是浏览器行为，也可以是用户行为。 当这些一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生.JS的事件驱动指的就是行为触发代码运行的这种特点。
5.2 常见事件
鼠标事件
键盘事件
表单事件
5.3.事件的绑定
（1）：通过属性绑定：
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<script>
function changeText() {
alert("鼠标点击了按钮");
}
</script>
</head>
<body>
<button onclick="changeText()">点击我!</button>
</body>
</html>
通过事件属性绑定函数,在行为发生时会自动执行函数
一个事件可以同时绑定多个函数
一个元素可以同时绑定多个事件
方法中可以传入 this对象,代表当前元素
效果：
补充：
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confirmation and Prevent Default Example</title>
</head>
<body>
<form id="myForm" onsubmit="return confirmSubmit()">
<input type="text" name="username" placeholder="Enter your username">
<button type="submit">Submit</button>
</form>
<script>
function confirmSubmit() {
if (confirm('Are you sure you want to submit this form?')) {
alert('Form submitted successfully!');
return true; // Allow form submission
} else {
alert('Form submission canceled.');
return false; // Prevent form submission
}
}
</script>
</body>
</html> 效果展示：
点击取消或者确认会弹出不同的弹窗。
（2）：DOM触发：
注意，必须放在操作元素的后面。
当然，我们可以用下面的操作让它也可以写在前面：
补充：onload：
onload方法是一个事件处理器，用于在页面或某个元素加载完成后执行特定的代码。在JavaScript中，可以将onload方法添加到window对象或者某个特定的元素上，以便在页面或元素加载完成后执行相应的操作。
例如，可以使用以下代码将一个函数绑定到页面加载完成事件：
js
复制代码
window.onload = function() {
// 在页面加载完成后执行的代码
}; 类似地，也可以将onload方法添加到某个元素上，以在该元素加载完成后执行相应的操作：
js
复制代码
var element = document.getElementById("myElement");
element.onload = function() {
// 在元素加载完成后执行的代码
}; 通过使用onload方法，可以确保在页面或元素加载完成后再执行相关的操作，以避免出现因为页面或元素未完全加载而导致的错误。
这样，就可以声明在前面。或者用下面的方式：
html
复制代码
<!DOCTYPE html>
<html>
<head>
<title>DOM Programming with Window Onload</title>
<script>
window.onload = function() {
var heading = document.createElement("h1");
heading.textContent = "Dynamic Heading";
document.body.appendChild(heading);
var paragraph = document.createElement("p");
paragraph.textContent = "This paragraph was added dynamically using DOM programming.";
document.body.appendChild(paragraph);
};
</script>
</head>
<body>
<h1>DOM Programming with Window Onload</h1>
<p>This is an example of using DOM programming with the window.onload event.</p>
</body>
</html> 在实际应用中，我们还可以通过DOM来触发其它的事件：
六：BOM编程：
6.1.什么是BOM编程：
BOM是Browser Object Model的简写，即浏览器对象模型。
BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法(通过window对象及属性的一系列方法 控制浏览器行为的一种编程)
BOM没有统一的标准(每种客户端都可以自定标准)。
BOM编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的API操作组件行为的一种编程
BOM编程的对象结构如下
window 顶级对象,代表整个浏览器窗口
location对象 window对象的属性之一,代表浏览器的地址栏
history对象 window对象的属性之一,代表浏览器的访问历史
screen对象 window对象的属性之一,代表屏幕
navigator对象 window对象的属性之一,代表浏览器软件本身
document对象 window对象的属性之一,代表浏览器窗口目前解析的html文档
console对象 window对象的属性之一,代表浏览器开发者工具的控制台
localStorage对象 window对象的属性之一,代表浏览器的本地数据持久化存储
sessionStorage对象 window对象的属性之一,代表浏览器的本地数据会话级存储
6.2 window对象的常见属性(了解)
6.3 window对象的常见方法(了解)
我们在实际应用时，有的时候调用window的方法，比如：window.alert();这个window可以省略，而这个window对象是浏览器自带的一种对象。
代码举例：
javascript
复制代码
// 获取窗口的宽度和高度
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// 获取窗口的位置
const windowX = window.screenX;
const windowY = window.screenY;
// 打开一个新窗口
window.open('https://www.example.com', '_blank');
// 关闭当前窗口
window.close();
// 获取窗口的历史记录
const historyLength = window.history.length;
// 跳转到指定的URL
window.location.href = 'https://www.example.com';
// 显示一个警告框
window.alert('这是一个警告框');
// 显示一个确认框
const result = window.confirm('确定要执行操作吗？');
if (result) {
// 执行操作
}
// 显示一个提示框
const userInput = window.prompt('请输入您的姓名：');
console.log(userInput);
js
复制代码
// 获取窗口的历史记录对象
const historyObject = window.history;
// 获取历史记录的长度
const historyLength = historyObject.length;
// 在历史记录中向前或向后跳转
historyObject.forward();
historyObject.back();
// 在历史记录中向前或向后跳转指定步数
historyObject.go(-2); // 向后跳转两步
historyObject.go(3); // 向前跳转三步
// 替换当前历史记录条目
historyObject.replaceState({ data: 'new state' }, 'New Title', 'new-url.html'); 七：DOM编程：
7.1.DOM简介：
先来看看BOM编程：
简单来说:DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.
document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。
根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。
假如有以下代码：
那么它的DOM树如下：
在实际应用中，我们无法直接改变HTML文件，但是，我们可以使用DOM编程，DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程。
操作步骤如下：
7.2.获取操作元素：
7.2.1 在整个文档范围内查找元素结点
功能
API
返回值
根据id值查询
document.getElementById("id值")
一个具体的元素节
根据标签名查询
document.getElementsByTagName("标签名")
元素节点数组
根据name属性值查询
document.getElementsByName("name值")
元素节点数组
根据类名查询
document.getElementsByClassName("类名")
元素节点数组
7.2.2 在具体元素节点范围内查找子节点
功能
API
返回值
查找子标签
element.children
返回子标签数组
查找第一个子标签
element.firstElementChild
标签对象
查找最后一个子标签
element.lastElementChild
节点对象
7.2.3 查找指定子元素节点的父节点
功能
API
返回值
查找指定元素节点的父标签
element.parentElement
标签对象
7.2.4 查找指定元素节点的兄弟节点
功能
API
返回值
查找前一个兄弟标签
node.previousElementSibling
标签对象
查找后一个兄弟标签
node.nextElementSibling
标签对象
html
复制代码
<!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>
/*
1 获得document dom树
window.document
2 从document中获取要操作的元素
1. 直接获取
var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素
var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素
var els =document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素
var els =document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素
2. 间接获取
var cs=div01.children // 通过父元素获取全部的子元素
var firstChild =div01.firstElementChild // 通过父元素获取第一个子元素
var lastChild = div01.lastElementChild // 通过父元素获取最后一个子元素
var parent = pinput.parentElement // 通过子元素获取父元素
var pElement = pinput.previousElementSibling // 获取前面的第一个元素
var nElement = pinput.nextElementSibling // 获取后面的第一个元素
3 对元素进行操作
1. 操作元素的属性
2. 操作元素的样式
3. 操作元素的文本
4. 增删元素
*/
function fun1(){
//1 获得document
//2 通过document获得元素
var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素
console.log(el1)
}
function fun2(){
var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素
for(var i = 0 ;i<els.length;i++){
console.log(els[i])
}
}
function fun3(){
var els =document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素
console.log(els)
for(var i =0;i< els.length;i++){
console.log(els[i])
}
}
function fun4(){
var els =document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素
for(var i =0;i< els.length;i++){
console.log(els[i])
}
}
function fun5(){
// 先获取父元素
var div01 = document.getElementById("div01")
// 获取所有子元素
var cs=div01.children // 通过父元素获取全部的子元素
for(var i =0;i< cs.length;i++){
console.log(cs[i])
}
console.log(div01.firstElementChild) // 通过父元素获取第一个子元素
console.log(div01.lastElementChild) // 通过父元素获取最后一个子元素
}
function fun6(){
// 获取子元素
var pinput =document.getElementById("password")
console.log(pinput.parentElement) // 通过子元素获取父元素
}
function fun7(){
// 获取子元素
var pinput =document.getElementById("password")
console.log(pinput.previousElementSibling) // 获取前面的第一个元素
console.log(pinput.nextElementSibling) // 获取后面的第一个元素
}
</script>
</head>
<body>
<div id="div01">
<input type="text" class="a" id="username" name="aaa"/>
<input type="text" class="b" id="password" name="aaa"/>
<input type="text" class="a" id="email"/>
<input type="text" class="b" id="address"/>
</div>
<input type="text" class="a"/><br>
<hr>
<input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05"/>
<input type="button" value="通过子元素获取父元素" onclick="fun6()" id="btn06"/>
<input type="button" value="通过当前元素获取兄弟元素" onclick="fun7()" id="btn07"/>
<hr>
<input type="button" value="根据id获取指定元素" onclick="fun1()" id="btn01"/>
<input type="button" value="根据标签名获取多个元素" onclick="fun2()" id="btn02"/>
<input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03"/>
<input type="button" value="根据class属性值获得多个元素" onclick="fun4()" id="btn04"/>
</body>
</html> 7.3.操作元素：
7.3.1 属性操作
需求
操作方式
读取属性值
元素对象.属性名
修改属性值
元素对象.属性名=新的属性值
7.3.2 内部文本操作
需求
操作方式
获取或者设置标签体的文本内容
element.innerText
获取或者设置标签体的内容
element.innerHTML
html
复制代码
<!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>
/*
1 获得document dom树
window.document
2 从document中获取要操作的元素
1. 直接获取
var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素
var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素
var els =document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素
var els =document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素
2. 间接获取
var cs=div01.children // 通过父元素获取全部的子元素
var firstChild =div01.firstElementChild // 通过父元素获取第一个子元素
var lastChild = div01.lastElementChild // 通过父元素获取最后一个子元素
var parent = pinput.parentElement // 通过子元素获取父元素
var pElement = pinput.previousElementSibling // 获取前面的第一个元素
var nElement = pinput.nextElementSibling // 获取后面的第一个元素
3 对元素进行操作
1. 操作元素的属性 元素名.属性名=""
2. 操作元素的样式 元素名.style.样式名="" 样式名"-" 要进行驼峰转换
3. 操作元素的文本 元素名.innerText 只识别文本
元素名.innerHTML 同时可以识别html代码
4. 增删元素
*/
function changeAttribute(){
var in1 =document.getElementById("in1")
// 语法 元素.属性名=""
// 获得属性值
console.log(in1.type)
console.log(in1.value)
// 修改属性值
in1.type="button"
in1.value="嗨"
}
function changeStyle(){
var in1 =document.getElementById("in1")
// 语法 元素.style.样式名="" 原始样式名中的"-"符号 要转换驼峰式 background-color > backgroundColor
in1.style.color="green"
in1.style.borderRadius="5px"
}
function changeText(){
var div01 =document.getElementById("div01")
/*
语法 元素名.innerText 只识别文本
元素名.innerHTML 同时可以识别html代码
*/
console.log(div01.innerText)
div01.innerHTML="<h1>嗨</h1>"
}
</script>
<style>
#in1{
color: red;
}
</style>
</head>
<body>
<input id="in1" type="text" value="hello">
<div id="div01">
hello
</div>
<hr>
<button onclick="changeAttribute()">操作属性</button>
<button onclick="changeStyle()">操作样式</button>
<button onclick="changeText()">操作文本</button>
</body>
</html> 7.4 增删元素
7.4.1 对页面的元素进行增删操作
API
功能
document.createElement("标签名")
创建元素节点并返回，但不会自动添加到文档中
document.createTextNode("文本值")
创建文本节点并返回，但不会自动添加到文档中
element.appendChild(ele)
将ele添加到element所有子节点后面
parentEle.insertBefore(newEle,targetEle)
将newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle)
用新节点替换原有的旧子节点
element.remove()
删除某个标签
html
复制代码
<!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>
/*
1 获得document dom树
window.document
2 从document中获取要操作的元素
1. 直接获取
var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素
var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素
var els =document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素
var els =document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素
2. 间接获取
var cs=div01.children // 通过父元素获取全部的子元素
var firstChild =div01.firstElementChild // 通过父元素获取第一个子元素
var lastChild = div01.lastElementChild // 通过父元素获取最后一个子元素
var parent = pinput.parentElement // 通过子元素获取父元素
var pElement = pinput.previousElementSibling // 获取前面的第一个元素
var nElement = pinput.nextElementSibling // 获取后面的第一个元素
3 对元素进行操作
1. 操作元素的属性 元素名.属性名=""
2. 操作元素的样式 元素名.style.样式名="" 样式名"-" 要进行驼峰转换
3. 操作元素的文本 元素名.innerText 只识别文本
元素名.innerHTML 同时可以识别html代码
4. 增删元素
var element =document.createElement("元素名") // 创建元素
父元素.appendChild(子元素) // 在父元素中追加子元素
父元素.insertBefore(新元素,参照元素) // 在某个元素前增加元素
父元素.replaceChild(新元素,被替换的元素) // 用新的元素替换某个子子元素
元素.remove() // 删除当前元素
*/
function addCs(){
// 创建一个新的元素
// 创建元素
var csli =document.createElement("li") // <li></li>
// 设置子元素的属性和文本 <li id="cs">长沙</li>
csli.id="cs"
csli.innerText="长沙"
// 将子元素放入父元素中
var cityul =document.getElementById("city")
// 在父元素中追加子元素
cityul.appendChild(csli)
}
function addCsBeforeSz(){
// 创建一个新的元素
// 创建元素
var csli =document.createElement("li") // <li></li>
// 设置子元素的属性和文本 <li id="cs">长沙</li>
csli.id="cs"
csli.innerText="长沙"
// 将子元素放入父元素中
var cityul =document.getElementById("city")
// 在父元素中追加子元素
//cityul.insertBefore(新元素,参照元素)
var szli =document.getElementById("sz")
cityul.insertBefore(csli,szli)
}
function replaceSz(){
// 创建一个新的元素
// 创建元素
var csli =document.createElement("li") // <li></li>
// 设置子元素的属性和文本 <li id="cs">长沙</li>
csli.id="cs"
csli.innerText="长沙"
// 将子元素放入父元素中
var cityul =document.getElementById("city")
// 在父元素中追加子元素
//cityul.replaceChild(新元素,被替换的元素)
var szli =document.getElementById("sz")
cityul.replaceChild(csli,szli)
}
function removeSz(){
var szli =document.getElementById("sz")
// 哪个元素调用了remove该元素就会从dom树中移除
szli.remove()
}
function clearCity(){
var cityul =document.getElementById("city")
/* var fc =cityul.firstChild
while(fc != null ){
fc.remove()
fc =cityul.firstChild
} */
cityul.innerHTML=""
//cityul.remove()
}
</script>
</head>
<body>
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="sz">深圳</li>
<li id="gz">广州</li>
</ul>
<hr>
<!-- 目标1 在城市列表的最后添加一个子标签 <li id="cs">长沙</li> -->
<button onclick="addCs()">增加长沙</button>
<!-- 目标2 在城市列表的深圳前添加一个子标签 <li id="cs">长沙</li> -->
<button onclick="addCsBeforeSz()">在深圳前插入长沙</button>
<!-- 目标3 将城市列表的深圳替换为 <li id="cs">长沙</li> -->
<button onclick="replaceSz()">替换深圳</button>
<!-- 目标4 将城市列表删除深圳 -->
<button onclick="removeSz()">删除深圳</button>
<!-- 目标5 清空城市列表 -->
<button onclick="clearCity()">清空</button>
</body>
</html> 八：正则表达式：
8.1 正则表达式简介
正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
js
复制代码
var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers; 8.2.正则表达式的用法
修饰符
修饰符
描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m
执行多行匹配。
方括号
表达式
描述
[abc]
查找方括号之间的任何字符。
[^abc]
查找任何不在方括号之间的字符。
[0-9]
查找任何从 0 至 9 的数字。
[a-z]
查找任何从小写 a 到小写 z 的字符。
[A-Z]
查找任何从大写 A 到大写 Z 的字符。
[A-z]
查找任何从大写 A 到小写 z 的字符。
[adgk]
查找给定集合内的任何字符。
[^adgk]
查找给定集合外的任何字符。
(red|blue|green)
查找任何指定的选项。
元字符
元字符
描述
. 查找单个字符，除了换行和行结束符。
\w 查找数字、字母及下划线。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0
查找 NULL 字符。
\n 查找换行符。
\f
查找换页符。
\r
查找回车符。
\t
查找制表符。
\v
查找垂直制表符。
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
量词
量词
描述
n+ 匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。
n* 匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。
n? 匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。
n{X} 匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。
n{X,} X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。
n{X,Y} X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。
RegExp对象方法
方法
描述
compile 在 1.5 版本中已废弃。 编译正则表达式。
exec 检索字符串中指定的值。返回找到的值，并确定其位置。
test 检索字符串中指定的值。返回 true 或 false。
toString 返回正则表达式的字符串。
支持正则的String的方法
8.3.常用正则表达式
需求
正则表达式
用户名
/ ^ [a-zA-Z ][a-zA-Z-0-9]{5,9}$/
密码
/^ [a-zA-Z0-9 _-@#& *]{6,12}$/
前后空格
/^\s+|\s+$/g
电子邮箱
/^ [a-zA-Z0-9 _.-]+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/
九：综合练习：
9.1.登录页面：
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ht{
text-align: center;
color: cadetblue;
font-family: 幼圆;
}
.tab{
width: 500px;
border: 5px solid cadetblue;
margin: 0px auto;
border-radius: 5px;
font-family: 幼圆;
}
.ltr td{
border: 1px solid powderblue;
}
.ipt{
border: 0px;
width: 50%;
}
.btn1{
border: 2px solid powderblue;
border-radius: 4px;
width:60px;
background-color: antiquewhite;
}
#usernameMsg , #userPwdMsg {
color: rgb(230, 87, 51);
}
.buttonContainer{
text-align: center;
}
</style>
<script>
// 检验用户名格式是否合法的函数
function checkUsername(){
// 定义正则表示字符串的规则
var usernameReg= /^[a-zA-Z0-9]{5,10}$/
// 获得用户在页面上输入的信息
var usernameInput =document.getElementById("usernameInput")
var username = usernameInput.value
// 获得格式提示的框
var usernameMsg =document.getElementById("usernameMsg")
// 格式有误时,返回false,在页面上提示
if(!usernameReg.test(username)){
usernameMsg.innerText="用户名格式有误"
return false
}
// 格式OK,返回true 在页面上提示OK
usernameMsg.innerText="OK"
return true
}
// 检验密码格式是否合法的函数
function checkUserPwd(){
// 定义正则表示字符串的规则
var userPwdReg= /^[0-9]{6}$/
// 获得用户在页面上输入的信息
var userPwdInput =document.getElementById("userPwdInput")
var userPwd = userPwdInput.value
// 获得格式提示的框
var userPwdMsg =document.getElementById("userPwdMsg")
// 格式有误时,返回false,在页面上提示
if(!userPwdReg.test(userPwd)){
userPwdMsg.innerText="密码必须是6位数字"
return false
}
// 格式OK,返回true 在页面上提示OK
userPwdMsg.innerText="OK"
return true
}
// 表单在提交时,校验用户名和密码格式,格式OK才会提交
function checkForm(){
var flag1 =checkUsername()
var flag2 =checkUserPwd()
return flag1&&flag2
}
</script>
</head>
<body>
<h1 class="ht">欢迎使用日程管理系统</h1>
<h3 class="ht">请登录</h3>
<form method="post" action="/user/login" onsubmit="return checkForm()">
<table class="tab" cellspacing="0px">
<tr class="ltr">
<td>请输入账号</td>
<td>
<input class="ipt" type="text" id="usernameInput" name="username" onblur="checkUsername()">
<span id="usernameMsg"></span>
</td>
</tr>
<tr class="ltr">
<td>请输入密码</td>
<td>
<input class="ipt" type="password" id="userPwdInput" name="userPwd" onblur="checkUserPwd()">
<span id="userPwdMsg"></span>
</td>
</tr>
<tr class="ltr">
<td colspan="2" class="buttonContainer">
<input class="btn1" type="submit" value="登录">
<input class="btn1" type="reset" value="重置">
<button class="btn1"><a href="regist.html">去注册</a></button>
</td>
</tr>
</table>
</form>
</body>
</html> 9.2.注册页面：
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ht{
text-align: center;
color: cadetblue;
font-family: 幼圆;
}
.tab{
width: 500px;
border: 5px solid cadetblue;
margin: 0px auto;
border-radius: 5px;
font-family: 幼圆;
}
.ltr td{
border: 1px solid powderblue;
}
.ipt{
border: 0px;
width: 50%;
}
.btn1{
border: 2px solid powderblue;
border-radius: 4px;
width:60px;
background-color: antiquewhite;
}
.msg {
color: gold;
}
.buttonContainer{
text-align: center;
}
</style>
<script>
function checkUsername(){
var usernameReg = /^[a-zA-Z0-9]{5,10}$/
var usernameInput = document.getElementById("usernameInput")
var username = usernameInput.value
var usernameMsg = document.getElementById("usernameMsg")
if(!usernameReg.test(username)){
usernameMsg.innerText="格式有误"
return false
}
usernameMsg.innerText="OK"
return true
}
function checkUserPwd(){
var userPwdReg = /^\d{6}$/
var userPwdInput = document.getElementById("userPwdInput")
var userPwd = userPwdInput.value
var userPwdMsg = document.getElementById("userPwdMsg")
if(!userPwdReg.test(userPwd)){
userPwdMsg.innerText="格式有误"
return false
}
userPwdMsg.innerText="OK"
return true
}
function checkReUserPwd(){
var userPwdReg = /^\d{6}$/
// 再次输入的密码的格式
var reUserPwdInput = document.getElementById("reUserPwdInput")
var reUserPwd = reUserPwdInput.value
var reUserPwdMsg = document.getElementById("reUserPwdMsg")
if(!userPwdReg.test(reUserPwd)){
reUserPwdMsg.innerText="格式有误"
return false
}
// 获得上次密码,对比两次密码是否一致
var userPwdInput = document.getElementById("userPwdInput")
var userPwd = userPwdInput.value
if(reUserPwd != userPwd){
reUserPwdMsg.innerText="两次密码不一致"
return false
}
reUserPwdMsg.innerText="OK"
return true
}
function checkForm(){
var flag1 = checkUsername()
var flag2 = checkUserPwd()
var flag3 = checkReUserPwd()
return flag1 && flag2 && flag3
}
</script>
</head>
<body>
<h1 class="ht">欢迎使用日程管理系统</h1>
<h3 class="ht">请注册</h3>
<form method="post" action="/user/regist" onsubmit="return checkForm()">
<table class="tab" cellspacing="0px">
<tr class="ltr">
<td>请输入账号</td>
<td>
<input class="ipt" id="usernameInput" type="text" name="username" onblur="checkUsername()">
<span id="usernameMsg" class="msg"></span>
</td>
</tr>
<tr class="ltr">
<td>请输入密码</td>
<td>
<input class="ipt" id="userPwdInput" type="password" name="userPwd" onblur="checkUserPwd()">
<span id="userPwdMsg" class="msg"></span>
</td>
</tr>
<tr class="ltr">
<td>确认密码</td>
<td>
<input class="ipt" id="reUserPwdInput" type="password" onblur="checkReUserPwd()">
<span id="reUserPwdMsg" class="msg"></span>
</td>
</tr>
<tr class="ltr">
<td colspan="2" class="buttonContainer">
<input class="btn1" type="submit" value="注册">
<input class="btn1" type="reset" value="重置">
<button class="btn1"><a href="login.html">去登录</a></button>
</td>
</tr>
</table>
</form>
</body>
</html> 
