2021-08-05 JavaScript

JavaScript

结构层（Html）——表现层（CSS）——行为层（JavaScript）

【CSS预处理器】

用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件。

常见的CSS预处理器：SASS LESS

• SASS：基于Ruby，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS
• LESS：基于NodeJS，通过客户端处理，使用简单。功能比 SASS简单，解析效率也低于SASS，但在实际开发中基本满足需求

1、什么是JavaScript

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

• JavaScript是一门世界上最流行的脚本语言
• 一个合格的后端人员，必须精通JavaScript

2、快速入门

2.1 引入JavaScript

内部标签

<script>
	//...
<script>

外部引入

一个js文件: abc.js

<script scr="abc.js"></script>

<!--script标签内，写JavaScript代码-->
<!--<script>-->
<!--alert('hello,world');-->
<!--</script>-->

<!--外部引入，标签必须成对出现-->
 <script src="js/cyf.js"></script>

<!--不用显式的定义type，默认就是JavaScript-->
<script type="text/javascript"></script>

2.2 基本语法入门

弹窗：alert(score);

浏览器控制台中打印：console.log(score);

<!--JavaScript严格区分大小写-->
<script>
    //1、定义变量   变量类型 变量名 = 变量值；
    var score = 92;
    var name = "aba";
    //2、条件控制
    if(score>60 && score<70){
        alert("良");//写不写""都可以？
    }else if(score>80 && score<=100){
        alert("优");
    }else{
        alert("abc");
    }
</script>

2.3 数据类型

变量

var a = 1;
var 王者荣耀 = 青铜;

number

#JavaScript不区分整数和小数
123//整数
123.1//浮点数
1.23e3//科学计数法
-99//负数
NaN//not a number
Infinity//无限大

字符串

‘abc’ “abc”

布尔值

true false

逻辑运算

&&
||
!

比较运算符

=   赋值==   等于（类型不一样，值一样，也判断为true）===   绝对等于（类型一样，值一样，才判断为true）

NaN===NaN，false

isNaN(NaN)，true

浮点数问题

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

由于存在精度损失，尽量避免使用浮点数进行运算

console.log(Math.abs((1/3)-(1-2/3))<0.00000001) true

none 和 unfined

• none 空
• undefinde 未定义

数组

#不要求类型一致，中括号包裹var arr = [1,2,3,4,5,"abc",null,true]new Array(1,2,3,4,5,"abc",null,true);console.log(arr[8])   显示undefined

对象

#大括号包裹，每个属性用逗号隔开，最后一个不需要添加var person = {	name: "qinjiang",	age: 3,	tags: ['jc','java','web']}person.name

2.4 严格检查

// IDEA设置支持ES6语法'use strict';// 局部变量使用let定义let i = 1;

【注意】use strict必须写在第一行，其他位置可能报红但运行时并不提示undefined

3、数据类型

3.1 字符串

• 普通字符串可以用单引号或双引号包裹

• 转义字符

  \'\n\t\u4e2d   unicode字符\x41     Ascll字符
  

• 多行字符串编写

  var msg = `jqwpijhpehjtjhfdoi`
  

• 模板字符串

  let name = "qinjiang";let age = 18;let msg = `你好，我是${name}，今年${age}岁 `；
  

  字符串拼接得到极大改善

• 字符串长度

  str.length;
  

• 字符串长度不可变

  >console.log(student[0]);<s>student[0] = 1;>console.log(student);<student
  

• 大小写转换

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

• 按照字符打印下表

  >console.log(student.indexOf('t'));<2
  

• 截取字符串

  >consolo.log(student.substring(1));<student// 左闭右开区间>console.log(student.substring(1,3));<tu
  

3.2 数组

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

• 长度

  arr.length
  

  【注意】

  假如给数组长度赋值，数组的长度会改变，赋值大于长度会扩容，多余位置是空，赋值小于长度会丢失元素

• indexOf

  arr = [1,2,3,4,5,"1","2","3"]>arr.indexOf(2)<1>arr.indexOf("2")<6
  

• slice() 类似String中的substring

  >arr.slice(3)<[4,5,"1","2","3"]#同样是左闭右开区间>arr.slice(1,5)<[2,3,4,5]
  

• push() pop()

  push()   在数组尾部添加元素pop()   从数组尾部取出元素
  

