1.什么是JavaScript

1.1概述

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

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

1.2历史

ECMAscript它可以理解为JavaScript的一个标准，最新版本已经到es6版本，但是大部分浏览器还只停留在支持es5代码上！

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

2.快速入门

2.1 引入JavaScript

1.内部标签

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

2.外部引入

abc.js

//...

test.html

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

2.2基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    Javascript严格区分大小写！-->
    <script>
        // 1.定义变量   变量类型   变量名=变量值；
        var score = 77;
        // 2.条件控制
        if(score>60&&score<70){
     
     alert("60-70")
        }else if(score>70&&score<80){
     
     
            alert("70-80")
        }else{
     
     alert(other)}
        // 3.多行注释  /*    */
        // 4.console.log(score)  在浏览器的控制台打印变量！System.out.println()
        // 5.
    </script>
</head>
<body>
</body>
</html>

浏览器必备知识：

2.3.数据类型

数值文本图形音频视频…

扫描二维码关注公众号，回复： 15378742 查看本文章

变量(定义是不能以数字开头)

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

number

js不区分小数和整数 Number

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

字符串

‘abc’ ‘‘abc’’

布尔值

true , flase

逻辑运算

！

比较运算符

= 赋值

== 等于（类型不一样，值一样，也会判断为true）

=== 绝对等于（类型和值一样）

须知：

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

浮点数问题：

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

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

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

null和undefined

null 空
undefined 未定义

数组

java的数组必须是相同的类型，一系列相同类型的对象,js中不需要这样！

 // 保证代码可读性，尽量使用[]
        var arr=[1,2,3,4,5,'hello',null,true]
        new Array(1,2,3,4,'hello')

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

对象

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

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

//Person person=new person(1,2,3,4,5);
        var person={
            name:"kk",
            age:18,
            tags:['js','java','web']
        }

取对象的值

person.name
"kk"

2.4严格检查格式

（‘use strict’；）

<script>
//'use strict';   严格检查模式，预防JavaScript的随意性导致产生的一些问题
//'use strict'; 必须写在JavaScript第一行；
//局部变量 建议都是用let去定义
        'use strict';
        //Es6  let定义局部变量
        let i=2;
    </script>

3. 数据类型

3.1字符串

正常字符串我们使用’ ‘或者“ ”包裹
注意转义字符 \

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

多行字符串编写

//tab上面的piao
        var msg=`
        world
        你好
        kk
        `

模板字符串

//tab上面的piao
        let name ='kk';
        let agr=18;
        let msg=`
        你好呀,
        ${name}
        `

字符串长度

str.length

字符串的可变性，不可变

student[0]=1
1
console.log(student)
VM361:1 student

大小写转换

//注意：这里是方法，不是属性
console.log(student.toLocaleUpperCase())
console.log(student.toLocaleLowerCase())

student.indexOf(‘u’)

console.log(student.indexOf('u'))
//字符串中u的位置

substring

console.log(student.substring(1,3))
tu
//字符串中2.3的内容

3.2数组

Array可以包含任意数据类型

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

长度

 arr.length

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

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

arr.indexOf(2)
1

字符串的1和数字1是不同的！

slice（）截取Array的一部分，返回一个新的数组

arr=[1,2,3,4,5,6,"1","2"]
(8) [1, 2, 3, 4, 5, 6, "1", "2"]
arr.slice(3)
(5) [4, 5, 6, "1", "2"]

push和pop(压入尾部和弹出尾部)

arr
(8) [1, 2, 3, 4, 5, 6, "1", "2"]
arr.push('a','b')
10
arr
(10) [1, 2, 3, 4, 5, 6, "1", "2", "a", "b"]
arr.pop()
"b"
arr
(9) [1, 2, 3, 4, 5, 6, "1", "2", "a"]

unshift(),shift()(压入头部和弹出头部)（同4）
排序 sort()

(5) [1, 2, 3, 4, 5]
arr.unshift(6)
6
arr.sort()
(6) [1, 2, 3, 4, 5, 6]

元素反转

arr.reverse()
(6) [6, 5, 4, 3, 2, 1]

conat()

arr.concat(["a","b","c"])
(9) [6, 5, 4, 3, 2, 1, "a", "b", "c"]
arr
(6) [6, 5, 4, 3, 2, 1]

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

连接符join

