JavaScript

1、什么是 JavaScript

1.1 概述

• JavaScript 是一门 世界上最流行的脚本语言

• 10天设计出来

• 一个合格的后端人员，必须精通 JavaScript

1.2 发展

• ECMAScript：可以理解为是 JavaScript 的一个标准
  • 最新版本到了 es6 版本
  • 但是大部分浏览器都还只支持 es5 代码
  • 导致了 开发环境 与 线上环境，的版本不一致
• 历史
  • 上网查

2、 JavaScript 上手

2.1 引入 JavaScript

2.1.1 内部标签

• 在 script 标签中书写代码，代码以 ； 结尾

<script>
	//这里写代码，以 分号 结尾
</script>

2.1.2 外部引入

• script 标签必须成对出现

<script src="这里写javascript文件路径"></script>

2.1.3 注意

• script 标签必须成对出现，不能自闭合
• script 标签不用显示定义 type，因为默认就为 javascript

2.2 基本语法入门

• 定义变量：变量类型 变量名 = 变量值；
• 在 javascript 中，通常用 var 表示变量类型，var 可以表示多种类型变量
  • 但通常在局部变量中会使用 let 来定义变量（ES6新特性）

<script>
    // 1.定义变量   var 变量名 = 变量值；
    var num = 1;
    var name = "aze";
</script>

• 条件控制

<script>
    // 2.条件控制
    if (num == 1){
        alert(name);
    }
</script>

• 在浏览器的控制台打印变量：console.log(变量名)，相当于 java 中的输出（sout）

console.log(变量名)

• 浏览器调试：
  • Elements：网页组成
  • Console：控制台
  • Sources：Debug
  • Network：请求
  • Application：应用

2.3 数据类型

• 数值、文本、图形、音频、视频、等等

变量

• 变量的定义使用 var
• 变量名不能使用 数字 开头

var 变量名 = 变量值;

• 局部变量建议都使用 let 来定义

let 变量名 = 变量值;

number

• js 中，不区分小数和整数

123 // 整数
123.4 // 浮点数
1.23e4 // 科学计数法
-99 // 负数
NaN // not a number 不是一个数
Infinity // 无限大

字符串

• ‘abc’ “abc”

布尔值

• true false

逻辑运算符

• && 两个为真，才为真
• || 一个为真，则为真
• ！ 取反

比较运算符

• =
• == 等于（类型不一样，值一样，也会为 true）
• === 绝对等于（类型一样，值一样，才一样）
• 注意：
  • js 中坚持不使用 == 比较，这是 js 的缺陷
  • NaN，这个与所有的数值都不相等，包括自己
  • 只能通过 isNaN(NaN)，来判断是不是 NaN
  • 浮点数中存在精度问题，所以尽量避免使用浮点数进行运算

null 和 undefined

• null 空
• undefined 未定义

数组

• javascript 中的数组可以存放不同类型的对象（不严谨性）

// 为了保证代码的可读性，通常使用这种写法
var arr = [1,2,'abc',"abc",true,null];

new Array(1,2,'abc',"abc",true,null);

• 数组下标越界，会返回 undefined，不会报错

对象

• 定义对象用大括号，数组用中括号
  • 每个对象属性用 逗号 隔开 （，），最后一个属性不用

var person = {
    name : "woziji",
    age : 18,
    sex : '男',
    tags : ["java","js","css","html","等等"]
}

• 如何取值

> person.name
<- "woziji"

> person.tags
<- (5) ["java", "js", "css", "html", "等等"]

> person.age
<- 18

> person.sex
<- "男"

2.4 严格检查模式

• ‘use strict’; ：严格检查模式，预防 JavaScript 的随意性所产生的一些问题
• 在写代码时，第一行就写这个
• 前提：支持 ES6 语法

<script>
    'use strict';
</script>

3、数据类型

3.1 字符串

1. 正常的字符串我们使用，单引号 或 双引号 包裹

2. 注意转义字符

   \'	字符串
   \n	换行
   \t	tab
   \u4e2d \u####	Unicode字符
   \x41	Axcll字符

4. 多行字符串编写（长字符串）

   // 长字符串
   var msg =`这是信息
   	message
   	Hello,
   	world!
   	再见！`;
   

