JavaScript 简介
JavaScript，简称 js，是一种基于对象（object-based）和事件驱动（Event Driven）的简单的并具有安全性能的脚本语言。
JavaScript 特性
- JavaScript 是解释性语言，而不是编译性语言；
- 在支持 JavaScript 的浏览器中运行的过程中没有编译过程，而是逐行解释执行。
- JavaScript 是一种轻量级的脚本语言（script language）。
- 不具备开发操作系统的能力，只能用来编写控制其他大型应用程序（比如浏览器）的脚本。
- Javascript 是一种嵌入式语言，本身不提供任何 I/O 相关的 API，主要通过调用宿主环境（host）的 API 来工作。
- JavaScript 是可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 组成
ECMAScript：JavaScript 的核心，语法格式，使用方法
文档对象模型（DOM，document object model）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。
DOM 将把整个页面规划成由节点层级构成的文档 document 对象 有 一个一个的元素（element）
浏览器对象模型（BOM，browser object model）：对浏览器窗口进行访问和操作
JavaScript 特点：
脚本语言：脚本语言是一种简单的程序，是由一些 ASCII 字符构成，可以使用任何一种文本编辑器编写。
一些程序语言（如 C、C++、Java 等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。
脚本语言是指在 web 浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。
基于对象的语言：非面向对象
面向对象有三大特点（封装，继承，多态）缺一不可。
通常"基于对象"是使用对象，但无法利用现有对象模板产生新的对象类型，也就是说"基于对象"没有继承的特点。
注意：目前的 js 脚本已经支持创建自定义类，继承等
事件驱动：在网页中执行了某种操作的动作，被称为"事件"(Event)
比如按下鼠标、移动窗口、选择菜单等都可以视为事件。
当事件发生后，可能会引起相应的事件响应。
简单性 ：变量类型是采用弱类型，并未使用严格的数据类型。
安全性：JavaScript 不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互
跨平台（系统）性：JavaScript 依赖于浏览器本身，与操作平台无关。
只要计算机安装了支持 JavaScript 的浏览器（装有JavaScript 解释器），JavaScript 程序就可以正确执行。
缺点：
部分浏览器兼容性不好！
各种浏览器支持 JavaScript 的程度是不一样的，支持和不完全支持 JavaScript 的浏览器在浏览同一个带有 JavaScript 脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。
JavaScript 的版本
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
JavaScript 的数据类型
基本数据类型
undefined 类型：只有一个值 undefined（未定义），它是一个保留字。表示变量虽然已经声明，但却没有赋值
number 类型：所有的整数和小数
注：NaN 是一个特殊的数字值（typeof NaN的结果为number），是not a number的缩写，表示不是一个合法的数字。不是数字的字符串通过函数进行数据类型转换为数字，结果就是 NaN
string 类型：所有被单引号和双引号包裹的字符串
boolean 类型：布尔值，只有两个值 true 和 false
object 类型：所有对象的数据类型
注：
可以使用关键字 typeof 可以查看变量的数据类型
null 类型：只有一个值 null（空），它是一个保留字。表示没有值，用于定义空的或不存在的引用。
注意：
空值不等同于空字符串 “” 或 0
undefined 类型就是使用 null 演化而来，所以 undefined == null 为 true
undefined 的数据类型是 undefined，null 的数据类型是 object，所以 undefined === null 为 false
Js中的四大基本数据类型？
-
①原始数据类型：字符串、数字、布尔值、空值、未定义(undefined)
-
②对象数据类型：Object
-
③数组：Array
-
④函数：Function
字符串拼接：+= | | 模板字符串：${}【注意：拼接使用反引号】
判断数据类型：type of()
JavaScript的系统对话框：
- alert()只有确定按钮
- confirm()有确定、取消按钮
- prompt()提示输出框
系统函数：
1、parseInt("字符串")
2、parseFloat("字符串")
3、是否是非数字：isNaN()
闭包(嵌套函数)：
优点：可以读取函数内部的变量，使这些值始终保存在内存中。
缺点：消耗内存大，造成网页性能问题。
作用域和作用域链 作用域： 全局作用域：在程序中的任何位置都能够被访问。 局部作用域：在定义的代码块和函数内部被访问。 作用域链： 本质：底层的变量查找机制--优先从当前函数开始，依次逐级查找父级作用域直到全局作用域。 总结： 1.嵌套关系的作用域串联起来形成了作用域链 2.相同作用域链中按着从小到大的规则查找变量 3.子作用域能够访问父作用域，父级作用域无法访问子级作用域JavaScript常见事件：
Js中的对象【键值对形式存储】
//
怎么创建对象？【
这里创建了一个名为
person
的对象，它有三个属性：
name
、
age
和一个方法
greet()】
let person = {
name: "Alice", age: 25,
greet: function() {
console.log("Hello, my name is " + this.name);
}
};console.log(person.name);
★console.log(person['age']);person.name = "Hellen"; // 直接赋值
Object.defineProperty(person, 'job',
{ value: 'Developer',
writable: true,
enumerable: true,
configurable: true }); // 使用Object.defineProperty方法//删除对象属性
可以使用delete操作符来删除对象的属性：
delete person.email; // 删除email属性- splice 方法可以用来添加、删除或替换数组中的元素，并返回被删除的元素组成的数组。它会影响原数组的长度和内容。
- delete 操作符仅用于删除数组的元素或对象的属性，它不会改变数组的长度，只会将删除位置的元素设置为 undefined 。
for (let key in person) {
if (person.hasOwnProperty(key)) {
console.log(key + ': ' + person[key]);
}
}//for-in遍历Object.keys(person).forEach(function(key) { //每次都借用回调函数
console.log(key + ': ' + person[key]);
});//使用ES6的Object.keys方法(function 函数名() {
// 函数体
})() 或(function 函数名(){//函数体}())Web_API的学习【DOM和BOM】 BOM(游览器对象模型) window对象(常见属性对象 history、location、screen ) window.属性名=“属性值”\window.方法名(); 1、 alert() - 显示一个警告对话框。 2、 confirm( ) - 显示一个确认对话框，用户可以选择“确定”或“取消”。 3、 prompt() - 显示一个对话框，要求用户输入数据，并可选择地指定默认值。 4、 setInterval() - 设置一个定时器 setInterval(function() { console.log('这是每隔5秒执行一次的。'); }, 5000); 5、 clearInterval() - 取消由 setInterval() 设置的定时器。 6、 setTimeout() - 设置一个定时器，当指定的时间过后，执行一个函数或指定的代码片段。
例：setTimeout(function() {
console.log('这是在5秒后执行的。');
}, 5000);history对象 属性：length(返回历史记录列表的数量) 方法：go()--加载到某个具体页面。 forword()--加载列表的下一个URL，等价于go(1)。 back()--加载列表的上一个URL,等价于go(-1)。 location对象 属性：host(返回服务器名称和端口号) hostname(返回不带端口号的服务器名称) herf(返回页面完整URL) 方法：reload()刷新 replace()跳转到另一个文档，优先于forword()。 document对象 方法：往文档中写文本write(); ①根据指定的id得到第一个对象：getElementById(); ②根据指定名称得到对象的集合：getElementByName(); ③根据指定标签名得到对象的集合：getElementByTagName();
JavaScript内置对象【String、Array、Date、Math】 Ⅰ Array对象：属性：length 创建一个数组 let arr=new Array(size);//size指定数组长度 常见方法： push() : 将一个或多个元素添加到数组的末尾，并返回新的长度。
let arr = [1, 2, 3];
arr.push(4); // arr 现在是 [1, 2, 3, 4]let arr = [1, 2, 3, 4, 5];
let slicedArr = arr.slice(2, 4); // slicedArr 为 [3, 4]let arr = [1, 2, 3, 4];
arr.splice(2, 1, 5); // 从索引2开始删除1个元素，然后添加5，arr 现在是 [1, 2, 5, 4]let arr1 = [1, 2];
let arr2 = [3, 4];
let combinedArr = arr1.concat(arr2); // combinedArr 为 [1, 2, 3, 4]let arr = [1, 2, 3];
let string = arr.join(', '); // string 为 "1, 2, 3"1：let arr = [1, 2, 3];
arr.forEach(function(element) {
console.log(element); // 依次打印 1, 2, 3 })//funcation可以省略，更改成=>箭头函数let arr = [1, 2, 3, 4, 5];
let filteredArr = arr.filter(function(element) {
return element > 3; // 只包含大于3的元素 }); // filteredArr 为 [4, 5]let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5];
numbers.sort(function(a, b) {
return a - b; // 按数值大小升序排序 });array.map(function(currentValue, index, arr), thisValue);Ⅱ Date对象： 创建时间对象 let 变量名=new Date(日期格式) //通过.getXXX()方法去获取相应的值 Ⅲ Math对象： 常见方法： 向上取整：ceil()/向下取整：floor()/四舍五入：round()/返回0~1随机数random()
className 和 classList操作HTML类名 className：用来设置标签元素类名，灵活性较差。 (推荐) classList： 允许你添加、删除、切换和检查单个类名，而不影响其他类名。
- add()：向元素的类列表中添加一个或多个类名。
- remove()：从元素的类列表中删除一个或多个类名。
- toggle()：切换，如果元素的类列表中包含指定的类名，则删除它；如果不包含，则添加它。
- replace()：替换，将一个类名替换成另一个类名，若类名不存在，则添加。
- contains()：检查元素的类列表中是否包含指定的类名。
const buttonList = document.querySelectorAll('button')
buttonList.forEach(function (button, index) {
button.addEventListener('click', function () {
alert(index)
})
})addEventListener()方法 常见的事件 1.鼠标事件:
- click : 当用户点击元素时触发。
- dblclick : 当用户在元素上双击时触发。
- mousedown : 当用户按下鼠标按钮时触发。
- mouseup : 当用户释放鼠标按钮时触发。
- mousemove : 当鼠标在元素上移动时触发。
- mouseover : 当鼠标移入元素时触发。
- mouseout : 当鼠标移出元素时触发。
- mouseenter : 当鼠标进入元素（不冒泡）时触发。
- mouseleave : 当鼠标离开元素（不冒泡）时触发。
- submit : 当表单提交时触发。
- change : 当表单元素的值发生变化时触发。
- input : 当表单元素的值发生变化并且该变化是由用户输入导致的时触发。
- focus : 当元素获得焦点时触发。
- blur : 当元素失去焦点时触发。
- touchstart: 当触摸点开始放在元素上时触发。
- touchmove: 当触摸点在元素上移动时触发。
- touchend: 当触摸点在元素上释放时触发。
- touchcancel: 当触摸事件被中断时触发。
- load : 当页面或元素加载完成时触发。【已失效，建议使用window.onload】
- unload : 当页面卸载时触发。
- resize : 当元素尺寸变化时触发。
- scroll : 当元素滚动时触发。
- focusin: 当元素获得焦点时触发（冒泡）。
- focusout: 当元素失去焦点时触发（冒泡）。
- error : 当在元素加载期间发生错误时触发。
- DOMContentLoaded : 当 DOM 完全加载并解析完成，但样式表、图片和子框架可能还未加载完成时触发。
操作节点属性 创建属性(一般指定标签内部属性)： .setAttribute("属性名","属性值"); 得到属性： .getAttribute("属性名"); 创建和插入节点 创建元素节点: document.createElement("元素名称"); 插入元素节点: ①▶添加元素到末尾：element.appendChild(childNode); ②▶把A节点插入B节点之前：element.insertBefore(A,B); ③▶克隆某一个节点：element.cloneNode(deep); 删除和替换元素节点: 1:element.removeChild(childNode); 2:element.replaceChild(newNode,oldNode);
注意：在JavaScript中， documentElement 是document的一个属性，它返回文档的根元素，相比直接使用document对象 灵活且兼容。 获取元素位置(offset、client、scroll) offset：指偏移，返回整个文档的宽度。 client： 返回一个元素的可见宽度，不包括任何滚动条或边框。 scroll：指滚动，用来描述网页整体与浏览器之间的关系。 offset属性:【 偏高： offsetHight 偏宽 ：offsetWidth 偏左： offsetLeft 偏上： offsetTop 偏移容器： offsetParent】 client属性:【element.clientWidth/clientHeight】 scroll属性:【scrollHight scrollWidth scrollTop scrollLeft 】
常见轮播图的实现 ①声明一个数组来存储图片，标题，背景颜色…… ②获取左右按钮的元素，去注册点击事件 ③利用classList更换小圆点先移除原来的类名，当前li在添加类名(关键代码) //更换小圆点,先移除原来类名，当前li再添加
document.querySelector('.slider-indicator .active').classList.remove('active')
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active') JavaScript面向对象
★1. 构造函数（Constructor）
构造函数是一种特殊的函数，用于创建和初始化对象。在JavaScript中，可以通过function 关键字定义一个构造函数。function Person(name, age) { this.name = name; this.age = age; }★2. 实例化对象
通过调用构造函数可以创建一个新对象，通常使用new关键字。let person1 = new Person("Alice", 25);★3. 原型（Prototype）
JavaScript中的每个对象都有一个内部属性__proto__，它指向创建该对象时使用的构造函数的原型对象。原型对象包含了可以被构造函数的所有实例继承的属性和方法。Person.prototype.sayHello = function() {
console.log("Hello, my name is " + this.name); }; person1.sayHello(); // 输出: Hello, my name is Alice★4. 继承【在继承的过程中需要设置原型链、修正构造函数来确保继承真实的类型】
--可以使用instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上 JavaScript支持原型链继承，子类可以通过原型链访问父类的属性和方法。function Student(name, age, major) {
Person.call(this, name, age); // 调用父类构造函数 this.major = major; }
Student.prototype = Object.create(Person.prototype); // 设置原型链
Student.prototype.constructor = Student; // 修正构造函数
let student1 = new Student("Bob", 20, "Computer Science"); student1.sayHello(); // 输出: Hello, my name is Bob★6. 类（ES6+）
ES6 引入了 class 关键字，它提供了一种更接近传统面向对象语言的语法。class Person {
constructor(name, age) { //创建构造函数，不再使用function关键字。
this.name = name; this.age = age; }
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); }ECMAScript6的学习（ES6） var、let、const三者的区别： 1：作用域：var具有函数作用域，let、const具有块级作用域。 2：可修改性：const是常量，不能修改。 3：可重复性：var可以重复声明，let、const不能。 4：暂时性死区：var在初始化之前就能被访问，默认值为undefined,而另两者必须声明之后，否则会报错。 解构赋值( 来访问和操作数组或对象的属性 ) 数组&&对象基本语法： const [var1, var2,...varN] = array;//...varN就是rest参数 const {property1: var1, property2: var2,...propertyN} = object;//变量必须与属性名同名，才能取到正确的值。 解构函数的好处： ①交换变量的值。 ②从函数中返回多个值。 ③定义函数的参数。 ④提取JSON数据(对象属性)。 ⑤设置函数参数默认值。 【注意】默认值需要注意以下几点： 1：参数变量是默认声明的，不能再用let、const声明。 2：当存在默认值时，函数不能有同名参数。 3：参数默认值一定要放到参数最后。 数组&&对象类型存在：解构嵌套、不完全解构、剩余运算符...、解构默认值 属性可嵌套解构赋值：
const project = {
owner: {
▲ name: 'Alice',
age: 25
},
team: {[
▲{name: 'Bob', age: 30},
{name: 'Charlie', age: 35}
]}; const {owner, team} = project;ES6进阶
内置对象的扩展： 1：字符串的扩展：模版字符串-`我是：${yes}`【必须是反引号】 String类常用方法： ①是否找到字符串：boolean includes(str) ②是否在原字符的头部：boolean startsWith(str) ③是否在原字符的尾部：boolean endsWith(str) ④返回新字符串，将原字符串重复几次：String repeat(count) ⑤用于头部补全：String padStart(length,str) ⑥用于尾部补全：String padEnd(length,str) ⑦清除头||尾部空格：String trimStart||End()
2：数组的扩展：扩展运算符(...数组) 作用：可以将一个数组转换为用逗号分隔的序列。 Array.from()方法：可以将对象或者伪数组转换成真正的数【注意：对象里面必须包含length属性】 数组&&对象遍历的方法： ①遍历键名：keys():iterator ②遍历键值：values():iterator ③遍历键值对：entries():iterator
3：对象的扩展：[允许对象的属性直接写变量] 对象新增方法包括Object.is()和Object.assign()： Object.is(arg1,arg2)：判断两个值是否严格相等。 Object.assign(target，source..)：用于对象的合并。Set和Map对象： Set实现数组和对象的去重，Map实现"键值对"的存储结构。 常见属性：size Set常见方法：Set.prototype.add()/delete()/has()/clear()/keys()/values()/entries()/forEach() Map常见方法：Map.prototype. set(key,value)/ get(key)/delete()/has()/clear()/keys()/values()/entries() ES6新增循环遍历方式:for of循环 for(let values of value.遍历方法){//方法体}
Module语法.js：(export、import、export default) export： 【 ①在变量和函数前加关键字 ②export{变量名或函数名...} 】 import： 【import{变量名和函数名...} from 'js文件路径' 】 export default：【import 自定义名字 from 'js文件路径' 】//默认导出，导入时{}可以省略。 【注意：在Node.js环境中运行，需要将文件名后缀更改成.mjs--node js文件名】
JQuery的学习(丰富 javaScript库 ) 查看JQuery版本：控制台命令-$.fn.jquery 加载事件 ready()与 window.onload()的区别： onload()：需要等待网页所有内容加载完成后执行，不能同时编写多个，只会执行最后一个。 ready()：只需所有DOM文档结构绘制完毕后执行，可以同时编写多个，从上至下依次执行。 ★ JQuery语法结构：[获取元素] $(selector).action();//工厂函数$()==jQuery()，可以用来获取元素。 JQuery选择器： ①基础选择器-$("id选择器/类/标签/*/并集") ②层次选择器-$("子选择器>/后代/兄弟~/相邻+")a ③属性选择器-$("[attribute||=value||!=||^=||$=||*=]") ④表单选择器-$("input["属性"]") ⑤过滤选择器 ♣ -选取第一个元素：$("：first") -选取最后一个元素：$("：last") -选取选择器以外元素：$("：not(selector)") -选取索引为偶数元素：$("：even")//索引从0开始 -选取索引为奇数元素：$("：odd") -选取给定索引元素：$("：eq(index)") -选取大于给定索引元素：$("：gt(index)") -选取小于给定索引元素：$("：lt(index)") -选取索引标题元素：$("：header") -选取当前获取焦点元素：$("：focus") -选取所有动画元素：$("：animated")
解决jQuery和其他库的冲突【使用jQuery.noConflict()放弃$的使用权 】 ① 方式一：
jQuery.noConflict();//放弃$的使用权,重新定义jQuery作用域
JQuery(document).ready(function($)){
//使用$编写代码
});jQuery.noConflict();
(function($)){
//使用$编写代码
$(document).ready(function(){
})
})(jQuery);jQuery中对 节点 的操作: ①获取节点：$("")【清空数据：empty()】 ②创建节点：$(html)-//html中为节点标签 ③插入节点( 内部插入|| 外部插入 ) 内部插入： 1、结尾拼接：append(content); 2、指定元素后位置拼接：appendTo(content); 3、头部拼接：prepend(content); 4、指定元素前位置拼接：prependTo(content); 外部插入： 1、结尾拼接：after(content); 2、指定元素后位置拼接：insertAfter(content); 3、头部拼接：first(content); 4、指定元素前位置拼接：insertBefore(content); ④删除节点：remove()||detach()《detach会保留数据和事件》 ⑤复制节点：clone([includeEvents]) ⑥替换节点： $(selector).replaceWith(content); $(content).replaceAll(selector);//主要区别：元素和内容位置参数不同 ⑦节点属性操作： $(selector).attr(attribute,value);//建立属性 ⑧删除节点属性： $(selector).removeAttr(attribute);//删除属性 ⑨遍历节点： 1、遍历子元素：children(); 2、遍历同辈元素：下一个->next()||上一个->prev()||兄弟元素->siblings(); 3、遍历前辈元素：父级元素->parent()||祖先元素->parents(); 4、其他遍历方法：each()、end()、find()、filter()、eq()、first()、last();
jQuery中对元素 内容 的操作: html()方法： $(selector).html([content]);//可以解析标签 text()方法： $(selector).text([content]);//只能解析内容，不可以解析标签 属性值操作：$(selector).val([value])
jQuery中对元素 样式 的操作: $(selector).css(name,value);//设置单个CSS样式 样式的添加、删除、切换、判断： $(selector).addClass();//添加 $(selector).removeCalss();//删除 $(selector).toggleClass(className);//切换 $(selector).hasCalss(className);//判断
jQuery常见的事件： 通用语法： $(selector).事件(function(){});//DOM事件 常见事件：
- click - 鼠标点击
- dblclick - 鼠标双击
- mouseenter / mouseover - 鼠标悬停
- mouseleave / mouseout - 鼠标离开
- mousemove - 鼠标移动
- keydown / keyup - 键盘按键
- keypress - 键盘字符输入
- submit - 表单提交
- change - 输入域改变
- load - 页面或图片加载完成
- resize - 浏览器窗口大小改变
- scroll - 滚动条滚动
- :active ： 当元素被用户激活时（如点击按钮）。
- :hover ： 鼠标悬停在元素上时。
- :focus ： 元素获得焦点时。
- :link ： 用于未被访问的链接。
- :visited ： 用于已被访问的链接。
- :first-child ： 元素是其父元素的第一个子元素。
- :last-child ： 元素是其父元素的最后一个子元素。
- :nth-child(n) ： 匹配父元素中的第 n 个子元素。
- :visible：是否可见的元素。
- :checked：选择被选中的元素。
- :enabled ： 用于可启用的元素。
- :disabled ： 用于禁用的元素。
- ：target： 目标元素。
- ：not()： 选择不匹配选择器的元素。
- ：is()： 选择匹配任何一个选择器元素。
- ::before ： 在元素的内容前面插入内容。
- ::after ： 在元素的内容后面插入内容。
本地存储/LocalStorage ： 【本地存储只能存储字符串】 存-LocalStorage.setItem("键","值") 取-LocalStorage.getItem("键") 删-LocalStorage.removeItem("键") 若要存储复杂数据类型--例如：数组、对象，需要使用 JSON对象【将数据类型转换为JSON字符串，再存储到本地】 转换成JSON字符串的语法： JSON.stringify(复杂数据类型)--将复杂数据转换成JSON字符串 JSON.parse(JSON字符串)--将JSON字符串转换成对象、数组
jQuery动画的运用
-
fadeIn() / fadeOut()：
- fadeIn() 方法用于逐渐显示元素。
- fadeOut() 方法用于逐渐隐藏元素。
-
slideUp() / slideDown()：
- slideUp() 方法用于向上滑动隐藏元素。
- slideDown() 方法用于向下滑动显示元素。
-
slideToggle()：
- 切换元素的滑动状态，即如果元素是显示的，则隐藏它；如果元素是隐藏的，则显示它。
-
animate()：
- 用于自定义元素的动画效果。
- 可以设置多个属性的动画，如位置、大小、透明度等。
- 示例：$('#element').animate({ left: '200px', opacity: 0.5 }, 500); ，其中 500 表示动画的持续时间（毫秒）。
-
stop()：
- 停止当前正在进行的动画。
- show()/hide()/toggle: 显示/隐藏/切换。
- :input ：选取所有输入元素，包括文本框、复选框、单选框等。
- :text ：选取文本输入框。
- :checkbox ：选取复选框。
- :radio ：选取单选框。
- :submit ：选取提交按钮。
- :reset ：选取重置按钮。
- :password ：选取密码输入框。
- :file ：选取文件上传输入框。
- :enabled：匹配所有可用元素
- :disabled：匹配所有不可用元素
- checked：匹配所有被选中的元素
- selected：匹配select所选中的option元素
正则表达式验证《 Regular Expression 》-- 结构：普通字符+元字符 两种定义方式：普通方式|构造函数 普通方式： var reg=/表达式规则/附加参数；//例如：var reg=/pink/gi; 构造函数的方式： var reg=new RegExp("表达式规则","附加参数");//例如：var reg=new RegExp("pink","gi"); 附加参数【修饰符】：
- g （全局搜索）：不限制匹配数量。
- i （忽略大小写）：不区分大小写。
- m （多行匹配）：在多行字符串中进行匹配。
- u （Unicode）：正确返回含有Unicode字符的匹配。
- y （粘附性）：从上次成功匹配的位置之后开始查找。
- . (点): 匹配除换行符外的任意单个字符。
- * (星号): 匹配前面的字符或子表达式零次或多次。
- + (加号): 匹配前面的字符或子表达式一次或多次。
-
?
(问号):
- 匹配前面的字符或子表达式零次或一次。
- 当使用在量词后面时，表示非贪婪匹配。
- {n} : 匹配确定的 n 次。
- {n,} : 匹配至少 n 次。
- {n,m} : 匹配 n 到 m 次。
- | (竖线): 逻辑“或”，匹配左右任意一个分支。
-
^
(脱字符):
- 在字符串开始处匹配。
- 在字符集内部匹配脱字符本身--非。
- $ (美元符号): 匹配字符串的结束处。
- [] (方括号): 字符集，匹配括号内的任意单个字符。
-
\
(反斜杠):
- 转义特殊字符或用于特殊序列。
- 在字符集内部，表示字面量字符。
- () (圆括号): 分组，用于捕获匹配的文本或应用量词。
- (?:...) (非捕获括号): 分组，但不捕获匹配的文本。
- \d (数字): 等同于 [0-9] ，匹配任意一个数字。
- \D (非数字): 等同于 [^0-9] ，匹配任意一个非数字字符。
- \w (字): 等同于 [a-zA-Z0-9_] ，匹配任意一个字母、数字或下划线。
- \W (非字): 等同于 [^a-zA-Z0-9_] ，匹配任意一个非字母、非数字和非下划线字符。
- \s (空白): 匹配任何空白字符，包括空格、制表符、换行符等。
- \S (非空白): 匹配任何非空白字符。
- \b (单词边界): 匹配单词的开始或结束。
- \B (非单词边界): 匹配非单词边界的位置。
- \0 (空字符): 匹配 NUL 字符。
- \t (制表符): 匹配制表符。
- \n (换行符): 匹配换行符。
- \r (回车符): 匹配回车符。
- \f (表页符): 匹配表页符。
- \a (警报): 匹配 ASCII 警报铃声。
- \e (转义): 匹配 ASCII 转义字符。
- \cX (控制字符): 匹配控制字符，其中 X 是 A-Z 的任意一个字母。
- \xhh (十六进制转义): 匹配十六进制数 hh 对应的字符。
- \uXXXX (Unicode 转义): 匹配 Unicode 码点 U+XXXX 对应的字符。
- \ (反斜杠): 在字符集内部，用于转义特殊字符或表示字面量字符。
RegExp对象提供的正则表达式方法：
- test(String) ：用于测试一个字符串是否与给定的正则表达式匹配， 返回true和false。
-
exec(String)：
用于测试一个字符串是否与给定的正则表达式匹配，
返回result和null。
String对象提供的正则表达式方法： - search() ：在字符串中搜索与正则表达式匹配的子串。
- match(RegExp)：检索字符串中匹配一个或多个的值，返回一个数组。
- replace(RegExp/String,replacement)：替换与正则表达式匹配的字符串。
- spilt(separator,n)：将字符串分割为字符串数组。
function validateEmail(email) {
const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return regex.test(email);
}//常见的写法：if(regex.test(email)==false){邮箱不正确}。- placeholder:表单提示
- required：必填选项
- pattern：用于验证输入域的正则表达式
在表单元素添加验证属性required和pattern后，可通过HTML5提供的ValidityState对象的validity属性获取验证状态。
语法：
var validityState=document.getElementById("user").validity;-
customError：如果字段验证失败是由于自定义验证（即通过setCustomValidity()方法设置的）造成的，该属性值为true。 -
patternMismatch：如果字段的值不符合pattern属性指定的正则表达式，该属性值为true。 -
rangeOverflow：如果字段的值超出了max属性指定的最大值，该属性值为true。 -
rangeUnderflow：如果字段的值低于min属性指定的最小值，该属性值为true。 -
stepMismatch：如果字段的值不符合step属性指定的值，该属性值为true。 -
tooLong：如果字段的值超出了maxlength属性指定的最大长度，该属性值为true。 -
typeMismatch：如果字段的值不符合type属性指定的数据类型，该属性值为true。 -
valueMissing：如果字段是必需的，但是用户没有提供值，该属性值为true。 -
valid：如果字段没有触发任何其他ValidityState属性为true的验证错误，该属性值为true。
示例：
const input = document.getElementById('myInput');
input.addEventListener('input', function() {
if (input.validity.valueMissing) {
console.log('Please fill out this field.');
} else if (input.validity.typeMismatch) {
console.log('Invalid input type.');
} else {
console.log('Input is valid.');
}
});