JAVAWeb之javascript学习
1.js引入方式
1. 内嵌式：在head中，通过一对script标签引入JS代码；cript代码放置位置有一定的随意性，一般放在head标签中；2.引入外部js文件 在head中，通过一对script标签引入外部JS代码；注意：1.一个html文件中可以有多个script标签2.一对script标签不能在引入外部js文件同时定义内部脚本3.script标签如果用于外部js文件，中间不要有任何字符包括空格和换行
HTML文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>01.js引入方式</title><style>.嘻嘻 {width: 150px;height: 50px;font-size: 25px;font-family: 楷体;background-color: violet;color: blueviolet;border: 5px solid deepskyblue;border-radius: 7px;}</style><!--1. 内嵌式：在head中，通过一对script标签引入JS代码；cript代码放置位置有一定的随意性，一般放在head标签中；2.引入外部js文件 在head中，通过一对script标签引入外部JS代码；注意：1.一个html文件中可以有多个script标签2.一对script标签不能在引入外部js文件同时定义内部脚本3.script标签如果用于外部js文件，中间不要有任何字符包括空格和换行--><!-- 内部js文件--><script>/** 1. js申明函数 function surprised(){}* 2.函数和单击按钮绑定* 3.弹窗* */function surprised() {//弹窗提示alert("hello 我是内嵌式惊喜 ")}</script><!-- 引入外部js文件--><script src="js/js外部文件.js" type="text/javascript"></script>
</head>
<body><button class="嘻嘻" onclick="surprised1()">点我有惊喜</button><button class="嘻嘻" onclick="surprised()">点我有惊喜</button>
</body>
</html>
js文件
function surprised1() {//弹窗提示alert("hello 我是引入外部js文件的惊喜 ")
}
2.js变量和数据类型
1.js弱类型变量,没有变量类型，是变量不需要声明变量类型，赋值确定类型，js声明变量可以统一声明成varJS的数据类型> 数值类型数值类型统一为 number,不区分整数和浮点数> 字符串类型+ 字符串类型为 string 和JAVA中的String相似,JS中不严格区分单双引号,都可以用于表示字符串> 布尔类型+ 布尔类型为boolean 和Java中的boolean相似,但是在JS的if语句中,非空字符串会被转换为'真',非零数字也会被认为是'真'> 引用数据类型+ 引用数据类型对象是Object类型, 各种对象和数组在JS中都是Object类型> function类型+ JS中的各种函数属于function数据类型> 命名未赋值+ js为弱类型语言,统一使用 var 声明对象和变量,在赋值时才确定真正的数据类型,变量如果只声明没有赋值的话,数据类型为undefined> 赋予NULL值+ 在JS中,如果给一个变量赋值为null,其数据类型是Object, 可以通过typeof关键字判断数据类型2 JS的变量> JS中的变量具有如下特征1 弱类型变量,可以统一声明成var2 var声明的变量可以再次声明3 变量可以使用不同的数据类型多次赋值4 JS的语句可以以; 结尾,也可以不用;结尾5 变量标识符严格区分大小写6 标识符的命名规则参照JAVA7 如果使用了 一个没有声明的变量,那么运行时会报uncaught ReferenceError: *** is not defined at index.html:行号:列号8 如果一个变量只声明,没赋值,那么值是undefined
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02.js变量和数据类型</title><script>//数值类型var i=10//numberconsole.log(i)//10console.log(typeof i)//number//字符串类型var str="hello"//stringconsole.log(str)//helloconsole.log(typeof str)//string//引用数据类型var i=new Object()console.log(i)//{}console.log(typeof i)//object//function类型function fun1(){}console.log(fun1())//undefinedconsole.log(typeof fun1())//undefined//命名未赋值var yconsole.log(y)//undefinedconsole.log(typeof y)//undefined//赋予NULL值var x=nullconsole.log(x)//nullconsole.log(typeof x)//object//JS中的变量具有如下特征代码var i=10;var str="hello"var i=true;console.log(i)//var声明的变量可以再次声明var Iconsole.log(I)//区分大小写</script>
</head>
<body></body>
</html>
3 JS的运算符
> 算数运算符 + - * / %其中需要注意的是 / 和 %/ 在除0时,结果是Infinity ,而不是报错%在模0时,结果是NaN,意思为 not a number ,而不是报错> 复合算数运算符 ++ -- += -= *= /= %=符合算数运算符基本和JAVA一致,同样需要注意 /=和%=在/=0时,结果是Infinity ,而不是报错在%=0时,结果是NaN,意思为 not a number ,而不是报错> 关系运算符 > < >= <= == === !=需要注意的是 == 和 === 差别== 符号,如果两端的数据类型不一致,会尝试将两端的数据转换成number,再对比number大小'123' 这种字符串可以转换成数字true会被转换成1 false会被转换成0=== 符号,如果两端数据类型不一致,直接返回false,数据类型一致在比较是否相同> 逻辑运算符 || &&几乎和JAVA中的一样,需要注意的是,这里直接就是短路的逻辑运算符,单个的 | 和 & 以及 ^ 是位运算符> 条件运算符 条件? 值1 : 值2几乎和JAVA中的一样> 位运算符 | & ^ << >> >>>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>03.运算符</title><script>//算数运算符console.log(10/2)//5console.log(10/4)//2.5console.log(10/0)//Infinityconsole.log(10%0)//NaN//复合算数运算符var i=10console.log(i/=0)//Infinityconsole.log(i%=0)//NaN//关系运算符/*== 符号,如果两端的数据类型不一致,会尝试将两端的数据转换成number,再对比number大小true会被转换成1 false会被转换成0*/console.log(1 == 1)//trueconsole.log(1 == true)//trueconsole.log(1 == '1')//true//****************************/*=== 符号,如果两端数据类型不一致,直接返回false,数据类型一致在比较是否相同*/console.log(1 == false)//falseconsole.log(1 === true)//falseconsole.log(1 === '1')//false</script>
</head>
<body>
</body>
</html>
4.JS分支结构
> if结构这里的if结构几乎和JAVA中的一样,需要注意的是if()中的非空字符串会被认为是trueif()中的非空对象会被认为是trueif()中的非零数字会被认为是true> switch结构几乎和JAVA的语法一致
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>04.分支结构</title><script>//if结构if('false'){// 非空字符串 if判断为trueconsole.log(true)}else{console.log(false)}if(''){// 长度为0字符串 if判断为falseconsole.log(true)}else{console.log(false)}if(1){// 非零数字 if判断为trueconsole.log(true)}else{console.log(false)}if(0){console.log(true)}else{console.log(false)}//*******************************************************//switch结构//prompt：返回结果是在窗口输入在值，string类型var monthStr=prompt("请输入月份","例如:10 ");//字符串转换为整数var month= Number.parseInt(monthStr)switch(month){case 3:case 4:case 5:console.log("春季");break;case 6:case 7:case 8:console.log("夏季");break;case 9:case 10:case 11:console.log("秋季");break;case 1:case 2:case 12:console.log("冬季");break;default :console.log("月份有误")}</script>
</head>
<body></body>
</html> 
5.循环结构
> while结构几乎和JAVA一致> for循环几乎和JAVA一致> foreach循环迭代数组时,和java不一样括号中的临时变量表示的是元素的索引,不是元素的值,()中也不在使用: 分隔,而是使用 in 关键字
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>05.循环结构</title>
</head><script>/*> while结构几乎和JAVA一致> for循环几乎和JAVA一致> foreach循环迭代数组时,和java不一样括号中的临时变量表示的是元素的索引,不是元素的值,()中也不在使用: 分隔,而是使用 in 关键字*///while结构document.write("<h1>while结构打印99 乘法表</h1>")var i=1while(i<=9){var j=1while(j<=i){document.write(i+"*"+j+"="+i*j+"  ")// :空格j++}document.write("<hr>")i++}document.write("<br><hr>")document.write("<h1>for循环打印99 乘法表</h1>")//for循环for (let j = 1; j <=9 ; j++) {for (let k = 1; k <=j ; k++) {document.write(j+"*"+k+"="+j*k+"  ")// :空格}document.write("<hr>")}//foreach循环//1.for循环遍历document.write("<h1>for循环遍历</h1>")var array=["孙俊祥","张军","上海","北京"]document.write("<ul>")for (var index = 0; index <array.length ; index++) {document.write("<li>"+array[index]+"</li>")}document.write("</ul>")//2.foreach循环遍历document.write("<h1>foreach循环遍历</h1>")var array=["孙俊祥","张军","上海","北京"]document.write("<ul>")for (var index in array) {document.write("<li>"+array[index]+"</li>")}document.write("</ul>")</script>
<body></body>
</html>
6.js函数
函数说明函数没有权限控制符不用声明函数的返回值类型,需要返回在函数体中直接return即可,也无需void关键字参数列表中,无需数据类型调用函数时,实参和形参的个数可以不一致声明函数时需要用function关键字J函数没有异常列表
语法1
function 函数名 (参数列表){函数体}
语法2
var 函数名 = function (参数列表){函数体}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>06.js函数</title><script>/*函数说明函数没有权限控制符不用声明函数的返回值类型,需要返回在函数体中直接return即可,也无需void关键字参数列表中,无需数据类型调用函数时,实参和形参的个数可以不一致声明函数时需要用function关键字J函数没有异常列表*//*语法1function 函数名 (参数列表){函数体}语法2var 函数名 = function (参数列表){函数体}*///语法1function sun(a, b) {return a + b;}var result = sun(12, 99)document.write(result)console.log(result)//*********************************************//语法2var suM1=function (x, y){return x*y;}document.write("<hr>"+suM1(20,30))//600console.log(suM1(30,50))//1500</script></head>
<body></body>
</html> 
7.js对象
JS声明对象的语法> 语法1 通过new Object()直接创建对象> 语法2 通过 {}形式创建对象语法为 var person ={"属性名":"属性值","属性名","属性值","函数名":函数}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>07.js对象</title><script>/*JS声明对象的语法> 语法1 通过new Object()直接创建对象> 语法2 通过 {}形式创建对象语法为 var person ={"属性名":"属性值","属性名","属性值","函数名":函数}*///语法1var Person = new Object();//对象属性Person.name = "孙俊祥";Person.age = 19;Person.sex = '男';Person.play = ["原神", "崩铁", "崩坏3", "鸣潮"];//对象方法Person.plays = function () {document.write("<hr><h1>这是语法1</h1><hr>年龄为" + this.age + "岁" + "的" + this.name + "；而且性别是" + this.sex + "孩子的" + this.name + "喜欢玩:")for (var index in this.play) {document.write("<hr>" + this.play[index])}/*for (var i = 0; i < this.play.length; i++) {document.write("<hr>"+this.play[i])}for (let index1 = 0; index1 <this.play.length ; index1++) {document.write("<hr>"+this.play[index1])}*/}//获得对象属性值/*document.write(Person.name)document.write(Person.age)document.write(Person.sex)*///调用对象方法Person.plays();/*var person =new Object();// 给对象添加属性并赋值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();//语法2var person1 ={"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(person1.name)console.log(person1.age)//调用对象方法person1.eat();*/var Person1 = {//对象属性"name" :"孙俊祥","age" : 19,"sex" : '男',"play1" : ["原神", "崩铁", "崩坏3", "鸣潮"],//对象方法plays1 :function () {document.write("<hr><h1>这是语法2</h1><hr>年龄为" + this.age + "岁" + "的" + this.name + "；而且性别是" + this.sex + "孩子的" + this.name + "喜欢玩:")for (var index in this.play1) {document.write("<hr>" + this.play1[index])}/*for (var i = 0; i < this.play.length; i++) {document.write("<hr>"+this.play[i])}for (let index1 = 0; index1 <this.play.length ; index1++) {document.write("<hr>"+this.play[index1])}*/}}Person1.plays1()</script></head>
<body></body>
</html>
8.JS语法
一.JSON的语法var obj='{"属性名":"属性值","属性名":{"属性名":"属性值"},"属性名":["值1","值1","值3"],"属性名":[{},{}"]}'属性名和属性值(string类型)必须使用""JSON字符串一般用于传递数据,所以字符串中的函数就显得没有意义,在此不做研究通过JSON.parse()方法可以将一个JSON串转换成对象通过JSON.stringify()方法可以将一个对象转换成一个JSON格式的字符串
HTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>08.JS语法</title>
</head><script>/*一.JSON的语法var obj='{"属性名":"属性值","属性名":{"属性名":"属性值"},"属性名":["值1","值1","值3"],"属性名":[{},{}"]}'属性名和属性值(string类型)必须使用""JSON字符串一般用于传递数据,所以字符串中的函数就显得没有意义,在此不做研究通过JSON.parse()方法可以将一个JSON串转换成对象通过JSON.stringify()方法可以将一个对象转换成一个JSON格式的字符串*//* 定义一个JSON串 */var person='{"name":"孙俊祥","age":19,"sex":"男","likegiflFirend":["肆小七","张军"],"friend":["肆小七1","张军1"]}'console.log(person)console.log(typeof person)console.log(person.name)console.log(person.likegiflFriend)/* 通过JSON.parse()将一个JSON串转换为对象 */var personTest=JSON.parse(person)//调取/* 获取对象属性值 */console.log(personTest)console.log(personTest.name)console.log(personTest.age)console.log(personTest.likegiflFirend[0])console.log(personTest.likegiflFirend[1])/* 通过JSON.stringify()将对象转换成JSON字符串 */var person999=JSON.stringify(personTest)console.log(person999)</script>
<body></body>
</html> 
JAVA
package JSONtest;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** packageName JSONtest** @author 曦* @version 1.0* @version0 JDK 17* @className JSONtest* @date 2024/11/20 12:55* @description TODO*/
public class JSONtest {@Testpublic void test1() throws JsonProcessingException {//Person对象实例化//将Person对象转换为JSON串Frinds frinds =new Frinds("孙俊祥",19,'男');Person person=new Person("张军",18,'男',frinds);//将Person对象转换为JSON串ObjectMapper objectMapper=new ObjectMapper();String personStr = objectMapper.writeValueAsString(person);System.out.println(personStr);}@Testpublic void test2() throws JsonProcessingException {String personStr="{\"name\":\"张军\",\"age\":18,\"sex\":\"男\",\"frinds\":{\"name\":\"孙俊祥\",\"age\":19,\"sex\":\"男\"}}";ObjectMapper objectMapper=new ObjectMapper();Person person = objectMapper.readValue(personStr, Person.class);System.out.println(person);}@Testpublic void test3() throws JsonProcessingException {//mapMap data=new HashMap();data.put("a","valuea");data.put("b","valueb");ObjectMapper objectMapper=new ObjectMapper();String s = objectMapper.writeValueAsString(data);System.out.println(s);}@Testpublic void test4() throws JsonProcessingException {//listList data=new ArrayList();data.add("a");data.add("b");data.add("c");data.add("d");ObjectMapper objectMapper=new ObjectMapper();String s = objectMapper.writeValueAsString(data);System.out.println(s);}@Testpublic void test5() throws JsonProcessingException {//arrayString[]data={"a","b","c","d"};ObjectMapper objectMapper=new ObjectMapper();String s = objectMapper.writeValueAsString(data);System.out.println(s);}@Testpublic void test6() throws JsonProcessingException {Frinds frinds =new Frinds("孙俊祥",19,'男');Person person=new Person("张军",18,'男',frinds);List data=new ArrayList();data.add(person);ObjectMapper objectMapper=new ObjectMapper();String s = objectMapper.writeValueAsString(data);System.out.println(s);}}
9.JS常用对象
数组
创建数组的四种方式
new Array() 创建空数组
new Array(5) 创建数组时给定长度
new Array(ele1,ele2,ele3,... ... ,elen);
创建数组时指定元素值 [ele1,ele2,ele3,... ... ,elen]; 相当于第三种语法的简写
API 方法
| 方法 | 描述 |
|---|---|
| concat() | 连接两个或更多的数组，并返回结果。 |
| copyWithin() | 从数组的指定位置拷贝元素到数组的另一个指定位置中。 |
| entries() | 返回数组的可迭代对象。 |
| every() | 检测数值元素的每个元素是否都符合条件。 |
| fill() | 使用一个固定值来填充数组。 |
| filter() | 检测数值元素，并返回符合条件所有元素的数组。 |
| find() | 返回符合传入测试（函数）条件的数组元素。 |
| findIndex() | 返回符合传入测试（函数）条件的数组元素索引。 |
| forEach() | 数组每个元素都执行一次回调函数。 |
| from() | 通过给定的对象中创建一个数组。 |
| includes() | 判断一个数组是否包含一个指定的值。 |
| indexOf() | 搜索数组中的元素，并返回它所在的位置。 |
| isArray() | 判断对象是否为数组。 |
| join() | 把数组的所有元素放入一个字符串。 |
| keys() | 返回数组的可迭代对象，包含原始数组的键(key)。 |
| lastIndexOf() | 搜索数组中的元素，并返回它最后出现的位置。 |
| map() | 通过指定函数处理数组的每个元素，并返回处理后的数组。 |
| pop() | 删除数组的最后一个元素并返回删除的元素。 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reduce() | 将数组元素计算为一个值（从左到右）。 |
| reduceRight() | 将数组元素计算为一个值（从右到左）。 |
| reverse() | 反转数组的元素顺序。 |
| shift() | 删除并返回数组的第一个元素。 |
| slice() | 选取数组的一部分，并返回一个新数组。 |
| some() | 检测数组元素中是否有元素符合指定条件。 |
| sort() | 对数组的元素进行排序。 |
| splice() | 从数组中添加或删除元素。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
| valueOf() | 返回数组对象的原始值。 |
| Array.of() | 将一组值转换为数组。 |
| Array.at() | 用于接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。 |
| Array.flat() | 创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。 |
| Array.flatMap() | 使用映射函数映射每个元素，然后将结果压缩成一个新数组。 |
Boolean对象
方法 描述 toString() 把布尔值转换为字符串，并返回结果。 valueOf() 返回 Boolean 对象的原始值。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>09.JS常用对象</title><script>/*数组> 创建数组的四种方式new Array() 创建空数组new Array(5) 创建数组时给定长度new Array(ele1,ele2,ele3,... ... ,elen); 创建数组时指定元素值[ele1,ele2,ele3,... ... ,elen]; 相当于第三种语法的简写> 数组的常见API在JS中,数组属于Object类型,其长度是可以变化的,更像JAVA中的集合| 方法 | 描述 || :-------------------------------------| :----------------------------------------------------------- || [concat()] | 连接两个或更多的数组，并返回结果。 || [copyWithin()] | 从数组的指定位置拷贝元素到数组的另一个指定位置中。 || [entries()] | 返回数组的可迭代对象。 || [every()] | 检测数值元素的每个元素是否都符合条件。 || [fill()] | 使用一个固定值来填充数组。 || [filter()] | 检测数值元素，并返回符合条件所有元素的数组。 || [find()] | 返回符合传入测试（函数）条件的数组元素。 || [findIndex()] | 返回符合传入测试（函数）条件的数组元素索引。 || [forEach()] | 数组每个元素都执行一次回调函数。 || [from()] | 通过给定的对象中创建一个数组。 || [includes()] | 判断一个数组是否包含一个指定的值。 || [indexOf()] | 搜索数组中的元素，并返回它所在的位置。 || [isArray()] | 判断对象是否为数组。 || [join()] | 把数组的所有元素放入一个字符串。 || [keys()] | 返回数组的可迭代对象，包含原始数组的键(key)。 || [lastIndexOf()] | 搜索数组中的元素，并返回它最后出现的位置。 || [map()] | 通过指定函数处理数组的每个元素，并返回处理后的数组。 || [pop()] | 删除数组的最后一个元素并返回删除的元素。 || [push()] | 向数组的末尾添加一个或更多元素，并返回新的长度。 || [reduce()] | 将数组元素计算为一个值（从左到右）。 || [reduceRight()] | 将数组元素计算为一个值（从右到左）。 || [reverse()] | 反转数组的元素顺序。 || [shift()] | 删除并返回数组的第一个元素。 || [slice()] | 选取数组的一部分，并返回一个新数组。 || [some()] | 检测数组元素中是否有元素符合指定条件。 || [sort()] | 对数组的元素进行排序。 || [splice()] | 从数组中添加或删除元素。 || [toString()] | 把数组转换为字符串，并返回结果。 || [unshift()] | 向数组的开头添加一个或更多元素，并返回新的长度。 || [valueOf()] | 返回数组对象的原始值。 || [Array.of()] | 将一组值转换为数组。 || [Array.at()] | 用于接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。 || [Array.flat()] | 创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。 || [Array.flatMap()] | 使用映射函数映射每个元素，然后将结果压缩成一个新数组。 |4.3.2 Boolean对象> boolean对象的方法比较简单| 方法 | 描述 || :----------------------------------- | :--------------------------------- || [toString()] | 把布尔值转换为字符串，并返回结果。 || [valueOf()] | 返回 Boolean 对象的原始值。 |*///数组创建//方法1var array =new Array()//方法2var array=new Array(5)//方法3// var array=new Array(1,2,3)//方法4var array=["孙俊祥",19,"float"]console.log(array)console.log(array.length)//添加数据array[0]="孙俊祥"array[1]=19array[10]=truearray.length=20console.log(array)console.log(array.length)//练习//concat：连接数组var likefriend=["张军",18, "肆小七",18]var likefriends=["孙俊祥",19]var arrAll=likefriend.concat(likefriends)console.log(likefriend)console.log(likefriends)console.log(arrAll)//pop():删除最后一个元素并返回删除元素var likefriend1=["张军",18, "肆小七",18]var likefriends1=["孙俊祥",19]var arrAll1=likefriend1.concat(likefriends1)//pop():删除最后一个元素并返回删除元素var res=arrAll1.pop()console.log(res)//19console.log(likefriend1)console.log(likefriends1)//push():从尾端增加元素并返回长度var likefriend2=["张军",18, "肆小七",18]var likefriends2=["孙俊祥",19]var arrAll2=likefriend2.concat(likefriends2)//push():从尾端增加元素并返回长度var len=arrAll2.push("孙长大大")console.log(len)console.log(arrAll2)console.log(likefriend2)console.log(likefriends2)//查找元素var likefriend3=["张军",18, "肆小七",18]var likefriends3=["孙俊祥",19]var arrAll3=likefriend3.concat(likefriends3)//push():从尾端增加元素并返回长度var len=arrAll3.push("孙长大大")console.log(arrAll2)//查找//查找最先出现的位置var index1=arrAll3.indexOf("孙俊祥")//查找最后出现的位置var index2=arrAll3.lastIndexOf("孙长大大")console.log(index1)//4console.log(index2)//6//反转数组：reverse()arrAll3.reverse()console.log(arrAll3)var index1=arrAll3.indexOf("孙俊祥")var index2=arrAll3.lastIndexOf("孙长大大")console.log(index1)//2console.log(index2)//0//转化为字符串console.log(arrAll3.join("-"))//截取数据console.log(arrAll3.slice(2,6))//增添或删除元素：splice()//增添元素console.log(arrAll3)arrAll3.splice(2,0,"方荣华","荣荣")//删除元素console.log(arrAll3)arrAll3.splice(2,2)console.log(arrAll3)//增添和删除元素//先增加后面删除之后增加arrAll3.splice(2,0,"方荣华","荣荣")arrAll3.splice(2,2,"方荣华","荣荣")console.log(arrAll3)</script>
</head>
<body></body>
</html> 
10.JS常用对象API
Date对象
方法 描述 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getFullYear() 从 Date 对象以四位数字返回年份。 getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。 getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。 getTime() 返回 1970 年 1 月 1 日至今的毫秒数。 getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。 getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。 getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。 getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 getYear() 已废弃。 请使用 getFullYear() 方法代替。 parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。 setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。 setFullYear() 设置 Date 对象中的年份（四位数字）。 setHours() 设置 Date 对象中的小时 (0 ~ 23)。 setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。 setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。 setMonth() 设置 Date 对象中月份 (0 ~ 11)。 setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。 setTime() setTime() 方法以毫秒设置 Date 对象。 setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 setUTCFullYear() 根据世界时设置 Date 对象中的年份（四位数字）。 setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 setUTCSeconds() setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。 setYear() 已废弃。请使用 setFullYear() 方法代替。 toDateString() 把 Date 对象的日期部分转换为字符串。 toGMTString() 已废弃。请使用 toUTCString() 方法代替。 toISOString() 使用 ISO 标准返回字符串的日期格式。 toJSON() 以 JSON 数据格式返回日期字符串。 toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。 toString() 把 Date 对象转换为字符串。 toTimeString() 把 Date 对象的时间部分转换为字符串。 toUTCString() 根据世界时，把 Date 对象转换为字符串。实例： var today = new Date(); var UTCstring = today.toUTCString();UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 valueOf() 返回 Date 对象的原始值。
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) 将数字的小数部分去掉，只保留整数部分。
Number
方法 描述 isFinite 检测指定参数是否为无穷大。 isInteger 检测指定参数是否为整数。 isNaN 检测指定参数是否为 NaN。 isSafeInteger 检测指定参数是否为安全整数。 toExponential(x) 把对象的值转换为指数计数法。 toFixed(x) 把数字转换为字符串，结果的小数点后有指定位数的数字。 toLocaleString(locales, options) 返回数字在特定语言环境下的表示字符串。 toPrecision(x) 把数字格式化为指定的长度。 toString() 把数字转换为字符串，使用指定的基数。 valueOf() 返回一个 Number 对象的基本数字值。
String
方法 描述 charAt() 返回在指定位置的字符。 charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 concat() 连接两个或更多字符串，并返回新的字符串。 endsWith() 判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。 fromCharCode() 将 Unicode 编码转为字符。 indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。 includes() 查找字符串中是否包含指定的子字符串。 lastIndexOf() 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。 match() 查找找到一个或多个正则表达式的匹配。 repeat() 复制字符串指定次数，并将它们连接在一起返回。 replace() 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。 replaceAll() 在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。 search() 查找与正则表达式相匹配的值。 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。 split() 把字符串分割为字符串数组。 startsWith() 查看字符串是否以指定的子字符串开头。 substr() 从起始索引号提取字符串中指定数目的字符。 substring() 提取字符串中两个指定的索引号之间的字符。 toLowerCase() 把字符串转换为小写。 toUpperCase() 把字符串转换为大写。 trim() 去除字符串两边的空白。 toLocaleLowerCase() 根据本地主机的语言环境把字符串转换为小写。 toLocaleUpperCase() 根据本地主机的语言环境把字符串转换为大写。 valueOf() 返回某个字符串对象的原始值。 toString() 返回一个字符串。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>10.JS常用对象API</title><script>/*4.3.3 Date对象> 和JAVA中的Date类比较类似| 方法 | 描述 || :------------------------------------ | :-------------------------------------------------------|| [getDate()] | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 || [getDay()] | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 || [getFullYear()] | 从 Date 对象以四位数字返回年份。 || [getHours()] | 返回 Date 对象的小时 (0 ~ 23)。 || [getMilliseconds()] | 返回 Date 对象的毫秒(0 ~ 999)。 || [getMinutes()] | 返回 Date 对象的分钟 (0 ~ 59)。 || [getMonth()] | 从 Date 对象返回月份 (0 ~ 11)。 || [getSeconds()] | 返回 Date 对象的秒数 (0 ~ 59)。 || [getTime()] | 返回 1970 年 1 月 1 日至今的毫秒数。 || [getTimezoneOffset()] | 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 || [getUTCDate()] | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 || [getUTCDay()] | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 || [getUTCFullYear()] | 根据世界时从 Date 对象返回四位数的年份。 || [getUTCHours()] | 根据世界时返回 Date 对象的小时 (0 ~ 23)。 || [getUTCMilliseconds()] | 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 || [getUTCMinutes()] | 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 || [getUTCMonth()] | 根据世界时从 Date 对象返回月份 (0 ~ 11)。 || [getUTCSeconds()] | 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 || getYear() | 已废弃。 请使用 getFullYear() 方法代替。 || [parse()] | 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。 || [setDate()] | 设置 Date 对象中月的某一天 (1 ~ 31)。 || [setFullYear()] | 设置 Date 对象中的年份（四位数字）。 || [setHours()] | 设置 Date 对象中的小时 (0 ~ 23)。 || [setMilliseconds()] | 设置 Date 对象中的毫秒 (0 ~ 999)。 || [setMinutes()] | 设置 Date 对象中的分钟 (0 ~ 59)。 || [setMonth()] | 设置 Date 对象中月份 (0 ~ 11)。 || [setSeconds()] | 设置 Date 对象中的秒钟 (0 ~ 59)。 || [setTime()] | setTime() 方法以毫秒设置 Date 对象。 || [setUTCDate()] | 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 || [setUTCFullYear()] | 根据世界时设置 Date 对象中的年份（四位数字）。 || [setUTCHours()] | 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 || [setUTCMilliseconds()] | 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 || [setUTCMinutes()] | 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 || [setUTCMonth()] | 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 || [setUTCSeconds()] | setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。 || setYear() | 已废弃。请使用 setFullYear() 方法代替。 || [toDateString()] | 把 Date 对象的日期部分转换为字符串。 || toGMTString() | 已废弃。请使用 toUTCString() 方法代替。 || [toISOString()] | 使用 ISO 标准返回字符串的日期格式。 || [toJSON()] | 以 JSON 数据格式返回日期字符串。 || [toLocaleDateString()] | 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 || [toLocaleTimeString()] | 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 || [toLocaleString()] | 根据本地时间格式，把 Date 对象转换为字符串。 || [toString()] | 把 Date 对象转换为字符串。 || [toTimeString()] | 把 Date 对象的时间部分转换为字符串。 || [toUTCString()] | 根据世界时，把 Date 对象转换为字符串。实例：`var today = new Date(); var UTCstring = today.toUTCString();` || [UTC()] | 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 || [valueOf()] | 返回 Date 对象的原始值。 |4.3.4 Math> 和JAVA中的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> Number中准备了一些基础的数据处理函数| 方法 | 描述 || :-----------------------------------------| :--------------------------------------------------- || [isFinite] | 检测指定参数是否为无穷大。 || [isInteger] | 检测指定参数是否为整数。 || [isNaN] | 检测指定参数是否为 NaN。 || [isSafeInteger] | 检测指定参数是否为安全整数。 || [toExponential(x)] | 把对象的值转换为指数计数法。 || [toFixed(x)] | 把数字转换为字符串，结果的小数点后有指定位数的数字。 || [toLocaleString | 返回数字在特定语言环境下的表示字符串。 || [toPrecision(x)] | 把数字格式化为指定的长度。 || [toString()] | 把数字转换为字符串，使用指定的基数。 || [valueOf()] | 返回一个 Number 对象的基本数字值。 |4.3.6 String> 和JAVA中的String类似| 方法 | 描述 || :-----------------------------------------| :----------------------------------------------------------- || [charAt()] | 返回在指定位置的字符。 || [charCodeAt()] | 返回在指定的位置的字符的 Unicode 编码。 || [concat()] | 连接两个或更多字符串，并返回新的字符串。 || [endsWith()] | 判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。 || [fromCharCode()] | 将 Unicode 编码转为字符。 || [indexOf()] | 返回某个指定的字符串值在字符串中首次出现的位置。 || [includes()] | 查找字符串中是否包含指定的子字符串。 || [lastIndexOf()] | 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。 || [match()] | 查找找到一个或多个正则表达式的匹配。 || [repeat()] | 复制字符串指定次数，并将它们连接在一起返回。 || [replace()] | 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。 || [replaceAll()] | 在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。 || [search()] | 查找与正则表达式相匹配的值。 || [slice()] | 提取字符串的片断，并在新的字符串中返回被提取的部分。 || [split()] | 把字符串分割为字符串数组。 || [startsWith()] | 查看字符串是否以指定的子字符串开头。 || [substr()] | 从起始索引号提取字符串中指定数目的字符。 || [substring()] | 提取字符串中两个指定的索引号之间的字符。 || [toLowerCase()] | 把字符串转换为小写。 || [toUpperCase()] | 把字符串转换为大写。 || [trim()] | 去除字符串两边的空白。 || [toLocaleLowerCase()] | 根据本地主机的语言环境把字符串转换为小写。 || [toLocaleUpperCase()] | 根据本地主机的语言环境把字符串转换为大写。 || [valueOf()] | 返回某个字符串对象的原始值。 || [toString()] | 返回一个字符串。 |*///时间var data = new Date()console.log(data)//年console.log(data.getFullYear())//月是0~11,会在该月上少1console.log(data.getMonth() + 1)//日console.log(data.getDate())//小时console.log(data.getHours())//分钟console.log(data.getMinutes())//秒console.log(data.getSeconds())//设置时间data.setFullYear(520)data.setMonth(4)data.setDate(20)data.setHours(5)data.setMinutes(20)data.setSeconds(0)console.log(data)//年console.log(data.getFullYear())//月是0~11,会在该月上少1console.log(data.getMonth() + 1)//日console.log(data.getDate())//小时console.log(data.getHours())//分钟console.log(data.getMinutes())//秒console.log(data.getSeconds())</script>
</head>
<body></body>
</html> 
11.JS事件的绑定
弹窗3种方式 1.alert()信息提示框 2.prompt()信息输入框 3.confirm()信息确认框
一.事件的绑定方式1.通过元素属性绑定 on*****2.通过DOM编程动态绑定注意事项：1.一个事项可以绑定多个函数2.一个元素可以同时绑定多个事件二.常见事件1.表单事件2.键盘事件3.鼠标事件onclick：单击ondblclick：双击onmouseleave：鼠标指针移出元素时触发onmouseover：鼠标移到某元素之上4.页面加载事件onload三.事件的触发1.行为触发2.DOM触发
鼠标事件
| 属性 | 描述 |
|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onmousedown | 鼠标按钮被按下。 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 |
| onmouseleave | 当鼠标指针移出元素时触发 |
| onmousemove | 鼠标被移动。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseup | 鼠标按键被松开。 |
键盘事件
| 属性 | 描述 |
|---|---|
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
表单事件
| 属性 | 描述 |
|---|---|
| onblur | 元素失去焦点时触发 |
| onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) |
| onfocus | 元素获取焦点时触发 |
| onfocusin | 元素即将获取焦点时触发 |
| onfocusout | 元素即将失去焦点时触发 |
| oninput | 元素获取用户输入时触发 |
| onreset | 表单重置时触发 |
| onsearch | 用户向搜索域输入文本时触发 ( <input="search">) |
| onselect | 用户选取文本时触发 ( <input> 和 <textarea>) |
| onsubmit | 表单提交时触发 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>11.JS事件的绑定</title><script>/*> 鼠标事件| 属性 | 描述 || :---------------------------------------- | :------------------------------------- || [onclick] | 当用户点击某个对象时调用的事件句柄。 || [oncontextmenu] | 在用户点击鼠标右键打开上下文菜单时触发 || [ondblclick] | 当用户双击某个对象时调用的事件句柄。 || [onmousedown] | 鼠标按钮被按下。 || [onmouseenter] | 当鼠标指针移动到元素上时触发。 || [onmouseleave] | 当鼠标指针移出元素时触发 || [onmousemove] | 鼠标被移动。 || [onmouseover] | 鼠标移到某元素之上。 || [onmouseout] | 鼠标从某元素移开。 || [onmouseup] | 鼠标按键被松开。 |> 键盘事件| 属性 | 描述 || :------------------------------------- | :------------------------- || [onkeydown] | 某个键盘按键被按下。 || [onkeypress] | 某个键盘按键被按下并松开。 || [onkeyup] | 某个键盘按键被松开。 |> 表单事件| 属性 | 描述| :--------------------------- -| :------------------------------------| [onblur] | 元素失去焦点时触发| [onchange] | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)| [onfocus] | 元素获取焦点时触发| [onfocusin] | 元素即将获取焦点时触发| [onfocusout] | 元素即将失去焦点时触发| [oninput] | 元素获取用户输入时触发| [onreset] | 表单重置时触发| [onsearch] | 用户向搜索域输入文本时触发 ( <input="search">)| [onselect] | 用户选取文本时触发 ( <input> 和 <textarea>)| [onsubmit] | 表单提交时触发*/function fun1() {//alert("恭喜你，发现我了")console.log("单击了，恭喜你，发现我了")}function fun2() {//alert("原神启动")console.log("单击了，原神启动")}function fun3() {//alert("崩铁启动")console.log("双击了，崩铁启动")}function fun4(){console.log("你悬停干什么你^_^")}function fun5(){console.log("你移动来移动去干什么你^_^")}function fun6(){console.log("你离开了我")}function fun7(){console.log("你按我")}function fun8(){console.log("你抬起来干什么")}function testFocus(){console.log("恭喜你获得了焦点")}function testBlur(){console.log("你失去了焦点")}function testChange(value){console.log("你的内容改变的是："+value)}function testChange2(value){console.log("你的选择内容改变了.是"+value)}function testSubmit(){/*弹窗3种方式1.alert()信息提示框2.prompt()信息输入框3.confirm()信息确认框*/var flag=confirm("你确定要提交表单吗？")//方法1/*if (flag){alert("恭喜你表单提交成功")}else if (!flag){//在这里可以阻止表单的提交event.preventDefault();//阻止组件的默认行为}*///方法2if (!flag){return false}return true}function testReset(){alert("恭喜你表单清空了")}/*一.事件的绑定方式1.通过元素属性绑定 on*****2.通过DOM编程动态绑定注意事项：1.一个事项可以绑定多个函数2.一个元素可以同时绑定多个事件二.常见事件1.表单事件2.键盘事件3.鼠标事件onclick：单击ondblclick：双击onmouseleave：鼠标指针移出元素时触发onmouseover：鼠标移到某元素之上4.页面加载事件onload三.事件的触发1.行为触发2.DOM触发*/</script>
</head>
<body><!--鼠标事件--><inputtype="button"value="原神"onclick="fun1() , fun2()"ondblclick="fun3()"><br><!--鼠标事件-->"<img src="../HTML学习/图片/liuying.jpg" onmouseover="fun4()" onmousemove="fun5()" onmouseleave="fun6()"><br><!--键盘事件--><input type="text" onkeydown="fun7()" onkeyup="fun8()"><!--表单事件--><!--表单--><form action="../CSS学习/4.CSS定位.html" method="get" onsubmit="return testSubmit()" onreset="testReset()">用户昵称：<input type="text"name="realName"onfocus="testFocus()"onblur="testBlur()"onchange="testChange(this.value)"><br>登录账号：<input type="text" name="logoinMane"><br>密码：<input type="text" value=""><br>选择籍贯：<select onchange="testChange2(this.value)"><option>云南</option><option>四川</option><option>贵州</option><option>江西</option></select><br><input type="submit" value="注册"><input type="reset" value="清空"></form></body>
</html>
12.DOM事件的触发
一.事件的绑定方式1.通过元素属性绑定 on*****2.通过DOM编程动态绑定注意事项：1.一个事项可以绑定多个函数2.一个元素可以同时绑定多个事件二.常见事件1.表单事件2.键盘事件3.鼠标事件onclick：单击ondblclick：双击onmouseleave：鼠标指针移出元素时触发onmouseover：鼠标移到某元素之上4.页面加载事件onload三.事件的触发1.行为触发2.DOM编程触发<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>12.DOM事件的触发</title><script>/*一.事件的绑定方式1.通过元素属性绑定 on*****2.通过DOM编程动态绑定注意事项：1.一个事项可以绑定多个函数2.一个元素可以同时绑定多个事件二.常见事件1.表单事件2.键盘事件3.鼠标事件onclick：单击ondblclick：双击onmouseleave：鼠标指针移出元素时触发onmouseover：鼠标移到某元素之上4.页面加载事件onload三.事件的触发1.行为触发2.DOM编程触发*/</script><script>/*//方法1function ready(){//通过DOM编程操作元素var byId = document.getElementById(`我爱你1314`);//绑定一个单击事件byId.onclick=function (){alert("你点击我干什么！我不想动")}}*///方法2window.onload=function (){//为div1绑定单击事件var div1=document.getElementById("d1")div1.onclick=function (){div1.style.backgroundColor="#87faff"}//通过DOM编程操作元素var byId = document.getElementById(`我爱你1314`);//绑定一个单击事件byId.onclick=function (){alert("你点击我干什么！我不想动")//通过DOM编程触发事件，相当于某些事件发生了//通过DOM编程触发div的单击事件div1.onclick();}}</script><style>.div1{width: 100px;height: 100px;background-color: red;}</style></head><!--//方法1<body onload="ready()">--> <body><div id="d1" class="div1"></div><button id="我爱你1314" >原神启动</button><a href="14.BOM编程常见API.html">14页</a> </body> </html>
13.BOM编程
14.BOM检查常见API
window对象的常见属性
| 属性 | 描述 |
|---|---|
| closed | 返回窗口是否已被关闭。 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
| document | 对 Document 对象的只读引用。(请参阅对象) |
| frames | 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。 |
| history | 对 History 对象的只读引用。请参数 History 对象。 |
| innerHeight | 返回窗口的文档显示区的高度。 |
| innerWidth | 返回窗口的文档显示区的宽度。 |
| localStorage | 在浏览器中存储 key/value 对。没有过期时间。 |
| length | 设置或返回窗口中的框架数量。 |
| location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
| name | 设置或返回窗口的名称。 |
| navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| outerHeight | 返回窗口的外部高度，包含工具条与滚动条。 |
| outerWidth | 返回窗口的外部宽度，包含工具条与滚动条。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
| screenLeft | 返回相对于屏幕窗口的x坐标 |
| screenTop | 返回相对于屏幕窗口的y坐标 |
| screenX | 返回相对于屏幕窗口的x坐标 |
| sessionStorage | 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。 |
| screenY | 返回相对于屏幕窗口的y坐标 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| status | 设置窗口状态栏的文本。 |
| top | 返回最顶层的父窗口。 |
window对象的常见方法
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框。 |
| atob() | 解码一个 base-64 编码的字符串。 |
| btoa() | 创建一个 base-64 编码的字符串。 |
| blur() | 把键盘焦点从顶层窗口移开。 |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
| close() | 关闭浏览器窗口。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| createPopup() | 创建一个 pop-up 窗口。 |
| focus() | 把键盘焦点给予一个窗口。 |
| getSelection() | 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。 |
| getComputedStyle() | 获取指定元素的 CSS 样式。 |
| matchMedia() | 该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| print() | 打印当前窗口的内容。 |
| prompt() | 显示可提示用户输入的对话框。 |
| resizeBy() | 按照指定的像素调整窗口的大小。 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
| scroll() | 已废弃。 该方法已经使用了 scrollTo() 方法来替代。 |
| scrollBy() | 按照指定的像素值来滚动内容。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
| stop() | 停止页面载入。 |
| postMessage() | 安全地实现跨源通信。 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>14.BOM检查常见API</title><script>//alert：普通信息提示框function testAlert() {//普通信息提示框window.alert("提示信息");}//prompt：确认框function testConfirm() {//确认框var con = confirm("确定要删除吗?");if (con) {alert("点击了确定")} else {alert("点击了取消")}}//confirm：对话框function testPrompt() {//信息输入对话框var res = prompt("请输入昵称", "例如:孙俊祥");alert("您输入的是:" + res)}window.setTimeout(function () {console.log("孙俊祥")//document.write("孙俊祥")},2000)function funA(){//向后一页history.back()}function funB(){//向前一页window.history.forward()}function funC(){window.location.href="http://www.bilibili.com"//修改地址栏url链接}function funD(){//向sessionStorage中存储数据window.sessionStorage.setItem("keyA","valueA")//向localStorage中存储数据window.localStorage.setItem("keyB","valueB")}function funE(){//向sessionStorage中读取数据console.log(sessionStorage.getItem("keyA"))//向localStorage中读取数据console.log(localStorage.getItem("keyB"))}function funF(){//向sessionStorage中清出数据sessionStorage.removeItem("keyA")//向localStorage中清出数据localStorage.removeItem("keyB")}</script></head>
<body><!--6.3 window对象的常见方法(了解)| 方法 | 描述 || :---------------------------------------------| :----------------------------------------------------------- || [alert()] | 显示带有一段消息和一个确认按钮的警告框。 || [atob()] | 解码一个 base-64 编码的字符串。 || [btoa()] | 创建一个 base-64 编码的字符串。 || [blur()] | 把键盘焦点从顶层窗口移开。 || [clearInterval()] | 取消由 setInterval() 设置的 timeout。 || [clearTimeout()] | 取消由 setTimeout() 方法设置的 timeout。 || [close()] | 关闭浏览器窗口。 || [confirm()] | 显示带有一段消息以及确认按钮和取消按钮的对话框。 || [createPopup()] | 创建一个 pop-up 窗口。 || [focus()] | 把键盘焦点给予一个窗口。 || [getSelection()] | 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。 || [getComputedStyle()] | 获取指定元素的 CSS 样式。 || [matchMedia()] | 该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。 || [moveBy()] | 可相对窗口的当前坐标把它移动指定的像素。 || [moveTo()] | 把窗口的左上角移动到一个指定的坐标。 || [open()] | 打开一个新的浏览器窗口或查找一个已命名的窗口。 || [print()] | 打印当前窗口的内容。 || [prompt()] | 显示可提示用户输入的对话框。 || [resizeBy()] | 按照指定的像素调整窗口的大小。 || [resizeTo()] | 把窗口的大小调整到指定的宽度和高度。 || scroll() | 已废弃。 该方法已经使用了 [scrollTo()]|[scrollTo()] || [scrollBy()] | 按照指定的像素值来滚动内容。 || [scrollTo()] | 把内容滚动到指定的坐标。 || [setInterval()] | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 || [setTimeout()] | 在指定的毫秒数后调用函数或计算表达式。 || [stop()] | 停止页面载入。 || [postMessage()] | 安全地实现跨源通信。 |--><!--window对象是浏览器提供使用，不需要new对象window可以省略不写三种弹窗方式alertpromptconfirm定时任务history对象 window对象的属性之一,代表浏览器的访问历史location对象 window对象的属性之一,代表浏览器的地址栏sessionStorage对象 window对象的属性之一,代表浏览器的本地数据会话级存储console对象 window对象的属性之一,代表浏览器开发者工具的控制台--><button onclick="funD()">存储数据</button><button onclick="funE()">读取数据</button><button onclick="funF()">清除数据</button><hr><button onclick="funC()">B站</button><hr><button onclick="funA()">上一页</button><button onclick="funB()">下一页</button><a href="http://bilibili.com">B站</a><hr><input type="button" value="提示框" onclick="testAlert()"/> <br><input type="button" value="确认框" onclick="testConfirm()"/> <br><input type="button" value="对话框" onclick="testPrompt()"/> <br><button onclick="fun()">2s后向控制台打印孙俊祥</button>
</body>
</html>
16.DOM编程API
1 获得document dom树window.document 2. 从document中获取操作元素1)直接获取document2)间接获取3 对元素操作1)操作元素属性2)操作元素样式3)操作元素文本4)增删元素
1 获得document dom树window.document2 从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. 增删元素
在整个文档范围内查找元素结点
| 功能 | API | 返回值 |
|---|---|---|
| 根据id值查询 | document.getElementById(“id值”) | 一个具体的元素节 |
| 根据标签名查询 | document.getElementsByTagName(“标签名”) | 元素节点数组 |
| 根据name属性值查询 | document.getElementsByName(“name值”) | 元素节点数组 |
| 根据类名查询 | document.getElementsByClassName("类名") | 元素节点数组 |
在具体元素节点范围内查找子节点
| 功能 | API | 返回值 |
|---|---|---|
| 查找子标签 | element.children | 返回子标签数组 |
| 查找第一个子标签 | element.firstElementChild | 标签对象 |
| 查找最后一个子标签 | element.lastElementChild | 节点对象 |
查找指定子元素节点的父节点
| 功能 | API | 返回值 |
|---|---|---|
| 查找指定元素节点的父标签 | element.parentElement | 标签对象 |
查找指定元素节点的兄弟节点
| 功能 | API | 返回值 |
|---|---|---|
| 查找前一个兄弟标签 | node.previousElementSibling | 标签对象 |
| 查找后一个兄弟标签 | node.nextElementSibling | 标签对象 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>16.DOM编程API</title><script>/*1 获得document dom树window.document2. 从document中获取操作元素1)直接获取document2)间接获取3 对元素操作1)操作元素属性2)操作元素样式3)操作元素文本4)增删元素*/</script><script>/*1 获得document dom树window.document2 从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>
<!--dom树中节点的类型node 节点,所有结点的父类型element 元素节点,node的子类型之一,代表一个完整标签attribute 属性节点,node的子类型之一,代表元素的属性text 文本节点,node的子类型之一,代表双标签中间的文本获取页面元素的几种方式1 在整个文档范围内查找元素结点| 功能 | API | 返回值 || ------------------ | --------------------------------------- | ---------------- || 根据id值查询 | document.getElementById(“id值”) | 一个具体的元素节 || 根据标签名查询 | document.getElementsByTagName(“标签名”) | 元素节点数组 || 根据name属性值查询 | document.getElementsByName(“name值”) | 元素节点数组 || 根据类名查询 | document.getElementsByClassName("类名") | 元素节点数组 |2 在具体元素节点范围内查找子节点| 功能 | API | 返回值 || ------------------ | ------------------------- | -------------- || 查找子标签 | element.children | 返回子标签数组 || 查找第一个子标签 | element.firstElementChild | 标签对象 || 查找最后一个子标签 | element.lastElementChild | 节点对象 |3 查找指定子元素节点的父节点| 功能 | API | 返回值 || ------------------------ | --------------------- | -------- || 查找指定元素节点的父标签 | element.parentElement | 标签对象 |4 查找指定元素节点的兄弟节点| 功能 | API | 返回值 || ------------------ | --------------------------- | -------- || 查找前一个兄弟标签 | node.previousElementSibling | 标签对象 || 查找后一个兄弟标签 | node.nextElementSibling | 标签对象 |
--><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><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"/><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>
</body>
</html>id获取指定元素
标签名获取多个元素
根据name属性值获取多个元素
根据class属性值获得多个元素
通过父元素获取子元素
通过子元素获取父元素
通过当前元素获取兄弟元素
17.操作元素属性值
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. 增删元素
属性操作
需求 操作方式 读取属性值 元素对象.属性名 修改属性值 元素对象.属性名=新的属性值 内部文本操作
需求 操作方式 获取或者设置标签体的文本内容 element.innerText 获取或者设置标签体的内容 element.innerHTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>17.操作元素属性值</title><script>/*1 属性操作| 需求 | 操作方式 || ---------- | -------------------------- || 读取属性值 | 元素对象.属性名 || 修改属性值 | 元素对象.属性名=新的属性值 |2 内部文本操作| 需求 | 操作方式 || ---------------------------- | ----------------- || 获取或者设置标签体的文本内容 | element.innerText || 获取或者设置标签体的内容 | element.innerHTML |*/</script><script>/*1 获得document dom树window.document2 从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 > backgroundColorin1.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> 
操作属性
操作样式
操作文本
18.增删元素
对页面的元素进行增删操作
API 功能 document.createElement(“标签名”) 创建元素节点并返回，但不会自动添加到文档中 document.createTextNode(“文本值”) 创建文本节点并返回，但不会自动添加到文档中 element.appendChild(ele) 将ele添加到element所有子节点后面 parentEle.insertBefore(newEle,targetEle) 将newEle插入到targetEle前面 parentEle.replaceChild(newEle, oldEle) 用新节点替换原有的旧子节点 element.remove() 删除某个标签
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() // 删除当前元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>18.增删元素</title><script>/*1 对页面的元素进行增删操作| API | 功能 || ---------------------------------------- | ------------------------------------------ || document.createElement(“标签名”) | 创建元素节点并返回，但不会自动添加到文档中 || document.createTextNode(“文本值”) | 创建文本节点并返回，但不会自动添加到文档中 || element.appendChild(ele) | 将ele添加到element所有子节点后面 || parentEle.insertBefore(newEle,targetEle) | 将newEle插入到targetEle前面 || parentEle.replaceChild(newEle, oldEle) | 用新节点替换原有的旧子节点 || element.remove() | 删除某个标签 |*/</script><script>/*1 获得document dom树window.document2 从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.firstChildwhile(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> 
19正则表达式处理字符串
语法
var patt=new RegExp(pattern,modifiers);或者更简单的方式:var patt=/pattern/modifiers;
方法
修饰符
修饰符 描述 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的方法
方法 描述 search 检索与正则表达式相匹配的值。 match 找到一个或多个正则表达式的匹配。 replace 替换与正则表达式匹配的子串。 split 把字符串分割为字符串数组。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>正则表达式处理字符串</title><script>/*语法var patt=new RegExp(pattern,modifiers);或者更简单的方式:var patt=/pattern/modifiers;> 修饰符| 修饰符 | 描述| :------------------------ | :---------------------------------------------| [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的方法| 方法 | 描述| :-----------------| :---------------------------| [search] | 检索与正则表达式相匹配的值。| [match] | 找到一个或多个正则表达式的匹配。| [replace] | 替换与正则表达式匹配的子串。| [split] | 把字符串分割为字符串数组。*/</script><script>/*验证*/// 创建一个最简单的正则表达式对象var reg1 = /o/;// 创建一个字符串对象作为目标字符串var str1 = 'Hello World!';// 调用正则表达式对象的test()方法验证目标字符串是否满足我们指定的这个模式，返回结果trueconsole.log("/o/.test('Hello World!')=" + reg1.test(str1));console.log("******************上一个完************************")/* 匹配*/// 创建一个最简单的正则表达式对象var reg2 = /o/;// 创建一个字符串对象作为目标字符串var str2 = 'Hello World!';// 在目标字符串中查找匹配的字符，返回匹配结果组成的数组var resultArr1 = str2.match(reg2);// 数组长度为1console.log("resultArr1.length="+resultArr1.length);// 数组内容是oconsole.log("resultArr1[0]="+resultArr1[0]);console.log("******************上一个完************************")/*替换*/// 创建一个最简单的正则表达式对象var reg3 = /o/;// 创建一个字符串对象作为目标字符串var str = 'Hello World!';var newStr = str.replace(reg3,'@');// 只有第一个o被替换了，说明我们这个正则表达式只能匹配第一个满足的字符串console.log("str.replace(reg)="+newStr);//Hell@ World!// 原字符串并没有变化，只是返回了一个新字符串console.log("str="+str);//str=Hello World!console.log("******************上一个完************************")/*全文查找*/// 目标字符串var targetStr1 = 'Hello World!';// 没有使用全局匹配的正则表达式var reg4 = /[A-Z]/;// 获取全部匹配var resultArr2 = targetStr1.match(reg4);// 数组长度为1console.log("resultArr2.length="+resultArr2.length);// 遍历数组，发现只能得到'H'for(var i = 0; i < resultArr2.length; i++){console.log("resultArr2["+i+"]="+resultArr2[i]);}console.log("*******使用全文查找对比：上没有使用，下使用************")/*对比*/// 目标字符串var targetStr11 = 'Hello World!';// 使用了全局匹配的正则表达式var reg41 = /[A-Z]/g;// 获取全部匹配var resultArr21 = targetStr11.match(reg41);// 数组长度为2console.log("resultArr.length="+resultArr21.length);// 遍历数组，发现可以获取到“H”和“W”for(var j = 0; j < resultArr21.length; j++){console.log("resultArr21["+j+"]="+resultArr21[j]);}console.log("******************上一个完************************")/*忽略大小写*///目标字符串var targetStr2 = 'Hello WORLD!';//没有使用忽略大小写的正则表达式var reg5 = /o/g;//获取全部匹配var resultArr3 = targetStr2.match(reg5);//数组长度为1console.log("resultArr3.length="+resultArr3.length);//遍历数组，仅得到'o'for(var k = 0; k < resultArr3.length; k++){console.log("resultArr3["+k+"]="+resultArr3[k]);}console.log("*********忽略大小写对比：上没有使用，下使用*************")/*对比*///目标字符串var targetStr21 = 'Hello WORLD!';//使用了忽略大小写的正则表达式var reg51 = /o/gi;//获取全部匹配var resultArr31 = targetStr21.match(reg51);//数组长度为2console.log("resultArr.length="+resultArr31.length);//遍历数组，得到'o'和'O'for(var p = 0; p < resultArr31.length; p++){console.log("resultArr31["+p+"]="+resultArr31[p]);}console.log("******************上一个完************************")/*元字符使用*/var str01 = 'I love Java';var str02 = 'Java love me';// 匹配以Java开头var reg6 = /^Java/g;console.log('reg6.test(str01)='+reg6.test(str01)); // falseconsole.log("<br />");console.log('reg6.test(str02)='+reg6.test(str02)); // trueconsole.log("**********元字符使用，开头上，结尾下***************")var str011 = 'I love Java';var str022 = 'Java love me';// 匹配以Java结尾var reg61 = /Java$/g;console.log('reg61.test(str011)='+reg61.test(str011)); // trueconsole.log("<br />");console.log('reg61.test(str022)='+reg61.test(str022)); // falseconsole.log("******************上一个完************************")/*字符集合的使用*///n位数字的正则var targetStr3="123456789";var reg7=/^[0-9]{0,}$/;//或者 ： var reg=/^\d*$/;var b = reg7.test(targetStr3);//trueconsole.log(b)console.log("********字符集合的使用 上n位数字的正则 下数字+字母+下划线，6-16位**********")//数字+字母+下划线，6-16位var targetStr31="HelloWorld";var reg71=/^[a-z0-9A-Z_]{6,16}$/;var b1 = reg71.test(targetStr31);//trueconsole.log(b1)console.log("******************上一个完************************")</script>
</head>
<body></body>
</html> 
相关文章：
JAVAWeb之javascript学习
1.js引入方式 1. 内嵌式：在head中，通过一对script标签引入JS代码；cript代码放置位置有一定的随意性，一般放在head标签中；2.引入外部js文件 在head中，通过一对script标签引入外部JS代码；注意&…...
电脑与优傲协作机器人（实体）的TCP通讯（操作记录）
目录 一、UR通信端口 二、电脑（客户端）连接协作机器人（服务端） 1.设置网络方法 2.检查设置 3.示教器切换远程控制（注） 4.客户端与协作机器人建立连接 5.连接测试 三、电脑（服务端&#…...
C++初阶——动态内存管理
目录 1、C/C内存区域划分 2、C动态内存管理：malloc/calloc/realloc/free 3、C动态内存管理：new/delete 3.1 new/delete内置类型 3.2 new/delete自定义类型 4、operator new与operator delete函数 5、new和delete的实现原理 5.1 内置类型 5.2 自定…...
)
Python 【图像分类】之 PyTorch 进行猫狗分类功能的实现(Swanlab训练可视化/ Gradio 实现猫狗分类 Demo)
Python 【图像分类】之 PyTorch 进行猫狗分类功能的实现(Swanlab训练可视化/ Gradio 实现猫狗分类 Demo) 目录 Python 【图像分类】之 PyTorch 进行猫狗分类功能的实现(Swanlab训练可视化/ Gradio 实现猫狗分类 Demo) 一、简单介绍 二、PyTorch 三、CNN 1、神经网络 2、卷…...
Attention显存统计与分析
Attention显存估计 简单的Attention函数 import torch import torch.nn as nn import einops class Attention(nn.Module):def __init__(self, dim, num_heads8, qkv_biasFalse, qk_scaleNone, attn_drop0., proj_drop0.):super().__init__()self.num_heads num_headshead_d…...
java反射
反射 Java 反射是 Java 提供的一种强大特性，它允许程序在运行时动态地获取类的信息，并操作类的属性和方法。这为编写灵活、可扩展的 Java 应用程序提供了强有力的支持 获取Class对象 package ref;public class Person {private String name ;private …...
Spring Boot入门
1、Spring Boot是什么 Spring Boot 帮我们简单、快速地创建一个独立的、生产级别的 Spring 应用（说明：Spring Boot底层是Spring） 大多数 Spring Boot 应用只需要编写少量配置即可快速整合 Spring 平台以及第三方技术 特性： 快速…...
Spring Web：深度解析与实战应用
概述 大家好，欢迎来到今天的技术分享。我是你们的老朋友，今天，我们要深入探讨的是Spring Web模块，这个模块为Java Web应用程序提供了全面的支持，不仅具备基本的面向Web的综合特性，还能与常见框架如Struts2无…...
学习日志019--初识PyQt
使用pyqt创建一个登录界面 from PyQt6.QtCore import Qt # 引入pyqt6包 from PyQt6.QtGui import QIcon, QMovie from PyQt6.QtWidgets import QApplication, QWidget, QPushButton, QLabel, QLineEdit import sysclass MyWidget(QWidget):# 构造函数，继承父类的构造…...
Swift 宏（Macro）入门趣谈（五）
概述 苹果在去年 WWDC 23 中就为 Swift 语言新增了“其利断金”的重要小伙伴 Swift 宏（Swift Macro）。为此，苹果特地用 2 段视频（入门和进阶）颇为隆重的介绍了它。 那么到底 Swift 宏是什么？有什么用&…...
Linux 35.6 + JetPack v5.1.4@DeepStream安装
Linux 35.6 JetPack v5.1.4DeepStream安装 1. 源由2. 步骤Step 1 安装Jetpack 5.1.4 L4T 35.6Step 2 安装依赖组件Step 3 安装librdkafkaStep 4 安装 DeepStream SDKStep 5 测试 deepstream-appStep 6 运行 deepstream-app 3. 总结3.1 版本问题3.2 二进制help 4. 参考资料 1. …...
C++基础:list的底层实现
文章目录 1.基本结构2.迭代器的实现2.1 尾插的实现2.2 迭代器的实现 3.打印函数(模版复用实例化)4.任意位置的插入删除1. 插入2. 删除 5.析构与拷贝构造5.1 析构函数5.2 拷贝构造5.3 赋值重载 1.基本结构 与vector和string不同list需要: 一个类来放入数据和指针也就是节点 一…...
Spring中@Transactional注解与事务传播机制
文章目录 事务传播机制事务失效的场景 事务传播机制 事务的传播特性指的是 当一个事务方法调用另一个事务方法时，事务方法应该如何执行。 事务传播行为类型外部不存在事务外部存在事务使用方式REQUIRED(默认)开启新的事务融合到外部事务中Transactional(propagati…...
实验七 用 MATLAB 设计 FIR 数字滤波器
实验目的 加深对窗函数法设计 FIR 数字滤波器的基本原理的理解。 学习用 Matlab 语言的窗函数法编写设计 FIR 数字滤波器的程序。 了解 Matlab 语言有关窗函数法设计 FIR 数字滤波器的常用函数用法。 掌握 FIR 滤波器的快速卷积实现原理。 不同滤波器的设计方法具有不同的优…...
Linux - selinux
七、selinux 1、说明 SELinux是Security-Enhanced Linux的缩写，意思是安全强化的linux。 SELinux是对程序、文件等权限设置依据的一个内核模块。由于启动网络服务的也是程序，因此刚好也 是能够控制网络服务能否访问系统资源的一道关卡。 传统的文件权…...
【STL】C++ vector类模板
文章目录 基本概念vector的使用定义和初始化构造函数赋值操作容量和大小插入和删除数据存取 互换容器vector的迭代器vector储存自定义数据类型 基本概念 vector是类型相同的对象的容器，vector的大小可以变化，可以向数组中增加元素。因此，vec…...
物联网——WatchDog（监听器）
看门狗简介 独立看门狗框图 看门狗原理：定时器溢出，产生系统复位信号；若定时‘喂狗’则不产生系统复位信号 定时中断基本结构（对比） IWDG键寄存器 独立看门狗超时时间 WWDG(窗口看门狗) WWDG特性 WWDG超时时间 由于…...
从零开始写游戏之斗地主-网络通信
在确定了数据结构后，原本是打算直接开始写斗地主的游戏运行逻辑的。但是突然想到我本地写出来之后，也测试不了啊，所以还是先写通信模块了。 基本框架 在Java语言中搞网络通信，那么就得请出Netty这个老演员了。 主要分为两个端&…...
【智能控制】实验，基于MATLAB的模糊推理系统设计,模糊控制系统设计
关注作者了解更多 我的其他CSDN专栏 过程控制系统 工程测试技术 虚拟仪器技术 可编程控制器 工业现场总线 数字图像处理 智能控制 传感器技术 嵌入式系统 复变函数与积分变换 单片机原理 线性代数 大学物理 热工与工程流体力学 数字信号处理 光电融合集成电路…...
Vega Editor 基于 Web 的图形编辑器
Vega Editor 是一个强大的基于 Web 的图形编辑器，专为 Vega 和 Vega-Lite 可视化语法设计。它提供了一个交互式的环境，用户可以在其中编写、预览和分享他们的 Vega 和 Vega-Lite 可视化作品。Vega 和 Vega-Lite 是用于声明性可视化的开源语法，…...
SQL 中SET @variable的使用
在 SQL 中，SET variable 用于声明和赋值用户定义的变量。具体来说， 符号用于表示一个局部变量，可以在 SQL 语句中存储和使用。它通常在存储过程、函数或简单的 SQL 查询中使用。 1. 声明并赋值给变量 你可以使用 SET 语句给一个变量赋值。例…...
基于 Vite 封装工具库实践
项目背景：公司在多个项目中频繁使用相同的工具函数。为了避免每次开发新项目时都重复复制代码，决定通过 Vite 封装一个时间函数组件库。该库将被发布到 Verdaccio 供团队其他项目使用。 项目介绍 本项目封装了一个时间函数工具库，使用 Momen…...
)
Oracle DataGuard 主备正常切换 (Switchover)
前言 众所周知，DataGuard 的切换分为两种情况： 系统正常情况下的切换：这种方式称为 switchover，是无损切换，不会丢失数据。灾难情况下的切换：这种情况下一般主库已经启动不起来了，称为 failov…...
[Redis#13] cpp-redis接口 | set | hash |zset
目录 Set 1. Sadd 和 Smembers 2. Sismember 3. Scard 4. Spop 5. Sinter 6. Sinter store Hash 1. Hset 和 Hget 2. Hexists 3. Hdel 4. Hkeys 和 Hvals 5. Hmget 和 Hmset Zset 1. Zadd 和 Zrange 2. Zcard 3. Zrem 4. Zscore cpp-redis 的学习 主要关注于…...
青海摇摇了3天，技术退步明显.......
最近快手上的青海摇招聘活动非常火热，我已经在思考是否备战张诗尧的秋招活动。开个玩笑正片开始： 先说一下自己的情况，大专生，20年通过校招进入杭州某软件公司，干了接近4年的功能测试，今年年初，…...
Flask+Minio实现断点续传技术教程
什么是MinIO MinIO是一个高性能的分布式对象存储服务，与Amazon S3 API兼容。它允许用户存储和检索任意规模的数据，非常适合于使用S3 API的应用程序。MinIO支持多租户存储，提供高可用性、高扩展性、强一致性和数据持久性。它还可以作为软件定义…...
Java中Logger定义的三种方式
在 Java 项目中，日志记录是开发中的一个重要部分，用于跟踪系统运行状态、排查问题以及记录重要事件。在定义日志记录器时，经常会遇到一些写法上的选择，比如 Logger 的作用域、是否使用静态变量，以及如何命名变量。本篇…...
模型压缩技术
目录 模型压缩技术 权重剪枝： 量化技术： 知识蒸馏： 低秩分解： 一、权重剪枝 二、量化技术 三、知识蒸馏 四、低秩分解 模型压缩技术 权重剪枝： 描述：通过删除模型中不重要的权重来减少参数数量和计算量。举例说明：假设我们有一个神经网络模型，其中某些神经元的…...
面试题整理
1 spring使用中有哪些设计模式 工厂模式-beanFactory，代理模式-aop，单例模式-每个bean默认都是单例的，原型模式-当将bean的作用域改为prototype时每次获取bean时使用了原型模式创建对象，责任链模式-dispatchServle查找url对应的处理器映射器时使用了，观察者模式-spring的…...
Linux
1、显示系统中所有进程 ps -ef运行效果： [rootredhat-9 ~]# ps -ef UID PID PPID C STIME TTY TIME CMD root 1 0 0 19:01 ? 00:00:01 /usr/lib/systemd/systemd rhgb --switched-r root 2 0 0…...
力扣_2389. 和有限的最长子序列
力扣_2389. 和有限的最长子序列 给你一个长度为 n 的整数数组 nums ，和一个长度为 m 的整数数组 queries 。 返回一个长度为 m 的数组 answer ，其中 answer[i] 是 nums 中 元素之和小于等于 queries[i] 的 子序列 的 最大 长度 。 子序列 是由一个数组…...
UI设计从入门到进阶，全能实战课
课程内容： ├── 【宣导片】从入门到进阶!你的第一门UI必修课!.mp4 ├── 第0课：UI知识体系梳理 学习路径.mp4 ├── 第1课：IOS设计规范——基础规范与切图.mp4 ├── 第2课：IOS新趋势解析——模块规范与设计原则(上).mp4…...
)
Formality：等价性检查的流程与模式(Guide、Setup、Preverify、Match与Verify)
相关阅读 Formalityhttps://blog.csdn.net/weixin_45791458/category_12841971.html?spm1001.2014.3001.5482 等价性检查的流程 图1概述了使用Formality进行等效性检查的具体步骤。 图1 等价性检查流程 启动Formality(Start Formality) 要启动Formality，请…...
【Linux】————（日志、线程池及死锁问题）
作者主页： 作者主页 本篇博客专栏：Linux 创作时间 ：2024年11月29日 日志 关于日志，首先我们来说一下日志的作用， 作用： 问题追踪：通过日志不仅仅包括我们程序的一些bug，也可以在…...
【自动化】配置信息抽取
公共基本信息配置文件抽取 公共基本信息比如卖家、买家、管理员，验证码等基本信息，再比如数据库、redis、各个服务的域名，这些目前是写死在代码之中的，为了能够更好的维护他们，我们将他们放入配置文件进行管理 公共的…...
Python毕业设计选题：基于django+vue的校园影院售票系统
开发语言：Python框架：djangoPython版本：python3.7.7数据库：mysql 5.7数据库工具：Navicat11开发软件：PyCharm 系统展示 管理员登录 管理员功能界面 用户管理 影院信息管理 电影类型管理 电影信息管理 系统…...
Docker化部署Flask：轻量级Web应用的快速部署方案
Flask是一个用Python编写的轻量级Web应用框架，以其简洁性和灵活性而受到开发者的喜爱。Docker作为一种流行的容器化技术，为应用的部署和管理提供了极大的便利。本文将探讨Flask的优点、Docker部署的好处，并详细介绍如何将Flask应用Docker化部…...
centos怎么通过docker安装一个gitlab
在CentOS上通过Docker安装GitLab的步骤如下： 安装Docker引擎： 首先，需要在你的CentOS系统上安装Docker。可以通过以下命令来安装Docker：yum install -y yum-utils yum-config-manager --add-repo https://download.docker.com/lin…...
docker 运行my-redis命令
CREATE TABLE orders ( order_id bigint NOT NULL COMMENT "订单ID", dt date NOT NULL COMMENT "日期", merchant_id int NOT NULL COMMENT "商家ID", user_id int NOT NULL COMMENT "用户ID", good_id int NOT NULL COMMENT "商…...
qt6.4.0+visual studio2022+opencv
qt6.4.0visual studio2022opencv 补充：在安装完Qt后还需要配置环境变量...
23种设计模式之适配器模式
目录 1. 简介1.1 定义1.2 结构和组成部分 2. 代码2.1 MediaPlayer2.2 AdvanceMediaPlayer2.3 VicPlayer2.4 Mp4Player2.5 MediaPlayerAdapter2.6 AudioPlayer2.7 Test 3. 适用场景4. 优点和缺点5. 总结 1. 简介 1.1 定义 适配器模式（Adapter Pattern）是…...
剖析go协程池实现原理
go协程池实现 在go语言编程中有一种池肯定避免不了，那就是-协程池，无论你是日常工作还是面试中面试官都无法避免协程池，掌握协程池你也就算是入门go的并发编程了，打一波广告后面会有专门的文章来介绍如何在go中进行并发编程。 协…...
渗透测试--Linux上获取凭证
在测试过程中我们也会发现一些Linux主机加域的情况，虽然不多见，但它确实存在。正所谓技多不压身，这样能够触类旁通的知识，我们怎能错过，所以在此我们将会主要探讨从Linux主机上获取域凭证的方法。主要有以下内容&#…...
【笔记】自动驾驶预测与决策规划_Part9_数据驱动前沿算法与发展趋势
文章目录 数据驱动前沿算法与发展趋势0. 前言1. 端到端自动驾驶引言2. 端到端自动驾驶2.1 端到端自动驾驶早期尝试 ALVINN2.2 基于模仿学习的端到端系统 NVIDIA-E2E2.3 基于强化学习的端到端系统2.4 多模态融合的自动驾驶 Transfuser2.5 模块化端到端 UniAD2.6 模块化端到端 VA…...
工业公辅车间数智化节能头部企业，蘑菇物联选择 TDengine 升级 AI 云智控
小T导读：在工业节能和智能化转型的浪潮中，蘑菇物联凭借其自研的灵知 AI 大模型走在行业前沿，为高能耗设备和公辅能源车间提供先进的 AI 解决方案。此次采访聚焦于蘑菇物联与 TDengine 的合作项目，通过 AI 云智控平台的建设&#x…...
【Linux】开启你的Linux之旅：初学者指令指南
Linux相关知识点可以通过点击以下链接进行学习一起加油！ 在 Linux 开发中，GDB 调试器和 Git 版本控制工具是开发者必备的利器。GDB 帮助快速定位代码问题，Git 则提供高效的版本管理与协作支持。本指南将简明介绍两者的核心功能与使用技巧&…...
Vite 6.0 发布：引领现代前端开发新方向
Vite 6.0 带来了大量更新与优化，旨在简化开发流程、提升性能，并解决现代 Web 开发中的诸多挑战。本次更新引入了 实验性环境 API 和现代化的工具链，进一步巩固了 Vite 作为开发者首选工具的地位。以下是关于新特性、生态发展以及重要更新的全…...
深入了解阿里云 OSS：强大的云存储解决方案
在现代互联网应用中，数据存储是一个不可忽视的环节。随着数据量的不断增长，传统的存储方式已经无法满足高速、低成本、大容量的需求。阿里云 OSS（对象存储服务）作为一种高性能、低成本且具备高度扩展性的云存储服务，已…...
canvas绘制网络地址图片
canvas在绘制网络地址图片时，需要先下载成临时路径 export function downLoadBgImg (url) {return new Promise((r,j) > {uni.downloadFile({url,success : res > {if (res.statusCode 200) {r(res.tempFilePath);return;};j(依赖文件下载失败);},fail : er…...
《DSL-FIQA》论文翻译
《DSL-FIQA: Assessing Facial Image Quality Via Dual-Set Degradation Learning and Landmark-Guided Transformer》 原文链接：DSL-FIQA: Assessing Facial Image Quality via Dual-Set Degradation Learning and Landmark-Guided Transformer | IEEE Conference…...