• unshift() shift()

  unshift()   在数组头部添加元素shift()   从数组头部取出元素
  

• sort() 排序

• reverse() 倒序排列

• concat() 拼接

  ["1","2","3"]arr.concat(["a","b","c"])["1","2","3","a","b","c"]arr["1","2","3"]
  

  【注意】返回新数组，但没有改变原来的数组

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

  arr=[1,2,3]arr.join("-")[1-2-3]
  

• 多维数组

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

3.3 对象

对象：{ }包裹的若干个键值对，以逗号隔开，最后一个键值对后面不加。

JavaScript中所有的属性的键都是字符串，值可以是任意类型。

var person{    属性名：属性值,    属性名：属性值,    属性名：属性值}var person = {            name: 'cyf',            age: 25,            email: '1615669687@qq.com'        }

#给对象的属性赋值person.name='abc'#使用一个不存在的属性，不会报错，提示undefined#动态的删减属性delete person.nametrue#动态的添加属性person.haha='hha'#判断属性是否属于某个对象'age' in persontrue#判断属性是否是这个对象自身拥有的person.hasOwnProperty('toString')false

3.4 流程控制

if 判断 while循环 for循环

foreach循环

var age=[32,24,12,35,76]age.foreach(function (value){    console.log(value)})

for…in循环（循环的是对象的属性，展示属性的值）

var person = {fname:"John", lname:"Doe", age:25};  var text = "";var x;for (x in person) {    text += person[x] + " ";}

3.5 Map 和 Set

ES6新特性

Map Set 中的元素必须用中括号包裹

Map

var map = new Map([['tom',100],['jack',90],['haha',80]]);        var name = map.get('tom');//通过键获取值		map.set('abc',60);//修改或添加键值对		map.delete('tom');        console.log(name);

Set：无序不重复

var set = new Set([3,1,1,1,1,12,2,2,10]);        set.add(4);        set.delete(1);		set.has(12);//判断是否包含某个元素

3.6 iterator

遍历数组

#for ofvar arr = [3,4,5];for(var x of arr){    console.log(x)}#for in   遍历下标，只能对数组使用var arr = [3,4,5]        arr.name = '123';        for (let x in arr){            console.log(x)        }#存在问题当作键值对添加了元素，但for in循环时，输出下标时把name也当作下标输出了

遍历Map

var map = new Map([['tom',100],['jack',90],['abc',80]]);for (let x of map){    console.log(x)}

遍历Set

let set = new Set([5, 6, 7]);for (let y of set){    console.log(y)}

4、函数

4.1 定义函数

定义方式一

绝对值函数

function abs(x){    if(x>=0){       return x;       }else{        return -x;    }}

【JavaScript 的错误提示很少】

• 一旦执行到 return 就代表函数结束，返回结果

• 如果没有执行到 return，函数执行完也会返回结果，结果就是 undefined

定义方式二

var abs = function(x){    if(typeof x!== 'number'){       throw 'not a number';       }    if(x>=0){       return x;       }else{        return -x;    }}#function(x){X....} 这是一个匿名函数。但是可以把结果赋值给abs，通过abs就可以调用函数

4.2 调用函数

abs(10);   //10abs(10,12,21,42);   //10abs();   //NaN

【参数问题】

JavaScript可以传入多个参数，也可以不传入参数

【思考】

参数传进来是否存在？

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

arguments：代表传入的所有参数，是一个数组

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;    }}

【思考】

arguments 包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数，但调用者并不知道定义函数时给的参数个数（已有参数的个数）

rest：rest 只能写在最后面，用 … 标识

• 在ES6以前，只能使用 if 和 arguments 判断和使用传入的多余参数
• 引入rest相当于自动把多余参数作为一个数组返回

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HLuWSgcf-1628167659385)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210804163556339.png)]

4.3 变量的作用域

• 在JavaScript中，var 定义变量实际是有作用域的
• 假设在函数体中声明一个变量，这个变量在函数体外不可以使用~（非要实现的话，研究闭包）
• 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function qi(){    var x = 1;    x = x + 1;}x = x + 2;//Uncaught ReferenceErroe: x is not definedfunction abc(){    var x = "a";    x = x + 2;}

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

function a(){    var x = 1;   function ab(){       var y = x + 1;   }    var z = y + 1；}

如果外部函数和内部函数变量重名

