清远做网站的,广州正规网站建设有哪些,北京空间信息传输中心,会简单的网站建设1.js引入方式 1. 内嵌式#xff1a;在head中#xff0c;通过一对script标签引入JS代码#xff1b;cript代码放置位置有一定的随意性#xff0c;一般放在head标签中#xff1b;2.引入外部js文件 在head中#xff0c;通过一对script标签引入外部JS代码#xff1b;注意在head中通过一对script标签引入JS代码cript代码放置位置有一定的随意性一般放在head标签中2.引入外部js文件 在head中通过一对script标签引入外部JS代码注意1.一个html文件中可以有多个script标签2.一对script标签不能在引入外部js文件同时定义内部脚本3.script标签如果用于外部js文件中间不要有任何字符包括空格和换行 HTML文件
!DOCTYPE html
html langen
headmeta charsetUTF-8title01.js引入方式/titlestyle.嘻嘻 {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 srcjs/js外部文件.js typetext/javascript/script
/head
bodybutton class嘻嘻 onclicksurprised1()点我有惊喜/buttonbutton class嘻嘻 onclicksurprised()点我有惊喜/button
/body
/htmljs文件
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 langen
headmeta charsetUTF-8title02.js变量和数据类型/titlescript//数值类型var i10//numberconsole.log(i)//10console.log(typeof i)//number//字符串类型var strhello//stringconsole.log(str)//helloconsole.log(typeof str)//string//引用数据类型var inew 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 xnullconsole.log(x)//nullconsole.log(typeof x)//object//JS中的变量具有如下特征代码var i10;var strhellovar itrue;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 langen
headmeta charsetUTF-8title03.运算符/titlescript//算数运算符console.log(10/2)//5console.log(10/4)//2.5console.log(10/0)//Infinityconsole.log(10%0)//NaN//复合算数运算符var i10console.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 langen
headmeta charsetUTF-8title04.分支结构/titlescript//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 monthStrprompt(请输入月份,例如: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 langen
headmeta charsetUTF-8title05.循环结构/title
/headscript/* while结构几乎和JAVA一致 for循环几乎和JAVA一致 foreach循环迭代数组时,和java不一样括号中的临时变量表示的是元素的索引,不是元素的值,()中也不在使用: 分隔,而是使用 in 关键字*///while结构document.write(h1while结构打印99 乘法表/h1)var i1while(i9){var j1while(ji){document.write(i*ji*jnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp)//nbsp:空格j}document.write(hr)i}document.write(brhr)document.write(h1for循环打印99 乘法表/h1)//for循环for (let j 1; j 9 ; j) {for (let k 1; k j ; k) {document.write(j*kj*knbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp)//nbsp:空格}document.write(hr)}//foreach循环//1.for循环遍历document.write(h1for循环遍历/h1)var array[孙俊祥,张军,上海,北京]document.write(ul)for (var index 0; index array.length ; index) {document.write(liarray[index]/li)}document.write(/ul)//2.foreach循环遍历document.write(h1foreach循环遍历/h1)var array[孙俊祥,张军,上海,北京]document.write(ul)for (var index in array) {document.write(liarray[index]/li)}document.write(/ul)/script
body/body
/html 6.js函数 函数说明函数没有权限控制符不用声明函数的返回值类型,需要返回在函数体中直接return即可,也无需void关键字参数列表中,无需数据类型调用函数时,实参和形参的个数可以不一致声明函数时需要用function关键字J函数没有异常列表语法1 function 函数名 (参数列表){函数体} 语法2 var 函数名 function (参数列表){函数体} !DOCTYPE html
html langen
headmeta charsetUTF-8title06.js函数/titlescript/*函数说明函数没有权限控制符不用声明函数的返回值类型,需要返回在函数体中直接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 suM1function (x, y){return x*y;}document.write(hrsuM1(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 langen
headmeta charsetUTF-8title07.js对象/titlescript/*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(hrh1这是语法1/h1hr年龄为 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(hrthis.play[i])}for (let index1 0; index1 this.play.length ; index1) {document.write(hrthis.play[index1])}*/}//获得对象属性值/*document.write(Person.name)document.write(Person.age)document.write(Person.sex)*///调用对象方法Person.plays();/*var person new Object();// 给对象添加属性并赋值person.name张小明;person.age10;person.foods[苹果,橘子,香蕉,葡萄];// 给对象添加功能函数person.eat function (){console.log(this.age岁的this.name喜欢吃:)for(var i 0;ithis.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;ithis.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(hrh1这是语法2/h1hr年龄为 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(hrthis.play[i])}for (let index1 0; index1 this.play.length ; index1) {document.write(hrthis.play[index1])}*/}}Person1.plays1()/script/head
body/body
/html8.JS语法 一.JSON的语法var obj{属性名:属性值,属性名:{属性名:属性值},属性名:[值1,值1,值3],属性名:[{},{}]}属性名和属性值(string类型)必须使用JSON字符串一般用于传递数据,所以字符串中的函数就显得没有意义,在此不做研究通过JSON.parse()方法可以将一个JSON串转换成对象通过JSON.stringify()方法可以将一个对象转换成一个JSON格式的字符串 HTML
!DOCTYPE html
html langen
headmeta charsetUTF-8title08.JS语法/title
/headscript/*一.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 personTestJSON.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 person999JSON.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 personnew Person(张军,18,男,frinds);//将Person对象转换为JSON串ObjectMapper objectMappernew 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 objectMappernew ObjectMapper();Person person objectMapper.readValue(personStr, Person.class);System.out.println(person);}Testpublic void test3() throws JsonProcessingException {//mapMap datanew HashMap();data.put(a,valuea);data.put(b,valueb);ObjectMapper objectMappernew ObjectMapper();String s objectMapper.writeValueAsString(data);System.out.println(s);}Testpublic void test4() throws JsonProcessingException {//listList datanew ArrayList();data.add(a);data.add(b);data.add(c);data.add(d);ObjectMapper objectMappernew ObjectMapper();String s objectMapper.writeValueAsString(data);System.out.println(s);}Testpublic void test5() throws JsonProcessingException {//arrayString[]data{a,b,c,d};ObjectMapper objectMappernew ObjectMapper();String s objectMapper.writeValueAsString(data);System.out.println(s);}Testpublic void test6() throws JsonProcessingException {Frinds frinds new Frinds(孙俊祥,19,男);Person personnew Person(张军,18,男,frinds);List datanew ArrayList();data.add(person);ObjectMapper objectMappernew 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 langen
headmeta charsetUTF-8title09.JS常用对象/titlescript/*数组 创建数组的四种方式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 arraynew Array(5)//方法3// var arraynew Array(1,2,3)//方法4var array[孙俊祥,19,float]console.log(array)console.log(array.length)//添加数据array[0]孙俊祥array[1]19array[10]truearray.length20console.log(array)console.log(array.length)//练习//concat连接数组var likefriend[张军,18, 肆小七,18]var likefriends[孙俊祥,19]var arrAlllikefriend.concat(likefriends)console.log(likefriend)console.log(likefriends)console.log(arrAll)//pop():删除最后一个元素并返回删除元素var likefriend1[张军,18, 肆小七,18]var likefriends1[孙俊祥,19]var arrAll1likefriend1.concat(likefriends1)//pop():删除最后一个元素并返回删除元素var resarrAll1.pop()console.log(res)//19console.log(likefriend1)console.log(likefriends1)//push():从尾端增加元素并返回长度var likefriend2[张军,18, 肆小七,18]var likefriends2[孙俊祥,19]var arrAll2likefriend2.concat(likefriends2)//push():从尾端增加元素并返回长度var lenarrAll2.push(孙长大大)console.log(len)console.log(arrAll2)console.log(likefriend2)console.log(likefriends2)//查找元素var likefriend3[张军,18, 肆小七,18]var likefriends3[孙俊祥,19]var arrAll3likefriend3.concat(likefriends3)//push():从尾端增加元素并返回长度var lenarrAll3.push(孙长大大)console.log(arrAll2)//查找//查找最先出现的位置var index1arrAll3.indexOf(孙俊祥)//查找最后出现的位置var index2arrAll3.lastIndexOf(孙长大大)console.log(index1)//4console.log(index2)//6//反转数组reverse()arrAll3.reverse()console.log(arrAll3)var index1arrAll3.indexOf(孙俊祥)var index2arrAll3.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 langen
headmeta charsetUTF-8title10.JS常用对象API/titlescript/*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用户向搜索域输入文本时触发 ( inputsearch)onselect用户选取文本时触发 ( input 和 textarea)onsubmit表单提交时触发
!DOCTYPE html
html langen
headmeta charsetUTF-8title11.JS事件的绑定/titlescript/* 鼠标事件| 属性 | 描述 || :---------------------------------------- | :------------------------------------- || [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] | 用户向搜索域输入文本时触发 ( inputsearch)| [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 flagconfirm(你确定要提交表单吗)//方法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!--鼠标事件--inputtypebuttonvalue原神onclickfun1() , fun2()ondblclickfun3()br!--鼠标事件--img src../HTML学习/图片/liuying.jpg onmouseoverfun4() onmousemovefun5() onmouseleavefun6()br!--键盘事件--input typetext onkeydownfun7() onkeyupfun8()!--表单事件--!--表单--form action../CSS学习/4.CSS定位.html methodget onsubmitreturn testSubmit() onresettestReset()用户昵称input typetextnamerealNameonfocustestFocus()onblurtestBlur()onchangetestChange(this.value)br登录账号input typetext namelogoinManebr密码input typetext valuebr选择籍贯select onchangetestChange2(this.value)option云南/optionoption四川/optionoption贵州/optionoption江西/option/selectbrinput typesubmit value注册input typereset 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 langen
headmeta charsetUTF-8title12.DOM事件的触发/titlescript/*一.事件的绑定方式1.通过元素属性绑定 on*****2.通过DOM编程动态绑定注意事项1.一个事项可以绑定多个函数2.一个元素可以同时绑定多个事件二.常见事件1.表单事件2.键盘事件3.鼠标事件onclick单击ondblclick双击onmouseleave鼠标指针移出元素时触发onmouseover鼠标移到某元素之上4.页面加载事件onload三.事件的触发1.行为触发2.DOM编程触发*//scriptscript/*//方法1function ready(){//通过DOM编程操作元素var byId document.getElementById(我爱你1314);//绑定一个单击事件byId.onclickfunction (){alert(你点击我干什么我不想动)}}*///方法2window.onloadfunction (){//为div1绑定单击事件var div1document.getElementById(d1)div1.onclickfunction (){div1.style.backgroundColor#87faff}//通过DOM编程操作元素var byId document.getElementById(我爱你1314);//绑定一个单击事件byId.onclickfunction (){alert(你点击我干什么我不想动)//通过DOM编程触发事件相当于某些事件发生了//通过DOM编程触发div的单击事件div1.onclick();}}/scriptstyle.div1{width: 100px;height: 100px;background-color: red;}/style/head!--//方法1body onloadready()--
bodydiv idd1 classdiv1/divbutton id我爱你1314 原神启动/buttona href14.BOM编程常见API.html14页/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 langen
headmeta charsetUTF-8title14.BOM检查常见API/titlescript//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.hrefhttp://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 onclickfunD()存储数据/buttonbutton onclickfunE()读取数据/buttonbutton onclickfunF()清除数据/buttonhrbutton onclickfunC()B站/buttonhrbutton onclickfunA()上一页/buttonbutton onclickfunB()下一页/buttona hrefhttp://bilibili.comB站/ahrinput typebutton value提示框 onclicktestAlert()/ brinput typebutton value确认框 onclicktestConfirm()/ brinput typebutton value对话框 onclicktestPrompt()/ brbutton onclickfun()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 csdiv01.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 langen
headmeta charsetUTF-8title16.DOM编程API/titlescript/*1 获得document dom树window.document2. 从document中获取操作元素1)直接获取document2)间接获取3 对元素操作1)操作元素属性2)操作元素样式3)操作元素文本4)增删元素*//scriptscript/*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 csdiv01.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 iddiv01input typetext classa idusername nameaaa/input typetext classb idpassword nameaaa/input typetext classa idemail/input typetext classb idaddress//divinput typetext classa/brinput typebutton value根据id获取指定元素 onclickfun1() idbtn01/input typebutton value根据标签名获取多个元素 onclickfun2() idbtn02/input typebutton value根据name属性值获取多个元素 onclickfun3() idbtn03/input typebutton value根据class属性值获得多个元素 onclickfun4() idbtn04/hrinput typebutton value通过父元素获取子元素 onclickfun5() idbtn05/input typebutton value通过子元素获取父元素 onclickfun6() idbtn06/input typebutton value通过当前元素获取兄弟元素 onclickfun7() idbtn07/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 csdiv01.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 langen
headmeta charsetUTF-8title17.操作元素属性值/titlescript/*1 属性操作| 需求 | 操作方式 || ---------- | -------------------------- || 读取属性值 | 元素对象.属性名 || 修改属性值 | 元素对象.属性名新的属性值 |2 内部文本操作| 需求 | 操作方式 || ---------------------------- | ----------------- || 获取或者设置标签体的文本内容 | element.innerText || 获取或者设置标签体的内容 | element.innerHTML |*//scriptscript/*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 csdiv01.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 buttonin1.value 嗨}function changeStyle() {var in1 document.getElementById(in1)// 语法 元素.style.样式名 原始样式名中的-符号 要转换驼峰式 background-color backgroundColorin1.style.color greenin1.style.borderRadius 5px}function changeText() {var div01 document.getElementById(div01)/*语法 元素名.innerText 只识别文本元素名.innerHTML 同时可以识别html代码*/console.log(div01.innerText)div01.innerHTML h1嗨/h1}/scriptstyle#in1 {color: red;}/style
/head
bodyinput idin1 typetext valuehellodiv iddiv01hello/divhrbutton onclickchangeAttribute()操作属性/buttonbutton onclickchangeStyle()操作样式/buttonbutton onclickchangeText()操作文本/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 csdiv01.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 langen
headmeta charsetUTF-8title18.增删元素/titlescript/*1 对页面的元素进行增删操作| API | 功能 || ---------------------------------------- | ------------------------------------------ || document.createElement(“标签名”) | 创建元素节点并返回但不会自动添加到文档中 || document.createTextNode(“文本值”) | 创建文本节点并返回但不会自动添加到文档中 || element.appendChild(ele) | 将ele添加到element所有子节点后面 || parentEle.insertBefore(newEle,targetEle) | 将newEle插入到targetEle前面 || parentEle.replaceChild(newEle, oldEle) | 用新节点替换原有的旧子节点 || element.remove() | 删除某个标签 |*//scriptscript/*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 csdiv01.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 idcs长沙/licsli.idcscsli.innerText长沙// 将子元素放入父元素中var cityul document.getElementById(city)// 在父元素中追加子元素cityul.appendChild(csli)}function addCsBeforeSz(){// 创建一个新的元素// 创建元素var csli document.createElement(li) // li/li// 设置子元素的属性和文本 li idcs长沙/licsli.idcscsli.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 idcs长沙/licsli.idcscsli.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
bodyul idcityli idbj北京/lili idsh上海/lili idsz深圳/lili idgz广州/li/ulhr!-- 目标1 在城市列表的最后添加一个子标签 li idcs长沙/li --button onclickaddCs()增加长沙/button!-- 目标2 在城市列表的深圳前添加一个子标签 li idcs长沙/li --button onclickaddCsBeforeSz()在深圳前插入长沙/button!-- 目标3 将城市列表的深圳替换为 li idcs长沙/li --button onclickreplaceSz()替换深圳/button!-- 目标4 将城市列表删除深圳 --button onclickremoveSz()删除深圳/button!-- 目标5 清空城市列表 --button onclickclearCity()清空/button/body
/html 19正则表达式处理字符串
语法 var pattnew 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 中的 acaaaaaaandy 中所有的 a。n*匹配任何包含零个或多个 n 的字符串。例如/bo*/ 匹配 A ghost booooed 中的 booooA bird warbled 中的 b但是不匹配 A goat grunted。n?匹配任何包含零个或一个 n 的字符串。例如/e?le?/ 匹配 angel 中的 elangle 中的 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, 中的 acaandy, 中的两个 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 langen
headmeta charsetUTF-8title正则表达式处理字符串/titlescript/*语法var pattnew 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 中的 acaaaaaaandy 中所有的 a。| [n*] | 匹配任何包含零个或多个 n 的字符串。例如/bo/ 匹配 A ghost booooed 中的 booooA bird warbled 中的 b但是不匹配 A goat grunted。| [n?] | 匹配任何包含零个或一个 n 的字符串。例如/e?le?/ 匹配 angel 中的 elangle 中的 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, 中的 acaandy, 中的两个 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] | 把字符串分割为字符串数组。*//scriptscript/*验证*/// 创建一个最简单的正则表达式对象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.lengthresultArr1.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(strstr);//strHello World!console.log(******************上一个完************************)/*全文查找*/// 目标字符串var targetStr1 Hello World!;// 没有使用全局匹配的正则表达式var reg4 /[A-Z]/;// 获取全部匹配var resultArr2 targetStr1.match(reg4);// 数组长度为1console.log(resultArr2.lengthresultArr2.length);// 遍历数组发现只能得到Hfor(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.lengthresultArr21.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.lengthresultArr3.length);//遍历数组仅得到ofor(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.lengthresultArr31.length);//遍历数组得到o和Ofor(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 targetStr3123456789;var reg7/^[0-9]{0,}$/;//或者 var reg/^\d*$/;var b reg7.test(targetStr3);//trueconsole.log(b)console.log(********字符集合的使用 上n位数字的正则 下数字字母下划线6-16位**********)//数字字母下划线6-16位var targetStr31HelloWorld;var reg71/^[a-z0-9A-Z_]{6,16}$/;var b1 reg71.test(targetStr31);//trueconsole.log(b1)console.log(******************上一个完************************)/script
/head
body/body
/html
