Js基本用法

Js技巧—-1

jquery：

链接：https://pan.baidu.com/s/1HhReZaXg27nO64SQmdRRnQ
提取码：xstv

export和export default的区别

Js例子1：

html

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js2</title>
    <link rel="stylesheet" href="js2.css">
</head>

<body>
    <div></div>
    <br>
    <input type="text" name="" id="">
</body>
<script type="module">
    console.log("hello");
    import {
        main,
        add,
        Class_,
        Event
    } from "/static/js/js2.js";
    main();
    console.log(add(5,3));
    Class_();
    Event();
</script>

</html>

css

1
2
3
4
5
div{
    width: 300px;
    height: 300px;
    background-color: palegoldenrod;
}

js

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
let person = {
    name: 'lwd',
    age: '21',
    money: 0,
    friends: ['Bob', 'Alice', 'Lucy'],
    clothes: {
        color: 'red',
        price: 20,
    },
    add_money: function (x) {
        this.money += x;
        //this：拥有这个函数的对象，this==person
    }
}

function main() {
    console.log(person.money);
    person.add_money(10);
    console.log(person.money);

    console.log(person["money"]);
    person["add_money"](10);
    console.log(person.money)

    let a = ['a', 'b', 1, 2, 3, [5, 6, 7]];
    let b = [
        function () {
            console.log("hello world");
        }
    ]
    console.log(a);
    b[0]();
    a[0] = 2;
    console.log(a);
    a.pop();
    a.push(30);
    console.log(a);

    let p = [2, 5, 2, 3, 56, 7, 2, 34, 2, 1, 53, 7, 4];
    p.splice(2, 3); //删除从第二个元素开始的三个元素
    console.log(p);
    p.sort();
    console.log(p);

}

function add(a, b) {
    return a + b;
}

class Point {
    constructor(x, y) {
        this.x = x;
        // this指在下面代码中
        // Point生成的实例p
        this.y = y;
    }

    init() {
        this.sum = this.x + this.y;
    }

    toString() {
        return `(${this.x}, ${this.y})`;
    }
}

class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x, y);
        this.color = color;
    }
    // 在这里super指的是父类

    toString() {
        return `${this.color} ${super.toString}`;
        // 在这里
        // this指子类ColorPoint生成的实例
        // super指父类Point生成的实例
    }
}

function Class_() {
    let p = new Point(3, 4);
    console.log(p.x, p.y);
    console.log(p.toString());
    p.init();
    console.log(p.sum);
}

//
let div = document.querySelector('div');
let input = document.querySelector('input');

function Event() {
    // div.addEventListener('click', function (event) {
    //     console.log(event.type);
    // }); // 鼠标左键点击

    // div.addEventListener('dblclick', function (event) {
    //     console.log(event.type);
    // }); // 鼠标左键双击

    // div.addEventListener('contextmenu', function (event) {
    //     console.log(event.type);
    // }); //鼠标右键点击

    // div.addEventListener('mousedown', function (event) {
    //     console.log(event.type);
    // }); //鼠标按下

    // div.addEventListener('mouseup', function (event) {
    //     console.log(event.type);
    // }); //鼠标弹起

    // input.addEventListener('keydown', function (event) {
    //     console.log(event.code);
    //     console.log(event.shiftKey);
    // }); //键盘

    // input.addEventListener('focus', function (event) {
    //     console.log(event.type);
    // }); //聚焦

    // window.addEventListener('resize', function (event) {
    //     console.log(event.type);
    // }); // 跳转窗口大小

    // window.addEventListener('load', function (event) {
    //     console.log(event.type);
    // }); // 当元素被加载完成

}

export {
    main,
    add,
    Class_,
    Event
}

Js例子2：

html

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用库</title>
    <link rel="stylesheet" href="js3.css">
</head>

<body>
    <div>
        <a href="https://space.bilibili.com/482541999?spm_id_from=333.1007.0.0" target="_blank">bilibili</a>
    </div>
    <div class="div_class"></div>
    <div id="div_id"></div>

    <br>
    <button id="hide_btn">隐藏</button>
    <br>
    <button id="show_btn">显示</button>
    <br>
    <br>

    <div id="div_id2">
        单击出现
    </div>
    <div id="div_id3">
        出现后<br>双击删除
    </div>

    <br>
    <div id="div_id4">点击添加一个类<br>该类切换背景颜色</div>
    <div id="div_id5">点击通过设置css修改样式</div>

    <br>
    <div class="div_class6" id="div_id6">
        <p style="color:black;">
            点击后该内容会被获取
        </p>
        <input type="text">
    </div>

    <br>
    <div class="div_c1">
        div_c1
        <div class="div_c2">
            div_c2
            <div class="div_c3">
                div_c3
            </div>
        </div>
    </div>

    <br>

    <div id="div_id7">
        单击每1秒循环打印HHH
        <br><br>
        双击暂停
    </div>
    <div id="div_id8">
        单击延长
    </div>
    <div id="div_id9"></div>
</body>

<script src="/static/js/jquery-3.3.1.js"></script>
<script type="module">
    import {
        main,
    } from '/static/js/js3.js';

    main();
</script>

</html>

css

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
div{
    width: 100px;
    height: 100px;
    background-color: palegoldenrod;
}

.div_class{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
}

#div_id{
    width: 100px;
    height: 100px;
    background-color: lawngreen;
}

#div_id2{
    width: 100px;
    height: 100px;
    background-color: orange;
    box-sizing: border-box;
}

#div_id3{
    width: 100px;
    height: 100px;
    background-color: mediumvioletred;
    box-sizing: border-box;
    color: aliceblue;
}

p{
    color:brown;
}

.my_div{
    background-color: teal;
}

#div_id5{
    background-color: yellow;
}

.div_class6{
    width: 100px;
    height: 100px;
    background-color: violet;
}

#ID{
    background-color: coral;
}

.div_c1{
    width: 300px;
    height: 300px;
    background-color: aquamarine;
}
.div_c2{
    width: 200px;
    height: 200px;
    background-color: blueviolet;
    margin-top: 20px;
}
.div_c3{
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
    margin-top: 20px;
}

#div_id7{
    background-color: aqua;
}
#div_id8{
    background-color: yellowgreen;
}
#div_id9{
    background-color: teal;
}

js

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
function main() {
    let $div = $('div');
    console.log($div);

    let $div_2 = $('.div_class');
    console.log($div_2);

    let $div_3 = $('#div_id');
    console.log($div_3);

    // 可以用之前定义过的div来代替$('div')
    $('div').on('click', function () {});

    $('#div_id').on('click', function () {
        console.log('click div_id');
        //解除事件绑定
        $('#div_id').off('click');
    });


    // 根据名称解绑事件
    $('.div_class').on('click.name1', function () {
        console.log('clicl.name1');
        $('.div_class').off('click.name2');
    });

    $('.div_class').on('click.name2', function () {
        console.log('clicl.name2');
    });

    $('a').on('click', function (e) {
        console.log('click a');
        // e.stopPropagation(); //阻止事件向上传递
        // e.preventDefault(); // 阻止事件发生，但不阻止事件向上传递

        return false; //等价于同时执行上述两条命令
    });


    // 显示与隐藏
    let $btn_hide = $('#hide_btn');
    let $btn_show = $('#show_btn');

    $btn_hide.click(function () {
        $div_2.hide(1000);
    });

    $btn_show.click(function () {
        $div_2.show(1000);
    });

    let $a_2 = $(`<a id="a_2" href="https://space.bilibili.com/1219196749/?spm_id_from=333.999.0.0" target="_blank"><p>唐九夏还想再躺一下</p></a>`);
    // 元素的添加、删除
    $('#div_id2').click(function () {
        $('#div_id2').append($a_2);
    });

    $('#div_id3').click(function () {
        $a_2.remove();
    });

    // 对类的操作
    $('#div_id4').click(function () {
        $('#div_id4').addClass('my_div');
    });

    $('#div_id4').dblclick(function () {
        $('#div_id4').removeClass('my_div');
    });

    // 对Css样式进行设置
    $('#div_id5').click(function () {
        $('#div_id5').css({
            width: '200px',
            height: '200px',
            'background-color': 'blue',
        })
    });

    // 获取html标签属性及对其操作
    $('.div_class6').click(function () {
        console.log($('.div_class6').attr('id'));
        $('.div_class6').attr('id', 'ID');
    });

    // 对HTML内容、文本的操作
    $('.div_class6').click(function () {
        console.log($('.div_class6').html());
        console.log($('.div_class6').text());
        $('input').val('hhh');
    });

    // 查找
    $('.div_c3').click(function () {
        console.log(
            $('.div_c3').parent('.div_c2')
        );
    });

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

    // 设定时间
    let fun;
    $('#div_id7').click(function () {
        if (fun) return false;
        fun = setInterval(function () {
            console.log('HHH');
        }, 1000);
    });

    $('#div_id7').dblclick(function () {
        clearInterval(fun);
    });

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

    $('#div_id8').click(function () {
        let step = function (timestamp) {
            $('#div_id8').width($('#div_id8').width() + 1);
            requestAnimationFrame(step);
        };

        requestAnimationFrame(step);
    });

    // Map Set
    let map = new Map();
    map.set('name', 'lwd');
    map.set('age', 21);
    console.log(map)
    map.delete('age');
    console.log(map);

    let set = new Set();
    set.add('lwd');
    set.add(18);
    set.add(function () {
        console.log(hh);
    })
    console.log(set);

    // localStorage可以在用户的浏览器上存储键值对
    localStorage.setItem('name', 'lwd');
    console.log(localStorage.getItem('name'));
    localStorage.removeItem('name');
    console.log(localStorage.getItem('name'));


    // JSON
    let obj = {
        'name': 'lwd',
        'age': 18,
    };

    //Json转字符串
    let str = JSON.stringify(obj);
    console.log(str);
    let new_obj = JSON.parse(str);
    console.log(new_obj);

    // 日期
    
};

