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代码；注意&…...
vue3中是如何实现双向数据绑定的
在 Vue 3 中，双向数据绑定主要通过 v-model 指令实现。v-model 是一个语法糖，它内部实际上结合了 v-bind 和 v-on 指令来实现数据的双向绑定。下面详细介绍 Vue 3 中双向数据绑定的实现原理和使用方法。 双向数据绑定的基本原理 v-bind 指令࿱…...
JavaScript事件机制详解
JavaScript中的事件模型是指当用户与网页进行交互时，浏览器会触发不同类型的事件，开发者可以通过添加事件监听器来响应这些事件。事件流是描述事件在页面元素中传播的过程，从窗口对象开始，逐级向下传播到最具体的元素，…...
k8s运行运行pod报错超出文件描述符表限制
1.问题描述 运行pod超过文件描述符表 unable to allocate file descriptor table - out of memory/opt/COMMAND.sh: line 9: 2.查看设备的文件描述符限制 操作前一定要先查询这个值，2097152这个值即为我们可设置的最大值，超过这个值后将无法登录&am…...
vue 2 父组件根据注册事件，控制相关按钮显隐
目标效果 我不注册事件，那么就不显示相关的按钮 注册了事件，才会显示相关内容 实现思路 组件在 mounted 的时候可以拿到父组件注册监听的方法 拿到这个就可以做事情了 mounted() {console.log(this.$listeners, this.$listeners);this.show.search !…...
22智能 图
例题 根据下列顶点之间的关系，画出相应的图结构 A -> B, C, D B -> A, C, C -> A, D, E, D -> B, E, E -> C, 数据结构：使用邻接表表示图，每个顶点有一个链表来存储与它相邻的顶点。 功能： 创建图。 添加边。 打…...
Springfox、Swagger 和 Springdoc
Springfox、Swagger 和 Springdoc 是用于在 Spring Boot 项目中生成 API 文档的工具，但它们之间有显著的区别和演进关系： 1. Swagger 简介 Swagger 是一个开源项目，旨在为 RESTful APIs 提供交互式文档。最早由 SmartBear 开发，…...
编程基础篇
什么是编程？ 原文地址 ：样式不太熟悉，有点单一，原文地址 一千个人眼中有一千个哈姆雷特，以下是我眼中的编程： A每天出门需要关一下空调，在家喜欢室内温度在 20左右，6 点左右会打开灯…...
GPT视角下，如何在密码学研究中找到属于你的方向？
（本文所有内容由GPT生成）在密码学领域发现关键性的研究方向并成为一位优秀的密码学研究员，需要结合对领域趋势的洞察、扎实的理论基础以及创新的研究思维。以下是具体步骤和方法： 一、发现关键性研究方向 关注领域前沿动态 顶级会…...
【经典】星空主题的注册界面HTML,CSS,JS
目录 界面展示 完整代码 说明： 这是一个简单的星空主题的注册界面，使用了 HTML 和 CSS 来实现一个背景为星空效果的注册页面。 界面展示 完整代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8&…...
Linux学习——4_WEB服务器的部署及优化
WEB服务器的部署及优化 用户常用关于web信息 什么是www www是world wide web的缩写，即万维网，也就是全球信息广播 通常说的上网就是使用www来查询用户所需要的信息。 www可以结合文字、图形、影像以及声音等多媒体，超链接的方式将信息以…...
《Vue 组件化开发：构建可复用的模块》
一、Vue 组件化开发概述 组件化是 Vue.js 的核心概念之一，它允许将界面拆分成独立、可复用的组件，使得开发大型应用变得更加简单和高效。 组件的定义是实现应用中局部功能代码和资源的集合。Vue.js 的组件化用于将 UI 页面分割为若干组件进行组合和嵌套…...
贪心算法理论
系列博客目录 文章目录 系列博客目录贪心算法 (Greedy Algorithm)贪心算法的特点贪心算法的适用条件常见的贪心算法问题贪心算法的步骤贪心算法示例：活动选择问题贪心算法的优缺点 贪心算法 (Greedy Algorithm) 贪心算法是一种在每一步选择中都采取当前状态下最优的…...
JVM之Synthetic
Synthetic是人造，合成的意思，在虚拟机很多地方使用ACC_SYNTHETIC表示编译器自动生成的，区别于我们自己写的程序代码。这样说可能比较模糊，我们举个例子：我们创建一个内部类，如下 public class TestInnerCl…...
HCIE IGP双栈综合实验
实验拓扑 实验需求及解法 本实验模拟ISP网络结构，R1/2组成国家骨干网，R3/4组成省级网络，R5/6/7组成数据中 心网络。 配置所有ipv4地址，请自行测试直连。 R1 sysname R1 interface GigabitEthernet0/0/0ip address 12.1.1.1 255.…...
【k8s】监控metrics-server
metrics-server介绍 Metrics Server是一个集群范围的资源使用情况的数据聚合器。作为一个应用部署在集群中。Metric server从每个节点上KubeletAPI收集指标，通过Kubernetes聚合器注册在Master APIServer中。为集群提供Node、Pods资源利用率指标。 就像Linux 系统一样…...
第六届国际科技创新学术交流会暨管理科学信息化与经济创新发展（MSIEID 2024）
重要信息 大会官网：msieid2024.iaecst.org （点击了解大会，参会等内容） 大会时间：2024年12月6-8日 大会地点：中国-广州 大会简介 随着全球化和信息化的不断深入，管理科学、信息化和经济发展…...
将面具贴到人脸上的过程
使用OpenCV进行人脸面具贴合和变形以适应人脸的3D透视角度，通常需要以下步骤： 人脸检测：首先需要检测图像中的人脸位置。特征点检测：在检测到的人脸区域中，找到关键特征点，如眼睛、鼻子、嘴巴等。透视变换…...
【Maven】Nexus私服
6. Maven的私服 6.1 什么是私服 Maven 私服是一种特殊的远程仓库，它是架设在局域网内的仓库服务，用来代理位于外部的远程仓库（中央仓库、其他远程公共仓库）。一些无法从外部仓库下载到的构件，如项目组其他人员开发的…...
AI高中数学教学视频生成技术：利用通义千问、MathGPT、视频多模态大模型，语音大模型，将4个模型融合 ，生成高中数学教学视频，并给出实施方案。
大家好，我是微学AI，今天给大家介绍一下AI高中数学教学视频生成技术：利用通义千问、MathGPT、视频多模态大模型，语音大模型，将4个模型融合 ，生成高中数学教学视频，并给出实施方案。本文利用专家模…...
探索温度计的数字化设计：一个可视化温度数据的Web图表案例
随着科技的发展，数据可视化在各个领域中的应用越来越广泛。在温度监控和展示方面，传统的温度计已逐渐被数字化温度计所取代。本文将介绍一个使用Echarts库创建的温度计Web图表，该图表通过动态数据可视化展示了温度值，并通过渐变色…...
windows电脑上安装树莓派操作系统
在Windows电脑上安装树莓派通常涉及以下几个步骤：准备安装工具、下载树莓派系统镜像、烧录系统到SD卡、配置树莓派以及远程连接（如果需要无显示器操作）。以下是详细的步骤说明： 一、准备安装工具 安装树莓派官方烧录工具： 下载并安装Raspberry Pi Imager。这是一个官方的…...
交换机四大镜像（端口镜像、流镜像、VLAN镜像、MAC镜像）应用场景、配置实例及区别对比
在网络管理中，端口镜像、流镜像、VLAN镜像和MAC镜像都是用于监控和分析网络流量的重要技术。 端口镜像（Port Mirroring） 定义：端口镜像是将一个或多个源端口的流量复制到一个目标端口，以便于网络管理员能够监控和分析…...
我不是挂王-用python实现燕双鹰小游戏
一.准备工作 1.前言提要 作为程序员在浩瀚的数字宇宙中，常常感觉现实世界是一台精密运作的虚拟机，其底层的物理逻辑如同铁律般难以撼动。然而我们拥有在虚拟世界中自由驰骋、创造无限可能的独特力量。突发奇我想用Python写出燕双鹰的小游戏,这样想想就很…...
Java:反射、注解
文章目录 1. 反射1-1. 获取Class对象的三种方式1-2. 获取类的构造器、实例化对象1-3. 获取类的成员变量1-4. 获取类的成员方法 2. 注解2-1. 元注解2-2. 解析注解 1. 反射 反射：加载类，并允许以编程的方式解剖类中的各种成员变量、方法、构造器。 1-1. …...
Java 通过枚举类减少if else
目录 一. 案例1二. 案例2三. 案例3四. 案例4 枚举类聚合封装消息 一. 案例1 涉及到EnumMap的实际使用 ⏹定义一个枚举类，用来表示日本的各种支付方法对应的code import com.fasterxml.jackson.annotation.JsonFormat;// 让jackson将前台的数据封装数据到枚举类中 J…...
单链表---移除链表元素
对于无头单向不循环链表，给出头结点head与数值val，删除链表中数据值val的所有结点 #define ListNodeDataType val struct ListNode { struct ListNode* psll;ListNodeDataType val; } 方法一---遍历删除 移除所有数值为val的链表结点，…...
认识redis 及 Ubuntu安装redis
文章目录 一. redis概念二. redis应用场景二. redis的特性四. 使用Ubuntu安装redis 一. redis概念 redis 是在内存中存储数据的中间件, 用在分布式系统 redis是客户端服务器结构的程序, 客户端服务器之间通过网络来通信 二. redis应用场景 redis可用作数据库 类似MySQL, 但…...
Java开发网络安全常见问题
1、敏感信息明文传输 用户敏感信息如手机号、银行卡号、验证码等涉及个人隐私的敏感信息不通过任何加密直接明文传输。 如下图中小红书APP 的手机短信验证码登录接口，此处没有对用户手机号和验证码等信息进行加密传输，可以很简单的截取并开展一些合法的…...
C#基础之委托，事件
文章目录 1 委托1.1 简介1.2 操作使用1.2.1 声明委托（Delegate）1.2.2 实例化委托（Delegate）1.2.3 直接调用和invoke1.2.4 Invoke 和 BeginInvoke 1.3 委托的多播1.4 委托的匿名和lambda1.4.1 匿名方法1.4.2 lambda 表达式 1.5 内置…...
郑州设计师网站/南昌seo排名扣费
应用开启和退出是用户最常使用的场景，应用启动时间则是用户对应用启动性能最直观的感受。应用启动时间如何进行测试？本期测评将以8款常见的音视频类应用为例，分享绿色应用启动时间测试方法及标准。 一般情况下，应用启动时间在1秒以…...
石湾做网站/网站推广应该怎么做?
👇👇关注后回复 “进群” ，拉你进程序员交流群👇👇作者丨小集来源丨小集（ID：zsxjtip）苹果在 WWDC22 期间，同步更新了一版 《App Store 审查指南》。更新《App Store 审查…...
wordpress页面表格/企业老板培训课程
剖析tcp与udp及应用场景协议方案选择 什么是TCP和UDP TCP和UDP是TCP/IP协议中的两个传输层协议，它们使用IP路由功能把数据包发送到目的地，从而为应用程序及应用层协议（包 括：HTTP、SMTP、SNMP、FTP和Telnet）提供网…...
长春市长春网站建设哪家好/搜索引擎优化课程
默认的版本太低了，手动安装有一些麻烦，想采用Yum安装的可以使用下面的方案： 1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包，先删除他们 yum remove php.x86_64 php-cli.x86_64 php-common.x86_64 php-g…...
企业网站怎么做产品图片轮播/如何策划一个营销方案
(静态)类方法只能调用类(静态)变量，不能对非类(静态)成员变量调用，非静态方法即可以调用非类成员变量，也可以调用类变量不可以在非静态方法中定义静态变量 局部变量不能用静态修饰 1、静态变量：被static修饰的变量 静态变量和实例…...
广州市住房和城乡建设委员会网站/淘宝搜索关键词查询工具
2015年9月数据库流行榜单最新出炉！与上个月相比，最受欢迎的前10名排名不变。第一梯队依旧是三足继续鼎立：Oracle雄霸榜单，MySQL和SQL Server尾随其后。第二梯队仍是MongoDB为排头兵，稳步攀升。建议以前只专注于RDBMS的…...