arr
(6) [6, 5, 4, 3, 2, 1]
arr.join('-')
"6-5-4-3-2-1"

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

多维数组

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

数组：存储数据（如何存，如何取，方法都可以实现）

3.3对象

若干个键值对，

var 对象名={
    
    
    属性名：属性值,
    属性名：属性值,
    属性名：属性值
}
    
var person={
    
    
           name:"kk",
           age: 3,
           email:"[email protected]",
           score:0
        }

JS中对象，{…}表示一个对象，键值对描述属性xxxx:xxxx,多个属性之间使用逗号隔开，最后一个属性不加逗号。

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

对象赋值

person.age=16
16

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

person.sss
undefined

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

delete person.name
true

动态的添加

person.haha="haha"
"haha"

判断属性值是否在对象中！ xxx in xxx

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

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

person.hasOwnProperty('toSting')
false
person.hasOwnProperty('age')
true

3.4流程控制

if判断

 var age =4;
        if(age>3){
    
      //第一个判断
            alert("haha");
        }else if(age<3){
    
       //第二个判断
            alert("kuwa");
        }else{
    
    
            alert("www");
        }

while循环，避免程序死循环

var age =3;

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

for循环

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

forEach循环

var age =[12,3,4,13,22,11,123,33];
        age.forEach(function (value){
    
    
            console.log(value)
        })

3.5Map和Set

ES6的新特性

//Es6  Map
        //学生的成绩；学生的名字
        // var names=["a","b","c"];
        //var scores=[100,90,80];
        var map=new Map([['a',100],['b',90],['c',80]]);
        var name = map.get('a');//通过key获得value
        map.set('admin',123456);  //新增或修改
		map.delete('a');//删除一个元素

//Set 无序不重复集合
var set= new Set([3,1,1,1,1]);//set可以去重
        set.add(2);//添加
        set.delete(1);//删除
        console.log(set.has(3));//是否包含某个元素

3.6iterable迭代

//通过for of   /for in下标
var arr=[3,4,5];
        for(var x of arr) {
    
    
            console.log(x);
        }

遍历map

var map=new Map([["a",100],["b",90],["c",80]]);
        for(let x of map) {
    
    
            console.log(x);
        }

遍历set

 var set=new Set([5,6,7]);
        for (let x of set)
            console.log(x);

遍历下标

for(let x in arr)
        {
    
    
            console.log(x)
        }

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

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

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

var 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

以前

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

            }
        }

Es6引入新特性，获取除了已经定义的函数之外的所有函数~ …

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

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=1;
        x=x+1;
    }

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

function qj() {
    
    
        var x = 1;
        //内部函数可以访问外部函数成员，反之不行。
        function qj2() {
    
    
            var y= x+1;//
        }
        var z=y+1;//
    }

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

function qj() {
    
    
        var x = 1;
        //内部函数可以访问外部函数成员，反之不行。
        function qj2() {
    
    
            var x= 'A';//
            console.log('inner'+x)
        }
       console.log('outer'+x)
        qj2();
    }
    qj();

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

提升变量的作用域

function qj(){
    
    
        var x="x"+y;
        console.log(x);
        var y='y';
    }
    qj();
结果：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

        //之后随意用
    }

全局函数

//全局变量
    var x =1;
    function f(){
    
    
        console.log(x);
    }
    f();
    console.log(x)

全局对象window

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

alert本身也是一个window的变量；

//全局变量
    var x ='xxx';
    window.alert(x);
    var old_alert=window.alert;
   // old_alert(x);
    window.alert=function (){
    
    

    }
    //发现alert（）失效了
    window.alert(123);

    //恢复
    window.alert=old_alert;

    window.alert(456);

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

规范

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

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

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

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

jQuery===￥

局部作用域

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

全局作用域

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

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

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之前定义常量，只要用全部大写字母命名的变量就是常量;建议不要修改这样的值。

在ES6引入了常量关键字 const

const PI='3.14'   //只读变量
    console.log(PI)
    PI='123';//此处不可以修改Uncaught TypeError: Assignment to constant variable

4.3 方法

定义方法

 var kk = {
    
    
        name:'lxh',
        bitrh:2000,
        //方法
        age:function (){
    
    
            var now=new Date().getFullYear();
            return now-this.bitrh;
        }
        //今年-出生年
    }
 //属性
    kk.name
    //方法
    kk.age()