export {
    main,
}

讲义

选择器(类似css选择器)

1
2
3
$('div');
$('.big-div');
$('div > p')

事件

$(selector).on(event, func)绑定事件，例如：

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

$(selector).off(event, func)删除事件，例如：

1
2
3
4
5
$('div').on('click', function (e) {
    console.log("click div");

    $('div').off('click');
});

当存在多个相同类型的事件触发函数时，可以通过click.name来区分，例如：

1
2
3
4
5
$('div').on('click.first', function (e) {
    console.log("click div");

    $('div').off('click.first');
});

在事件触发的函数中的return false等价于同时执行：(在提交表单时，点击submit时不希望执行该按钮默认的事件发生)

1
2
e.stopPropagation()：阻止事件向上传递
e.preventDefault()：阻止事件的默认行为

元素的隐藏、展现

1
2
3
4
$A.hide()：隐藏，可以添加参数，表示消失时间
$A.show()：展现，可以添加参数，表示出现时间
$A.fadeOut()：慢慢消失，可以添加参数，表示消失时间
$A.fadeIn()：慢慢出现，可以添加参数，表示出现时间

元素的添加、删除

1
2
3
4
5
$('<div class="mydiv"><span>Hello World</span></div>')：构造一个jQuery对象
$A.append($B)：将$B添加到$A的末尾
$A.prepend($B)：将$B添加到$A的开头
$A.remove()：删除元素$A
$A.empty()：清空元素$A的所有儿子

对类的操作

1
2
3
$A.addClass(class_name)：添加某个类
$A.removeClass(class_name)：删除某个类
$A.hasClass(class_name)：判断某个类是否存在

对CSS的操作

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

对标签属性的操作

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

对HTML内容、文本的操作

不需要背每个标签该用哪种，用到的时候Google或者百度即可。

1
2
3
$A.html()：获取、修改HTML内容
$A.text()：获取、修改文本信息
$A.val()：获取、修改文本的值

查找

1
2
3
4
$(selector).parent(filter)：查找父元素
$(selector).parents(filter)：查找所有祖先元素
$(selector).children(filter)：在所有子元素中查找
$(selector).find(filter)：在所有后代元素中查找

ajax

GET方法：

1
2
3
4
5
6
7
8
9
10
$.ajax({
    url: url,
    type: "GET",
    data: {
    },
    dataType: "json",
    success: function (resp) {

    },
});

POST方法：

1
2
3
4
5
6
7
8
9
10
$.ajax({
    url: url,
    type: "POST",
    data: {
    },
    dataType: "json",
    success: function (resp) {

    },
});

ES6语法补充

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
const person = {
  name: "lwd",
  talk: function () {
    console.log(this);
  }
}

person.talk(); //this指向调用它的person

const talk = person.talk;
talk(); //当没有调用它的时候，this默认指向window


// 这样导致this所指向的调用者发生改变

// 如何避免：普通函数可以改变this的指向
const talk2 = person.talk.bind(person);
console.log('------------------');
talk2();

///////////////////////////////////////////
//普通函数是谁调用this指向谁，
//而箭头函数的this指向定义所在作用域的this.
//所以如果我们将箭头函数定义在普通函数内部,
//那箭头函数中的this将指向普通的this,
//即谁调用普通函数就指向谁

// 箭头函数与普通函数
let obj = {
  test0: function () {
    let a = function () {
      console.log('a:', this);
    };
    let b = () => {
      console.log('b:', this)
    };

    a();
    b();
  },
  test1: function () {
    console.log('test1:', this)
  },
  test2: () => {
    console.log('test2:', this);
  },
}

console.log('------------------');
obj.test0();
// a: this指向为Window
// 默认Window调用普通函数a
//////////////////////////////////
// b: this指向obj, 
// 因为箭头函数b定义在test0函数中
// test0函数的this指向obj

console.log('------------------');
obj.test1();
// test1: this指向obj
// obj调用普通函数test1
console.log('------------------');
obj.test2();
// test2: this指向为空, 
// 因为箭头函数test2定义在obj字典中
// obj字典没有this指向

// 对象的解构
let obj2 = {
  name: 'lwd',
  age: 18,
  height: 178,
}

let {
  name,
  age
} = obj2;
console.log('------------------');
console.log(name);
console.log(age);

//数组和对象的展开
let a = [1, 2];
let b = [3, 4];
let c = [...a, ...b, 5, 6];
console.log('------------------');
console.log(c);


//引入的区别
// Named Export：可以export多个，import的时候需要加大括号，名称需要匹配
// Default Export：最多export一个，import的时候不需要加大括号，可以直接定义别名

Js
前端

本博客所有文章除特别声明外，转载请注明出处！