在JavaScript中函数查找变量从自身函数开始~，由"内”向“外”查找.假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

function a(){    var x = 1;   function ab(){       var x = 'A';       console.log('inner: '+x);   }    ab();    console.log('outer: '+x);}a();

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

【结果】xundefined

【说明】js执行引擎，自动提升了 y 的声明，但是不会提升 y 的赋值！

【注意】所有变量的定义都放在函数的头部，便于代码维护；先定义，需要使用的时候再赋值是OK的

全局变量

x = 1;function f(){    console.log(x);}f();console.log(x);

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

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

var x = 'xxx';alert(x);window.alert(x);alert(window.x);

Javascript 实际上只有一个全局作用域window，任何变量（或函数），如果没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错 RefrenceError

规范

由于所有的全局变量都绑定在 window，如果不同的 js 文件使用了相同的全局变量，会产生冲突！===>如何解决？

创建一个自己的全局变量作用域/全局对象，所有变量绑定在这个作用域，相当于window.KuangAPP（细分）

//定义全局变量作用域/全局对象var KuangAPP = {};//定义全局变量KuangAPP.name = 'kuangshen';KuangAPP.age = 25;

局部作用域 let

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

function aaa(){    for(let i = 0; i < 100; i++){        console.log(i);    }    console.log(i+1);//不会打印101}

常量 const

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

#虽然约定大写是常量，但是实际上不知情的人还是可以对其及进行修改var PI = '3.14';console.log(PI);PI = '213';console.log(PI);

在ES6中，引入了常量关键字 const

const PI = '3.14';console.log(PI);PI = '2.14';//只读变量，报错

4.4 方法

方法就是把函数放在对象中，对象中只有两个东西：属性、方法

var kuangshen = {    name: '秦疆',    birth: 2020,    age: function (){        //今年-出生的年份        var now = new Date().getFullYear();        return now-this.birth;    }}#属性kuangshen.name;#方法kuangshen.age();

# this 代表什么？谁调用就指向谁，拆开看看function getAge(){        //今年-出生的年份        var now = new Date().getFullYear();        return now-this.birth;    }var kuangshen = {    name: '秦疆',    birth: 2020,    age: getAge}#拆开写的话，对象中不写括号，实际调用时需要加上括号age: getAgekuangshen.age()#错误示范age：getAge()kuangshen.agegetAge()//如果不指明谁调用，默认是window，没有birth属性会显示NaN

apply

参数就是一个数组对象，可能没有、可能一个、可能多个

在js中，可以控制 this 的指向

#this 指向了kuangshen，参数为空getAge.apply(kuangshen,[]);

5、内部对象

标准对象

typeOf，用于判断类型

对象中的方法，书写时容易遗漏逗号、分号

typeOf NaN"number"typeOf []"object"typeOf {}"object"typeOf Math.abs"function"typeOf undefined"undefined"

5.1 Date

var now = new Date();//目前时间        now.getFullYear();//年        now.getMonth();//月 0~11        now.getDate();//日        now.getDay();//星期        now.getHours();//时        now.getMinutes();//分        now.getSeconds();//秒        now.getTime();//时间戳        console.log(new Date(now.getTime()));//时间戳转为时间		now.toLocaleString()//转为本地时间		"2021/8/4 下午7:59:38"		now.toGMTString()		"Wed, 04 Aug 2021 11:59:38 GMT"

5.2 JSON对象

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

【格式】

• 对象都用大括号
• 数组都用中括号
• 所有的键值对都用 key : value

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

#转化为JSON字符串var jsonuser = JSON.stringify(user);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qq3Vs90B-1628167659388)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210804201405317.png)]

#JSON字符串转化为对象(传入的参数必须是JSON字符串)var obj = JSON.parse('{"name":"qinjiang","age":25,"sex":"男"}');

JSON字符串，内部双引号，外部单引号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sig8QYtv-1628167659390)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210804201803918.png)]

5.3 Ajax

• 原生的js写法xhr 异步请求
• jQuey封装好的方法$("#name").ajax("")
• axios请求

6、面向对象

什么是面向对象

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

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

__proto__

6.1 在 JavaScript 中，原型：

var student = {           name: 'qinjiang',           age: 3,           run: function (){               console.log(this.name + " run...");           }       };       var xiaoming = {           name: 'xiaoming'       };       var bird = {           fly: function () {               console.log(this.name + " fly...");           }       };		#xiaoming的原型 指向 bird       xiaoming.__proto__ = bird;