5. 模板字符串

   • 在长字符串中使用 ${变量名}，来进行定义

   // 模板字符串
   let name = "pig";
   let age = 18;
   let msg = `你好喔，${age}岁的${name}`;
   

6. length 字符串长度

   str.length
   

7. 字符串不可变性，不可变

8. toUpperCase() toLowerCase() 大小写转换

   //这里用的是方法，不是属性
   //转为大写
   属性名.toUpperCase()
   //转为小写
   属性名.toLowerCase()
   

9. indexOf() 获取指定字符的第一个下标

   属性名.indexOf('字符')
   

10. substring() 截取某一段字符串，左闭右开

//从一开始截取到最后
属性名.substring(1)

//截取[2,5)的字符串
属性名.substring(2,5)

3.2 数组

• javascript 数组可以包含任意的数据类型的值
• 存取数据（如何存，如何取，方法都可以实现）

var 数组名 = [元素...];

1. length 长度

   • 数组中的长度可以改变
     • 扩大长度，对应下标位置会生产 undefined
     • 缩小长度，会使数据元素丢失

   数组名.length
   

2. indexOf 获取下标索引

   • 字符串的 1 与 数字 1 是不一样的

   数组名.indexOf(元素)
   

3. slice() 截取数组中的一部分，返回一个新的数组，类似于 substring

   • 左闭右开

   // 截取数组中下标为 [1,5)的元素
   数组名.slice(1,5)
   

4. push() pop() 这两个都是在 尾部 中操作

   • push()：将元素压入数组尾部

     数组名.push(元素)
     

   • pop()：将尾部元素从数组弹出

     数组名.pop()
     

5. unshift() shift() 这两个都是在 头部 中操作

   • unshift()：将元素压入数组头部

     数组名.unshift(元素)
     

   • shift()：将头部元素从数组弹出

     数组名.shift()
     

6. sort() 排序

   数组名.sort()
   

7. reverse() 元素反转

   数组名.reverse()
   

8. concat() 将数组拼接，返回一个新的数组

   • 不会修改原先的数组，只是返回一个新的数组

   数组名.concat(数组)
   

9. join() 连接符

   • 使用特定的字符串连接数组，并将其打印

   数组名.join(字符串)
   

10. 多维数组

    var 数组名 = [元素,[元素...],[元素...]]
    

3.3 对象

• JavaScript 中的所有键都是字符串，值是任意对象

• 有若干个键值对

var 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
}

• js 中的对象是用 大括号 包裹
• 键值对描述属性
• 多个属性使用 逗号 隔开，最后一个属性不加逗号

1. 对象赋值

   对象.对象属性 = 值;
   

2. 使用一个不存在的对象属性，不会报错！

   • undefined

   > 对象。不存在的属性
   <- undefined
   

3. delete 动态地删减属性

   • 删除对象属性，返回一个 true，就删掉了

   > delete 对象名.属性
   <- true
   

4. 动态地添加属性

   • 直接个新的属性添加值就可以

   对象名.不存在的属性名 = 值
   

5. ‘xxx’ in xxx 判断属性值是否在这个对象当中

   • 在 JavaScript 中的键都是字符串
   • 会包括继承中得来的属性

   '属性名' in 对象名
   

6. hasOwnProperty(’’) 判断一个属性是否是这个对象自身拥有的

   • 不包括继承中的属性

   对象名.hasOwnProperty('属性名')
   

3.4 流程控制

• if 判断

var num = 1;
if (num < 1){
    alert("小于1");
}else if(num > 1){
    alert("大于1");
}else {
    alert("1");
}

• while 循环
  • 避免死循环

var num = 1;
while(num < 100){
	console.log(num);
    num = num + 1;
}

• do-while 循环

do{
    console.log(num);
    num = num + 1;
}while(num < 100);

• for 循环

for (let i = 0; i < 100; i++){
    console.log(i);
}

• forEach 循环（ES5.1）
  • 遍历数组，函数

var arr = [1,2,3,4,5,6,7,8,9,10];
// 遍历数组，函数
arr.forEach(function (value)
	console.log(value)
);