this代表什么？

function getAge(){
    
    
        var now=new Date().getFullYear();
        return now-this.bitrh;
    }
    var kk = {
    
    
        name:'lxh',
        bitrh:2000,
        age:getAge()
    }
    //kk.age()     ok
    //getAge()     NaN     Windows对象

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

apple

在js中可以控制this指向

function getAge(){
    
    
        var now=new Date().getFullYear();
        return now-this.bitrh;
    }
    var kk = {
    
    
        name:'lxh',
        bitrh:2000,
        age:getAge()
    };
    var xm = {
    
    
        name:'hxl',
        bitrh:2001,
        age:getAge()
    };
    //kk.age()     ok
    //getAge()     NaN     Windows对象
    getAge.apply(kk,[]);//this指向了kk这个对象，参数为空
    getAge.apply(xm,[]);

5.内部对象

标准对象

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

5.1Date

基本使用

var now = new Date();//Mon Jan 18 2021 08:50:54 GMT+0800 (中国标准时间)
    now.getFullYear();//年
    now.getMonth();//月
    now.getDate();//日
    now.getDay();//星期几
    now.getHours();//时
    now.getTime();//时间戳，全世界统一 1970.1.1  0：00：00到现在的毫秒数

转换

console.log(new Date(1610931054576))
VM182:1 Mon Jan 18 2021 08:50:54 GMT+0800 (中国标准时间)
undefined
now.toLocaleDateString
ƒ toLocaleDateString() {
    
     [native code] }//注意：调用的是方法！！！
now.toLocaleDateString()
"2021/1/18"
now.toGMTString
ƒ toUTCString() {
    
     [native code] }
now.toGMTString()
"Mon, 18 Jan 2021 00:50:54 GMT"

5.2 JSON

JSON是什么

一种轻量级交换格式。
简洁和清晰的层次结构。

JavaScript中一切皆为对象，任何js支持的类型都可以用json来表示；numbei,string…

格式：

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

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

很多人搞不清楚json和js对象的区别

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

6.面向对象编程

原型对象

JavaScript，Java，c# 面向对象：JavaScript有些区别

类：模板
对象：具体实例

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

原型：

var Student ={
    
    
        name:"kk",
        age:3,
        run:function (){
    
    
            console.log(this.name+"run...");
        }
    };
    var xiaoming={
    
    
        name:"xiaoming"
    };
    //小明的原型时 Student
    xiaoming.__proto__=Student;
//xiaoming.run()
//xiaomingrun...

class继承

class关键字是在Es6引入的。

1.定义一个类,属性，方法

//定义一个学生的类
    class Student{
    
    
        constructor(name) {
    
    
            this.name=name;
        }
        hello(){
    
    
            alert('hello')
        }
    }

    var kk=new Student("kk");
    var kk1=new Student("kk1");
//kk.hello()
//kk.name
//"kk"
//kk1.name
//"kk1"

2.继承

//定义一个学生的类
    class Student{
    
    
        constructor(name) {
    
    
            this.name=name;
        }
        hello(){
    
    
            alert('hello')
        }
    }
    class xxs extends Student{
    
    
        constructor(name,grade) {
    
    
            super(name);
            this.grade=grade;
        }
        mygrade(){
    
    
            alert("我是一名小学生");
        }
    }
    var kk1=new xxs("kk1",1)

本质：查看对象原型

原型链

__ proto __

7.操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器关系？

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

BOM：浏览器对象模型

IE
Chrome
Safari
FireFox

第三方浏览器

qq浏览器
360浏览器

Windows(重要)

Windows代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
1105
window.innerWidth
225
window.outerHeight
825
window.outerWidth
886

Navigator

navigator，封装了浏览器信息

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

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

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

screen

代表屏幕尺寸

screen.width
1680
screen.height
1050

loction(重要)

location代表当前页面的URL信息

location.host: "localhost:63342"   //主机

location.hostname: "localhost"  //姓名
location.protocol: "http:"   //协议
location.reload: ƒ reload()  //刷新网页
location.https://blog.csdn.net/Barry_kk?spm=1000.2115.3001.5343  //定位

document

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

document.title
"Title"
document.title='kk'
"kk"

获取具体的文档树节点

<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

<script src="aa.js"></script>
<!--恶意人员获得cookie-->

服务器端可以设置cookie :httpOnly

history