6.2 class 继承（ES6引入）

定义一个类、属性、方法

# ES6以前function student(name){           this.name = name;       } //给student 新增一个方法student.prototype.hello = function(){	alert('hello');}# ES6开始class student{	constructor(name){		this.name = name;	}	 hello(){		alert('hello');	}}#生成对象--->调用方法var xiaoming = new student(xiaoming);xiaoming.hello()

继承

class pupil extends student{           constructor(name,grade){               super(name);               this.grade = grade;           }           dowork(){               alert('我要做作业');           }       }var xiaohong = new pupil(xiaohong);

【本质】查看原型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FpIXyJ55-1628167659393)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210804210217047.png)]

原型链：https://www.cnblogs.com/loveyaxin/p/11151586.html

7、操作BOM对象（重点）

浏览器介绍

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

BOM：浏览器对象模型

浏览器内核

• IE
• Chrome
• Safari
• FireFox
• Opera

window 表示浏览器窗口

window.alert(1615)undefinedwindow.innerHeight266window.innerWidth502window.outerHeight832window.outerWidth564

Navigator

navigator.appName"Netscape"navigator.appCodeName"Mozilla"navigator.appVersion"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36"navigator.bluetoothBluetooth {}navigator.userAgent"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36"navigator.platform"Win32"

Screen

screen.height864screen.width1536

location（重要）：代表当前页面的URL信息

host: "www.baidu.com"href: "https://www.baidu.com/"protocol: "https:"reload: ƒ reload()   //重新加载 刷新#设置新的地址location.assign('https://blog.kuangstudy.com/')

document ：代表当前页面

document.title;document.title = '***';

获取具体的文档树节点

<dl id="app">    <dt>java</dt>    <dt>javaSE</dt>    <dt>javaEE</dt></dl><script>    var dl1 = document.getElementById('app');</script>#类似的方法getElementByClassName()getElementByTagNameNS()getElementByName()getElementByTagName()

获取 cookie

document.cookie

劫持cookie 的原理

<script>scr="aa.js"</script>#获取cookie上传到其他服务器比如，登录淘宝，天猫也会自动登录，就是获取了cookie#服务器端可以设置cookie：httpOnly

history：代表浏览器的历史记录

history.back()   后退hiatory.forward()   前进

8、操作DOM（重点）

DOM：文档操作模型

浏览器网页就是一个DOM 树形结构，要操作一个一个DOM 节点，首先要获得这个DOM 节点

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

获得DOM 节点

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div id="father">    <h1>标题一</h1>    <p id="p1">p1</p>    <p class="p2">p2</p></div><script>    #通过标签    var h1 = document.getElementsByTagName('h1');    #通过ID    var p1 = document.getElementById('p1');    #通过类名    var p2 = document.getElementsByClassName('p2');    var father = document.getElementById('father');    //获取父节点下的所有子节点    var chdren = father.children;    //为什么返回的是 #text ？    father.firstChild;    father.lastChild;</script></body></html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9qVMDid-1628167659395)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210805184136699.png)]

更新节点

<div id="id1"></div><script>    var id1 = document.getElementById('id1');    id1.innerText='失败是成功之母';</script>#操作文本 修改文本的值id1.innerText='123'#解析HTML文本标签id1.innerHTML='<strong>1615</strong>'#操作CSSid1.style.color='red'id1.style.fontSize='50px'

【注意】

• 等号后面都是字符串
• 驼峰命名
• 一个不好的地方，写错了只是没有效果但不提示错误
• 在浏览器中不能直接使用document.getElementById(‘id1’).innerText(‘123’)，先定义document.getElementById(‘id1’)再操作

删除节点

先获取父节点，从父节点中指定位置删除

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div id="father">    <h1>标题一</h1>    <p id="p1">p1</p>    <p class="p2">p2</p></div><script>    var h1 = document.getElementsByTagName('h1');    var self = document.getElementById('p1');    var father = p1.parentElement;    // var father = document.getElementById('father');        father.removeChild(p1);</script></body></html>=========删除是一个动态的过程，删除索引为0的元素就不再有索引为2的元素===========father.removeChildren(father.children[0]);father.removeChildren(father.children[1]);father.removeChildren(father.children[2);

插入节点

