JavaScript学习记录1、什么是JavaScript 1、概述 JavaScript是一门世界上最流行的脚本语言

1、什么是JavaScript

1、概述

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

JavaScript 是一种高级、动态解释型的编程语言，主要用于为网页添加交互功能。它通常与 HTML 和 CSS 配合，是构成现代 Web 前端的三大核心技术之一。

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

2、历史

1995年，由 Netscape（网景）公司的程序员 Brendan Eich 在短短 10 天内设计完成。
尽管名字包含“Java”，但它与 Java 语言在设计和用途上差异巨大，两者并无直接关系。
它的标准化版本由 ECMA International 组织管理，因此其官方标准名称为 ECMAScript（常简称为 ES）。我们常说的 ES6（ES2015）等，就是该标准的重要版本。
如今，JavaScript 的应用早已超越浏览器，借助 Node.js 等运行时环境，它已成为全栈开发（前端、后端、移动端、桌面端等）中最重要的语言之一。

2 快速入门

2 基本语法`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<!--注意script标签必须成对出现
可以是内部，也可以是src外部导入-->
<script src="js/script.js">

</script>
</html>

3 数据类型

一、原始类型

原始类型是存储在栈内存中的不可变数据，共有 7 种：

number(数字)
- 用于整数和浮点数，还包括 Infinity、-Infinity和 NaN。
string(字符串)
- 用于表示文本，可以使用单引号、双引号或反引号（模板字符串）定义。
boolean(布尔)
- 只有两个值：true和 false。
undefined(未定义)
- 表示变量已声明但未赋值时的默认值。
null(空)
- 表示一个“空”或“不存在”的值。typeof null会返回 "object"，这是语言的一个历史遗留错误。
symbol(符号，ES6 新增)
- 表示唯一的标识符，常用于创建对象属性的唯一键。
bigint(大整数，ES2020 新增)
- 用于表示任意长度的整数，通过在数字末尾加 n创建（如 12345678901234567890n）。
数组

Java的数值必须是相同类型的对象~，JS中不需要这样！

//保证代码的可读性，尽量使用 []

var arr = [1,2,3,4,5,'hello',null,true];

new Array(1,12,3,4,4,5,'hello');

取数组下标：如果越界了，就会

undefined

对象

对象是大括号，数组是中括号~~
每个属性之间使用逗号隔开，最后一个不需要添加

//Person person = new Person(1,2,3,4,5);

var person = {

name: "qinjiang",

age: 3,

tags: ['js','java','web','...']

}

取对象的值

person.name

"qinjiang"

person.age

3

变量

默认用 const：当你声明的值不需要被重新赋值时。
其次用 let：当你声明的值需要被重新赋值时。
避免用 var：除非维护老旧代码，否则使用 let和 const能写出更安全、可预测的代码。
var是函数作用域且可重复声明，而 let是块级作用域且不可重复声明。

二、运算符

=：赋值运算符。
==：宽松相等比较，会进行类型转换。比如字符串"1"和数字1相等
===：严格相等比较，要求值和类型都相同。
!=：宽松不相等比较。
!==：严格不相等比较。
&&：逻辑与运算符，短路求值，返回操作数本身。
||：逻辑或运算符，短路求值，返回操作数本身。
!：逻辑非运算符，返回布尔值。

这是一个JS的缺陷，坚持不要使用 == 比较

须知：

NaN===NaN为false，这个与所有的数值都不相等，包括自己
只能通过 isNaN(NaN) 来判断这个数是否是 NaN

浮点数问题：

console.log((1/3) === (1-2/3))=>false

尽量避免使用浮点数进行运算，存在精度问题！可以如下判断

Math.abs(1/3-(1-2/3))<0.00000001=>true

4 严格检查模式

严格检查模式的意义是让 JavaScript 在更严格的语法规则下运行，提前发现并阻止不规范的代码和潜在错误，提高代码的安全性和性能优化空间。定义在第一行

<!--'use strict':
严格检查模式，-->

<script >
    'use strict'
     sc=50;
    if(sc<=10){
        alert('E')
    }else if(sc<60){
        alert('b')
    }
    else {
        alert('a')
    }
</script>

3 数据类型

3.1、字符串

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

注意转义字符 \

转义字符	说明
`'`	单引号
`\n`	换行
`\t`	制表符（Tab）
`\u4e2d`	Unicode字符（示例：中）
`\x41`	ASCII字符（示例：A）

