【前端】JavaScript

AcWing Web应用课 （y总yyds）
认真学习以下几个案例即可：

一、 如何更改输入输出框中的值？

二、几个例题

输入两个数，计算两个数的和。

let input=document.querySelector(".input");
let run=document.querySelector("button")
let output=document.querySelector(".output");


function main(){
     run.addEventListener("click",function(){
        let [a,b]=input.value.split(' ');
        a=parseInt(a);
        b=parseInt(b);
        output.innerHTML=a+b;
     });
}

export{
    main
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

输入一个小数，返回向零取整之后的结果。

let input=document.querySelector(".input");
let run=document.querySelector("button")
let output=document.querySelector(".output");


function main(){
     run.addEventListener("click",function(){
        let x=parseFloat(input.value);
        output.innerHTML=parseInt(x);
     });
}

export{
    main
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

输入a, b, c，输出 (a + b) * c 的值。

let input=document.querySelector(".input");
let run=document.querySelector("button")
let output=document.querySelector(".output");


function main(){
     run.addEventListener("click",function(){
        let [a,b,c]=input.value.split(' ');
        a=parseFloat(a);
        b=parseFloat(b);
        c=parseFloat(c);
        output.innerHTML=(a+b)*c;
     });
}

export{
    main
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

输出如下的菱形。

let input=document.querySelector(".input");
let run=document.querySelector("button")
let output=document.querySelector(".output");


function main(){
     let s="";
     s+="  *\n"
     s+=" ***\n"
     s+="*****\n"
     s+=" ***\n"
     s+="  *\n"
     output.innerHTML=s;
}

export{
    main
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三、JS 类与对象

以Point类和ColorPoint类为例：

class Point{
    constructor(x,y){
        this.x=x;
        this.y=y;
        Point.cnt++;
    }

    init(){
        this.sum=this.x+this.y;// 成员变量可以在任意的成员方法中定义
    }

    toString(){
      //  return '('+this.x+','+this.y+')';
      return `(${this.x},${this.y})`; //格式化写法
    }

    static print_class_name(){ //定义静态方法
        console.log("Point");
    }

}

class ColorPoint extends Point{
    constructor(x,y,color){
        super(x,y);//初始化父类
        this.color=color;
    }

    toString(){
        return `${this.color} ${super.toString()}`
    }
}

Point.cnt=0;//定义静态变量

let main=function(){
    let p=new Point(3,4);
    p.init();
    console.log(p.sum);
    console.log(p.toString());
    ColorPoint.print_class_name();//静态成员方法可以被继承
    console.log(ColorPoint.cnt)//静态成员变量也可以被子类调用
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

四、JS中的事件

JS代码一般通过事件来触发

4.1 鼠标相关的事件

eg.

let div=document.querySelector('div');//获取div标签
let main= function(){
    div.addEventListener('click',function(event){ //在获取的div标签上增加事件监听器，当发生click事件时，触发定义的函数。 其中event是绑定的一个参数。
        console.log(event);
        console.log(event.type);
    });
    

}

export{
    main
}
1
2
3
4
5
6
7
8
9
10
11
12
13

点击div后，打印出来的完整event是这样的：


可以记录此次鼠标点击的各种信息，具体含义在使用的时候可以查文档。
其他触发事件：
click：鼠标左键点击
dblclick：鼠标左键双击
contextmenu：鼠标右键点击
mousedown：鼠标按下，包括左键、滚轮、右键
event.button：0表示左键，1表示中键，2表示右键
mouseup：鼠标弹起，包括左键、滚轮、右键
event.button：0表示左键，1表示中键，2表示右键

4.2 键盘相关的事件

keydown、keyup、keypress

    input.addEventListener('keydown',function(event){
        console.log(event.type,event.code)
    });
1
2
3

4.3 表单相关事件

focus：聚焦
blur：取消聚焦
change：元素内容发生改变

    input.addEventListener('focus',function(event){
        console.log(event.type,event.code)
    });
    input.addEventListener('blur',function(event){
        console.log(event.type,event.code)
    });
1
2
3
4
5
6

4.4 窗口相关事件

resize：页面大小改变触发
scroll：滚动触发
load：页面中所有资源加载完后触发

    window.addEventListener("resize",function(e){
        console.log(e.type);

    });
1
2
3
4

五、JS常用库

y总的学习原则：这些东西只要了解有，然后边写边查

5.1 jQuery

5.1.1 使用

在元素中添加即可；或者官网下载

let main=function(){
    let $div=$('div');
    console.log($div);

    $div.on("click",function(){
        console.log("click div");
        $div.off("click");//解绑 使这个div只能被点击一次
    });

};


export{
    main
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5.1.2 可以用名字区分click事件

let main=function(){
    let $div=$('div');
    console.log($div);

    $div.on("click.name1",function(){
        console.log("click div 1");
        $div.off("click.name1");//解绑 使这个div只能被点击一次
    });

    $div.on("click.name2",function(){
        console.log("click div 2");
    });


};


export{
    main
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5.1.3 阻止事件向上传递

对于以下代码：

    <div>
        <a href="http://www.acwing.com" target="_blank">AcWing</a>
    </div>
1
2
3

对a标签进行点击，不仅触发在a标签上的事件，也触发在div标签上的事件（向上传递）

let main=function(){
    let $div=$('div');
    console.log($div);

    $div.on("click",function(){
        console.log("click div 1");
    });

    $('a').on('click',function(e){
        console.log("click link");
        e.stopPropagation(); //阻止事件向上传递，div的事件没有被触发
     //   e.preventDefault();//阻止当前事件发生
     // return false; 可以直接操作以下两个函数
    });



};


export{
    main
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

5.1.4 元素的隐藏、展现

let main=function(){
    let $div=$('div');
    let $btn_hidden=$('#btn-hidden');
    let $btn_show=$('#btn-show');

    $btn_hidden.on('click',function(){
        $div.hide(1000);
        //hideout 是淡入淡出
    });

    $btn_show.on('click',function(){
        $div.show();
    });
};

export{
    main
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5.1.5 元素添加、删除等

5.1.6 对类的操作

可以对div标签添加一个类my-div

5.1.7 对css的操作

$("div").css("background-color")//获取某个CSS的属性
$("div").css("background-color","yellow")//设置某个CSS的属性
$('div').css({
    width: "200px",
    height: "200px",
    "background-color": "orange",
});
1
2
3
4
5
6
7

5.1.8 对标签属性的操作

$('div').attr('id')//获取属性
$('div').attr('id', 'ID')//设置属性
1
2

5.1.9 对HTML内容、文本的操作

$A.html() // 获取、修改HTML内容
$A.text() // 获取、修改文本信息
$A.val()  // 获取、修改文本的值 一般是获取input、textarea里面的内容
1
2
3

5.1.10 查找

AJAX：
不刷新页面，只从服务端获取某些数据，一般是获取一些Json数据

get方法
url是后端调用的链接，
data可以传字典
success是指：如果没有报错的话，从后端获取信息（resp），调用这个函数，把后端的信息解析出来即可

$.ajax({
    url: url,
    type: "GET",
    data: {
    },
    dataType: "json",
    success: function (resp) {

    },
});
1
2
3
4
5
6
7
8
9
10

5.2 setTimeout与setInterval

setTimeout(func, delay) 事件发生后 x秒执行函数
setInterval(func, delay) 每隔x秒执行函数

clearTimeout() 关闭计时器
clearInterval() 关闭周期执行的函数

区别：

5.3 requestAnimationFrame(func)

requestAnimationFrame(func)
该函数会在下次浏览器刷新页面之前执行一次，通常会用递归写法使其每秒执行60次func函数。调用时会传入一个参数，表示函数执行的时间戳，单位为毫秒。
该函数可以用于做动画

let main=function(){
    let step=function(){
        let $div=$('div').width($('div').width()+1);
        requestAnimationFrame(step);
    };

    // for(let i=0;i<100;i++){
    //     step();
    // }

    requestAnimationFrame(step);



};

export{
    main
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

鼠标单击停止：

let func_id;

let main=function(){
    let step=function(timestamp){
        let $div=$('div').width($('div').width()+1);
        if(timestamp/1000<=10){
            func_id= requestAnimationFrame(step);//递归执行
        } //限制执行时长
        
    };

    //调用该函数
    func_id= requestAnimationFrame(step);

    $('div').on('click',function(){
        cancelAnimationFrame(func_id);
    });
};


export{
    main
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

5.4 Map、Set、localStorage

localStorage：存在用户的浏览器中，无论是否刷新，都不变。可以将用户的喜好之类的存放在本地。

let map=new Map();
map.set('kk',18);
console.log(map.get('kk'));//若没有，返回undefined

let set=new Set();
set.add(1);
set.add(()=>{
    console.log("hello");
}); //插入函数也没有问题

localStorage.setItem('name','zjx');


1
2
3
4
5
6
7
8
9
10
11
12
13
14