使用 inner 会直接覆盖，我们需要的是【更新】、【追加】

<p id="js">javascript</p><div id="list">    <p id="se">javaSE</p>    <p id="ee">javaEE</p>    <p id="me">javaME</p></div><script>    var js = document.getElementById('js');    var list = document.getElementById('list');        //移动已有标签    list.appendChild(js);    //创建新节点、插入    var newP = document.createElement('p');    newP.id = 'newP';    newP.innerText = 'hello,kuang';    list.appendChild(newP);        //创建特殊的标签节点，比如style、script    var myScript = document.createElement('script');    myScript.setAttribute('type','text/javascript');    list.appendChild(myScript);        //1、创建一个style标签    var myStyle = document.createElement('style');    //2、设置文本类型    myStyle.setAttribute('type','text/css');    //3、添加文本内容    myStyle.innerHTML = 'body{background-color: blue;}';	//4、把style标签放入到head标签中，’head‘位于head标签索引为0的位置    document.getElementsByTagName('head')[0].appendChild(myStyle);</script>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iTll6V2r-1628167659396)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210805104924903.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vvm3YqAu-1628167659397)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210805110038037.png)]

创建成功了，还要把它放在正确的位置

关键点：索引为0的才是head

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vf463FJ8-1628167659398)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210805111454546.png)]

insert 插入

var ee = document.getElementById('ee');    var js = document.getElementById('js');    var list = document.getElementById('list');	list.insertBefore(js,ee);==============================================    #公式说明：insertBefore(newNode,refNode)    list 在哪个大范围内操作，插入位置的父节点    js 要插入的标签    ee 插入的位置

replace 替换

list.replaceChild(js,ee);

removeChild 移除下属标签

list.removeChild(ee);

9、操作表单（验证）

表单是什么 form DOM树

• 文本框
• 下拉框
• 单选框
• 多选框
• 隐藏域
• 密码框
• ……

表单的目的：提交信息

获得表单（要提交的信息）

<form action="post">    <p>        <span>用户名：</span>        <input type="text" id="username">    </p>    <p>        <span>性别：</span>        <input type="radio" name="sex" value="man" id="boy"> 男        <input type="radio" name="sex" value="woman" id="girl"> 女    </p></form><script>    var input_text = document.getElementById('username');    var boy_radio = document.getElementById('boy');    var girl_radio = document.getElementById('girl');</script>===========================================================对于单选框和多选框等固定的值，.value只能取到当前的值；可以通过.checked判断是否被选中，选中为true，未选中为false；可以通过赋值true使其选中，当然实际使用中，肯定有一个判断过程再给赋值girl_radio.value 返回对应的valuegirl_radio.checked 返回布尔值true或falsegirl_radio.checked = true 赋值使其被选中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2D7Ldhuk-1628167659398)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210805142328396.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RCM9Dud5-1628167659399)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210805143112549.png)]

提交表单（重点） 密码加密 表单优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类   【是好是坏？无法加载源映射，在线链接不行，下载本地也不行】【或许可以尝试别的加密工具】-->
    <!--<script src="lib/md5.js"></script>-->
</head>
<body>

<!--抓取不到是因为post 写成了poat 吗？经验证，不是
【表单绑定事件】
1、aaa()函数的结果返回给 onsubmit 没有用，要返回给 form
2、所以 submit 用于接收返回的信息 true/false，所以加了 return
3、手动设置：return true 表示总是通过，return false 表示总是拒绝
-->
<form action="#" method="post" onsubmit="return aaa()">

    <!--【问题】无法抓取，【原因】没有 name 属性-->
    <p>
        <span>用户名：</span><input type="text" id="username" required name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="input-password" required>
    </p>

    <!--上面用户输入的密码 input-password，由于没有 name 属性，现在已经无法抓取到
    有一个输入密码提交一瞬间看到密码变长的现象，通过新建一个隐藏的文本框来解决
    -->
    <input type="hidden" id="md5-password" name="password">

    <!--【按钮绑定事件】提交按钮和打印表单信息关联
    【普通按钮】和【带提交功能的按钮】
    表单级别关联了函数事件，但按钮这里必须得是submit才可以提交表单
    -->
    <!--<button type="button" οnclick="aaa()">提交</button>-->
    <!--<button type="submit" οnclick="aaa()">提交</button>-->
    <!--<button type="submit">提交</button>-->
    <button type="submit">提交</button>
