当前位置：首页 > news >正文

《前端》JavaScript--常用库API

news 来源：原创 2025/5/1 1:15:01

文章目录

- jQuery
- - 使用方式
  - 选择器
  - 事件
  - 元素的隐藏和展现
  - 元素的添加、删除
  - 对类的操作
  - 对css的操作
  - 对标签属性的操作
  - 对HTML内容、文本的操作
  - 查找（定位某个标签）
  - Ajax
- setTimeout与setInterval
- - setTimeout(func, delay)
  - clearTimeout()
  - setInterval(func, delay)
  - clearInterval()
- requestAnimationFrame(func)
- Map与Set
- - Map
  - Set
- localStorage
- JSON
- 日期
- WebSocket
- window
- canvas

jQuery

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

使用方式

在元素中添加：<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>（acwing官网给我们提供好的）
在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.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++中的哈希表

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

    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对象实例的差值为毫秒数