JavaScript

最新推荐文章于 2023-05-25 23:01:29 发布

过来我的小熊

最新推荐文章于 2023-05-25 23:01:29 发布

阅读量2.8k

点赞数 5

分类专栏：前端基础文章标签： java JavaScript

本文链接：https://blog.csdn.net/weixin_56121715/article/details/124392198

版权

前端基础专栏收录该内容

3 篇文章 1 订阅

订阅专栏

JavaScript

1、什么是JavaScript

1.1、概述

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

Java、JavaScript 10天~

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

1.2、历史

(https://blog.csdn.net/kese7952/article/details/79357868)

ECMAScript可以理解为是JavaScript的一个标准

开发环境—线上环境，版本不一致

2、快速入门

2.1、引入Javascript

1、内部标签

<script>
	//
</script>

2、外部标签

<script src="path"></script>

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

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

    <!--外部引入-->
    <!--注意：script标签必须成对出现 -->
    <script src="js/hpt.js"></script>

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

    </script>


</head>
<body>


<!--这里也可以存放-->
</body>
</html>

2.2、基本语法入门

<script>
        // 定义变量   变量类型 变量名 = 变量值
        var score = 80;
        // alert(num);
        // 2.条件控制
        if (score<80 && score > 70){
            alert("70~80")
        }else if(score>60 && score<70){
            alert("60~70")
        }else {
            alert("other")
        }
        
        // 注释格式与java相同
        // 在浏览器的控制台打印   可以理解为java中的 sout
        console.log(score)
</script>

浏览器必备调试须知：

2.3、数据类型浏览

变量

var 王者荣耀 = "倔强青铜";

number

js 不区分小数和整数，Number

123  // 整数123
123.1  // 浮点数123.1
1.2132e1 // 科学计数法
-99  // 负数
NaN  // not a number
Infinity // 表示无限大

字符串

'abc'   "abc"

布尔值

true,false

逻辑运算

&&  全部为真才为真
||  一个为真就为真
!   真为假，假为真

比较运算符

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

坚持不要使用 == 比较

须知：

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

浮点数问题

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

尽量避免使用浮点数进行计算，存在精度问题

console.log(Math.abs((1/3)-(1-2/3))<0.0000001);

null 和 undefined

null 空
undefined 未定义

数组

一系列相同类型的对象，JS中不需要这样

var arr = [1,"ass",false,true]

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

对象

对象是大括号，数组是中括号

var person = {
    name:"hot",
    age:3,
    tags:['js','java']
}

每个属性之间用逗号隔开，最后一个不需要

取对象的值

> person.age
3
> person.name
'hot'

2.4、严格检查模式

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

<!--  前提：idea 需要设置支持 ES6语法
      ‘use strict’  严格检查模式，预防JavaScript的随意性导致产生一些问题
      必须写在JavaScript的第一行
      局部变量建议都使用 let 去定义
 -->
    <script>
        'use strict'
        console.log(Math.abs((1/3)-(1-2/3))<0.0000001);

        var arr = [1,"ass",false,true]

        var person = {
            name:"hot",
            age:3,
            tags:['js','java']
        }

        var 王者荣耀 = "倔强青铜";
    </script>
</head>
<body>

</body>
</html>

3、数据类型

3.1、字符串

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

2、注意转义字符 \

\'
\n
\t
\u4e2d   \u#### Unicode字符
\x41    Ascii 字符

3、多行字符串编码

// ``  使用这个字符
var msg = `
    java
    hello
        `

4、模板字符串

let name = "fusu";
let age = 1;

let msg = `你好啊，${name}`;

5、字符串长度

str.length

6、字符串的不可变

7、大小写转换

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

8、str.indexof(‘’)

9、subString

[)  含头不含尾
str.substring(1)  // 从第一个字符截到最后一个字符
str.substring(1,3) // 截取 1-3的字符串，不含尾部的字符

3.2、数组

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

let arr = [0,2,3,"ss",false]
arr[0]  // 通过下标取值和赋值

1、长度

arr.length

注意：假如给 arr.length 赋值，数组大小会发生变化，没有值的地方会用undefined代替，如果赋值过小，元素就会丢失

2、indexof，通过元素获得下标索引

arr.indexOf(2)

字符串中的“1”和1是不同的

3、slice() 截取Array()的一部分，返回一个数组，类似于String中的subString 也是含头不含尾

4、push(),pop() 尾部

push() 压入尾部

pop() 弹出尾部的一个元素

5、unshift()，shift() 头部

unshift() 压入头部

shift() 弹出头部的一个元素

6、排序 sort()

7、元素反转 reverse()

8、拼接 concat()

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

9、连接符 join

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

arr.join('-')
'7-5-0'

10、多维数组

var arr1 = [1,[1,2],[2,3],[3,4]]
arr1[1][1]
2

数组：存储数据，（如何存，如何取）

3.3、对象

若干个键值对

var 对象名 = {
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}

var person = {
    name : "fusu",
    age : 13,
    email: "qwwqwqw@qq.com"
}

js 中对象，{…} 表示一对象，键值对描述属性 xxx：xxxx ，多个属性之间用逗号隔开，最后一个属性不需要

JavaScript中的对象的所有键都是字符串，值可以是任意类型

1、对象赋值

person.age = 13
13
person.age
13

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

person.haha
undefined

3、动态的删减属性，通过delete 删除对象的属性

delete person.age
true
person
{name: 'fusu', email: 'qwwqwqw@qq.com'}

4、动态的添加属性，直接给新的属性添加值即可

person.haha = "haha"
'haha'
person
{name: 'fusu', email: 'qwwqwqw@qq.com', haha: 'haha'}

5、判断属性值是否在这个对象中， xx in xxx

"haha" in person
true
"toString" in person
true

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

person.hasOwnProperty("haha")
true
person.hasOwnProperty("toString")
false

3.4、流程控制

if 分支

var age = 3;
if (age>5){
    console.log("大于岁")
}else if (age>3){
    console.log("大于三年")
}else {
    console.log(age + "岁")
}

while ，do while 循环

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

do {
    console.log(age++)
}while (age<100)

for循环

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

forEach循环

let num = [123,1231,215,4578,55]

// 函数
num.forEach(function (value) {
    console.log(value)
})

for … in 与 for … of

for (let number of num) {
    console.log(number)
}


for (let index in num) {
    console.log(num[index])
}

3.5、Map 和 Set

Map：

// let name = ["tom","jerry"]
// let score = [100,90,80]

let map = new Map([["tom",100],["jerry",90]])
console.log(map.get(`tom`));
map.set("jerry",100);
map.delete("tom");

Set：无序不重复的集合

// set 可以去重
let set = new Set([3,1,1,1])
set.add(2)
set.delete(2)
// has  判断set中是否有此元素，返回bool值
console.log(set.has(1));

3.6、iterator遍历

数组和 map 、set 都可以使用 for…of 遍历

// 数组遍历
let name = ["tom","jerry"]
for (const value of name) {
    console.log(value)
}

// map 遍历
let map = new Map([["tom",100],["jerry",90]])
for (const mapElement of map) {
    console.log(mapElement)
}

// set 遍历
let set = new Set([3,1,1,1])
for (const number of set) {
    console.log(number)
}

4、函数

4.1、定义函数

定义方式一

绝对值函数

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

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

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

定义方式二

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

这样的函数是一个匿名函数，但是可以把结果赋值给abs，通过abs 就可以调用函数！

方式一和方式二等价！

调用函数

abs(10) // 10
abs(-10)  // 10

参数问题：Javascript 可以传递任意参数，也可以不传递参数

参数进来是否存在问题？

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

let abs = function (x) {
    // 手动抛出异常
    if (typeof x!=='number'){
        throw 'not a Number'
    }

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

arguments

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

代表，传递进来的所有的参数，是一个数组

let abs = function (x) {
    console.log("x=>" + x)

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

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

问题：arguments 包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数

rest

以前：

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

ES6 引入的新特性，获取除了已经定义的参数之外的所有参数~ … 标识

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

rest 参数只能写在最后面，必须用 …标识

4.2、变量的作用域

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

假设在函数体中声明，则在函数体外不可使用

function a() {
    var x = 1;
}
console.log(x)  // ReferenceError

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

function a() {
    var x = 1;
    console.log(x)
}
function b() {
    var x = 2;
    console.log(x)
}

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

function a() {
    var x = 1;
    console.log(x)
    function b() {
        var y = 1;
        console.log(x)
    }
    b()
    console.log(y) // ReferenceError
}
a()

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

function a() {
    var x = 1;
    console.log(x)
    function b() {
        var x = 2;
        console.log(x)
    }
    b()
}
a()

在 JavaScript 中函数查找变量是从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，

则内部函数会屏蔽外部函数的变量

提升变量的作用域

function x() {
    var a = "x" + y;
    console.log(a) // xundefined
    var y = "y"
}

结果：xundefined

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

function x() {
    var y;
    var a = "x" + y;
    console.log(a) // xundefined
    y = "y"
}

这个是在 js 建立之初就存在的特性，养成规范，所有的变量定义都放在JavaScript头部，不要乱放，便于代码维护

function x() {
    var y,a;
    y = "y"
    a = "x" + y;
    console.log(a)
}

全局变量

// 全局变量
l = 2;

function f() {
    console.log(l)
}
f()
console.log(l)

全局对象 window

var f = "xxx";
alert(f)
alert(window.f);     // 默认所有的全局变量，都是自动绑定在 window 对象上

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

var older_alter = window.alert;
older_alter(f)
window.alert = function (){

}
// 发现 alert() 失效了
window.alert()

JavaScript 实际上只有一个全局作用域，任何变量（函数本身也可以视为变量），假设没有在函数作用范围内找到，

就会向外查找，如果在全局作用域中都没有找到，报错 ReferenceError

规范

由于我们所有的全部变量都会绑定到我们的 window 上，如果不同的js文件，使用了相同的全局变量，就会冲突，

如何减少冲突？（创建一个唯一全局变量）

// 唯一全局变量
var app = {};

// 定义全局变量
app.name = 'fusu';
app.add = function (a,b){
    return a+b;
}

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

JQuery~

局部作用域 let

 function aaa() {
     for (var i = 0; i < 10; i++) {
         console.log(i)
     }
     console.log(i+1);
 }

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

function aaa() {
     for (let i = 0; i < 10; i++) {
         console.log(i)
     }
     console.log(i+1);
 }

建议使用 let去定义局部作用域的变量

常量 const

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

var PI = '3.14'
console.log(PI)
PI = "3.15" // 可以修改这个值
console.log(PI)

在 ES6 引入了常量关键字 const

const PI = '3.14'
console.log(PI)
PI = "3.15" // TypeError
console.log(PI)

4.3、方法

定义方法

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

var app = {
    name:"fusu",
    birth:2003,
    age:function () {
        // 今年 - 出生的年
        var now = new Date().getFullYear()
        return now - this.birth;
    }
}

// 属性
console.log(app.name);
// 方法 一定要带()
console.log(app.age());

this 代表什么？拆开代码来看

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

var app = {
    name:"fusu",
    birth:2003,
    age:getAge
}

// 属性
console.log(app.name);
// 方法 , 一定要带()
console.log(app.age());
console.log(getAge()); // NaN  这里面的this现在指向的是 window

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

apply()

在js中可以控制 this 的指向

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

var app = {
    name:"fusu",
    birth:2003,
    age:getAge
}

console.log(getAge.apply(app, [])); // this 指向的是app，参数为空

5、内部对象

标准对象

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

5.1、Date

var now = new Date() // Sun Apr 17 2022 19:28:43 GMT+0800 (中国标准时间)
console.log(now.getFullYear()); // 年
console.log(now.getMonth()); // 月 0~11 代表月
console.log(now.getDate()); // 日
console.log(now.getDay()); // 星期几 0~6 星期
console.log(now.getHours()); // 时
console.log(now.getMinutes()); // 分
console.log(now.getSeconds()); // 秒

console.log(now.getTime()); // 时间戳  全世界同意  1970 1.1 00:00:00 毫秒数
console.log(new Date(1650195122600)); // 转换时间戳
console.log(now.toLocaleString()); // 本地时间

5.2、JSON

JSON是什么？

JSON 是基于 JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集，是一种开放的、轻量级的数据交换格式
JSON 是一种纯字符串形式的数据，它本身不提供任何方法（函数），非常适合在网络中进行传输。

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

格式：

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

JSON 字符串和 JS 对象的对比

var str = {  //  {name: 'fusu', age: 12}
    name:'fusu',
    age: 12
}
console.log(str)

// 对象转为 JSON 字符串
var json = JSON.stringify(str)
console.log(json) // {"name":"fusu","age":12}
// JSON 字符串转为对象 ， 参数为json字符串
console.log(JSON.parse('{"name":"fusu","age":12}'));  // {name: 'fusu', age: 12}

很多人搞不清楚，JSON 和对象的区别 JSON是字符串

var str = {name: 'fusu', age: 12}
var json = '{"name":"fusu","age":12}'

6、面向对象编程

6.1、什么是面向对象

Javascript，Java，C# … 面向对象，JavaScript有些区别

类：模板
对象：具体实例

在 JavaScript 中选哟换一下思维方式

原型： __proto__

var Student = {
    name:"fusu",
    age:13,
    run:function () {
        console.log(this.name + "run...")
    }
}

var XiaoMing = {
    name: "xiaoming"
}

// 原型对象
XiaoMing.__proto__ = Student;
XiaoMing.run();

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

XiaoMing.__proto__ = Bird;
XiaoMing.fly();

class 继承

class关键字，是在ES6中引入的

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

// 定义一个学生类
class Student{
    // 构造方法
    constructor(name) {
        this.name = name;
    }
    hello(){
        console.log('hello')
    }
}

var student = new Student("xiaoming")
console.log(student.name);
student.hello()

2、继承 extends

// 定义一个学生类
class Student{
    // 构造器
    constructor(name) {
        this.name = name;
    }
    hello(){
        console.log('hello')
    }
}

var student = new Student("xiaoming")
console.log(student.name);
student.hello()

class Pupil extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }

    myGrade(){
        console.log('我是小学生')
    }
}

var pupil = new Pupil('xiaohong','1')
console.log(pupil.name);
console.log(pupil.grade);
pupil.hello()
pupil.myGrade()

本质：查看对象原型

原型链

__ proto __

prototype

7、操作BOM对象（重点）

浏览器介绍

JavaScript 和浏览器的关系？

Javascript 诞生就是为了能够让它在浏览器中运行

BOM：浏览器对象模型

内核

IE
Chrome
Safari
FireFox

三方：

QQ浏览器
360浏览器

window 对象 (重要)

window 代表浏览器窗口

window.alert(1)
window.innerHeight
150
window.innerWidth
1536
window.outerHeight
816
window.outerWidth
1536

Navigator

Navigator ，封装了浏览器的信息

navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.39'
navigator.appName
'Netscape'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.39'
navigator.platform
'Win32'

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

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

screen

代表屏幕尺寸

screen.width
1536
screen.height
864

location (重要)

location 代表当前页面的URL信息

host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"  // 协议
reload: ƒ reload() // 刷新网页

location.assign('https://microsoftnews.msn.cn/')  // 设置新的地址

document

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

document.title = 'fusu'
'fusu'

获取具体的文档书节点

<dl id="app">
    <dt>java</dt>
    <dd>javaSE</dd>
    <dd>javaEE</dd>
</dl>

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

获取 cookie

document.cookie
''

劫持cookie 原理

www.taobao.com

劫持 cookie上传服务器

服务器端可以设置 cookie：httpOnly

history （不建议使用）

history 代表浏览器的历史记录

history.back() // 后退

history.forward() // 前进

8、操作DOM对象（重点）

DOM：文档对象模型

核心

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

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

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

获得 DOM 节点

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


<script>
    // 对应 css 选择器
    var h1 = document.getElementById('h1')
    var p1 = document.getElementsByClassName('p1')
    var p2 = document.getElementsByTagName('p')
    var father = document.getElementById('father')

    var childrens = father.children // 获取父节点下的所有子节点 [index]
    father.firstChild
    father.lastChild
</script>

这是原生代码，之后会尽量使用JQuery

更新节点

<div id="app">

</div>

<script>
    var app = document.getElementById('app');
    app.innerText = '你好';  // 操作 文本(会产生覆盖)
    app.innerHTML = '<em>Java</em>'; // 操作 html文本标签
    app.style.backgroundColor = 'green';  // backgroundColor  - 驼峰命名
</script>

app.innerText 操作文本(会产生覆盖)
app.innerHTML 操作文本标签
app.style.backgroundColor 操作样式 - 驼峰命名

删除节点

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

<div>
    <p id="p1">p1</p>
    <p>p2</p>
</div>

<script>
    var p1 = document.getElementById('p1')

    var self = p1.parentElement // 获取父节点
    self.removeChild(p1) // 删除是一个动态的过程
</script>

删除前：

删除后：

注意：删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意

插入节点

我们获得了某个Dom节点，假设这个Dom节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是这个Dom节点

已经存在元素了，我们就不能这个干了！，会产生覆盖

<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.append(js) // 追加元素  追加到后面
</script>

运行结果：

创建一个新的标签，实现插入

<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.append(js) // 追加元素  追加到后面

    var newP = document.createElement('p') // 创建一个 p标签
    newP.id = 'newP'
    newP.innerText = 'C++'
    list.append(newP)

    // 创建一个标签节点 script
    var newScript = document.createElement('script')
    newScript.setAttribute('type','text/javascript')
    list.append(newScript)
</script>

运行结果：

// 创建一个style节点
    var newBody = document.getElementsByTagName('body') // 这里返回的是一个数组
    newBody[0].setAttribute('style','background:aqua')

    // var newStyle = document.createElement('style')
    // newStyle.setAttribute('type','text/css')
    // newStyle.innerText = 'body{background:aqua}'
    // newBody[0].append(newStyle)

运行结果：

innerBefore 在前面插入一个节点

var ee = document.getElementById('ee')
var js = document.getElementById('js')
var list = document.getElementById('list')
// 要包含的节点：insertBefore(newNode,targetNode)  
list.insertBefore(js,ee)

(https://jquery.cuishifeng.cn/)

9、操作表单

表单是什么 form DOM树

文本框 text
密码框 password
隐藏域 hidden
下拉框 select
单选框 radio
多选框 checkbox
…

表单的目的：提交信息

获得要提交的信息

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

<form action="" method="post">
    <p>
        // required  必须填写
        <span>用户名：</span><input type="text" name="username" id="username" required>
    </p>
    <p>
        <span>密&nbsp;&nbsp;&nbsp;码：</span><input type="password" name="password" id="password">
    </p>
    <p>
        <!-- 多选框，单选框的值就是定好的value -->
        <input type="radio" name="sex" value="man"> 男
        <input type="radio" name="sex" value="woman"> 女
    </p>
    <p>
        <input type="submit" name="submit">
    </p>
</form>

<script>
    var username = document.getElementById('username')
    var password = document.getElementById('password')
    var manState = document.getElementsByName('sex')[0]
    var womanState = document.getElementsByName('sex')[1]

    // 获取表单的值   username.value
    // 修改表单的值   username.value = 21312
    // 获取单选框的状态  manState.checked  返回一个bool值

</script>

</body>
</html>

提交表单，md5加密密码，表单优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<!-- 表单提交事件
    onsubmit = 绑定一个提交检测的函数，true，false
    将这个结果返回给表单，使用 onsubmit 接收
    onsubmit = "return aa()"
 -->
<!--绑定提价表单事件  onsubmit-->
<form action="https://www.baidu.com" method="post" onsubmit="aa()">
    <p>
        <span>用户名：</span><input type="text" name="username" id="username">
    </p>
    <p>
        <span>密&nbsp;&nbsp;&nbsp;码：</span><input type="password" name="password" id="password">
    </p>
    <input type="hidden" name="password" id="md5-password">
    <button type="submit">提交</button>
</form>

<script>
    function aa(){
        var username = document.getElementById('username')
        var password = document.getElementById('password')
        var md5_password = document.getElementById('md5-password')

        md5_password.value = md5(password.value)
        password.value = '';
        console.log(username.value)
        console.log(password.value)
        console.log(md5_password)

        // 可以校验判断表单内容，true 就是通过提交，false，阻止提交
        return false;
    }

</script>

</body>
</html>

10、JQuery

公式：$(selector(选择器)).action()

selector(选择器) 就是 CSS 选择器

文档工具站：(https://jquery.cuishifeng.cn/)

引入方式：

cdn
官网下在引入 production 生产 development 开发

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

<a href="">选择</a>

<script>
    $(function (){
        $('a').click(function (){
            $('body').css("background","green")
        })
    })
</script>

</body>
</html>

选择器

选择器就是CSS的各种选择器

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

<span id="text" class="text">你好</span>

<script>
    $('span').css('color','red')
    $('#text').css('color','green')
    $('.text').css('color','yellow')
</script>

</body>
</html>

事件

例：

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

mouse:<span></span>
<div>
    在这里移动鼠标试试
</div>

<script>
    $(function (){
        $('div').css({"width":"500px","height":"500px","border":"1px red solid"})
        $('div').mousemove(function (e){
            $('span').text("x:" + e.pageX + "y:"+ e.pageY)
        })
        
        // $('span').show() // 显示
        // $('span').hide() // 隐藏
    })
</script>

</body>
</html>

// 可以校验判断表单内容，true 就是通过提交，false，阻止提交
return false;
}

```

10、JQuery

公式：$(selector(选择器)).action()

selector(选择器) 就是 CSS 选择器

文档工具站：(https://jquery.cuishifeng.cn/)

引入方式：

cdn
官网下在引入 production 生产 development 开发

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

<a href="">选择</a>

<script>
    $(function (){
        $('a').click(function (){
            $('body').css("background","green")
        })
    })
</script>

</body>
</html>

选择器

选择器就是CSS的各种选择器

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

<span id="text" class="text">你好</span>

<script>
    $('span').css('color','red')
    $('#text').css('color','green')
    $('.text').css('color','yellow')
</script>

</body>
</html>

事件

例：

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

mouse:<span></span>
<div>
    在这里移动鼠标试试
</div>

<script>
    $(function (){
        $('div').css({"width":"500px","height":"500px","border":"1px red solid"})
        $('div').mousemove(function (e){
            $('span').text("x:" + e.pageX + "y:"+ e.pageY)
        })
        
        // $('span').show() // 显示
        // $('span').hide() // 隐藏
    })
</script>

</body>
</html>