JavaScript——常用库

文章目录

绪论
jQuery
- 选择器
- 事件
- 修改 css
- 查找
- ajax
setTimeout与setInterval
- setTimeout
- setInterval
requestAnimationFrame
Map与Set
localStorage
JSON
Date
WebSocket
window
canvas
结语

绪论

『时间是伟大的作家，总会写下完美的结局。』—— 「秋之回忆」

jQuery

这个是优化版本的 js 写法，原生 js 比如下面这样子

let main = function () {let div = document.querySelector('div');console.log(div);
}

在这里插入图片描述

可以选择引用这个包来使用，把下面这句话加到 html 的 head 标签里面就行

<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>

或者去官网安装即可:jquery
对比

let main = function () {let div = document.querySelector('div');console.log(div);//上面是 js 原生写法,下面是 jquery 写法let $div = $(`div`);console.log($div);
}

选择器

如下的方式，选择 div , class , id

let $div = $(`div`);
let $div = $(`.mydiv`);
let $div = $(`#mydiv`);

把一个标签里面的子标签选择出来

let $div = $(`#mydiv>p`);

事件

绑定一个鼠标点击事件

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

简写

let $div = $(`div`);$(`div`).click(function () {console.log("click div");});

阻止事件向上传递，阻止事件的默认行为

return false;

隐藏和显示，有很多相关的特效，之后写网站的时候可以看需要什么特效，直接拿过来用就好了

let main = function () {let $div = $(`div`);let $btn_hide = $(`#hide-btn`);let $btn_show = $(`#show-btn`);$btn_hide.click(function () {$div.hide(3000);//里面的参数表示隐藏需要花多长时间，单位是毫秒//感觉效果还是非常炫酷的});$btn_show.click(function () {$div.show();});
}

修改 css

可以直接在 js 文件里面修改标签的 css 样式

$('div').css({width: "200px",height: "200px","background-color": "orange",
});

js 可以操纵类(class),样式(css),标签(id),html,text

查找

$(selector).find(filter)

ajax

用来和后端通信的

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

setTimeout与setInterval

setTimeout

let timeout_id = setTimeout(() => {console.log("Hello World!")
}, 2000);  // 2秒后在控制台输出"Hello World"

setInterval

let interval_id = setInterval(() => {console.log("Hello World!")
}, 2000);  // 每隔2秒，输出一次"Hello World"

requestAnimationFrame

实现动画的效果，一秒展示图片超过 24 张在人脑就会形成动画的效果，目前大部分浏览器一秒钟刷新 60 次

具体的代码里面，有一个递归调用的思路

let step = (timestamp) => {  // 每帧将div的宽度增加1像素let div = document.querySelector('div');div.style.width = div.clientWidth + 1 + 'px';requestAnimationFrame(step);
};requestAnimationFrame(step);

很多开发都是黑盒，就是开发者调用封装好的函数来进行开发

刚刚去尝试了一下，把一个项目仓库设置为私有的，然后通过邀请他人使得被邀请的人具有访问权限，非常方便

Map与Set

一些简单的增删改查

set(key, value)//插入键值对

localStorage

存在用户的浏览器里面

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

JSON

可以实现对象和字符串之间的转换

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

Date

就是和时间相关的一些函数调用，需要的时候去查就好了，可以查年份，月份，日期，周几，小时，分钟，秒，甚至毫秒，下面是一个例子

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

WebSocket

客户端和服务端建立全双工通信

window

对页面进行一些操作

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

canvas

可以在官网用一些现成的函数来写
canvas

<html><head><script type="application/javascript">function draw() {const canvas = document.getElementById("canvas");if (canvas.getContext) {const ctx = canvas.getContext("2d");ctx.fillRect(25, 25, 100, 100);ctx.clearRect(45, 45, 60, 60);ctx.strokeRect(50, 50, 50, 50);}}</script>
</head><body onload="draw();"><canvas id="canvas" width="150" height="150"></canvas>
</body></html>

在这里插入图片描述

<html><head><script type="application/javascript">function draw() {var canvas = document.getElementById("canvas");if (canvas.getContext) {var ctx = canvas.getContext("2d");ctx.beginPath();ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制ctx.moveTo(110, 75);ctx.arc(75, 75, 35, 0, Math.PI, false); // 口 (顺时针)ctx.moveTo(65, 65);ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼ctx.moveTo(95, 65);ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼ctx.stroke();}}</script>
</head><body onload="draw();"><canvas id="canvas" width="150" height="150"></canvas>
</body></html>