JavaScript是一门最流行的脚本语言之一
一个合格的后端人员,必须要精通JavaScript
介绍:
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。
JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript 的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES6。
注意:
ECMAScript它可以理解JavaScript的一个标准
最新版本已经到es6版本了
但是大部分浏览器还只停留在支持es5代码上
开发环境—线上环境,版本不一致
1.快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 常用的JavaScript代码方式-->
<!-- 第一种方式,script代码块-->
<!-- script标签内,写JavaScript代码-->
<!-- <script>-->
<!-- alert("hello,world")-->
<!-- </script>-->
<!-- 第二种方式: 外部引入-->
<script src="WEB-INF/js/dy.js"></script>
</head>
<body>
</body>
</html>
变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1.定义变量 变量类型 变量名=变量值;
var num=1;
var name='张三';
</script>
</body>
</html>
1:在js中通过var定义变量
2:如果一个变量没有声明/定义直接访问的话会出现语法错误
3:定义变量没有手动赋值,系统默认值undefined
4:undefined在js中是一个具体存在值
数据类型
Number
js不区分小数和整数,Number
123 //整数
123.10 //浮点数123.10
1.123e3 //科学计数法
-99 //负数
NaN //not a number 不是一个数字
Infinity //表示无限大
字符串
'abc'
"abc"
布尔值
true
false
逻辑运算
&& 两个都为真,才为真
|| 一个为真,结果为真
! 真即假,假即真
比较运算符5颗星*****
=
== 等于(类型不一样,值一样,也会判断为true)
=== 绝对等于(类型一样,值也要一样,才会判断为true)
这是一个js的缺陷,坚持不要使用==比较
须知:
- NaN===NaN,这个与所有的数值都不相等,包括自己
- 只能通过isNaN(NaN)来判断这个数是否为NaN
浮点数问题:
console.log((1/3)===(1-2/3));
结果为false
尽量避免使用浮点数进行运算,存在精度问题!
NULL和undefined
- null 空
- undefined 未定义
定义变量没有手动赋值,系统默认值undefined
数组
java中数组必须为一种相同类型的对象
JS中不需要相同类型
var number=[1,23,33.3,"数值",null,true,false];
new Array(1,23,33.3,"数值",null,true,false);
取数组下标:如果越界了,会undefined
对象
对象是大括号,数组是中括号
每个属性之间用逗号隔开,最后一个不需要隔开
var person={
name:"张三",
age:10,
sex:"男",
tags:['js','java','web','....']
}
取对象的值
person.name
> "张三"
person.age
>10
严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--use strict;严格检查模式,预防JavaScript的随意性导致产生的运行位置
必须写在JavaScript的第一行!
-->
<!-- 局部变量建议都建议let去定义-->
<script>
'use strict';
//全局变量
let i=1;
</script>
</body>
</html>
数据类型详解
1.1 字符串
- 正常字符串我们使用单引号,或者双引号包裹
- 注意转义字符 \
\'
\n
\t
\u4e2d \u#### Unicode字符
\x41 Asc11字符
- 多行字符串编写
//tab piao esc下面
var msg=`hello
world
你好啊
你好
`
- 模板字符串
let name="张三";
let age=5;
let msg=`你好啊,${name}`
- 字符串的长度
str.length
- 字符串的可变性,不可变
- 大小写转换
- stdunt.indexOf(‘t’)
- substring
stdunt.substring(1) //从第一个字符串截取到最后一个字符串
stdunt.substring(1,3) //[1,3]
1.2数组
Array可以包括任意的数据类型
var arr=[1,23,4,5,6]
arr[0]
arr[0]=1
1.长度
arr.length
注意:加入arr.length赋值,数组大小就会发生变化,如果赋值过小,元素会丢失
2. indexOf,通过元素获取下标索引
arr.indexOf(23)
1
字符串的“1”和数字1是不同的
3. slice() 截取Array的一部分,返回一个新的数组,类型于String中的substring方法
4. push(),pop() 尾部
push:压入到尾部
pop:弹出尾部的一个元素
5.unshift(),shift() 头部
unshift:压入到头部
arr.unshift("aaaa")
6
arr
Array(6) [ "aaaa", 1, 3, 5, 44, "a" ]
unshift:弹出头部的一个元素
arr.shift()
"aaaa"
arr
Array(5) [ 1, 3, 5, 44, "a" ]
6.排序sort()
arr.sort()
Array(5) [ 1, 3, 44, 5, "a" ]
7.元素反转reverse()
arr.reverse()
Array(5) [ "a", 5, 44, 3, 1 ]
8.concat()
arr.concat(1,2,3)
Array(8) [ "a", 5, 44, 3, 1, 1, 2, 3 ]
arr
Array(5) [ "a", 5, 44, 3, 1 ]
注意:concat()并没有修改数组,只会返回一个新的数组
9.连接符join
打印拼接数组,使用特定的字符串连接
arr.join('-')
"a-5-44-3-1"
10.多维数组
arr=[[1,2],[3,4],[5,6]];
(3) […]
0: Array [ 1, 2 ]
1: Array [ 3, 4 ]
2: Array [ 5, 6 ]
length: 3
取值
arr[1][1]
4
11.删除数组元素
方法1:用delete 删除数组中元素
//定义数组
var array=["aa","dd","cc","aa"];
//方法1:delete删除数组元素
delete array[1];
//输出结果 : ["aa",undefined,"cc","aa"]
getArray(array);
注意:使用这种方法删除下标,delete: 只是被删除的元素变成了 undefined 其他的元素的键值还是不变。
方法2:用splice删除数组的元素
var array = ["aa","dd","cc","aa"];
//方法2:删除数组元素
array.splice(1,1);
//输出结果:["aa","cc","aa"]
getArray(array);
splice: 该方法会改变原始数组
数组:存储数据(如何存,如何取,方法都可以自己实现)
1.3对象
若干个键值对
var 对象名={
属性名:属性值,
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//定义了一个preson对象,它有4个属性
var preson={
name:'张三',
age:15,
email:"6666666@qq.com"
sex:'nan'
}
Js中的对象,{…}表示一个对象,键值对描述属性xxxx:xxxx,多个属性之间使用逗号隔开,最后一个属性不加逗号!
1.对象赋值
preson.name
"张三"
preson.name="小明"
"小明"
2.使用不存在对象属性,不会报错!undefined
preson.alg
undefined
3.动态的删减属性.
delete preson.name
true
preson
Object { age: 15, email: "6666666@qq.com", sex: "nan" }
4.动态的添加
preson.haha="hhh"
"hhh"
preson
Object { age: 15, email: "6666666@qq.com", sex: "nan", haha: "hhh" }
5.判断属性值是否在这个对象中, xxx in xxx!
'age' in preson
true
6.判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
preson.hasOwnProperty('tostring')
false
1.4 流程控制
if判断
let age=3;
if(age>3){ //第一个判断
alert("haha");
}else if(age<5){ //第二个判断
alert("no aaa");
}else { //否则
alert("no");
}
while循环,避免程序死循环
while (age<100){
age = age+1;
console.log(age);
}
for循环
for (let i = 0; i <100 ; i++) {
console.log(i);
}
forEach循环
sz.forEach(function (value) {
console.log(value)
})
数组循环
var sz=[1,55,1552,15552,444,1113,11];
for (let i = 0; i <sz.length ; i++) {
console.log(sz[i]);
}
1.5Map和Set
ES6的新特性
Map:
//ES6 Map
//学生的成绩,学生的名字
var names = ['tom', 'jack', 'lx', 'zs'];
var scores = [100, 80, 20, 18];
var map = new Map([['jk',100], ['zs', 80], ['lwq', 15]]);
map.set('abc',123);
map.delete('zs'); //通过key删除元素
let name = map.get('jk'); //通过key获取value
console.log(name);
Set:无序不重复的集合
var set=new Set([1,3,3,3,2,5]); //set可以去除重复的
set.add(9); //往set里面添加元素
set.delete(3); //删除
console.log(set.has(2)); //判断是否有这个元素
1.6 iterator
使用iterator遍历map set集合
//通过for of /for in 下标
var arr=[3,4,5];
for(var x of arr){
console.log(x)
}
遍历map
var map=new Map([['lwq',12],['xz',80],['ww',90]]);
for (let mapElement of map) {
console.log(mapElement)
}
遍历set
var set=new Set([1,20,9,3,2,5]);
for (let number of set) {
console.log(number);
}
函数
1.定义一个函数
//java定义函数
public 返回值类型 方法名(){
return 返回值;
}
定义方式一
绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行return代表函数结束,返回结果!
如果没有执行return,函数执行完也会返回结果,结果就是undefined
定义方式二
var abs=function(x){
if (x >= 0) {
return x;
} else {
return -x;
}
}
function(x){…}这是一个匿名函数,但是可以把结果赋值给abs,通过abs就可以调用函数!
调用函数
abs(10); //10
abs(-10) //10
参数问题:JavaScript可以传任意个参数,也可以不传入参数。
arguments
arguments
是一个js免费赠送的关键字
代表,传递进来的所有的参数,是一个数组
2.变量的作用域
有一句话是这样说的,出了大括号就不认识了。
在JavaScript中,var定义变量实际是有作用域的
假设在函数体中声明,则在函数体外不可以使用
function qj() {
var x=1;
x=x+1;
}
x=x+2; //ReferenceError: x is not defined
如果两个函数使用相同的变量名,只要在函数内部,就不会冲突
function wq() {
var x=1;
x=x+1;
}
function ewq() {
var x='a';
x=x+1;
}
内部函数可以访问外部函数的成员,反之则不行
function wq() {
var x = 1;
//内部函数可以访问外部函数的成员,反之则不行
function ewq() {
var y = x+1; //2
}
var z=y+1; //ReferenceError: y is not defined
}
假设,内部函数变量和外部函数的变量,重名!
function wq() {
var x = 1;
function ewq() {
var x = 'a'
console.log('内' + x); //外1
}
console.log('外' + x); //内a
ewq()
}
wq()
假设在JavaScript中函数查找变量从自身函数开始,由内往外查找,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量
提高变量的作用域
function wq() {
var a = "x"+y;
console.log(a);
var y='y';
}
wq()
结果xundefined
说明:js执行引擎,自动声明了y的声明,但是不会提升变量y的赋值。
全局函数
//全局变量
var x=1;
function wq() {
console.log(x);
}
wq();
console.log(x)
全局对象window
var x='xxx';
alert(x);
alert(window.x); //默认所有的全局变量,都会自动绑定window对象下;
alert()这个函数本身也是一个window
变量;
var x = 'xxx';
window.alert(x);
var ale_rt = window.alert;
window.alert = function () {
}
// 发现alert(失效了)
window.alert(123);
// 恢复
window.alert = ale_rt;
window.alert(652)
说明JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错ReferenceError
规范
由于我们所有的全局变量都会绑定到我们的window上,如果不同的js文件,使用相同的全局变量,冲突··我们应该怎么解决冲突呢?
//唯一的全局变量
var zs = {};
//定义全局变量
zs.name = 'zhangshan';
zs.add = function (a, b) {
return a + b;
}
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题
局部作用域set
function aaa() {
for (var i = 0; i <100 ; i++) {
console.log(i);
}
console.log(i+1); //我们发现 i出了这个作用域还可以继续使用
}
aaa()
ES6 let关键字,解决局部作用域冲突问题!
function aaa() {
for (let i = 0; i <100 ; i++) {
console.log(i);
}
console.log(i+1); //ReferenceError: i is not defined
}
aaa()
建议大家都使用let去定义局部变量
常量const
在ES6之前,我们要定义一个规范,比如只要用全部大写字母命名的变量的就是常量,建议不要进行修改,但是实际上还是可以改变
在ES6引入了常量关键字const
const PAI=3.14; //只读变量
console.log(PAI);
PAI=51; //这里编译器会直接报错 编译不通过 TypeError: invalid assignment to const `PAI'
3.方法
定义方法
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
var lwq = {
name: '小强',
birthday: 2000,
//方法
age: function () {
//今年减去出生的年
let number = new Date().getFullYear(); //获取到当前的年份
return number - this.birthday;
}
}
//属性
lwq.name
//方法 ,一定要带()
lwq.age()
this.代表什么,我们可以拆开上面的代码看一看
function getAge () {
//今年减去出生的年
let number = new Date().getFullYear(); //获取到当前的年份
return number - this.birthday;
}
var lwq = {
name: '小强',
birthday: 2000,
age:getAge
};
//lwq.age() ok
//getAge() NaN
this是无法指向的,是默认指向调用它的那个对象
apply
在JS中可以控制this指向
function getAge () {
//今年减去出生的年
let number = new Date().getFullYear(); //获取到当前的年份
return number - this.birthday;
}
var lwq = {
name: '小强',
birthday: 2000,
age:getAge
};
//lwq.age() ok
getAge.apply(lwq,[]); //this.指向了lwq,参数为空
内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof 3.0
"number"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof NULL
"undefined"
typeof undefined
"undefined"
1. Date
基本使用
let date = new Date();
console.log(date) //Tue May 12 2020 18:50:04 GMT+0800 (中国标准时间)
date.getFullYear(); //年 2020
date.getMonth(); //月 0-11 代表月
date.getDate(); //日 12
date.getDay(); //星期几 2
date.getHours(); //时 18
date.getMinutes(); //分 50
date.getSeconds();//秒 4
date.getTime(); //1589280604335 时间戳 1970年1月1日(00:00:00 GMT)至当前时间的总秒数
console.log(new Date(1589280604335)) //时间戳转换为时间
2.JSON
json是什么
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率
在JavaScript一切皆为对象。任何js支持的类型都可以用JSON来表示。
格式:
- 对象都用{}
- 数组都用[]
- 所有的键值对,都是用key:value
JSON字符串和JS对象转化
var user = {
name: "lwq",
age: 15,
sex: "男"
}
//转换为JSON字符串
var JsonUser = JSON.stringify(user); //{"name":"lwq","age":15,"sex":"男"}
//json字符串转换为对象 参数为json字符串
var DuiXiang=JSON.parse('{"name":"lwq","age":15,"sex":"男"}');
很多人都搞不清楚,JSON和JS对象的区别
var obj={a:'hello',b,'hai'} //这是一个对象
var json='{"a":"hello","b","hai"}'
面向对象编程
1.什么是面向对象
JavaScript.Java.c#…面向对象;JavaScript有区别
- 类:模板
- 对象:具体的实例
在JavaScript中我们需要换一下思考
Class继承
class
关键字是在ES6引入的
1.定义一个类,属性,方法
//定义一个学生的类
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert("Hello")
}
}
//可以创建多个对象
let xiaobai= new Student('xiaobai');
let xiaoqiang = new Student('xiaoqiang');
console.log(xiaobai);
xiaobai.hello();
2.继承
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert("Hello")
}
}
class XiaoXueSheng extends Student {
constructor(name, age) {
super(name);
this.age = age;
}
myGrade() {
alert("我是一个小学生")
}
}
let xiaobai = new XiaoXueSheng("xiaobai", 15);
console.log(xiaobai);
xiaobai.myGrade();
本质:查看对象的原型
操作BOM对象
浏览器介绍
JavaScript和浏览器的关系:
JavaScript诞生就是为了就是能让他在浏览器中运行
BOM:浏览器对象模型
- IE 6-11
- Chrome
- Safari
- Firefox
- Opera
第三方浏览器:
- QQ浏览器
- 360浏览器
window
window代表浏览器窗口
window.alert(1)
undefined
window.innerHeight //高度
233
window.innerWidth //宽度
1280
window.outerWidth //内置宽度
1291
//可以调整浏览器窗口试试
Navigator
Navigator,封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows)"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:76.0) Gecko/20100101 Firefox/76.0"
navigator.platform
"Win32"
基本上不会使用Navigator对象,因为可以被人为修改
screen
代表屏幕尺寸
screen.width
1280 px
screen.height
720 px
location(重要)
location 代表当前页面的URL信息
host: "www.baidu.com" //主机
href: "https://www.baidu.com/" //当前位置
protocol: "https:" //协议
reload: ƒ reload() //重新加载
//设置新的地址
location.assign('');
document
document 代表当前的页面,HTML DOM文档树
document.title
"百度一下,你就知道"
document.title='张三'
"张三"
获取具体的文档树节点
<dl id="app">
<dt>Java</dt>
<dd>JavaEE</dd>
<dd>JavaSE</dd>
</dl>
<script>
var dl = document.getElementById('app');
获取cookie
document.cookie
"_uuid=35833BAA-9F57-7BC0-A4D8-43996213A25640455infoc; buvid3=D05836E0-FC5F-46D1-87E8-0AB7D1A3F1B8190954infoc; LIVE_BUVID=AUTO6915709341419914; CURRENT_FNVAL=16; stardustvideo=1; laboratory=1-1; rpdid=|(J|)lJu|~mY0J'ul~|mJRul~; im_notify_type_477127448=0; CURRENT_QUALITY=80; DedeUserID=477127448; DedeUserID__ckMd5=d8b02e9cac4e69ee; bili_jct=ddbc7d697b1cf03f92408ab18cf98f7c; bp_t_offset_477127448=385505514190712543; bp_video_offset_477127448=387217050070905214; PVID=2; sid=bgbiwsgv"
history
history代表浏览器的历史记录
history.back() //后退
history.forward() //前进
操作DOM对象
DOM:文档对象模型,
核心
浏览器网页就是一个DOM树结构 !
- 更新:更新DOM节点
- 遍历dom节点:得到DOM节点
- 删除:删除一个DOM节点
- 添加:添加一个新的节点
要操作一个Dom节点,就必须先获得这个Dom节点
获得Dom节点
var h1 = document.getElementsByTagName("h1"); //标签选择器
var p1 = document.getElementById("p1"); //id选择器
var p2 = document.getElementsByClassName("p2"); //class选择器
var father = document.getElementById("father");
var childrens = father.children; //获取父节点下的所有子节点
// father.firstChild
// father.lastChild
这个是原生的代码,基本上以后不会这么写,都是有jQuery();
更新节点
<div id="id1">
</div>
<script>
var id1=document.getElementById('id1')
操作文本
-
id1.innerText='456'
修改文本的值 -
id1.innerHTML='<strong>123</strong>'
可以解析HTML文本标签
操作css
id1.style.color='red' //属性,使用字符串 包裹
"red"
id1.style.fontSize='30px' //注意:没有下划线了全部下划线变成了驼峰命名
"30px"
id1.style.padding='3em'
"3em"
删除节点
删除节点的步骤:先获取父节点,在通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self= document.getElementsByTagName("p1");
var father=p1.parentElement;
father.removeChild(self);
//删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
删除多个节点的时候,children是在时刻变化的,删除节点的时候一定要注意
插入节点
我们获得了Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么做了,因为会出现覆盖
追加:
<p id="js">JavaScript</p>
<div id="list">
<p id="ee">JavaEE</p>
<P id="se">JavaSE</P>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById('js'); //已经存在的节点
var list = document.getElementById('list');
list.appendChild(js); //追加
</script>
效果:
创建一个新的标签,实现插入
<p id="js">JavaScript</p>
<div id="list">
<p id="ee">JavaEE</p>
<P id="se">JavaSE</P>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById('js'); //已经存在的节点
var list = document.getElementById('list');
list.appendChild(js)
//通过JS创建一个新的节点
var newp = document.createElement('p'); //创建了一个p标签
newp.id='newp';
newp.innerText="Hello,JS";
list.appendChild(newp)
//创建一个标签节点(通过这个属性,可以设置任意的值)
var htmlScript = document.createElement('script');
htmlScript.setAttribute("type","text/javascript");
</script>
效果:
操作表单(验证)
表单是 什么form Dom树
- 文本框 text
- 下拉框
<select>
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- …
表单的目的:提交信息
获得要提交的信息
<form action="" method="post">
<p>
<span>用户名:</span><input type="text" id="username" required>
</p>
<!-- 多选框的值,就是定义好的value-->
<p>
<span>性别:</span>
<input type="radio" name="sex" id="nan" value="nan">男
<input type="radio" name="sex" id="nu" value="nu">女
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
<script>
var username = document.getElementById('username');
var nan = document.getElementById('nan');
var nu = document.getElementById('nu');
//对于单选框,多选框等固定的值,nan.value只能获取当前的值
nan.checked; //查看返回的结果,是否为true,如果是true,就是被选中的
nan.checked=true; //赋值
//得到输入框的值
username.value
//修改输入框的值
username.value = '123'
</script>
提交表单 md5加密,表单优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--onsubmit=绑定一个提交的函数,true,false-->
<!--将这个结果返回给表单,使用 onsubmit接受-->
<!--onsubmit="return aaa()"-->
<form action="https://www.baidu.com" method="post" onsubmit="return aaa()">
<p>
<span>用户名:</span><input type="text" id="username" name="username" required/>
</p>
<p>
<span>密码:</span><input type="password" id="password" required/>
</p>
<input type="hidden" id="md5-password" name="password">
<p>
<button type="submit">提交</button>
</p>
<!-- 绑定事件-->
</form>
<script>
function aaa() {
var username = document.getElementById('username');
var password = document.getElementById('password');
var md5pwq = document.getElementById("md5-password");
//MD5 算法
md5pwq.value = md5(password.valueOf());
//可以判断表单的内容,true就是通过提交,false阻止提交
return true;
}
</script>
</body>
</html>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
可以对提交过来的密码进行加密
效果: