1. What is JavaScript

1.1 Overview

JavaScript is the most popular scripting language in the world.

A qualified back-end personnel must be proficient in JavaScript.

1.2 History

ECMAscript can be understood as a JavaScript standard. The latest version has reached the es6 version, but most browsers still only support es5 codes!

Development environment—online environment, the versions are inconsistent.

2. Quick Start

2.1 Introducing JavaScript

1. Internal label

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

2. External introduction

abc.js

//...

test.html

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

2.2 Getting Started with Basic Grammar

<!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>

Browser prerequisite knowledge:

2.3. Data type

Numeric Text Graphic Audio Video…

Variable (definition is that it cannot start with a number)

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

number

js does not distinguish between decimals and integers Number

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

string

‘abc’ ‘‘abc’’

Boolean value

true , flase

logic operation

！

comparison operator

= assignment

== Equal (if the type is different and the value is the same, it will also be judged as true)

=== Absolutely equal (same type as value)

Notice:

NaN does not want to wait for all values, including yourself
Only isNaN(NaN) can be used to judge whether the number is NaN

Floating point problem:

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

Try to avoid using floating-point numbers for calculations, there are precision problems!

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

null and undefined

empty
undefined undefined

array

Arrays in java must be of the same type, a series of objects of the same type, which is not required in js!

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

Go to the array subscript, if it is out of bounds, it will be undefined

object

Objects are curly brackets, arrays are square brackets

, use commas to separate each property, do not add the last one

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

get the value of the object

person.name
"kk"

2.4 Strictly check the format

（‘use strict’；）

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

3. Data type

3.1 Strings

For normal strings we use ' ' or " " to wrap
Note the escape character \

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

multiline string writing

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

template string

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

string length

str.length

Mutability of strings, immutability

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

case conversion

//注意：这里是方法，不是属性
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 Arrays

Array can contain any data type

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

length

 arr.length

Note: If you assign values to arr and length, the size of the array will change~ If the assignment is too small, the elements will be lost

indexOf, get the subscript index through the element

arr.indexOf(2)
1

The 1 of the string and the number 1 are different!

slice() intercepts a part of Array and returns a new 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 and pop (push tail and pop tail)

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() (press the head and pop the head) (same as 4)
sort sort()

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

element inversion

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

known()

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

Note: concat() does not modify the array, it just returns a new array

connector join

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

Print the concatenated array, concatenated with a specific string

Multidimensional Arrays

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

Array: store data (how to save, how to get, methods can be realized)

3.3 Objects

several key-value pairs,

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

Objects in JS, {…} represent an object, the key-value pair describes the attribute xxxx:xxxx, multiple attributes are separated by commas, and the last attribute does not add a comma.

All keys in JavaScript are strings and values are arbitrary objects!

object assignment

person.age=16
16

Use an object property that does not exist, no error will be reported! undefined

person.sss
undefined

Dynamically delete properties, delete properties of objects through delete

delete person.name
true

Dynamically add

person.haha="haha"
"haha"

Determine whether the attribute value is in the object! xxx in xxx

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

Determine whether a property is hasOwnProperty() owned by the object itself

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

3.4 Process control

if judgment

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

while loop, avoid program infinite loop

var age =3;

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

for loop

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

forEach loop

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

3.5Map and Set

New Features of 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.6 iterable iteration

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

Traversing the map

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

traverse set

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

traversal subscript

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

4. Function

4.1 Defining functions

absolute value function

Definition one

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

Once the return is executed, it means the function ends and the result is returned!

If return is not executed, the function will return the result after execution, and the result is undefined.

Definition method two

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

function(x){...} This is an anonymous function, but the result can be assigned to abs, and the function can be called through abs!

Call functions

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

Parameter problem: javascript can pass any number of parameters, or no parameters.

Is there a problem with the parameters coming in? Assuming that there is no parameter, how to avoid

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

arguments

argumentis a free keyword given by JS;

Represents that all the parameters passed in are an array.

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

Question: arguments contains all parameters, sometimes we want to use extra parameters for additional operations, and some parameters need to be excluded.

rest

before

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

            }
        }

Es6 introduces new features to get all functions except the ones already defined~…

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

The rest parameter can only be written after and must be marked with ....

4.2 The scope of variables

In javascript, var definition variables are actually scoped.

Assuming it is declared in the function body, ~ (closure) cannot be used outside the function body

function qj(){
    
    
        var x=1;
        x=x+1;
    }
    x=x+2；   //  Uncaught ReferenceError: x is not defined

If two functions use the same variable name, as long as they are inside the function, there is no conflict

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

Inner functions can access outer function members, but not vice versa

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

Suppose, the same name of the inner function variable and the outer function variable!

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

