文章目录
JavaScript
简介
-
JS是一种脚本语言
-
ECMAScript
- JS 核心语法：ES 规范 / ECMA - 262 标准
-
DOM：Document Object Model；文档对象模型
- 对网页中节点进行增删改的过程
- HTML 文档被当作一颗 DOM 树看待
var domObj = document.getElementById("id")
-
BOM：Browser Object Model；浏览器模型对象
- 关闭浏览器、打开浏览器新窗口、后退、前进、地址栏地址等都是 BOM 编程
-
DOM 和 BOM
-
DOM 顶级对象：document；页面对象
-
BOM 顶级对象：window，窗口对象
-
实际上 BOM 包括 DOM
-
ECMAScript
- JS 是事件驱动型语言，依靠事件驱动执行对应程序
- JS 中有很多事件，事件对应都有事件句柄作为 html 标签属性存在
- JS 中有内置对象可以直接使用
- window：代表浏览器对象
- 函数 alert：弹窗
window.alert('弹窗消息')：进行弹窗- window 可以省略
- 函数 alert：弹窗
- 内置对象
document：代表当前 html 页面
- window：代表浏览器对象
- JS 中字符串使用双引号
""，或单引号''表示- 匹配最近的相同类型引号，所以外层引号和内层不能相同
- JS 中一条语句结束后可以使用
;也可以不用
嵌入 JS
事件
-
HTML 中嵌入 JS 代码方式一：事件
- 鼠标单击事件：click
- 对应事件句柄 onclick 作为 html 的标签属性存在
<body> <input type="button" value="0" onclick="直接写 js 代码"> <!-- 单击弹窗事件 --> <input type="button" value="1" onclick="window.alter('二狗')"> <input type="button" value="2" onclick="alter('二狗')"> </body>onclick = "js 代码"- 页面加载时 js 代码并不执行，仅将代码注册到对应事件上
- 单击事件发生的时候 js 代码自动被浏览器调用执行
脚本块
-
HTML 中嵌入 JS 代码方式二：脚本块
-
<!-- type 类型默认定义是 text/javascript --> <script type="text/javascript"> // 脚本块内部可以写 js 代码，加载页面时直接执行 window.alert("二狗"); </script>
-
-
暴露在脚本块中的程序在页面加载时执行
- 遵循自上而下的顺序逐行执行，不需额外事件
- 自定义函数未调用时不执行
- alert 函数会阻塞页面加载，确定之后才会继续执行语句
- 遵循自上而下的顺序逐行执行，不需额外事件
-
脚本块可以放到页面任何位置，甚至
<html>标签之外- 脚本块在页面中出现次数没有要求
引入
-
HTML 中嵌入 JS 代码方式三：引入外部独立的 js 文件
-
<body> <script tup="text/javascript" src="js/1.js"> // 引用文件时写在脚本块中内容不被执行 </script> <!-- 结束标签不能省略 --> <!-- 再次单独使用脚本块会继续执行 --> </body>
-
-
js 代码写在单独的文件中，在需要时进行引用
src="js/1.js"：通过外部 js 文件路径引用
-
引用外部 js 文件时文件中代码会遵循自上而下顺序依次执行
- 同一个文件可以被多次引用，但没有必要
-
引用是必须是双标签
<script></script>- 不能是自闭标签
标识符
- 标识符命名规范：按照 Java 标准
- 字母、数字、下划线、$
- 不能以数字开头
- 不能使用关键字命名
- 驼峰命名，见名知意
- 常量名全部大写，单词之间下划线分隔
变量
-
JavaScript 是弱类型语言
- Java 是强类型语言：变量数据类型在编译时已经确定，不可变
- 强制类型转换只是在语法层面改变
- Java 是强类型语言：变量数据类型在编译时已经确定，不可变
-
声明变量：
var 变量名 = 值- var 是以往 JS 定义变量的 bug 级方式
- 现在推荐使用
let定义 JS 变量，使用const定义 JS 常量
- 现在推荐使用
- 无编译阶段，变量可以随意赋值，赋值任意类型
undefined：在 js 中是一个具体存在的值- 变量仅声明未赋值：默认值
undefined - 变量未声明时不能使用
- 变量仅声明未赋值：默认值
- 可以同时声明多个变量，使用时无要求
- var 是以往 JS 定义变量的 bug 级方式
-
<body> <script type="text/javascript"> 'use strict' // 启用严格检查模式，不允许未定义变量直接使用 // 默认赋值 i = undefined var i; // 定义变量 i，可以重新使用 i 定义变量 let a; // 定义变量，不允许重新定义变量 a const B = 23; // 定义常量 B，不允许重新赋值 alert("i = " + i); var a, b, c; // 声明变量，此时 a 报错误，不能重新声明变量 </script> </body> -
局部变量 和 全局变量
-
全局变量：函数体之外声明
- 生命周期：浏览器打开时声明，关闭时销毁
- 尽量少用，会在浏览器内存中一直存在，耗费内存空间
-
局部变量：函数体之内声明，包括函数的形参
- 生命周期：函数开始执行是开辟内存空间，执行结束后释放空间
- 生命周期较短
-
变量声明时若没有 var 则必定是全局变量
- 全局变量默认绑定在 window 上
- 无论在哪里声明
-
严格模式
-
'use strict'- 启用严格检查模式，不允许未定义变量直接使用
- 语法检测按照 ES6 标准更加严格
- 写在
<script>脚本块中第一行
-
所有的全局变量都会绑定到
window对象-
不同的 js 文件使用相同名称的全局变量时会发生冲突
- 解决：定义唯一全局变量
var onlyOne = {} - 将所有全局变量都绑定到其上面
const onlyOne = {} // 定义唯一全局变量，即常量 onlyOne.name = "张三"; // 将其他全局变量绑定到 onlyOne // 将所有代码都放到自定义命名空间 onlyOne 中 - 解决：定义唯一全局变量
-
-
局部作用域：
let定义局部变量，ES 6 引入- 解决局部作用域冲突的问题
- 不能重新定义同名变量
-
常量定义：
const，ES 6 引入
数据类型
分类
-
JS 中变量没有数据类型，但是赋值的时候有数据类型
-
分为 原始类型 和 引用类型
- ES6 之前有6种，ES6 有 7 种
- ES：ECMAScript 规范
- ES6 之前有6种，ES6 有 7 种
-
原始类型：
-
Null：只有值 null -
Undefined：只有一个值 undefined-
null 和 undefined 可以等同
-
变量仅声明未赋值时默认赋值 undefined，或手动进行赋值
-
-
Boolean：只有 true、false 两个值if()，while()函数会将参数转为 boolean 类型
-
Number：包括所有数值类型和NaN，包括无穷大infinity：无穷大；除数为 0 结果为无穷大NaN：运算结果本应是数字，但运算完之后不是数字则结果为 NaN- 和所有数字类型都不相等，包括自身
-
String- JS 中字符串可使用
""或‘’ - 转义字符
\ - `` 之间可以连续写多行，无需拼接字符串
- JS 中字符串可使用
-
引用类型：
Object及其 子类Object是所有类型的超类，自定义类都继承 Object- 包含在其他 JScript 对象中
- 其他所有对象中它的方法和属性都可用
-
ES6 之后又添加一种
Symbol
-
比较
- JS 中有运算符
typeof在程序运行阶段动态获取变量的数据类型- 格式：
typeof 变量名，运算结果是六个字符串之一（小写）'undefined'、'number'、'string'、'boolean''object'、'function'
- 格式：
- JS 中比较字符串相等使用
==：判断值相等，意思是等同运算符alert(1 == true)：结果 true- 1 等同于 true
- 运算符
===：判断值和数据类型相等，意思是全等运算符alert(1 === true)：结果 false- 数据类型不同
var i = null; // Null 类型
alert(typeof i); // 结果是 "object"
function say(){} // 定义函数
alert(typeof say) // 结果是 "function"
String
- 创建方式：
var a = “String”- 称为小String，原始 String 类型
- JS 内置支持类 String：
var a = new String("String")- 被称为大String，Object 类型
- 大小String 函数、属性通用
- String 是内置支持类，可直接使用，父类是 Object
- 字符串拼接
- 使用
${}引用变量在字符串中动态拼接 - 可以跨行拼接无需
+拼接- 使用
""或''拼接字符跨行时需要使用+连接
- 使用
- 使用
let a = "aa";
let b = 'bb';
let c = 'cc' +
'dd'; // 需要使用 + 连接进行跨行
let resutl = `动态拼接
${a}${b}`; // 结果：aabb；无需 + 连接
Object
-
JS 中定义的类默认继承 Object
- 会拥有所有 Object 类的属性和函数
-
属性
-
protoType：常用，给类动态扩展属性和函数
-
constructor
-
-
函数
-
toString()
-
valueOf()
-
toLocaleString()
-
定义类
- JS 中类的定义同时是构造函数的定义
- 类定义和函数定义在一起完成
- 可以在函数体内嵌套函数
- 使用
protoType属性动态扩展属性及函数- 可以给任何类拓展函数、属性
- 包括内置类型
- 可以给任何类拓展函数、属性
- 使用
new就是将函数当作类使用创建对象- 否则作为函数调用
// 定义类两种方式
function 类名(形参){}
类名 = function(形参){}
// 创建对象
new 构造方法名(实参); // 构造方法名和类名一致
/* 示例 */
// 定义类 Demo，或认为是函数 Demo
function Demo(name, age, hobby){
this.name = name,
this.age = age,
this.hobby = hobby,
sex = "男"
}
demo("二狗", 18); // 将 Demo 作为函数调用
var obj = new Demo("二狗"); // 将 Demo 作为类创建对象；obj 是一个引用，保存地址指向堆中的对象
alert( obj.name ); // 访问对象属性，通过 .
alert( obj["age"] ); // 访问对象属性，通过 []
// 利用 prototype 属性拓展 Demo 类函数：拓展函数 getHobby()
Demo.prototype.getHobby = function(){
return this.hobby;
};
var hobby = obj.getHobby();
alert(hobby);
对象
// 定义 js 对象
var demo = {
name: "张三",
age : 18,
sex : "男"
}
document.writeln(demo.age); // 18
delete demo.age // 删除 age 属性值
document.writeln(demo.age); // undefined
demo.age = 20 // 添加 age 属性
document.writeln(demo.age); // 20
document.write('age' in demo) // 判断 demo 对象中是否有 age 属性
原型模式
- 以另一个对象作为当前对象原型
- 即 继承
prototype属性即类原型- 原型链：所有类的父类总是指向 Object 类
- Object 的原型是它自身，无限循环
// 定义 js 对象
var demo = {
name: "张三",
age : 18,
sex : function (){
return this.age > 15 ? "男" : "女";
}
}
var demo2 = {
age : 10
}
// 以 demo 对象为 demo2 的原型
demo2._proto_ = demo
var sex = demo2.sex
document.write(sex)
class
- 继承；ES 6 新增特性
- 本质上还是使用原型模式
- 但是更符合 Java 写法
// 定义类
class Demo {
// 构造函数
constructor(name) {
this.name = name
}
// 普通函数
say(){
alert("hello")
}
}
let demo = new Demo(); // 创建对象
demo.say(); // 调用方法
// 类 Demo2 继承 Demo
class Demo2 extends Demo{
constructor() {
super();
}
hello(){}
}
let demo2 = new Demo2()
Map、Set
ES6 标准新增，用法跟 Java 相似
- Map：key 不允许重
- 添加重复 key 时更新对应的的 value
- Set：值不允许重复
- 重复的值不会添加；无序
let map = new Map; // 创建 map
map.set("name", "张三") // 添加元素
map.get("name") // 根据 key 获取元素
map.forEach(function (demo){ // 遍历map
document.writeln(demo) // demo 是 map 中的 value 值
})
// for of 遍历 Map，得到 K-V 数组，分别取出
for (let mapElement of map) {
document.writeln(mapElement[0] + ': ' + mapElement[1] + "<br/>")
}
document.write("<br/>")
let set = new Set // 创建 set
set.add(19) // 添加元素
set.delete(19) // 删除元素
set.has(19) // 判断是否有元素
set.forEach(function (value){ // 遍历set
document.writeln(value + "<br/>") // 得到 set 中的元素
})
Array
-
数组：
var arr = []- 数组元素类型、数量随意
- 赋值的下标随意，自动扩容
- 未赋值的位置统一
undefined
- 未赋值的位置统一
或
var arr = new Array()- 不传参默认长度为 0
- 传一个参数定义数组长度
- 传多个参数直接将元素添加到数组
-
数组长度可赋值
- 赋值后若大于原长度会对数组扩容
- 否则将丢失后面数据
-
JS 中数组可以自动模拟栈结构：先进后出
push()：追加到数组尾部pop()：弹出尾部元素unshift()：压入头部元素shift()：弹出头部元素
-
函数
slice()：截取 Array 部分返回新数组sort()：排序reverse：元素反转concat()：拼接数组，返回新数组，未修改原数组join()：连接符，打印拼接数组使用特定字符串连接
函数
-
函数作用等同于 Java 中的方法
- 可被重复利用的代码片段
- 一般用于完成某个特定功能
-
语法格式
function 函数名(形参列表){ /* 函数体 */ } // 另一种方式 函数名 = function(形参列表){ /* 函数体 */ } function sum(a, b){ // a, b 是局部变量，都是形参，作为变量名随意指定 } -
函数被调用之后才会执行
- 一般使用事件调用
-
外部调用函数调用需要带
()- js 内部调用不需要
()
- js 内部调用不需要
-
JS 中不需要函数重载：函数不能重名
- 两个函数同名时后面的函数会覆盖前面的函数
-
apply()函数可以改变调用此函数的对象（函数内部 this 指向）
形参赋值
-
传参数量和形参相同按顺序赋值
- 参数类型无限制
-
传参数量少于形参，按顺序赋值前面形参，后面赋值
undefined -
不传参时都赋值
undefined-
两个
undefined相加值为NaN -
NaN是一个具体值：表示不是数字Not a Number
-
-
传参数量多于形参，按顺序赋值形参，多余的不计
-
arguments关键字代表传到函数中的所有实参- 数组类型，包含传进来的所有参数
- 包括已定义的参数
-
reset参数：定义在形参列表最后面function demo(a, b, ...rest){}- 包含传进来的参数中它之前定义元素之外的所有元素
- ES 6 新增
-
参数类型不符合时需要手动抛出异常
-
function abs(a){ if('number' !== typeof a){ throw "not a number" } return a >= 0 ? a : -a; }
-
系统函数
部分系统函数
alert()函数：弹窗isNaN()函数：判断是否是数字，true 表示是数字parseInt()函数：字符串解析为数字，舍弃小数位paseFloat()函数：字符串解析为数字，保留小数位console.log()：打印到控制台输出Math.ceil()函数：向上取整Math是数学类
if()：判断，为 true 执行 if，否则执行 else- 括号内参数只能为 true 或 false，或判断式
- 自动调用 Booelan() 函数将其他数据类型转为 boolean 类型
- 只要内容不为空都是 true
0、''、null、NaN、undefined为 false- 只要有就是 true，否则为 false
事件
常用事件
- 焦点
blur：失去焦点focus：获得焦点
- 状态
change：下拉表中选中项改变或文本框内容改变click：鼠标单击dbclick：鼠标双击
- 键鼠操作
keydown：键盘按下keyup：键盘弹起mousedown：鼠标按下mouseup：鼠标弹起mousemove：鼠标移动mouseover：鼠标经过mouseout：鼠标离开
- 页面
load：页面加载完毕- 页面中所有元素全部加载完毕
- 选中
select：文本被选中
- 表单
reset：表单重置submit：表单提交
注册事件
-
事件名前添加 on 作为事件句柄
-
html 使用事件句柄作为标签属性
-
将事件注册，当事件发生时调用函数执行
-
-
第一种方式注册事件
- 将函数注册到按钮，事件发生时调用函数
- 被调用的函数被称为回调函数
- 将函数注册到按钮，事件发生时调用函数
-
第二种方式注册事件
- 先获取按钮对象
- 对按钮对象的
onclick属性赋值- 将函数事件赋值上去
- 当事件发生时回调函数执行
<!-- 注册函数 run() 到事件 load：页面加载完毕后执行 -->
<body onload="run()">
<script type="text/javascript">
// 定义函数，必须定义在 run 函数上面，因为此函数被 run 函数调用，必须先加载
function say() {
alert("hello");
}
// 定义函数 run 被调用
function run(){
// 通过 id 获取按钮对象，将函数事件注册到按钮
document.getElementById("btn").onclick = say;
// 或者直接赋值函数到事件属性：匿名函数，也是回调函数
document.getElementById("btn").onclick = function(){ alert("二狗") };
}
// 简化写法，使用 window 对象调用 load 事件，省略 window
onload = function() {
document.getElementById("btn").onclick = say;
}
</script>
<!-- 将函数事件直接注册到按钮 -->
<input type="button" value="单击问好" onclick="say()">
<!-- 纯 js 注册，根据按钮 id 为按钮的事件属性赋值 -->
<input type="button" value="问好" id="btn">
</body>
-
html 页面按语句顺序执行
- 先加载 script 脚本，此时按钮 id 还未加载，发生错误
- body 标签中添加事件 load
- 将注册按钮事件放到 run() 函数中
- 加载页面完成后执行 run() 函数
-
或直接在脚本块中使用 window 对象调用 onload 属性
- 将要加载按钮 id 的函数绑定到 load 事件
- 在页面加载完成后执行回调函数
-
不使用 load 事件，将脚本放到按钮定义语句前面也行
-
<body> <script type="text/javascript"> //页面加载后触发事件 onload = function() { //函数注册到 click，单击触发事件 document.getElementById("btn").onclick = function (){ //将 id 为 text 的标签类型改为 checkbox document.getElementById("text").type="checkbox" } } </script> <input type="text" value="文本框" id="text" > <!-- 点击按钮时将文本框改为复选框 --> <input type="button" value="改变文本框" id="btn"> </body>
-
事件对象
-
事件触发后浏览器可以捕捉到事件对象
- 在回调函数中添加形参可以接收事件对象
-
对键盘事件都有 key 属性获取键值
- 类型：String，区分大小写
- 原属性 keycode：Number；该属性已被弃用
-
捕捉回车事件：
key === 'Enter'-
<body> <script type="text/javascript"> onload = function() { document.getElementById("text").onkeydown = function (event){ // 浏览器调用回调函数自动为形参赋值：值为事件对象 // 键盘事件 key 属性为键值，可以检测按下的键是哪个 if (event.key === "Enter"){ alert("提交") } } } </script> <input type="text" value="回车提交" size="10" id="text"> </body>
-
运算符
-
大部分运算符和 Java 中相同
-
运算符
typeof- 在程序运行阶段动态获取变量的数据类型
- 格式：
typeof 变量名，运算结果是六个字符串之一（小写）'undefined'、'number'、'string'、'boolean''object'、'function'
-
等同比较
==：判断值相等alert(1 == true)：结果 true，1 等同于 true
-
全等运算符
===：判断值和数据类型相等alert(1 === true)：结果 false，数据类型不同
-
void
-
void(表达示)：执行表达式但不返回任何结果 -
<!-- 保留连接样式，点击触发事件，但不会跳转链接 void 参数值无所谓，不返回任何结果，但语法要求必须有参数 --> <h1> <a href="javascript:void(0)" onclick="alert('不跳转')">跳转</a> </h1>
-
控制语句
-
使用和 Java 中相同
if ...switchwhiledo ... whilefor 循环break、continue
-
for ... invar array = { name : "张三", age : 18, hobby : "篮球" } // for in 遍历 // array 是对象，key 为对象属性 // 当 array 是数组，key 为数组索引 for (let key in array) { document.writeln(array[key]) } -
for of：ES 6 新增// 遍历 set 集合 for (let element of set) { document.writeln(element) // 输出 set 集合中的元素 } -
with- 将
with范围内变量添加 形参中的 字符 with('u'){alert('name')}：等价alert(u.name)
- 将
-
forEach()：传入函数遍历元素var array = [2, 4, 56, false, null] // 传入函数遍历数组，函数形参就是数组元素 array.forEach(function (arr) { document.writeln(arr) })
JS 数组
-
var arr = []- 数组中元素类型随意，数量随意
-
遍历数组
-
<script type="text/javascript"> var array = [ 32, "sadf", false] for (var i = 0; i < array.length; i++){ alert(array[i]) } </script>
-
DOM
- DOM：Document Object Model；文档对象模型
- 对网页中节点进行增删改的过程
- HTML 文档被当作一颗 DOM 树看待
var domObj = document.getElementById("id")
- 节点的抽象就是 html 标签的分布，整体来看是一颗树的结构
document
-
每一个标签就是一个节点
getElementById()：根据 id 获取单个节点对象getElementsByName()：根据 name 属性批量获取节点对象getElementsByTagName()：通过标签名获取全部标签节点对象getElementsByClassName：通过 class 属性值批量获取节点对象- 对应 css 类选择器
children：获取当前节点的所有子节点- 使用父节点对象调用
- 嵌套进标签的标签
- 或者找到 父节点的 第一个、最后一个、上一个、下一个 节点
- 通过节点对象可以拿到对应标签的所有属性并对属性进行设置
innertText、innerHTML可以设置元素内容
-
删除节点
-
先获取父节点，通过父节点删除当前节点
- 可以通过子节点的下标通过父节点指定获取
// 获取当前节点对象 var self = document.getElementById("id"); // 获取当前节点的父节点对象 var parent = self.parentElement; // 通过父节点删除当前节点 parent.removeChild(self); // 根据子节点的下标删除，子节点数组动态变化 parent.removeChild(parent.children[1]);
-
-
插入节点
-
获得某个节点时可以通过
innerHTML或innexText添加元素- 会覆盖原来的内容
- innexHTML 追加值会被当做 html 语句解析
- innexText 追加值作为字符串处理
newH2.innerText = "新节点"
- 会覆盖原来的内容
-
通过追加操作添加节点
p2.appendChild(newH2)：追加新节点到父节点的最后insertBefro()：使用父节点在指定节点之前插入节点
-
创建节点
createElement("h2")
<p id="p1">JavaScript</p> <div id="p2"> <p id="se">JavaSE</p> <p id="me">JavaME</p> <p id="ee">JavaEE</p> </div> <script> // 获取节点 var p1 = document.getElementById("p1") var p2 = document.getElementById("p2") // 将 p1 节点追加到 p2 中 p2.appendChild(p1) // 创建新节点：h2 标签 var newH2 = document.createElement("h2") // 设置节点 id、元素内容 newH2.id = "nh2"; newH2.innerText = "新节点" // 或者使用 serAttribute 函数为属性赋值 newH2.setAttribute("id", "h2") // 将新节点追加到 p2 节点中最后 p2.appendChild(newH2) </script>
-
-
使用 普通按钮 提交对密码加密
- 对按钮节点绑定事件，return 回调函数结果
- 先获取密码框的节点
- 获取节点 value 值，即提交的密码
- 此时也可以对密码校验，通过后返回 true，否则不通过
- 将密码加密再将加密后的密码值重新赋值到 value
- 使用 加密算法（例如 MD5）
- 可以通过隐藏域接收密码进行提交
-
write()：输出到页面显示 -
writeln()：输出并添加一个空格 -
cookie：获取 cookie-
劫持 cookie 原理
<!-- 页面弹窗或网页中发送请求，点击后执行 js 代码 --> <script src = "aa.js"> // 获取 coolie 对象，有缓存的所有信息 document.cookie </script> -
服务器端可以设置
coolie: httponly防止 cookie
-
innerHTML、innerText
- 相同：设置元素内容
- 不同：
- innerHTML：将后面的字符串当作 html 代码处理
- innerText：只会将后面内容作为字符串处理
<body>
<script type="text/javascript">
onload = function () {
document.getElementById('b').onclick = function () {
document.getElementById("d").innerHTML = "<a href=''>链接</a>"
// document.getElementById("d").innerText = "<h3>测试 Text</h3>"
}
}
</script>
<input type="button" value="设置 div 内容" id="b">
<div id="d"></div>
</body>
正则表达式
对象
-
创建正则对象
- 语法格式：
/正则表达式主体/修饰符(可选)
- 语法格式：
-
修饰符
-
i：执行对大小写不敏感的匹配 -
g：执行全局匹配- 查找所有匹配而非在找到第一个匹配后停止
-
m：执行多行匹配- 前面是正则表达式则不可跟 m
-
// 第一种使用：直接创建
var regExp = /^[1-9]d*$/i
// 第二种使用：使用内置类创建正则对象
var regExp = new RegExp("^[1-9]d*$", "i")
方法
test()：测试字符串是否匹配正则格式正则对象.test(字符串)- 结果为 true：格式匹配成功，否则失败
exec()：在一个指定字符串中执行一个搜索匹配- 返回一个结果数组或
null
- 返回一个结果数组或
trim()：字符串方法，去除字符串的前后空格
表单验证
- 不能为空
- 长度合法
- 字符组成元素合法
- 输入格式合法
- 统一失去焦点验证
- 失去焦点之后就进行正则验证
- 错误提示信息统一在 span 显示
- 输入框同一行
- 输入框获得焦点时清空错误提示信息
- 可选择数据不合法清空输入框数据
- 表单所有项输入合法可以提交
Date
- JS 内置时间类
// 获取系统当前时间
var nowDate = new Date()
// 转换为本地时间格式
document.write(nowDate.toLocaleString() + "<br/>"); // 2022/3/8 10:14:56
// 获取 整年格式，getYear() 获取年份后两位
document.write(nowDate.getFullYear() + "<br>")
// 获取 月份， 0 ~ 11
document.write(nowDate.getMonth() + "<br>")
// 获取 日（年）
document.write(nowDate.getDate() + "<br>")
// 获取 日（周）
document.write(nowDate.getDay() + "<br>")
// 获取 时
nowDate.getHours()
// 获取 分
nowdate.getMinutes()
// 获取秒
nowDate.getSeconds()
// 获取时间戳，标准时间距今的 毫秒数
document.write(nowDate.getTime() + "<br>")
// 时间戳转为时间格式
document.writeln(new Date(3254346522754)) // 结果：Wed Feb 15 2073 09:08:42 GMT+0800 (中国标准时间)
BOM
BOM：Browser Object Model；浏览器模型对象
window
-
顶级对象：代表浏览器窗口
-
open()：开启窗口 -
close()：关闭窗口 -
alert()：弹出消息框 -
confirm()：弹出确认框- 返回值：确认返回 true，取消返回 false
-
setInterval(funcation, times)- 每隔时间间隔 times 调用一次函数 funcation，不会主动停止
- 返回值可以传给
clearInterval()函数停止调用
-
clearInterval(v)- 接收
setInterval()函数返回值以停止setInterval函数
- 接收
-
eval()：将字符串当作 JS 代码处理 -
document：当前页面对象 -
history：历史对象- 代表浏览器的历史记录
-
location：地址栏对象- 当前页面的 URL 信息
-
console：控制台对象console.log()：打印到控制台输出
-
Navigator：浏览器对象- 封装了浏览器的信息
- 不推荐不使用，可被人为修改
-
screen：屏幕对象，获取屏幕尺寸 -
将当前窗口设为顶级窗口
-
// 判断当前窗口是否是顶级窗口 if(window.top !== window.self){ // 将顶级窗口的地址设置为当前窗口 window.top.location = window.self.location; }
-
history
- 浏览器的历史记录
- window 的属性：历史对象
back()函数：后退操作，回退到上一步go()函数：前进forward()：前进到访问地址
location
- 当前页面的 URL 信息
host：主机href：url 地址，当前指向位置protocol：协议reload()：重新加载，刷新assign()：设置新的地址，跳转页面
function go() {
location = "https://www.jd.com" //默认使用 window 调用
window.location = "https://www.jd.com"
document.location = "https://www.jd.com"
}
向服务器发数据
form表单提交- 超链接：
<a href="url"> document.location = "url"window.location = “url”window.open(“url”)- 直接地址栏输入 url 提交
- 以上都可以携带数据给服务器，但只有通过表单提交数据才是动态的
JSON
- json：JavaScript Object Notation
- 数据交换格式，JavaScript 对象标记
- 轻量级数据交换格式
- 体积小、易解析
- 实际开发有两种常用数据交换格式
- json
- 轻量级，易解析
- xml
- 体积较大，解析麻烦
- 但语法严谨，银行等机构常用
- json
JSON 对象
-
无类型对象
-
语法格式
var json = {"属性名":属性值, "属性名":属性值}K:V结构，使用,分隔不同的键值对- k：String 类型
- v：必须是以下数据类型之一：
- 字符串、数字、JSON 对象
- 数组、布尔、null
- 字符串值必须由双引号编写
- 数据在名称/值对中，由逗号分隔
- 花括号容纳对象，方括号容纳数组
-
Java 连接数据库查询数据后将数据在 Java 中转为 json 格式字符串并发回浏览器
- 浏览器将字符串解析为 json 对象
-
解析 json
- 函数
JSON.parse()函数把文本转换为js对象 eval("var jsonObj = " + fromJava)fromJava：传到浏览器的 json 格式字符串eval()：函数将字符串作为 js 代码处理- 即 等价于
var jsonObj = fromJava创建 json 对象
- 通过
JSON.stringify()函数把 JavaScript 对象转换为字符串
// 创建 js 对象 var json = { name:"张三", age:19, sex:'男' } // 将 js 对象转为 json 字符串 var jsonString = JSON.stringify(json) document.write(jsonString) // 解析字符串为 json 对象 var object = JSON.parse(jsonString) document.writeln(object) - 函数
-
json 数组：数组中存放 json 对象
-
[]：js 数组 -
{}：json 对象 -
// 创建 json 数组 var jsonArray = [ {"name":"张1", "age":"17", "hobby":"唱"}, {"name":"张2", "age":"18", "hobby":"跳"}, {"name":"张3", "age":"19", "hobby":"rap"} ] // 遍历 json 数组 for (let i = 0; i < jsonArray.length; i++) { document.writeln(jsonArray[i].name+ " " + jsonArray[i].age + " " + jsonArray[i].hobby + "<br/>") }
-
-
嵌套使用：json 对象中嵌套数组，数组中数据为 json 对象
-
var jsonArray = { "total":3, "students":[ {"name":"张三", "age":18, "hobby":"唱"}, {"name":"张三", "age":18, "hobby":"跳"}, {"name":"张三", "age":18, 'hobby':"rap"} ] }
-
JQuery
-
类似工具类
-
封装了大量 JavaScript 函数
- 可以下载文件导入项目使用
<!-- 导入 JQuery 文件 --> <script src="JQuery/jquery-3.6.0-dev.js"></script>- 或直接使用 CDN 在线引用
<!-- CDN 引用 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -
使用公式：
$(selector).action()selector：选择器，就是 CSS 选择器action：事件，传入一个函数对事件做操作
绑定事件动态显示鼠标移动坐标
<p id="p1"></p> <div id="div"> 范围移动鼠标 </div> <script> // 将单击事件绑定到 id 为 btn 的 按钮 $('#btn').click(function (){ alert("提交数据") }) // 页面加载后触发事件 $(function (){ // 将鼠标移动事件绑定到 id 为 div 的区域 $('#div').mousemove(function (now){ // 当事件触发时在 id 为 p1 的节点显示 x轴、y轴 坐标 $('#p1').text(`坐标:${now.pageX}, ${now.pageY}`) }) }) </script>
操作 DOM
<ul id="ul_test">
<li name="l1">1</li>
<li class="l2">2</li>
<li id="l3">3</li>
<li value="l4">4</li>
<li>5</li>
</ul>
<script>
// ul_test：列表父节点，li[name=python]：列表中的字节点
// 获取文本数据
$('#ul_test li[name=l1]').text()
// 修改文本数据
$('#ul_test li[class=l2]').text('设置值')
// 获取值
$('#ul_test li[id=l3]').html()
// 设置值，以 html 代码格式处理
$('#ul_test li[value=l4]').html("设置值")
// 元素隐藏和显示：设置 display: none
$('#ul_test li[name=l1]').hide() //元素隐藏
$('#ul_test li[name=l1]').show() //元素显示
</script>
选择器
-
原生选择器
// id 选择器 document.getElementById() // name 选择器 document.getElementsByName() // 标签选择器 document.getElementsByTagName() // 类选择器 document.getElementsByClassName() -
JQuery 使用这些
- 还有庞大的选择器种类
$('p').click(function (){}) // 标签选择器 $('#id').click(function (){}) // id 选择器 $('.class').click(function (){}) // 类选择器
元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素
$("p") //选取 <p> 元素
$("p.intro") //选取所有 class="intro" 的 <p> 元素
$("p#demo") //选取所有 id="demo" 的 <p> 元素
属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") //选取所有带有 href 属性的元素
$("[href='#']") //选取所有带有 href 值等于 "#" 的元素
$("[href!='#']") //选取所有带有 href 值不等于 "#" 的元素
$("[href$='.jpg']") //选取所有 href 值以 ".jpg" 结尾的元素
CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性
$("p").css("background-color","red"); // 所有 p 元素的背景颜色更改为红色
部分实例
| 语法 | 描述 |
|---|---|
$(this) | 当前 HTML 元素 |
$("p") | 所有 <p> 元素 |
$("p.intro") | 所有 class="intro" 的 <p> 元素 |
$(".intro") | 所有class="intro"的元素 |
$("#intro") | id="intro" 的元素 |
$("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
$("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
$("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
Ajax
-
Ajax：Asynchronous JavaScript and XML
- 异步的 JavaScript 和 Xml
- 无需重新加载整个页面下更新部分网页
-
不是新的编程语言，是用于创建更好更快交互性更强的 Web 应用技术
- 增强 B/S 体验性
- 传统网页更新内容需要重新加载整个页面
-
通过 JQuery 使用 Ajax 导入 JQuery
-
通过 Vue 实现导入 Vue
- 编写 controlller 方法
- 返回 json 数据
- 编写 ajax 请求：
$.ajax()- 部分参数
- url：请求地址，待转入的URL地址
- type：请求方式
- Ajax 默认使用 get 请求
$.post()：使用 post 方式发送请求
- headers：请求头
- data：待发送的数据
- content-type：内容编码类型
- async：是否异步
- timeout：请求超时时间（毫秒）
- beforeSend：发送请求前执行的函数（全局）
- complete：完成后执行的回调函数（全局）
- success：请求成功时的回调函数（全局）
- data：请求返回的数据
- status：状态
- error：失败后执行的回调函数（全局）
- accepts：通过请求头发送给服务器
- 告诉服务器当前客户端接受的数据类型
- datatype：将服务器返回的数据转为指定格式
"xml"：转为 xml 格式"text"：转为普通文本格式"html"：作为 html 代码处理，或转为普通文本格式"script"：尝试作为 js 脚本执行，将返回值转为普通文本"json"：返回内容转为 js 对象
- 部分参数
- Ajax 绑定事件
- 根据不同操作触发事件
- 执行回调函数
<script>
$(function () { // 页面加载完成后触发
$('#username').blur(function () { // 绑定输入框到失去焦点事件
// Ajax 发起请求，默认 get 类型
$.ajax({ // $.post() 使用 post 方式发送请求
url: "demo", // 设置请求的 url
data: {
"username":$('#username').val()
}, // 设置发动的数据：key：username，value：文本框的值
success: function (data) { // 请求成功后的回调函数
$('#usernameInfo').text(data) // 将返回的数据显示到文本框后面
}
})
})
})
$(function () { // 简化写法
$('#username').blur(function () {
// 将发起请求的参数直接放到形参列表：url、data、success h
$.post("demo",{"username":$('#username').val()},function (data){
$('#usernameInfo').text(data)
})
})
})
</script>
<!-- 文本输入框 -->
<input type="text" id="username" placeholder="请输入用户名">
<span id="usernameInfo"></span>
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