多行字符串编写

//tab 上面 esc键下面
var msg = 
`hello
world
你好ya
你好`

（注：多行字符串通过反引号（`） 包裹实现，可直接换行书写，保留格式。）

模板字符串

//tab 上面 esc键下面
let name = "qinjiang";
let age = 3;

let msg = `你好呀，${name}`

字符串长度

str.length

字符串的可变性，不可变

大小写转换

//注意，这里是方法，不是属性了
student.toUpperCase()
student.toLowerCase()

`student.indexOf('t')`

`substring`

student.substring(1) // 从第一个字符串截取到最后一个字符串
student.substring(1, 3) // [1, 3)

3.2、数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6]; //通过下标取值和赋值
arr[0]
arr[0] = 1

长度

arr.length

注意：加入给 arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失，过大就会添加undefined元素

indexOf，通过元素获得下标索引

arr.indexOf(2)
1

注意：字符串的 "1"和数字 1是不同的。

slice() 截取Array的一部分，返回一个新数组，类似于String中的 substring，包头不包尾

arr.slice(1)

push(), pop() 尾部

push：压入到尾部,就是添加
pop：弹出尾部的一个元素，就是从尾部删除元素

unshift(), shift() 头部

unshift：压入到头部
shift：弹出头部的一个元素

排序 sort()

(3) ["B", "C", "A"]
arr.sort()
(3) ["A", "B", "C"]

元素反转 reverse()

(3) ["A", "B", "C"]
arr.reverse()
(3) ["C", "B", "A"]

concat()

(3) ["C", "B", "A"]
arr.concat([1,2,3])
(6) ["C", "B", "A", 1, 2, 3]
arr
(3) ["C", "B", "A"]

注意：concat()并没有修改数组，只是会返回一个新的数组

9、连接符 join

打印拼接数组，使用特定的字符串连接

(3) ["C", "B", "A"]
arr.join('-')
"C-B-A"

多维数组

arr = [[1,2],[3,4],["5","6"]];
arr[1][1]
4

3.3、对象

若干个键值对

JavaScript中所有的键都是字符串

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

//定义了一个person对象，它有四个属性！
var person = {
    name: "kuangshen",
    age: 3,
    email: "24736743@qq.com",
    score: 0
}

说明：Js中对象，{......}表示一个对象，键值对描述属性 xxxx: xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！

对象赋值

person.name = "qinjiang"
"qinjiang"
person.name
"qinjiang"

使用一个不存在的对象属性，

不会报错！只会提示undefined

person.haha
undefined

动态的删减属性

-通过 delete 删除对象的属性

delete person.name
true
person失去name属性

动态的添加

直接给新的属性添加值即可

person.haha = "haha"
"haha"
person

判断属性值是否在这个对象中

xxx in xxx!

'age' in person
true
//继承
'toString' in person
true

hasOwnProperty()

判断一个属性是否是这个对象自身拥有的

person.hasOwnProperty('toString')//这是继承的父类，不是自身拥有的
false

person.hasOwnProperty('age')
true

3.4、流程控制

if判断

var age = 3;
if (age > 3) { //第一个判断
    alert("haha");
} else if (age < 5) { //第二个判断
    alert("kuwa~");
} else { //否则,,
    alert("kuwa~");
}

while循环

避免程序死循环
有do...while语法

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

for循环

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

forEach 循环

var age = [12, 3, 12, 3, 12, 3, 12, 31, 23, 123];

//函数，里面需要实现一个函数
age.forEach(function (value) {
    console.log(value)
})

for...in

这个num in age的num不是age里的元素，而是下标索引

//for(var index in object){}
for (var num in age) {
        console.log("存在")
        console.log(age[num])
    }
}

3.5、Map 和 Set

Map:

//ES6  Map
//学生的成绩，学生的名字

var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom'); //通过key获得value
map.set('admin',123456);//添加与修改
map.delete('admin')//删除键值对

Set：无序不重复的集合

let set = new Set([1, 10, 20, 30, 40, 40, 40, 50]);
set.add(2); //添加
set.delete(1); //删除
console.log(set.has(3)); //是否包含某个元素 类似java的contain

3.6 iteratory与 for of

    let age = new Map([["10",40],["10",20],["30",40],["40",40]]);
    let iter = age[Symbol.iterator]();
    let result = iter.next();

    while(!result.done){
        console.log(result.value);  // 打印当前值
        result = iter.next();       // 获取下一个
    }

    for (let ageElement of age) {
        console.log(ageElement);
    }

4、函数

4.1、定义函数

定义方式一

绝对值函数

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 可以传任意个参数，也可以不传递参数~

参数进来是否存在的问题？

假设不存在参数，如何规避？

var abs = function(x){
    //手动抛出异常来判断
    if (typeof x !== 'number') {
        throw 'Not a Number';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

arguments

arguments是一个 JS 免费赠送的关键字；

代表：传递进来的所有的参数，是一个数组！对于只有一个参数的函数，如果传多个参数，只有第一个参数被使用，并且所有参数被存放在argument数组

var abs = function(x){
    console.log("x=>"+x);
    for (var i = 0; i<arguments.length; i++){
        console.log(arguments[i]);
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

rest

以前：

如果我们想利用除了规定参数以外传入的多余参数，需要在遍历argument数组时排除掉

if (arguments.length>2){
    for (var i = 2; i<arguments.length; i++){
        //。。。。
    }
}

ES6 引入的新特性，获取除了已经定义的参数之外的所有参数~ ....rest数组自动收集规定参数以外的参数

function aaa(a,b,...rest) {
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

4.2、变量的作用域

在 JavaScript 中，var定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用~ （非要想实现的话，后面可以研究一下闭包）

function qj() {
    var x = 1;
    x = x + 1;
}

x = x + 2; // Uncaught ReferenceError: x is not defined

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

function qj() {
    var x = 1;
    x = x + 1;
}

function qj2() {
    var x = 'A';
    x = x + 1;
}

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

function qj() {
    var x = 1;
    // 内部函数可以访问外部函数的成员，反之则不行
    function qj2() {
        var y = x + 1; // 2
    }
    var z = y + 1; // Uncaught ReferenceError: y is not defined
}

假设，内部函数变量和外部函数的变量重名

function qj() {
    var x = 1;

    function qj2() {
        var x = 'A';
        console.log('inner' + x); //innerA
    }
    console.log('outer' + x); //  outer1
    qj2()
}

qj()

假设在 JavaScript 中函数查找变量从自身函数开始，由 “内” 向 “外” 查找，同名变量就近的覆盖远的

提升变量的作用域

function qj() {
    var x = "x" + y;
    console.log(x);
    var y = 'y';
}

结果：xundefined

说明：js 执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

function qj2() {
    var y;

    var x = "x" + y;
    console.log(x);
    y = 'y';
}

说明：这个是在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部

function qj2() {
    var x = 1,
        y = x + 1,
        z,i,a; //undefined

    // 之后随意用
}

所提的规范（变量放函数头部）是 ES5 时代的良好实践，用以规避提升的陷阱。
在 现代 JavaScript (ES6+) 中，最佳实践是使用 let和 const替代 var，并采用块级作用域的自然书写方式，这从根本上解决了变量提升带来的问题。

全局对象 window

1 var x = 'xxx';
2 alert(x);
3 alert(window.x); // 默认所有的全局变量，都会自动绑定在 window对象下;

alert() 这个函数本身也是一个 window 变量;

1     var x = 'xxx';
2
3     window.alert(x);
4
5     var old_alert = window.alert;
6
7     old_alert(x);
8
9     window.alert = function () {
10
11    };
12    // 发现 alert() 失效了
13    window.alert(123);
14
15    //恢复
16    window.alert =  old_alert;
17    window.alert(456);

由于我们所有的全局变量都会绑定到我们的 window 上。如果不同的js 文件，使用了相同的全局变量，如何能够减少冲突？

// 唯一全局变量

var KuangApp = {};

// 定义全局变量

KuangApp.name = 'kuangshen';

KuangApp.add = function (a,b) {

return a + b;

}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

局部作用域 let

function aaa() {
    for (var i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1); //问题？ i 出了这个作用域还可以使用
}

ES6 let 关键字，解决局部作用域冲突问题！

function aaa() {
    for (let i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1); //Uncaught ReferenceError: i is not defined
}

建议大家都用 let去定义局部作用域的变量；

常量 const

在ES6 之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值

var PI = '3.14';

console.log(PI);
PI = '213'; //可以改变这个值
console.log(PI);

在ES6 引入了常量关键字 const

const PI = '3.14'; // 只读变量
console.log(PI);
PI = '123';

4.3、方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var kuangshen = {
    name: '秦疆',
    bitrh: 2000,
    // 方法
    age: function () {
        // 今年 - 出生的年
        var now = new Date().getFullYear();
        return now-this.bitrh;
    }
}
//属性
kuangshen.name
//方法,一定要带 ()
kuangshen.age()

this.代表什么？拆开上面的代码看看~

function getAge() {
    // 今年 - 出生的年
    var now = new Date().getFullYear();
    return now-this.bitrh;
}

var kuangshen = {
    name: '秦疆',
    bitrh: 2000,
    age: getAge
}

// kuangshen.age() ok，因为这个时候有合适的调用对象
// getAge() 结果是NaN，因为这个时候是window调用的，全局没有Brith这个属性

this默认指向调用它的那个对象

apply

在js 中可以控制 this 指向！

getAge.apply(kuangshen,[]);// this, 指向了 kuangshen, 参数为空
所有的function都有apply方法，能指定属性和参数

function getAge() {
    // 今年 - 出生的年
    var now = new Date().getFullYear();
    return now-this.bitrh;
}

var kuangshen = {
    name: '秦疆',
    bitrh: 2000,
    age: getAge
};

// kuangshen.age() ok
getAge.apply(kuangshen,[]);// this, 指向了 kuangshen, 参数为空

5、内部对象

标椎对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1、Date

基本使用

var now = new Date(); //Sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)
now.getFullYear(); //年
now.getMonth(); // 月  0~11  代表月
now.getDate(); // 日
now.getDay(); // 星期几
now.getHours(); // 时
now.getMinutes(); // 分
now.getSeconds(); // 秒

now.getTime(); // 时间戳 全世界统一 1970 1.1 0:00:00 毫秒数

console.log(new Date(1578106175991)) //时间戳转为时间

转换

now = new Date(1578106175991)
Sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)
now.toLocaleString()
"2020/1/4 上午10:49:35"
now.toGMTString()
"Sat, 04 Jan 2020 02:49:35 GMT"

5.2、JSON

json 是什么

早期，所有数据传输习惯使用 XML 文件！

JSON(JavaScript Object Notation, JS 对象简谱)是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

格式：

对象都用 {}
数组都用 []
所有的键值对都是用 key:value

JSON字符串和JS对象的转化

var user = {
    name: "qinjiang",
    age: 3,
    sex: '男'
}

//对象转化为json字符串 {"name":"qinjiang","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);

//json 字符串转化为对象 参数为 json 字符串
var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');

很多人搞不清楚，JSON 和 JS 对象的区别

var obj = {a: 'hello', b: 'hellob'};
var json = '{"a": "hello", "b": "hellob"}'

6、面向对象编程

6.1、什么是面向对象

javascript、Java、c#。。。。面向对象；javascript有些区别！

类：模板
对象：具体的实例

在JavaScript这个需要大家换一下思维方式！

原型proto：

原型相当于极其随意的父类，对象指定另一个类为原型自动得到原型的所有属性方法
在代码执行中可以随时更换原型，上一秒他是学生在跑，下一秒变为鸟在飞，极其随意

var Student = {
    name: "qinjiang",
    age: 3,
    run: function () {
        console.log(this.name + " run....");
    }
};

var xiaoming = {
    name: "xiaoming"
};

//原型对象
xiaoming.__proto__ = Student;

var Bird = {
    fly: function () {
        console.log(this.name + " fly....");
    }
};

// 小明的原型 是 Student
xiaoming.__proto__ = Bird;

class 继承

class关键字，是在ES6引入的

1、定义一个类，属性，方法

构造函数关键字为constructor

// 定义一个学生的类
class student{
    constructor(name){
        this.name = name;
        //为什么没有声明就赋值？因为不同于JAVA，JavaScript会自动赋值时就创建变量
    }

    hello(){
        alert('hello')
    }
}

var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");

2、继承

class XiaoStudent extends Student{
    constructor(name,grade){
        super(name);//子类必须实现父类的方法
        this.grade = grade;
    }

    myGrade(){
        alert('我是一名小学生')
    }
}

var xiaohong = new XiaoStudent("xiaohong",1);

本质还是原型对象

原型链

任何类都继承自原型的object类
原型object又指向object的构造，
最后一个套一个，在object里无限循环

7、操作BOM对象（重点）

浏览器介绍

JavaScript 和浏览器关系？

JavaScript 诞生就是为了能够让他在浏览器中运行！

BOM : 浏览器对象模型

IE 6~11
Chrome
Safari
FireFox
Opera

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
258
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919
// 大家可以调整浏览器窗口试试...

Navigator

Navigator,封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"
navigator.platform
"Win32"

大多数时候，我们不会使用 navigator对象，因为会被人为修改！

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width
1920 px
screen.height
1080 px

location（重要）

location代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:f reload() // 刷新网页
// 设置新的地址
location.assign('https://bing.com/')

document

document代表当前的页面， HTML DOM文档树

document.title
"百度一下，你就知道"
document.title='狂神说'
"狂神说"

获取具体的文档树节点

<dl id="app">
  <dt>Java</dt>
  <dd>JavaSE</dd>
  <dd>JavaEE</dd>
</dl>

<script>
  var dl = document.getElementById('app');
</script>

获取 cookie

document.cookie
"__guid=111872281.88375976493059340.1578110638877.133; monitor_count=1"

劫持 cookie 原理

www.taobao.com

<script src="aa.js"></script>
<!--恶意人员：获取你的cookie上传到他的服务器 -->

服务器端可以设置 cookie：httpOnly

history

history代表浏览器的历史记录

history.back() //后退到上一页
history.forward() //前进到下一页

8、操作DOM对象（重点）

核心

浏览器网页就是一个Dom 树形结构！

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

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

获得dom节点

//对应 css 选择器
var h1 = document.getElementsByTagName('h1');//这个操作得到的是一个标签集合，要想准确操作需要加[0]
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');

var childrens = father.children; //获取父节点下的所有子节点
// father.firstChild
// father.lastChild

更新节点

<div id="id1">

</div>

<script>
    var id1 = document.getElementById('id1');
</script>

操作文本

id1.innerText='456'修改文本的值
id1.innerHTML='<strong>123</strong>'可以解析HTML文本标签

操作CSS

id1.style.color = 'yellow';
id1.style.fontSize='20px';
id1.style.padding = '2em'

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1
    <p class="p2">p2
</div>
<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(self)
</script>

// 删除是一个动态的过程：
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])

注意：删除多个节点的时候，children中的的数据下标时刻在变化，删除节点的时候一定要注意

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是如果这个DOM 节点已经存在元素了，我们就不能这么干了！会产生覆盖，直接覆盖掉原有的所有元素

追加（实际是移动）

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

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

结果直接把p标签js移动到了list中

创建一个新标签

let father = document.getElementsByTagName("div")[0];
let newTest = document.createElement('strong');
newTest.innerText='new Test'
newTest.id='newTest'

//创建一个script
let myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
document.body.appendChild(myScript);
//改body属性
//setAttribute不推荐用来改style - 会覆盖已有的内联样式
let body = document.getElementsByTagName('body')[0];
body.setAttribute('style','background:red')

9、操作表单（验证）

表单是什么

form DOM树的一部分

表单的目的：提交信息

如何获取表单数据

<form action="post">
  
    <span>用户名：</span> <input type="text" id="username">
 
  <!-- 多选框的值，就是定义好的value -->
  
    <span>性别：</span>
    <input type="radio" name="sex" value="man" id="boy"> 男
    <input type="radio" name="sex" value="women" id="girl"> 女
</form>
<script>
  var input_text = document.getElementById('username');
  var boy_radio = document.getElementById('boy');
  var girl_radio = document.getElementById('girl');
  
  // 得到输入框的值
  input_text.value
  // 修改输入框的值
  input_text.value = '123'
  // 对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
  boy_radio.checked; // 查看返回的结果，是否为true，如果为true，则被选中~
  girl_radio.checked = true; // 赋值
</script>

提交表单数据加密密码逻辑

MD5加密算法：
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<body>
<!--//onSubmit="return ?"-->
<!--onSubmit是表单的提交事件处理器，当表单提交时触发。-->
<!--它必须return一个布尔值，true则提交，否则拦截&ndash;&gt;-->
<form method="post" action="https://www.baidu.com" onSubmit="return(aaa())">
  <p>
    <label for="username">用户名：</label><input type="text" id="username" name="username">
  </p>
  <p>
    <label for="password">密码：</label><input type="password" id="password" name="password">
  </p>
    <input type="password" id="pwd" name="pwd" hidden="">
<!--    隐藏一个真正的密码表单数据-->
  <button type="submit" >提交</button>
<!--    //可以用onclick调用函数-->
</form>
<!--//加密算法-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</body>
<script>
function aaa() {
    let username = document.getElementById('username');
    let password = document.getElementById('password');
    let pwd = document.getElementById('pwd');
    pwd.value = md5(password.value);
    // 把表面上的密码加密后给真的密码pwd
    password.disabled = true;//作废输入密码，不然别人抓包直接看到你的用户输入的密码是什么
    console.log(username.value, pwd.value);

}
</script>

jQuery库

jQuery库，里面存在大量的Javascript函数

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
<body>

</body>
</html>

也可以通过官网下载js文件后直接复制到lib目录，再用script src导入

使用：$(选择器).事件

选择器

参考文档：www.apiref.com/jquery-zh/i…

操作DOM

节点文本操作

$('#test-ul li[name=python]').text(); //获得值
$('#test-ul li[name=python]').text('设置值'); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html('<strong>123</strong>'); //设置值

css的操作

$('#test-ul li[name=python]').css({"color","red"})

元素的显示和隐藏：本质 display ： none ；

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

JavaScript学习记录

1、什么是JavaScript

1、概述

2、历史

2 快速入门

2 基本语法`

