文章目录
- 绪论
- 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>
结语
『心之所愿，无所不成。』—— 「网络」
