JavaScript（基础）

最新推荐文章于 2021-07-05 16:20:55 发布

꧁冰凝꧂

最新推荐文章于 2021-07-05 16:20:55 发布

阅读量621

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_43605227/article/details/115220780

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、什么是JavaScript

1、1概要

JavaScript是一门世界上最流行的脚本语言
10天设计出来的
一个后端人员，必须警惕JavaScript。

1、2历史

https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript它可以理解为是JavaScript的一个标准
最新版本已经到es6版本
但是大部分游览器还是停留在支持es5代码之上
开发环境—线上环境，版本不一致

2、快速入门

在这里插入图片描述
2、1引入script项目

1、内部引入

  <script>
    	//....
    </script>

2、外部引入

abc

alert("我是弹窗")

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    <!--    script内部写法-->
    <!--    <script>
            alert("我是一个弹窗");
        </script>-->
        <!--外部引入-->
        <script src="js/js1.js"></script>
    <!--    注意：script必须成对出现-->
        <!--定义script时不要写type，因为默认就是JavaScript-->
        <script type="text/javascript "></script>
    </head>
    <body>
    <!--也可以吧script写到这里-->
    </body>
    </html>

2、2基本语法

1、定义变量：变量类型变量名 = 变量值;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1、定义变量  变量类型  变量名 = 变量值
        var score = 1;
        //2、条件控制
        if(score>60&&score<=70){
        }else if(score>70&&score<=80){
        }else if(score>70&&score<=80){
        }else {
            alert(score);
        }
        /*3、多行注释
        * 4、严格区分大小写
        * */
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述
代码调试区：

2、3数据类型

数值、文本、图形、音频、视频。。。
变量

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

number

js不区分小数和整数

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

字符串

'abc'      "abc"

布尔值

true    flase

逻辑运算符

&&  两个都为真时取真
||  两个都为假时取假
！  真即假，假即真

比较运算符

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

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

须知：
N-AN，这个与所有数值都不相等，包括它自己。
只能通过isNaN（NaN）来判断这个数是否等于NaN

浮点数问题：

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

尽量避免使用浮点数

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

null  为空
undefined  没有定义

数组
java的数据类型必须想让，js可以是任意的类型。

var arr=[1,2,3,4,5,'hello',true,null]
new array(1,12,3,45,true)

取数组下标，如果越界了，就会undefined
对象
对象是大括号，数组是中括号

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

//Person person = new Person();
        var person ={
            name: "冰凝",
            age: 12,
            id: "girl"
        }

取对象的值
在这里插入图片描述

2、4严格检查模式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //前提：idea需要设置支持ES6语法
        /*  ’use strict‘;  严格检查模式，预防JavaScript随意性导致产生的问题
            必须放在第一行。
            局部变量建议都是要let去定义
        * */
        'use strict';
        let i = 1;
    </script>
</head>
<body>

</body>
</html>

3、数据类型

3、1字符串

1、正常字符串我们使用单引号，或者双引号。
2、注意转义字符\