3 数据类型

一、原始类型

对象

变量

二、运算符

4 严格检查模式

3 数据类型

3.1、字符串

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

注意转义字符 \

多行字符串编写

模板字符串

字符串长度

字符串的可变性，不可变

大小写转换

student.indexOf('t')

substring

3.2、数组

长度

indexOf，通过元素获得下标索引

slice() 截取Array的一部分，返回一个新数组，类似于String中的 substring，包头不包尾

push(), pop() 尾部

unshift(), shift() 头部

排序 sort()

元素反转 reverse()

concat()

多维数组

3.3、对象

对象赋值

使用一个不存在的对象属性，

动态的删减属性

动态的添加

判断属性值是否在这个对象中

hasOwnProperty()

3.4、流程控制

if判断

while循环

for循环

forEach 循环

for...in

3.5、Map 和 Set

Map:

Set：无序不重复的集合

3.6 iteratory与 for of

4、函数

4.1、定义函数

调用函数

arguments

rest

4.2、变量的作用域

提升变量的作用域

全局对象 window

局部作用域 let

常量 const

4.3、方法

定义方法

apply

5、内部对象

标椎对象

5.1、Date

基本使用

5.2、JSON

json 是什么

JSON字符串和JS对象的转化

6、面向对象编程

6.1、什么是面向对象

原型__proto__：

class 继承

原型链

7、操作BOM对象（重点）

浏览器介绍

window

Navigator

screen

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

`student.indexOf('t')`

`substring`

原型proto：

提交表单数据加密密码逻辑