1.11.1 jQuery
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/static/css/index.css">
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="module">
import {
main
} from "/static/js/index.js";
main();
</script>
<!-- <div xxx="18"><span>span-1</span></div>
<input type="text" name="" id="">
<button id="hide-btn">隐藏</button>
<button id="show-btn">显示</button> -->
<div class="div-1">
<div class="div-2">
<div class="div-3">
</div>
</div>
</div>
</body>
</html>
index.css
div {
width: 300px;
height: 300px;
background-color: lightblue;
}
.my-div {
background-color: orange;
}
#ID {
background-color: orange;
}
index.js
//取出第一个div
// let div = document.querySelector('div');
//用jQuery选取div
// let $div = $('div');
let $btn_hide = $('#hide-btn');
let $btn_show = $('#show-btn');
let main = function () {
// console.log($div)
//同样一个事件可能会绑定很多个函数,只解绑click.name2
/*$('div').on('click.name1', function (e) {
console.log('click div1');
$('div').off('click.name2');
})
$('div').on('click.name2', function (e) {
console.log('click div2');
})*/
/*$btn_hide.click(function () {
// $div.hide(1000);//表示需要1000ms来隐藏掉
$div.fadeOut();//淡出
});
$btn_show.click(function () {
// $div.show(1000 );
$div.fadeIn();//淡入
});*/
//构造一个标签
let $a = $(`<a href="https://www.acwing.com">
AcWing
<span>!!!</span>
</a>`);
//单击添加
// $div.click(function () {
// // $div.append($a);
// /*等价于
// $div.append($(`<a href="https://www.acwing.com">
// AcWing
// <span>!!!</span>
// </a>`));*/
// // $div.addClass('my-div')
// // console.log($div.css('background-color'));
// // $div.css({
// // width: "200px",
// // height: "200px",
// // //如果字符串里包含减号要加引号,因为这个减号不知道是作用到字符串里还是视为减号会有歧义
// // "background-color": "orange"
// // });
// //获取属性
// // console.log($div.attr('xxx'));
// //设置属性,将属性id变为ID,div就会调用css中#ID里的内容
// // $div.attr('id', 'ID');
// //输出文本内容
// console.log($div.text());
// //修改div内容
// // console.log($div.text('hello'));
// //输出标签内容
// console.log($div.html());
// //获取值
// console.log($('input').val());
// $('input').val('hahaha');
// });
//双击删除
// $div.dblclick(function () {
// // $a.remove();
// $div.removeClass('my-div');
// })
// let $div3 = $('.div-3');
// console.log($div3.parent('.div-2'));
// console.log($div3.parents('.div-1'));
let $div1 = $('.div-1');
console.log($div1.find('div'));
//ajax可以在不刷新页面的情况下只从服务器端获取某些数据
}
export {
main
}
1.11.2 setTimeout与setInterval
1.11.3 requestAnimationFrame
indx.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/static/css/index.css">
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="module">
import {
main
} from "/static/js/index.js";
main();
</script>
<div></div>
</body>
</html>
index.js
let main = function () {
let $div = $('div');
let func_id;
// $div.click(function () {
// // setTimeout(function () {
// // console.log('hhh');
// // }, 2000);
// if (func_id) return false;
// func_id = setInterval(function () {
// console.log('hhh');
// }, 500);
// });
// $div.dblclick(function () {
// console.log("dblclick");
// clearInterval(func_id);
// });
let last_timestep = 0;
let step = (timestep) => {
console.log(timestep - last_timestep);
last_timestep = timestep;
$('div').width($('div').width() + 4);
if (timestep / 1000 <= 10)
func_id = requestAnimationFrame(step);
};
func_id = requestAnimationFrame(step);
$('div').click(function () {
cancelAnimationFrame(func_id);
});
}
export {
main
}
1.11.4 Map与Set
index.js
let main = function () {
// let map = new Map();
// map.set('name', 'abc');
// map.set('age', 18);
// console.log(map);
// console.log(map.get('name'));
// console.log(map.has('xx'));
// console.log(map.size);
// // map.delete('age');
// // map.clear();
// for (let [key, value] of map) {
// console.log(key, value);
// }
// map.forEach(function (value, key) {
// console.log(key, value);
// })
let set = new Set();
set.add('abc');
set.add(18);
set.add(() => {
console.log('hhh');
});
console.log(set);
set.delete(18);
console.log(set.has(18));
console.log(set.size);
set.clear();
}
export {
main
}
1.11.5 localStorage
index.js
let main = function () {
/*
查看内容:
右键检查,点击应用程序,点击本地存储左边的三角形,点击链接即可查看
*/
localStorage.setItem('name', 'abc');
localStorage.setItem('age', 18);
console.log(localStorage.getItem('name'));
console.log(localStorage);
// localStorage.clear();
// localStorage.removeItem('name');
}
export {
main
}
1.11.6 JSON
index.js
let main = function () {
let obj={
name:'abc',
age:18,
};
let str=JSON.stringify(obj); //string
let new_obj=JSON.parse(str); //object
}
export {
main
}
1.11.7 日期
index.js
let main = function () {
// console.log(Date.now());
// console.log(Date.parse("2022-04-15T15:30:00.000+08:00"))
let starttime = new Date("2023-05-20T15:30:00.000+08:00");
//两个时间段经过的毫秒数
console.log(new Date() - starttime);
let time = new Date();
console.log('星期' + time.getDay());
console.log('日' + time.getDate());
console.log('月' + time.getMonth());
console.log('年' + time.getFullYear());
console.log('小时' + time.getHours());
console.log('分钟' + time.getMinutes());
console.log('秒' + time.getSeconds());
console.log('毫秒' + time.getMilliseconds());
}
export {
main
}
1.11.9 window
index.js
let main = function () {
// $('div').css('cursor', 'pointer');
$('div').click(function () {
// window.open("https://www.acwing.com");
// location.reload();
location.href = "https://www.acwing.com"
});
}
export {
main
}
1.11.10 canvas
index.html
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// ctx.fillStyle="rgb(200,0,0)" 表示用什么样的样式去画,例如字体、颜色等
ctx.fillRect(25, 25, 100, 100); //fill打头的函数是填充
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50); //stroke表示画边框
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>