</form>

<script>
    var uname = document.getElementById('username');
    var pwd = document.getElementById('password');
    var md5pwd = document.getElementById('md5-password');

    function aaa(){
        alert('111');
        //创建了一个新的隐藏的文本框，把输入的密码加密后赋值给此文本框，而不是原来输入密码的框，所以避免了输入密码点提交瞬间变长的现象
        md5pwd.value = md5(pwd.value);
        console.log(pwd.value);
        //此处应该有一个判断，而不总是返回true或者总是返回false
        //用户输入的内容和数据库中的信息进行对比，匹配成功返回 true，否则返回 false
        return false;
    }
</script>

</body>
</html>

加密的方法

1. 使用 post 提交
2. 使用密码框
3. 给密码赋一个固定值，打印固定值（很初级的方法）
4. 使用 MD5 工具类加密，打印加密后的值
5. 优化解决提交时密码变长的问题（新建隐藏的文本框，用于存放加密后变长的值）

【注意】

如果表单的提交方式 method 填写错误，都会默认 get 方式提交！输入内容会在URL中暴露！

• 不写方式
• 写 post 写错

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ivZPlfed-1628167659400)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210805192411147.png)]

为什么一开始MD5加密可以获取，现在获取不了了？

onsubmit 和 onclick

onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。

在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。

但是onclick比onsubmit更早的被触发。

提交过程

1、用户点击按钮 —->

2、触发onclick事件 —->

3、onclick返回true或未处理onclick —->

4、触发onsubmit事件 —->

5、onsubmit未处理或返回true ——>

6、提交表单

10、JQuery

• JQuery 库里面存在大量的JavaScript 函数
• JQuery 只需要放在 lib 目录中，用的时候引入即可，不需要在项目结构中添加

获取JQuery：$(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="" id="ceshi">点我弹出</a>

<script>
    // <!--原生的写法-->
    // var aba = document.getElementById('ceshi');
    // aba.click(function(e){
    //     alert('111');
    // })

    $('#ceshi').click(function(e){
        alert('111');
    })
</script>
</body>
</html>

【思考】为什么每次按原生方法写上面的网址会一直刷新？不显示弹窗？

事件

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

#当网页加载完成，响应一个事件（函数的内容）
$(document).ready(function(){
    
})

#简化
$(function(){
    
})

测试

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

    <script src="lib/jquery-3.6.0.min.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 300px;
            border: 5px solid red;
        }
    </style>

</head>
<body>

<!--要求：显示鼠标当前位置的坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>

<script>
    //当网页加载完毕，响应事件
    $(function(){
        //选择鼠标移动的范围
        $('#divMove').mousemove(function(e){
            //把鼠标的坐标添加到我们想要显示的位置
            $('#mouseMove').text('x: '+e.pageX + 'y: '+e.pageY);
        })
    })
</script>

</body>
</html>

操作DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.min.js"></script>
</head>
<body>

<ul id="test-ul">
  <li class="js">JavaScript</li>
  <li name="python">Python</li>
</ul>

<script>
    //document.getElementById('')
    $('#test-ul li[name=python]').text();
    $('#test-ul').html();
</script>

</body>
</html>
========操作标签内文本===============操作HTML标签================
$('#test-ul li[name=python]').text();   获得值
$('#test-ul li[name=python]').text('设置值');   设置值
$('#test-ul li[name=python]').html();   获得值
$('#test-ul li[name=python]').html('<strong>123456</strong>');   设置值

============操作CSS====键值对=========
$('#test-ul li[name=python]').css("color","red");   设置：color——red

============元素的显示和隐藏==========
$('#test-ul li[name=python]').show();   显示
$('#test-ul li[name=python]').hide();   隐藏
$('#test-ul li[name=python]').toggle()；   显示和隐藏来回切换

11、巩固

• 巩固 html css （扒网站，下载，对应修改看效果）
• 巩固 JS （看 JQuery 源码，看游戏源码）

作业

1. 做一个组件
2. 扒一个网站

注意事项

• 单引号、双引号、逗号、分号不同的使用位置
• 传入参数时，什么时候需要引号？什么时候不需要引号？
• 不管是原生方法还是JQuery，牢记基本选择器的符号使用
• 属性在标签的位置：<script src="*******"></script>