Assuming that in JavaScript, looking for variables from a function starts from its own function~, search from the inside to the outside! Assuming that a function variable with the same name exists externally, the internal function variable will shield the external function variable

Increase the scope of variables

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

Description: The js execution engine automatically upgrades the declaration of y, but does not upgrade the assignment of variable y;

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

This is a feature that existed at the beginning of JavaScript, and it has been developed into a standard; all variable definitions are placed in the head of the function, do not place them randomly, and are easy to maintain code

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

        //之后随意用
    }

global function

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

The global object window

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

alert itself is also a window variable;

//全局变量
    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 actually has only one global scope. Any variable (function can also be regarded as a variable), if it is not found within the scope of the function, it will look outside. If it is not found in the global scope, an error will be reported ReferenceError

specification

Since all our global variables will be bound to windows, if different js files use the same global variables, conflicts ~ - "" "" how can reduce conflicts?

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

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

Put all your own code into the unique space name you define to reduce the problem of global naming conflict~

jQuery===￥

local scope

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

global scope

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

Es6 keywords to solve the problem of local scope conflicts!

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

It is recommended to use let to define local scope~

constant const

To define constants before Es6, as long as variables named with all uppercase letters are constants; it is recommended not to modify such values.

The constant keyword const was introduced in ES6

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

4.3 Method

define method

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

what does this stand for?

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 cannot be pointed to, it is the object that calls it by default

apple

You can control this pointing in js

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. Internal objects

standard object

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

5.1Date

basic use

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到现在的毫秒数

convert

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

What is JSON

A lightweight interchange format.
Concise and clear hierarchy.

Everything in JavaScript is an object, and any type supported by js can be represented by json; numbei, string...

Format:

Objects are enclosed in curly braces {}
Arrays are enclosed in square brackets []
All key-value pairs use 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":"男"}')

Many people don't know the difference between json and js objects

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

6. Object Oriented Programming

prototype object

JavaScript, Java, c# Object-Oriented: JavaScript has some differences

Class: template
Object: concrete instance

In JavaScript, we need to change our way of thinking!

prototype:

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 inheritance

The class keyword was introduced in ES6.

1. Define a class, attribute, method

//定义一个学生的类
    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. Inheritance

//定义一个学生的类
    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)

Essence: view object prototype

prototype chain

__ proto __

7. Operate BOM objects (emphasis)

browser introduction

JavaScript and browser relationship?

JavaScript was born to allow it to run in the browser!

BOM: Browser Object Model

IE
Chrome
Safari
FireFox

third party browser

qq browser
360 browser

Windows (important)

Windows stands for browser window

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

Navigator

navigator, which encapsulates browser information

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"

Most of the time, we will not use the navigator object, because it will be considered modified!

It is not recommended to use these attributes to judge and write code

screen

Represents the screen size

screen.width
1680
screen.height
1050

location (important)

location represents the URL information of the current page

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 represents the current page, the number of HTML DOM documents

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

Get a specific document tree node

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

get cookie

document.cookie
//

Hijacking cookie principle

www.taobao.com

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

Cookies can be set on the server side: httpOnly

history

history represents the history of the browser

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

8. Manipulate DOM objects (emphasis)

core

A browser web page is a DOM tree structure! (Document Object Model)

UPDATE: Updating Dom Nodes
Traverse DOM nodes: get Dom nodes
Delete: Delete a Dom node
add: add a new node

To operate a dom node, you must first obtain the dom node!

get dom node

//  对应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    下一个节点

Native code, try to use jquery later

update dom node

<div id="id1">

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

</script>

action text

**id1.innerText='123'**Modify the value of the text ///"123"
id1.innerHTML='<strong>123</strong>' // can parse HTML text tags

Operate JSstyle

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

delete node

Steps to delete a node: first get the parent node and then delete yourself through the parent node!

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

Note: When deleting multiple nodes, children are changing all the time, so be sure to pay attention

insert node

We have obtained a certain dom node, assuming that the dom node is empty, we add an element through innerHTML, but this DOM node already has elements, so we can't do this! will generate an override

<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)   -》可以追加节点

Create a new tag for insertion

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

Insert at a fixed sequential position

<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. Operation form (validation)

what is a form

text boxtext
drop down box
single button radio
hidden field checkbox
Password box password
…

Form purpose: submit information

get information to submit

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

submit Form

<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 and jQuery: tools

The jQuery library, which contains a large number of JavaScript functions

Selector

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


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

</script>

jQuery event

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

Manipulate dom elements

//节点文本操作
<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. How to consolidate js

Look at the framework source jQuery
Look at the source code of the game
Consolidate html css (pull out the website, modify accordingly to see the effect)

12. Corresponding common tools

element
ant design
docsify

JS super detailed study notes