• for in 循环
  • 遍历数组，返回的是数组下标

var arr = [1,2,3,4,5,6,7,8,9,10];
//for(var index in object){}
for(var num in arr){
    console.log(arr[num])
}

3.5 Map 与 Set

• ES6

Map

• 键值对
• 集合

var map = new Map([['value0',0],['value1',1],['value2',2]]);

• 通过键获得值

map.get('value1');

• 添加键值对

map.set('value3',3);

• 删除

map.delete('value1');

Set

• 无序
• 不重复
• 集合

var set = new Set([1,1,3,2,4,5,5,5,2]);

• 增添元素，如果重复，则什么都不会添加

set.add(10);

• 删除

set.delete(10);

• 查看元素是否在集合中

console.log(set.has(10));
console.log(set.has(1));

3.6 iterator

ES6 新特性

• 遍历数组
  • for…in：返回的是数组下标
  • for…of：返回的是数组元素

for (let i of arr){
    console.log(i)
}

• 遍历 map

for (let i of map){
    console.log(i)
}

• 遍历 set

for (let i of set){
    console.log(i)
}

4、函数

• 函数类似于 java 中的方法

4.1定义函数

4.1.1 定义方式一

• 定义绝对值函数

'use strict'
function abs(x) {
f (x >= 0){
	return x;
}else {
	return -x;
}

• 函数中执行到 return，就代表着函数结束。
• 如果没有执行 return，函数也会执行完，且返回结果（undefined）

4.1.2 定义方式二

• 定义绝对值函数

'use strict'
var abs = function(x){
    f (x >= 0){
	return x;
}else {
	return -x;
}

• 方式二是一个匿名函数，类似于 java 中的匿名内部类，这里可以把结果赋值给 abs，通过 abs 调用函数。

4.2 调用函数

abs(1) // 1
abs(-1) // 1

调用函数中的参数问题

• JavaScript 可以传递任意个数参数，也可以不传递参数。

解决不传递参数问题：

• 手动增加条件判断，抛出异常

if (typeof x !== 'number'){
    throw 'Not a number!';

解决传递多个参数问题：

• 使用 arguments 关键字
  • arguments 数组，传递过来的所有参数，一个数组
  • 问题：arguments 包含所有的参数，如果想使用多余的参数来进行操作，需要排除已有的参数

for (let i = 0; i<arguments.length; i++){
    console.log(arguments[i])
}

• 使用 rest（推荐使用）

  • 获得除了已经定义的参数之外的所有参数

  • 必须放在参数最后面，且必须用 … 标识

  • ES6 新特性

  • arguments 升级版

  if (arguments.length > 2){
      for (let i = 0; i<arguments.length; i++){
  	}
  }
  

  • 类似于 java 中的 可变长参数（推荐使用这个）

function abs(x,y,...rest){}

4.3 变量的作用域

• 在 JavaScript 中，var 定义变量是有作用域的

  • 例如：在函数体重声明的变量，在函数体外是不可以使用的
  • 除非 闭包

• 如果两个函数都使用了相同的变量名，只要在函数内部，就不会冲突

• 内部函数可以访问外部函数的成员，反之则不行

• 函数插在变量是从自身函数开始，由内向外查找

• JavaScript 实际上只有一个全局作用域，假设没有在函数作用范围内找到，就会向外寻找，如果在全局作用域都没有，就会报错

提升作用域

• js 执行，会自动提升后面定义的变量的作用域，但不会提升这个变量的赋值的作用域，所以开发人员通常都会在程序前面声明所有的变量

全局变量

• js 代码的头部定义的变量

全局对象（window）

• 默认所有的全局变量，都会自动绑定在 window对象 当中

• 例如：全局变量、alert()、等等

规范

• 由于我们所有的全局变脸都会绑定在我们的 window 上。如果不同的 js 文件，使用了相同的全局变量，就会起冲突
  • 解决冲突的有效方法：把 js 自身的代码全都放进自己定义的唯一全局变量当中。

var js01All = {}; // 这里就是唯一全局变量
// 定义全局变量
js01All.属性名 = 值；
js01All.函数名 = function(参数){}

局部作用域（let）

• 问题：在 fori 循环中，使用 var 定义的 i 出了for 循环这个作用域还可以使用，引起了局部作用域冲突问题。
• 解决方法：关键字 let 代替 var
  • let，ES6 新特性，为的就是解决局部作用域冲突的问题
• 建议：使用 let 去定义局部作用域中的变量

var num = 1;
// 在局部变量中使用 let 定义变量
for(let i = 0; i < num; i++){}

常量（const）

• 在 ES6 之前，没有关键字是用来定义常量，所以把 字母都是大写的变量都视为常量，但是这个常量会被改变
• 在 ES6 中引入了常量关键字 const

// 使用关键字 const 定义常量
const PI = 3.14;

4.4 方法

• 方法就是把函数放在对象里面，对象中只有 属性和方法

定义方法

• 方法一：

var 对象名 = {
    方法名: function(){
        方法体；
    }
}

• 方法二：

function 函数名(){
    函数体；
}
var 对象名 = {
    方法名: 函数名
}

• 调用方法，方法名后面一定要带括号

//调用属性不用加括号，但是方法一定要加括号
对象名.方法()

this

• this 是无法指向的，默认指向的是调用它的那个对象

• 但是 apply 可以控制 this 的指向

函数名. apply(指向的对象,[这里写参数，没有就可以写空参]);

5、内部对象

• typeof，标准对象，返回的是输入的类型

typeof 1
"number"
typeof '1'
"string"
...

5.1 Date

基本使用

• 年

new Date().getFullYear(); // 年

• 月，老外是用 0~11 为月份

new Date().getMonth(); // 月

• 日

new Date().getDate(); // 日

• 星期几

new Date().getDay(); // 星期几

• 时

new Date().getHours() // 时

• 分

new Date().getMinutes(); // 分

• 秒

new Date().getSeconds(); // 秒

• 时间戳，这是全球统一的

new Date(new Date().getTime()); // 将时间戳转为时间

转换

new Date().toLocaleString()

5.2 JSON

5.2.1 什么是 JSON

早期都是使用 XML文件，进行数据传输，但是 JSON 出现了

• JSON（JavaScript Object Notation, JS 对象简谱） 是一种轻量级的数据交换格式。
• 它基于 ECMAScript（欧洲计算机协会制定的 js 规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在 JavaScript 中，一切皆为对象，任何 js 支持的类型都可以用 JSON 来表示

• 格式：
  • 对象都用大括号 {}
  • 数组都用中括号 []
  • 所有的键值对都用 key:value

5.2.2 JSON字符串与 js对象的转换

• 对象转化为 JSON 字符串

// 对象转化为 JSON 字符串
JSON.stringify(对象名);

• JSON 字符串转化为 JS 对象
  • 方法中必须用单引号或者双引号包裹
  • 当字符串中使用的是双引号，那么方法中的 JSON 字符串必须用单引号包裹
  • 反之

// JSON 字符串转化为对象
JSON.parse('JSON字符串');

5.2.3 JSON和JS的区别

格式：

• JS {name: ‘aze’,age: 18,sex: ‘男’}

• JSON ‘{“name”:“aze”,“age”:18,“sex”:“男”}’

6、面向对象编程

6.1 什么是面向对象

• 例如：Java、c#、JavaScript、等等，都是面向对象
• 但是，JavaScript 会有些许不同
  • 类：模板
  • 对象：具体的实例

6.2 原型对象：

// __proto__
var person = {
    name: 'people',
    run: function () {
        console.log(this.name + ' running');
    }
}

var xiaohong = {
    name: 'xiaohong',
}
// xiaohong 的原型是 person
xiaohong.__proto__ = person;

function Person(name){
    this.name = name;
}
// 给 person 新增一个方法
Person.prototype.run = function(){
    console.log(this.name + " run")
}

6.3 class继承

• class 关键字
• ES6 新特性引入

定义一个类、属性、方法

class Person{
    // 构造器
    constructor(name) {
        this.name = name;
    }
    // 方法
    run(){
        console.log(this.name + "run")
    }
}

// 调用
var xiaohong = new Person("xiaohong");
xiaohong.run();

继承

class Student extends Person{
    // 构造器
    constructor(name,age) {
        super(name);
        this.age = age;
    }
    // 方法
    introduce(){
        console.log('我是' + this.name + ',今年' + this.age + '岁')
    }
}

// 调用
var xiaohong = new Student("xiaohong",10);
xiaohong.introduce();

原型链

7、操作 BOM 对象（重点）

• B/S：浏览器/服务端

• BOM：浏览器对象模型

7.1 浏览器的介绍

• JavaScript 与 浏览器的关系

  • JavaScript 的出现就是为了能够在浏览器中运行

• 内核：

  • IE
  • Chrome
  • Safari
  • FireFox
  • Opera

• 第三方浏览器：

  • QQ
  • 360
  • 夸克
  • 等等

7.2 window（重要）

• window 代表了浏览器的窗口

7.3 Navigator（不建议使用）

• navigator，封装了浏览器的信息

navigator.appName

navigator.appVersion

navigator.userAgent

navigator.platform
"Win32"

navigator

• 很多时候，都不会使用 navigator 对象
  • 因为，者会被别人人为修改一些东西
• 同时，也不建议使用 navigator 对象的这些属性来进行判断和偏斜代码

7.4 screen

• screen，代表的是本机屏幕分辨率

screen.width
1920

screen.height
1080

7.5 location（重要）

location，代表了当前页面的 URL 信息

• 主机

host: "www.baidu.com"

• 当前指向的位置

href: "https://www.baidu.com/?tn=98010089_dg&ch=14"

• 协议

protocol: "https:"

• 刷新网页，这是个方法

reload: ƒ reload()
//调用，网页就会刷新
location.reload()

• 设置新的地址，当你打开这个网页就会跳转

location.assign('网页地址')

7.6 document（DOM）

document，代表了当前的页面

• HTML、操作 DOM文档树，这里的 DOM 指的就是 document

// 获取当前网页的标题
document.title
"【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili"

// 改变当前网页的标题
document.title = '哔哩哔哩'
"哔哩哔哩"

• 获取具体的文档树节点

document.getElementsByTagName('标签名');
document.getElementsByClassName('类名');
document.getElementById('Id名');

除了能够查询文档树的节点，那自然可以动态地添加或者删除节点！

• 获取 cookie

document.cookie

• cookie 劫持原理
  • 通过 js，恶意获取你的 cookie，上传至它的服务器
  • 服务器端可以设置 cookie 为 httpONLY，这样就比较安全了

7.7 history（不建议使用）

history，浏览器的历史记录

// 后退
history.back()

// 前进
history.forward()

8、操作 DOM 对象（重要）

DOM，文档对象模型

8.1 核心

• 浏览器网页就是一个 DOM 树型结构

  • 更新：更新 DOM 节点
  • 遍历 DOM 节点：得到 DOM 节点
  • 添加：添加一个新的 DOM 节点
  • 删除：删除一个 DOM 节点

• 要操作一个 DOM 节点，就必须要先获得这个 DOM 节点

8.2 获得 DOM 节点

• 原生代码，之后都尽量使用 jQuery()

//对应的 css 选择器
document.getElementsByTagName('标签名');
document.getElementsByClassName('类名');
document.getElementById('Id名');

// 获取父节点下的所有子节点
document.getElementById('Id名').children;
// 获取父节点下的第一个子节点
document.getElementById('Id名').firstChild;
// 获取父节点下的最后一个子节点
document.getElementById('Id名').lastChild;

8.3 更新节点

8.3.1 操作文本

• 修改文本的值

node01.innerText = '修改的值'

• 解析 HTML 文本biaoqian

node01.innerHTML = '<strong>aa1122bb</strong>'

8.3.2 操作 css

• 修改 css 样式

// 格式
DOM节点.style.样式 = '值'

node01.style.backgroundColor = 'blue'
"blue"

node01.style.color = 'white'
"white"

node01.style.fontSize = '100px'
"100px"

8.4 删除节点

• 节点删除步骤

  1. 先获取父节点

  // 获取父节点
  var father = 要删除的节点名.parentElement;
  

  2. 通过父节点删除

  // 删除
  father.removeChild(p1);
  

<div id="father">
    <p id="p1">123</p>
    <p class="p2">abc</p>
</div>

<script>
    'use strict'
    // 获取父节点方式一
    var father = document.getElementById('father');
    // 获取父节点方式二
    var father = p1.parentElement;
    
    // 移除父节点下的 p1
    father.removeChild(p1)
</script>

• 删除节点，是一个动态的过程，所以删除节点要注意这个方面！

// 删除第一个子节点
father.removeChild(father.children[0])
// 第一个子节点被删除，之前排在第二个的子节点就变成了现在的第一个子节点
// 如果没有这个子节点就会报错
father.removeChild(father.children[1]) //报错

8.5 插入节点

• 当对一个空的 DOM 节点，进行 innerHTML ，就可以增加一个元素

• 但是，如果这个节点已经存在元素了，再去用这种方式就会覆盖这上面的所有节点

• 所以，在一个 DOM 节点有元素时，不能使用 innerText、innerHTML、等这种方式

• 再所以，就有了这种方式，追加，insert

8.5.1 追加（appendChild()）

• 将一个元素，放到某一个父节点下的最后面

  父节点名.appendChild(需要移动的节点名);

<div>
    <p id="js">JavaScript</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>
</div>

<script>

    var js = document.getElementById('js'),
        list = document.getElementById('list');
	list.appendChild(js);
</script>

8.5.2 创建新的标签，进行追加

• 创建段落，并追加到 list 下

<div>
    <p id="js">JavaScript</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>
</div>

<script>

    var js = document.getElementById('js'),
        list = document.getElementById('list');
	// 通过 js 新建一个节点
    //创建 p 标签
    var newP = document.createElement('p'); 
    // 在 p 标签设置 id，方式一
    newP.id = 'newP'; 
    // 在 p 标签设置 id，方式二
    newP.setAttribute('id','newP');
    // 设置 p 标签的文本
    newP.innerText = 'DOM'; 
 	// 追加
    list.appendChild(newP);
</script>

• 创建 style，设置背景为蓝色，追加到 head 下

  • 获得头部的 head 标签：

    1. 需要先输入

       document.getElementsByTagName('head')
       

    2. 找到头部 head 标签的下标，输入下标才会得到头部的 head 标签

       document.getElementsByTagName('head')[0]
       

// 1.创建空 style 标签
var myStyle = document.createElement('style');
// 2.增加 style 标签的属性
myStyle.setAttribute('type','text/css');
// 3.对 style 标签的内容进行设置
myStyle.innerHTML = 'body{background-color: blue;}';
// 4.追加到 head 下
document.getElementsByTagName('head')[0].appendChild(myStyle)

8.5.3 insertBefore

• 将某个元素，插入到另一个元素前面
  • 包含被插入节点的节点.insertBefore(插入的节点，被插入的节点)

<div>
    <p id="js">JavaScript</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>
</div>

<script>
    var ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var contain = document.getElementsByTagName('div')[0];
    contain.insertBefore(ee,js)
</script>

9、操作表单（验证问题）

9.1 什么是表单 （form DOM 树）

• 文本框 text
• 密码框 password
• 下拉框 < select >
• 单选框 radio
• 多选框 checkbox
• 隐藏框 hidden
• 等等

表单的目的：提交信息

9.2 获得要提交的信息

• 获取要提交的信息
  • 文本框 value
  • 单选框（多选框） checked

<div>
    <form action="post">
        <span>用户名：</span><input type="text" id="username">
        <span>性别：</span>
        <input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="woman">女
    </form>
</div>

<script>
    // 文本框
    // 得到输入框的值  value
    document.getElementsByTagName('input')[0].value;
    // 改变输入框中的值
    document.getElementsByTagName('input')[0].value = 'asd';

    //单选框  checked
    // 单选框以及多选框，如果使用 value 只能获得他们的值，并不能查看他们是否被选中，所以使用 checked 来查看
    // 查看 男 是否被选中
    document.getElementsByTagName('input')[1].checked
    // 修改选中为 nv
    document.getElementsByTagName('input')[2].checked = 'true'
</script>

9.3 提交表单（md5优化密码，优化表单）

MD5：https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js

9.3.1 普通提交

• 缺点很明显，用户密码会被看的很清楚

<div>
    <!--
    表单绑定提交事件
    onclick 绑定一个提交检测函数
    -->
     <!--绑定事件 onclick-->
    <form action="#" method="post">
        <p>
            <span>用户名：</span>
            <input type="text" id="username" name="username">
        </p>
        <p>
            <span>密&nbsp;&nbsp;&nbsp;码：</span>
            <input type="password" id="u-password">
        </p>
        <p>
            <button type="submit">提交</button>
        </p>
    </form>
</div>

9.3.2 md5优化密码后提交

• MD5：https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js
• 优点：安全性提高
• 缺点：会有一瞬间密码框内有很多*，安全性降低

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<div>
    <!--
    表单绑定提交事件
    onclick 绑定一个提交检测函数
    -->
    <!--绑定事件 onclick-->
    <form action="#" method="post" onclick="inspect()">
        <p>
            <span>用户名：</span>
            <input type="text" id="username" name="username">
        </p>
        <p>
            <span>密&nbsp;&nbsp;&nbsp;码：</span>
            <input type="password" id="u-password">
        </p>
        <p>
            <button type="submit">提交</button>
        </p>
    </form>
</div>

<script>
    
    function inspect() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('u-password');
        // MD5 算法
        pwd.value = md5(pwd.value);
    }
    
</script>

9.3.3 md5优化密码、优化表单提交表单

• 优点：安全性提高

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<div>
    <!--
    表单绑定提交事件
    onclick 绑定一个提交检测函数
    函数返回 true false 结果
    将这个结果返回给表单
    onclick 接收
    οnclick="return 绑定一个提交检测函数"
    -->
    <form action="#" method="post" onclick="return inspect()">
        <p>
            <span>用户名：</span>
            <input type="text" id="username" name="username">
        </p>
        <p>
            <span>密&nbsp;&nbsp;&nbsp;码：</span>
            <input type="password" id="u-password">
        </p>
        <input type="hidden" id="md5-password" name="password">
        <p>
            <!--绑定事件 onclick-->
            <button type="submit">提交</button>
        </p>
    </form>
</div>

<script>
    function inspect() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('u-password');
        var md5Pwd = document.getElementById('md5-password');
        // MD5 算法
        md5Pwd.value = md5(pwd.value);
        // 可以校验判断表单内容，true 为通过提交，false 为阻止提交
        return true;
    }
</script>

10、jQuery

• JavaScript 和 jQuery 的关系
  • jQuery，是一个库
  • 也可以理解为一个工具类
  • 里面存在着大量的 JavaScript 函数

10.1 获取 jQuery

• 在线 cdn 引入

<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>

• 文件引入

<script src="lib/jquery-3.6.0.js"></script>

10.2 jQuery 公式

• 公式：

  $(selector).action()

  $(选择器).事件()

$('body').css('backgroundColor','red');

• 当网页元素加载完毕之后，再响应事件写法

$(function()
	$('body').css('backgroundColor','red'); 
);

10.3 选择器

• 原生的 js 选择器少，麻烦，不好记！

• jQuery 选择器，css 中的选择器都能使用

• 其他的可以从工具站中寻找

10.4 事件

• 鼠标事件
• 键盘事件
• 其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #box{
            text-align: center;
        }
        #mouse-move{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            text-align: center;
            line-height: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<div id="box">
    鼠标坐标：<span id="mouse"></span>
    <div id="mouse-move">
        这里移动试试？
    </div>
</div>

<script>
    $(function () {
        $('#mouse-move').mousemove(function (e) {
            $('#mouse').text('X:' + e.pageX + ' Y:' + e.pageY)
        })
    })

</script>

</body>
</html>

10.5 操作 DOM

• 获取值

$('selector').text();
$('selector').html();

• 设置值

$('selector').text('值');
$('selector').html('值');

• css 操作

$('selector').css("color","red");// 单个声明
$('selector').css({"color","red"});// 多个声明

• 元素的显示和隐藏
  • display

$('selector').show();//显示
$('selector').hide();//隐藏
$('selector').toggle();// 如果显示就隐藏，如果隐藏就显示