《前端》JavaScript--常用库API

jQuery

之前我们想要获取某个div需要使用 document.querySelector 函数来获取，学了 jQuery 之后，写法就变得尤为简单了。let $div = $('div');

使用方式

1. 在元素中添加：<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>（acwing官网给我们提供好的）
2. 在jQuery官网下载

选择器

$(selector)；例如：（select类似于css的选择器，使用范围很广）

$('div');
$('.big-div');//选择某一个类
$('div > p')//选择父节点时div的子标签p

事件

之前我们学过用 addEventListener 来给某个标签绑定事件，但是比较长，
现在我们可以使用 $(selector).on(event, func) 来绑定事件

    let $div = $('div');
    $div.on('click', function() {
        console.log("click div");
    })

用 $(selector).off(event, func) 来删除事件

    let $div = $('div');
    $div.on('click', function() {
        console.log("click div");
        $div.off("click");//解绑，只能点击一次了
    })

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

    let $div = $('div');
    $div.on('click.name1', function() {
        console.log("click div 1");
    })
    $div.on('click.name2', function() {
        console.log("click div 2");
        $div.off("click.name2");
    })

    let $div = $('div');
    $div.on('click', function(e) {
        console.log("click div");
    })

    $('a').on("click", function(e) { //a是一个超链接
        e.stopPropagation();//阻止事件向上传递；a的链接正常打开，但是不会输出：click div，阻止向上传递给父元素
        e.preventDefault();//阻止事件的默认行为；a的链接不能打开，但是会输出：click div
    })

在出发事件函数中加入 return false；等价于上面两个同时发生

元素的隐藏和展现

• $A.hide()：隐藏，可以添加参数，表示消失时间（ms）
• $A.show()：展现，可以添加参数，表示出现时间（ms）
• $A.fadeOut()：慢慢消失，可以添加参数，表示消失时间
• $A.fadeIn()：慢慢出现，可以添加参数，表示出现时间

例如：

    let $div = $("div");
    let $btn_hide = $(".hide-btn");
    let $btn_show = $(".show-btn");

    $btn_hide.click(function() {
        $div.fadeOut(1000);
    })

    $btn_show.click(function() {
        $div.fadeIn(1000);
    })

元素的添加、删除

• $('<div class="mydiv"><span>Hello World</span></div>')：构造一个jQuery对象
• $A.append($B)：将$B添加到 $A的末尾
• $A.prepend($B)：将$B添加到 $A的开头
• $A.remove()：删除元素$A（清楚A所有东西包括儿子）
• $A.empty()：清空元素$A的所有儿子

    let $a = $('<a href="https://www.acwing.com"> acwing </a>');//注意必须是单引号
    $div.append($a);

对类的操作

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

对css的操作

• $("div").css("background-color")：获取某个CSS的属性
• $("div").css("background-color","yellow")：设置某个CSS的属性

可以同时设置多种css属性

    $div.click(function() {
        $div.css({
            width: '500px',
            height: '500px',
            'background-color': 'orange',
        })
    });

对标签属性的操作

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

对HTML内容、文本的操作

• $A.html()：获取、修改HTML内容（返回里面标签）
• $A.text()：获取、修改文本信息（返回标签里面具体的内容）
• $A.val()：获取、修改文本的值（输入型的较多使用）

查找（定位某个标签）

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

Ajax

GET方法：

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

    },
});

POST方法：

$.ajax({
    url: url,//具体的url
    type: "POST",
    data: {
    },
    dataType: "json",
    success: function (resp) {

    },
});

setTimeout与setInterval

setTimeout(func, delay)

delay毫秒后，执行函数func()；例如：

    let $div = $('div');

    $div.click(function() {
        setTimeout(function() {
            console.log("hhh");
        }, 2000);
    })

clearTimeout()

关闭定时器，例如：

setInterval(func, delay)

每隔delay毫秒，执行一次函数func()。第一次在第delay毫秒后执行。

clearInterval()

关闭周期执行的函数

    let interval_id = setInterval(() => {
        console.log("Hello World!")
    }, 2000);  // 每隔2秒，输出一次"Hello World"
    
    clearInterval(interval_id);  // 清除周期执行的函数

requestAnimationFrame(func)

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

例如：

    let step = () => {  
        $('div').width($('div').width() + 1 );//每帧将div的宽度增加1像素
        requestAnimationFrame(step);//递归
    };
    
    requestAnimationFrame(step);

Map与Set

Map

保存键值对，类似于C++中的哈希表

1. 用for…of或者forEach可以按插入顺序遍历
2. 键值可以为任意值，包括函数、对象或任意基本类型

    let map = new Map();
    map.set('name', 'sun');
    map.set('age', 20);

    for(let [key, value] of map) {
        console.log(key, value);
    }

    map.forEach(function(value, key) {
        console.log(value, key)
    })

常用API：

• set(key, value)：插入键值对，如果key已存在，则会覆盖原有的value
• get(key)：查找关键字，如果不存在，返回undefined
• size：返回键值对数量
• has(key)：返回是否包含关键字key
• delete(key)：删除关键字key
• clear()：删除所有元素

Set

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用

常用API：

• add()：添加元素
• has()：返回是否包含某个元素
• size：返回元素数量
• delete()：删除某个元素
• clear()：删除所有元素
• 用for…of或者forEach可以按插入顺序遍历

localStorage

可以在用户的浏览器上永久存储键值对

常用API：

• setItem(key, value)：插入
• getItem(key)：查找
• removeItem(key)：删除
• clear()：清空

JSON

JSON对象用于序列化对象、数组、数值、字符串、布尔值和null

• JSON.parse()：将字符串解析成对象
• JSON.stringify()：将对象转化为字符串

    let obj = {
        name: "sun",
        age: 20,
    };

    let str = JSON.stringify(obj);
    let new_obj = JSON.parse(str);
    console.log(str);

日期

返回值为整数的API，数值为1970-1-1 00:00:00 UTC（世界标准时间）到某个时刻所经过的毫秒数：

• Date.now()：返回现在时刻
• Date.parse("2022-04-15T15:30:00.000+08:00")：返回北京时间2022年4月15日 15:30:00的时刻

与Date对象的实例相关的API：

• new Date()：返回现在时刻
• new Date("2022-04-15T15:30:00.000+08:00")：返回北京时间2022年4月15日 15:30:00的时刻（北京是东八区）
• getDay()：返回星期，0表示星期日，1-6表示星期一至星期六
• getDate()：返回日，数值为1-31
• getMonth()：返回月，数值为0-11
• getFullYear()：返回年份
• getHours()：返回小时
• getMinutes()：返回分钟
• getSeconds()：返回秒
• getMilliseconds()：返回毫秒
• 两个Date对象实例的差值为毫秒数

WebSocket

与服务器建立全双工连接

• new WebSocket('ws://localhost:8080')：建立ws连接
• send()：向服务器端发送一个字符串。一般用JSON将传入的对象序列化为字符串
• onopen：类似于onclick，当连接建立时触发
• onmessage：当从服务器端接收到消息时触发
• close()：关闭连接
• onclose：当连接关闭后触发

window

• window.open("https://www.acwing.com")：在新标签栏中打开页面
• location.reload()：刷新页面
• location.href = "https://www.acwing.com"：在当前标签栏中打开页面

canvas

canvas教程