\`
\n
\t
\u4e2d     unicode编码
\x41     Ascll字符

3、多行字符串编码用``包裹（pao）

var person = `
            你是
            一个
            大笨蛋
        `

4、模板字符串

var name = '冰凝';
var stu = `你好呀, ${name}`

5、字符串长度

str.length

6、字符串的可变性：不可变
在这里插入图片描述
7、大小写转换。

student.toUpperCase()   //大写
student.toLowerCase()   //小写

8、获取字符串的下标

student.indexOf('t')

9、substring

[ ）
student.substring(1)   //从第一个字符开始一直到最后一个，
student.substring(1,3)   //从第一个到第三个，包含第一个，不包含第三个

3、2数组

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

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

1、长度

arr.length()
6

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

arr.length=8
8
arr.sort()
(8) [1, 2, 3, 4, 5, 6, empty × 2]
arr.sort()
(3) [1, 2, 3]

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

arr.sort()
(3) [1, 2, 3]
arr.indexOf(1)
0
arr.indexOf("1")
-1
//字符串的“1”和数字的1是不一样的

3、slice截取Array的一部分，返回一个新的数组,类似于string中的substring

截取的数组是一个新的数组，但不改变原数组的值。

arr.slice(1)   //截取的是第一个到最后一个
(5) [2, 3, empty × 3]
arr.sort()
(6) [1, 2, 3, empty × 3]

4、push、pop尾部

这两个方法会改变原数组

arr.push(1)  //压入尾部
7
arr.join()
"1,2,3,,,,1"
arr.pop()   //弹出尾部的一个元素
1
arr.join()
"1,2,3,,,"

5、unshift、shift头部

这两个方法会改变原数组

arr.unshift(9)   //压入头部
7
arr.join()
"9,1,2,3,,,"
arr.shift()     //弹出一个头部的元素
9
arr.join()
"1,2,3,,,"

6、sort（）排序

var a=['a','c','b']
a.sort()
(3) ["a", "b", "c"]

7、reverse（）元素反转

a.sort()
(3) ["a", "b", "c"]
a.reverse()
(3) ["c", "b", "a"]

8、concat()拼接

返回一个新的数组，但不改变原数组

a.concat(['e','g','g'])
(6) ["c", "b", "a", "e", "g", "g"]
a.sort()
(3) ["a", "b", "c"]

9、join（）连接符

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

a.sort()
(3) ["a", "b", "c"]
a.join("-")
"a-b-c"

10、多维数组

var arr1=[[1,2],[2,3],[3,4]]
arr1.join()
"1,2,2,3,3,4"
arr[1][1]

3、3对象

若干个键位时
var 对象名 = {属性名：属性值, …}
JS中对象{…}表示已给对象，键值对描述属性：xx：xx，多个属性之间用逗号隔开，最后一个属性不用逗号。

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

 var 对象名={
            属性名，属性值;
            属性名，属性值;
            属性名，属性值;
            属性名，属性值;
        }
 var person={
            name:"bingning",
            age:13,
            id:"girl",
            score:65,
        }

1、对象赋值

 var person={
            name:"bingning",
            age:13,
            id:"girl",
            score:65,
        }
undefined
person.name="wuhan"
"wuhan"
person
{name: "wuhan", age: 13, id: "girl", score: 65}

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

person.wo
undefined

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

delete person.age
true
person
{name: "wuhan", id: "girl", score: 65}

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

person.ha="decation"
"decation"
person
{name: "wuhan", id: "girl", score: 65, ha: "decation"}

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

"name"in person
true
"toString" in person
true

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

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

3、4流程控制

if判断

 var age=15;
 if(age>3){
	   alert("hhh")
}else if(age>10){
	  alert("woda")
}else{
	 alert("wan")
 }

while循环：避免死循环

while(age<100){
  	age++;
  	alert(age);
}

**do…while循环

do{
	age++;
    alert(age);
}while(age<100)

for循环

for (let i = 0; i < 10; i++) {
	 alert(i);
}

forEach循环（函数）

var arr=[12,32,45,465,76,87,34,5,3];
arr.forEach(function (value) {
	console.log(value);
})

for…in循环（索引）

for (let arrKey in arr) {
	console.log(arr[arrKey])
}

3、5Map和Set

Es6新特性

Map

var map=new Map([["name","bingn"],["age",16],["id","boy"]]);
var name = map.get("name");  //通过key获取value
map.set("wan","hao");  //通过value增加值，如果第一个属性一样，就是修改值了
map.delete("name");  //删除

Set
无序不重复的集合，所以set可以去重

var set=new Set([1,23,4,1,1]);
set.add(5);  //增加值
set.delete(1);  //删除值
console.log(set.has(5));   //判断Set里面是否拥有该value

3、6Iterator

Es6新特性

遍历数组

 var arr1=[1,23,4,5,6];
for (let i in arr1) {
    console.log(i);
}

遍历Map

var map=new Map([["name","bingn"],["age",16],["id","boy"]]);
for (let x of map) {
     console.log(x);
}

遍历Set

var set=new Set([1,23,4,1,1]);
for (let x of map) {
     console.log(x);
}

4、函数

4、1定义函数

第一种方式

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

一旦执行到return代表函数结束，返回结果。如果没有执行到return，函数执行也会结束，就是undefined。

第二种定义方式

var abs1=function(x){
    if(x>=0){
        return x;
    }else if(x<0){
        return -x;
    }
}

这是一个匿名函数，但是可以把结果赋值给abs1，通过abs1就可以调用函数
参数问题，JavaScript可以传递任意参数，也可以不传递参数，参数进来是否有问题？

假设有问题，我们应该抛出异常去规避

var abs1=function(x){
    //手动抛出异常
    if(typeof x!=='number'){
        throw 'this is not number';
    }
    if(x>=0){
        return x;
    }else if(x<0){
        return -x;
    }
}

arguments

是一个JavaScript免费赠送的关键字。
代表传递进来的所有的参数，是一个数组

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

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

rest

以前

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

现在

Es6引入新的特性，获取除了已经定义的参数外的所有参数。

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

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

4、2变量的作用域

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

var score=1;   //这个是有作用域的

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

console.log(a);   //Uncaught ReferenceError: a is not defined
function abs(x){
    var a=1;
}

内部函数可以访问外部函数的成员，外部不能。

var score=300;
console.log(a);  //Uncaught ReferenceError: a is not defined
function abs(x){
    var a=1;
    a=a+score;
    console.log(a)
}

两个函数定义相同的变量，是没有问题的。

function abs(x){
    var a=1;
}
function abs1(x){
    var a=1;
}

函数外部与函数内部重名

var a=3;
function abs(x){
    var a=1;
    console.log(a);
}

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

提升变量的作用域

var x = 'x'+y;     //undefined
console.log(x);
var y='y';

结果：undefined
说明：JavaScript执行引擎，自动提升了y的申明，但是不会给提升了的y赋值。

 var y;   //undefined
 var x = 'x'+y;  
 console.log(x);
 y='y';

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

var x=1,
y =x+1,
u,z,i;   //undefined

全局函数

var a =10;
abs(10);
function abs(x){
    console.log(x);
}
abs(a);
console.log(a);

全局对象window

var a =10;
console.log(a);
console.log(window.a); //默认所有的全局变量，都会自己绑定在window下

alert函数也是window下的一个变量

var a = 10;
window.alert(10);

var A_alert=window.alert;
A_alert(a);
//失效
window.alert=function (){
}
//发现alert失效了
window.alert(10);
//重新有效
window.alert=A_alert;
window.alert('ad');

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果全局作用域都没有找到，就会报错RefrenceError

规范：

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

    //唯一全局变量
var kuang={};
//定义全局变量
kuang.name='bingning';
kuang.add=function (a, b) {
    return a+b;
}

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

局部作用域let

function abs(x){
    for (var i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i++);
}

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

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

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

常量const

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

var MAX=19;
MAX=19; //可以改变这个值
console.log(MAX);

SE6引入了常量关键字：const

const MAX = 19;
MAX = 10;  //Uncaught TypeError: Assignment to constant variable.

4、3方法

定义方法

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

var bingNing={
    name: "冰凝",
    birth: 2000,
    age: function (){
        var now=new Date().getFullYear();
        return (now-this.birth);
    }
}
bingNing.name
bingNing.age()

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

function age1() {
    var now=new Date().getFullYear();
    return (now-this.birth);
}
var bingNing={
    name: "冰凝",
    birth: 2000,
    age: age1
}
bingNing.age()
bingNing.name

this是无法指向的，默认指向被调用的对象。

apply

可以控制this指向的方向

function getage() {
    var now=new Date().getFullYear();
    return (now-this.birth);
}
var bingNing={
    name: "冰凝",
    birth: 2000,
    age: getage
}
getage.apply(bingNing,[]);  //默认指向bingNing  ， []代表参数为空

5、内部对象

标准对象

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

5、1Date()

基本使用

    var now = new Date();   //Tue Mar 23 2021 19:53:14 GMT+0800 (中国标准时间)
    now.getFullYear();   //获取年
    now.getMonth();  //获取月  0-11
    now.getDate();  //获取日
    now.getDay();  //星期几
    now.getHours();  //获取小时
    now.getMinutes();  //获取分
    now.getSeconds();   //获取秒
    now.getTime();  //获取时间戳  全世界同意
    console.log(new Date(1616500577024));  //时间戳转化为时间

转换

now = new Date(1616500577024)
Tue Mar 23 2021 19:56:17 GMT+0800 (中国标准时间)
now.toLocaleString   //注意：调用的是一个方式，不是属性
ƒ toLocaleString() { [native code] }
now.toLocaleString()
"2021/3/23 下午7:56:17"
now.toGMTString()
"Tue, 23 Mar 2021 11:56:17 GMT"

5、2JSON

JSON是什么

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

JSON是一种轻量级的数据交换格式
简介和清晰的层次结构使得JSON成为理想的数据交换语言
易于人阅读和编写，同时也易机器解析和生产，并有效的提升网络传输的效率

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

格式：

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

JSON字符串和JS对象的转化

   var date={
        name:"bingning",
        age:13,
        sex:"boy"
    }
    //对象转化为JSON字符串  {"name":"bingning","age":13,"sex":"boy"}
    var strJSON=JSON.stringify(date);
    //JSON转化为对象
    var nwJSON=JSON.parse('{"name":"bingning","age":13,"sex":"boy"}')

JSON与JS对象的区别

var date={name:"bingning",age:13,sex:"boy"};
var json='{"name":"bingning","age":13,"sex":"boy"}';

5、3Ajax （以后在填充这块内容）

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

6、面向对象编程

6、1什么是面向对象

原型对象

JavaScript、java、c#…向对象，JavaScript有些区别

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

在JavaScript中需要换中思维方式

原型

        var kuang={
            name:'bingning',
            age:14,
            sex:'girl',
            kuan:function () {
                console.log("name" + this.name);
            }
        };
        var wName={
            name:'daming'
        };
        wName._Proto_=kuang;  //原型，相当于指向父类
        var Bird={
            fly:function (){
                console.log("name is fly");
            }
        };
        wName._Proto_=Bird;  //原型，转换指向的对象

class继承

之前

function Student(name) {
    this.name=name;
}
//给student新增方法。
Student.prototype.hello=function () {
    alert("hello");
}

class·关键字，是在SE6中引入的

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

class Student1{
    constructor(name) {
        this.name=name;
    }
    hello1(){
        alert("fddf");
    }
}
var xiaoHong=new Student1("xiaohong");
xiaoHong.hello1();

2、继承

本质，查看对象原型

class Student1{
    constructor(name) {
        this.name=name;
    }
    hello1(){
        alert("fddf");
    }
}
class XiaoStudent extends Student1{   //继承了Student1
    constructor(name,myGrade) {
        super(name);   
        this.myGrade=myGrade;
    }
    myGride1(){
        alert(this.myGrade);
    }
}
var xiaoHong=new Student1("xiaohong");
var xiaoQinag=new XiaoStudent("xiaoqinag",10);
xiaoHong.hello1();
xiaoQinag.myGrade1();

原型链

7、操作BOM对象

游览器介绍

JavaScript和游览器的关系

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

BOM:游览器对象模型：

IE;9-11
Chrome
Safari
FireFox

三方：

QQ游览器
360游览器

window

window代表游览器的窗口

window.outerHeight
680
window.innerHeight
309
window.innerWidth
1280
window.outerWidth
1280
window.Infinity
Infinity
window.AnimationEvent
ƒ AnimationEvent() { [native code] }

Navigator（不建议使用）

Navigator,封装了游览器的信息

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

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

screen

代表屏幕尺寸

screen.width
1280
screen.height
720

location

代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:
//设置新的地址
location.assign("https://www.2345.com/?30308")

doucument

当前页面， HTML、DOM文档树

document.title
"百度一下，你就知道"
document.title="bingnn"
"bingnn"

获取具体的文档树节点。

<dl id="first">
    <dt>java</dt>
    <dd>javase</dd>
    <dd>javaee</dd>
</dl>
<script>
    var sum=document.getElementById("first");
</script>

获取Cookic

document.cookie
"BAIDUID_BFESS=BCEFD4B4CF746B2321446F4CF68C4574:FG=1; BAIDUID=BCEFD4B4CF746B23EE7FED4141F7BD4A:FG=1; BIDUPSID=BCEFD4B4CF746B23EE7FED4141F7BD4A; PSTM=1615857737; BD_UPN=12314753; COOKIE_SESSION=3_1_2_3_0_2_0_0_1_1_4_1_0_0_0_2_0_1615857990_1615857988%7C3%230_1_1615857988%7C1; BD_HOME=1; H_PS_PSSID=33241_33750_33273_31253_33676_33392_33713_26350_22160; BA_HECTOR=05agah2k01042184901g5lo7r0r"

劫持cookie原理

www.taobao.com

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

服务端可以设置cookic：httpOnly

history

代表游览器的访问记录

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

8、操作DOM对象

核心

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

更新：更新DOM节点
遍历：得到DOM节点
删除：删除DOM节点
添加：添加DOM节点

要操作这个节点，就必须获得这个节点·

var s1 = document.getElementsByTagName('h1');
var s2 = document.getElementById('father');
var s3=document.getElementsByClassName('first');
//获取父节点下的所有子节点
var childer = s2.children;

这是原生代码，之后我们都是使用JQuery

更新节点

<div class="first"></div>

<script>
  var s1=document.getElementsByClassName("first");
</script>

操作文本

s1.innerText='test'  //修改文本的值
s1.innerHTML='<strong>first</strong>'

操作CSS

s1.style.color='yellow';   //属性使用，字符串  包裹
s1.style.fontSize='23px';  //转为驼峰命名
s1.style.padding='100px';

删除节点

步骤:先获取父节点，在通过父节点删除子节点，删除是一个动态的节点。

<div class="first">
    <h1 class="lay">主标题</h1>
    <p class="p1">附表福</p>
    <p class="p2">附表福</p>
</div>

<script>
    var lay = document.getElementsByClassName('p1');
    var father = lay.parentElement;
    father.removeChild(lay);

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

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

插入节点

我们获得了某个DOM节点，假设这个节点是空的，我们通过innerHTML就可以添加元素了，但是这个DOM节点已经存在，我们就不能这么干，会产生覆盖

追加：

<p id="js">javascript</p>
<div id="first">
    <p class="ee">javaee</p>
    <p class="se">javase</p>
    <p class="me">javame</p>
</div>
<script>
    var js1=document.getElementById("js");
    var first1=document.getElementById("first");
</script>

效果：

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

创建一个新的标签

<script>
    var js1=document.getElementById("js");   //已经存在的节点
    var first1=document.getElementById("first");
    //创建一个新的节点
    var few=document.createElement('p');
    few.id='few';    //设置id
    few.innerText='继续加油';   //设置文本
    few.style.color='#85FFBD';
    //创建一个标签节点
    var myScript=document.createElement('script');
    myScript.setAttribute('type','text/script');

    //创建一个style标签节点。
    var myStyle=document.createElement('style');    
    myStyle.setAttribute('type','text/css');  
    myStyle.innerHTML='body{background:#85FFBD}';   //设置css样式
    document.getElementsByTagName('head')[0].appendChild(myStyle);   //追加到head里面
</script>

insertBefore

<p id="js">javascript</p>
<div id="first">
    <p id="ee">javaee</p>
    <p id="se">javase</p>
    <p id="me">javame</p>
</div>
<script>
    var js1=document.getElementById("js");
    var se=document.getElementById("se");
    var first1=document.getElementById('first');
    first1.insertBefore(js1,se);
</script>

9、操作表单（验证）

表单是什么 form

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

表单的目的：提交信息

获得重要提交的信息

<form action="post">
    <p>
        <span>账号：</span><input type="text" id="first">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>
<script>
    var text_input=document.getElementById('first');
    text_input.value;  //获取表单的值
    text_input.value='1242';  //修改表单的值
    var text_girl=document.getElementById('girl');
    var text_boy=document.getElementById('boy');
    //对于单选框或者多选框等，我们只能获得它默认设置的当前值，不能获得已选中的值。
    text_girl.checked;   //判断当前返回值为什么，如果为true，则选中了
    text_girl.checked='true';  // 设置是否选中。
</script>

提交表单

MD5算法，来解决提交问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
</head>
<body>
<!--表单绑定事件
    利用onsubmit来绑定一个检测函数：true或flase
    函数将结果返回给表单；
    οnsubmit="return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>账号：</span><input type="text" id="first" name="name">
    </p>
    <p>
        <span>密码：</span><input type="password" id="text_input">
    </p>
    <input type="hidden" id="md_input" name="password">
<!--    提交绑定点击事件： οnclick="aaa()"-->
    <button type="submit">提交</button>
</form>
<script>
    function aaa(){
        alert('1');
        var usename=document.getElementById('first');
        var mdtext=document.getElementById('text_input');
        var mdf=document.getElementById('md_input');
        //mdtext.value=md5(mdtext.value);
       mdf.value=mdtext.value.md5(mdtext.value);
        //可以校检表单内容，true就是提交，false就是不提交。
        return false;
    }
</script>
</body>
</html>

10、jQuery

JavaScript

jQuery库，里面含有大量的JavaScript函数

获取jQuery

jqueryä¸‹è½½æ‰€æœ‰ç‰ˆæœ¬ï¼ˆå®žæ—¶æ›´æ–°ï¼‰

获取在线链接

https://www.bootcdn.cn/jquery/

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<a href="#" id="first">点击我</a>
<script>
    $('#first').click(function () {
        alert('ha');
    });
</script>
</body>
</html>

10、1选择器

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

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

<script>
    /*原生选择器  js  少，不好记*/
    //标签选择器
    document.getElementsByTagName();
    //id选择器
    document.getElementById();
    //class选择器
    document.getElementsByClassName();

    //jQuery  js中的选择器全部都能用
    $('p').click(); //标签选择器
    $('id').click(); //id选择器
    $('.class').click();  //class选择器
    
    $(selector).action();  //公式
</script>

10、2事件

鼠标事件

鼠标拥有的一些事件。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <style>
        #mouseMove{
            width: 500px;
            height: 500px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<div id="mouseTion"><span>鼠标位置：</span></div>
<div id="mouseMove">
    在这里移动试试
</div>
<script>
    //当前页面加载完毕后，响应事件  $((document).ready(function(){}))
    //简写
    $(function () {
        alert('232');
        $('#mouseMove').mousemove(function(e){
            $("span").text(e.pageX + ", " + e.pageY);
        });
    });

</script>
</body>
</html>

10、3操作DOOM

节点文本操作

    $('ul #first').text ();   //设置值
    $('ul #first').text ('3e434');  //获得值

    $('ul #first').HTML();   //设置值
    $('ul #first').HTML('<Strong>3321</Strong>');  //获得值

CSS操作

    $('ul #first').css({ "color": "#ff0011", "background": "blue" });

元素的显示和隐藏

    $('ul #first').show();  //显示
    $('ul #first').hide();  //隐藏

其它一些

$(window).width()
$(window).height()
$(document).width()
$(document).height()
$('ul #first').toggle()

小技巧：

1、如何巩固JS（看jQuery源码，看游戏源码）

2、巩固HTML，CSS（扒网站，全部down下来，然后对应修改看效果）

$(selector).action(); //公式


#### 10、2事件

> 鼠标事件

鼠标拥有的一些事件。

[外链图片转存中...(img-y5QINaUk-1616683201346)]

```htm;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <style>
        #mouseMove{
            width: 500px;
            height: 500px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<div id="mouseTion"><span>鼠标位置：</span></div>
<div id="mouseMove">
    在这里移动试试
</div>
<script>
    //当前页面加载完毕后，响应事件  $((document).ready(function(){}))
    //简写
    $(function () {
        alert('232');
        $('#mouseMove').mousemove(function(e){
            $("span").text(e.pageX + ", " + e.pageY);
        });
    });

</script>
</body>
</html>