history代表浏览器的历史记录

history.forward  //前进
hisrory.back     //后退

8.操作DOM对象（重点）

核心

浏览器网页就是一个DOM树形结构！（文档对象模型）

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

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

获得dom节点

//  对应css选择器
    var h1=document.getElementsByTagName('h1');//标签选择器获得节点
    var p1=document.getElementById('p1');//id选择器获得节点
    var p2=document.getElementsByClassName('h1');
    var father=document.getElementById('father');

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

原生代码，之后尽量使用jquery

更新dom节点

<div id="id1">

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

</script>

操作文本

**id1.innerText=‘123’**修改文本的值 ///“123”
id1.innerHTML=’< strong> 123 </ strong>’ //可以解析HTML文本标签

操作JS style

id1.style.color='red';//属性使用字符串 包裹
"red"
id1.style.fontSize='20px';//- 转驼峰命名问题
"20px"
id1.style.padding='2em';
"2em"

删除节点

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

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

		//删除是一个动态的过程  console.log()
father.removeChild(father.children[0])//cw
father.removeChild(father.children[0])//错误
father.removeChild(father.children[0])//cw
</script>

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

插入节点

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

<body>
<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');
</script>
</body>

控制台中     list.appendChild(js)   -》可以追加节点

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

<body>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    //通过JS创建一个新节点
    var newP=document.createElement('p');
    newP.id='newP';
    newP.innerText='hello,kk';
    list.appendChild(newP);
</script>
</body>

插入到固定顺序位置

<body>
<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 ee=document.getElementById('ee');
    var js=document.getElementById('js');
    var list=document.getElementById('list')
    list.insertBefore(js,ee);
</script>

9.操作表单（验证）

表单是什么

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

表单目的：提交信息

获得要提交的信息

<body>
<form action="post">
   <p><span>用户名</span> <input type="text" id="username"></p>
<!--    多选框的值，就是定义好的value值-->
    <p><soan>性别</soan>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女</p>
</form>
<script>
    var input_text=document.getElementById('username');
    var boy_radio=document.getElementById('boy')
    var girl_radio=document.getElementById('girl')
    //111111对于单选多选框等等固定的值
    // 控制台中  boy_radio.checked
    // 控制台中  boy_radio.checked=true

    //222222得到输入框的值
    // 控制台中  input_text.value
    //修改输入框的值
    //控制台中   input_text.value='111'
</script>
</body>

提交表单

<body>
<form action="#" method="get">
    <p><span>用户名：</span> <input type="text" id="username" name="username"></p>
    <p><span>密码：</span> <input type="text" id="password" name="password"></p>
<!--绑定事件-->
   <button type="button" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
    
    
   var uname=document.getElementById('username');
   var pwd=document.getElementById('password');
    console.log(uname.value);  //value就是内容
    console.log(pwd.value);    //value就是内容
    pwd.value='*********';
}
</script>
</body>

10.jQuery

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

javascript和jQuery：工具类

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

选择器

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


    //jquery    css中选择器全可用
    $(’p‘).click()  //标签选择器
    $(’#id1‘).click()  //id选择器
    $(’.class‘).click()  //class选择器

</script>

jQuery事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        #divMove{
     
     
            width: 500px;
            height: 500px;
            border: 3px solid red;
        }
    </style>
</head>
<body>
<!--获取鼠标当前的坐标-->
mouse:      <span id="mouseMove"></span>
<div id="divMove">
    点这里移动鼠标试试
</div>
<script>
    //当网页元素加载完毕之后，响应事件
    $(function aaa() {
     
     
        $('#divMove').mousemove(function (e) {
     
     
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    });

</script>

操作dom元素

//节点文本操作
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>
<ul id="test-ul">
    <li class="jsq">javascript</li>
    <li name="python">python</li>
</ul>
<script>
    //document.getElementById()
    $('#test-ul').text();  //获得值
     //  $('#test-ul').text(’设置值‘);  //设置值
    $('#test-ul').html();   //获得值
    
    
    $('#test-ul[name=python]').show();
    $('#test-ul[name=python]').hide();

    $('#test-ul').css({
     
     'color':'red'})

</script>

</body>

11.如何巩固js

看框架源码 jQuery
看游戏源码源码之家
巩固html css （拔网站，对应修改看效果）

12.常用工具相应

element
ant design
docsify

JS超详细学习笔记