《前端》JavaScript--常用库API

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

jQuery

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

使用方式 在元素中添加：<script src=" cdn.acwing /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=" .acwing "> 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已存在，则会覆盖原有的valueget(key)：查找关键字，如果不存在，返回undefinedsize：返回键值对数量has(key)：返回是否包含关键字keydelete(key)：删除关键字keyclear()：删除所有元素 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-31getMonth()：返回月，数值为0-11getFullYear()：返回年份getHours()：返回小时getMinutes()：返回分钟getSeconds()：返回秒getMilliseconds()：返回毫秒两个Date对象实例的差值为毫秒数 WebSocket

与服务器建立全双工连接

new WebSocket('ws://localhost:8080')：建立ws连接send()：向服务器端发送一个字符串。一般用JSON将传入的对象序列化为字符串onopen：类似于onclick，当连接建立时触发onmessage：当从服务器端接收到消息时触发close()：关闭连接onclose：当连接关闭后触发 window window.open(" .acwing ")：在新标签栏中打开页面location.reload()：刷新页面location.href = " .acwing "：在当前标签栏中打开页面 canvas

canvas教程