js部分:
1.
class Point {
constructor(x, y) {
// 当前对象的当前实例
this.x = x;
this.y = y;
Point.cnt++;
}
toString() {
return `(${this.x},${this.y})`;
}
static print_class_name() {
console.log("Point");
}
}
// 类的静态变量,也只能通过类名访问
Point.cnt = 0;
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y);
this.color = color;
}
toString() {
return `${this.color} ${super.toString()}`;
}
}
let person = {
name: 'zf',
age: 18,
money: 0,
frends: ['Bob', 'Alice', 'Lucy'],
clothes: {
color: "red",
price: 20,
},
add_money: function (x) {
this.money += x;
}
}
function main() {
// console.log(person.money);
// person.add_money(5);
// console.log(person.money);
for (let i = 0; i < 5; i++) {
new Point(3, 4);
}
console.log(Point.cnt);
let p = new Point(3, 4);
console.log(p.x, p.y);
console.log(p.toString());
// 静态函数只能通过类名访问
Point.print_class_name();
let q = new ColorPoint(3, 4, 'red');
console.log(q.toString());
}
export {
main,
}
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/static/css/index.css">
</head>
<body>
<script type="module">
import { main } from "/static/js/index.js";
main();
</script>
<div></div>
<input type="text">
</body>
</html>
css部分:
div {
width: 300px;
height: 3000px;
background-color: lightblue;
}
js部分:
// 获取到第一个div
let div = document.querySelector('div');
let input = document.querySelector('input');
let main = function () {
// 1.鼠标
// 2个参数,用来定义事件触发什么函数
// div.addEventListener('mousedown', function (event) {
// console.log(event.type, event.button);
// })
// div.addEventListener('mouseup', function (event) {
// console.log(event.type, event.button);
// })
// 2.键盘
// 需要聚焦获得输入才行
// div加上tabindex属性也能聚焦
// input.addEventListener('keydown', function (event) {
// console.log(event.type, event.code, event.shiftKey, event.ctrlKey, event.altKey);
// })
// input.addEventListener('keyup', function (event) {
// console.log(event.type, event.code, event.shiftKey, event.ctrlKey, event.altKey);
// })
// input.addEventListener('keypress', function (event) {
// console.log(event.type);
// })
// 3.表单
// input.addEventListener('focus', function (event) {
// console.log(event.type);
// })
// input.addEventListener('blur', function (event) {
// console.log(event.type);
// })
// // 取消聚焦的时候识别内容是否与上次的一样?
// input.addEventListener('change', function (event) {
// console.log(event.type);
// })
// 4.窗口
window.addEventListener('resize', function (event) {
console.log(event.type);
})
window.addEventListener('scroll', function (event) {
console.log(event.type);
})
window.addEventListener('load', function (event) {
console.log(event.type);
})
};
export {
main,
}
html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<!-- <div class="mydiv" zf="18">
fasfdasfadsfdasfda
<a href="https://www.acwing.com" target="_blank">AcWing</a>
</div>
<button id="hide-btn">隐藏</button>
<button id="show-btn">展现</button>
<input type="text" name="" id=""> -->
<div class="div-1">
<div class="div-2">
<div class="div3"></div>
</div>
</div>
<script type="module">
import { main } from "/static/js/index.js";
main();
</script>
</body>
</html>
css部分:
div {
width: 300px;
height: 300px;
background-color: lightblue;
}
/* #my-a {
font-size: 30px;
} */
.my-div {
background-color: orange;
}
#ID {
background-color: orange;
}
js部分:
let main = function () {
// 原始写法获取div
// let div = document.querySelector('div');
// console.log(div);
// jquery写法获取div
// let $div = $('.mydiv');
// console.log($div);
// jquery写法绑定事件
// let $div = $('div');
// $div.on("click", function () {
// console.log("click div");
// // 解绑click
// $div.off("click");
// });
// 同时绑定两个事件并解绑其中一个
// let $div = $('div');
// $div.on("click.name1", function () {
// console.log("click div 1");
// // $div.off("click.name2");
// })
// $div.on("click.name2", function () {
// console.log("click div 2");
// $div.off("click.name2");
// })
// 阻止事件向上传递
// let $div = $('div');
// $div.on("click", function () {
// console.log("click div");
// })
// $('a').on("click", function (e) {
// // e.stopPropagation(); // 阻止事件向上传递
// e.preventDefault(); // 阻止当前事件的操作(此时不能打开链接a)
// console.log("click a");
// // return false; // 等价前面两种一起
// })
// 元素的隐藏与展现
// let $div = $('div');
// let $btn_hide = $('#hide-btn');
// let $btn_show = $('#show-btn');
// $btn_hide.click(function () { // click简化写法
// // $div.hide(1000); // 非常帅的特效!
// $div.fadeOut(1000);
// })
// $btn_show.click(() => {
// // $div.show(1000);
// $div.fadeIn(1000);
// })
// 元素的添加与删除
// a定义在外面只会被添加一次
// let $a = $(
// `<a id="my-a" href="https://www.acwing.com">
// AcWing
// <span>!!!</span>
// </a>`);
// $div.click(() => {
// $div.append($a); // 可以合写
// });
// $div.dblclick(() => { // 双击删除a标签
// // $div.remove(); // 删除整棵树
// $div.empty(); // 删除所有儿子
// });
// 对类的操作
// let $div = $('div');
// $div.click(() => {
// $div.addClass('my-div');
// });
// $div.dblclick(() => {
// $div.removeClass('my-div');
// })
// 对CSS的操作
// let $div = $('div');
// $div.click(() => {
// console.log($div.css('background-color'));
// $div.css('background-color', 'orange');
// // 可以传一个对象同时修改多个CSS属性
// })
// 对标签属性的操作
// let $div = $('div');
// $div.click(() => {
// $div.attr('id', 'ID');
// console.log($div.attr('zf'));
// })
// 对HTML内容、文本的操作
// let $div = $('div');
// $div.click(() => {
// // console.log($div.html());
// // $div.text("hello");
// $('input').val('hahaha'); // 对input或者textarea的输入进行获取或者修改
// })
// 查找
// let $div1 = $('.div-1');
// let $div3 = $('.div-3');
// // console.log($div3.parent('div-2'));
// // console.log($div3.parents('div-1'));
// // console.log($div1.children('div'));
// console.log($div1.find('div'));
}
export {
main,
}
js部分:
let main = function () {
let $div = $('div');
let func_id;
$div.click(() => {
if (func_id) return false; // 去除双击事件对单击事件的影响
// 获取函数的id
func_id = setInterval(() => {
console.log("hhh");
}, 500);
// setInterval每2s循环一次
});
$div.dblclick(() => {
console.log("dblclick");
clearInterval(func_id);
});
}
export {
main,
}
js部分:
let main = function () {
let func_id;
let step = () => {
$('div').width($('div').width() + 1); // 每次执行将宽度+1
func_id = requestAnimationFrame(step); // 递归写法(效果就是每秒钟执行60次,与浏览器刷新率有关)
}
func_id = requestAnimationFrame(step);
$('div').click(() => {
// 单击停下来
cancelAnimationFrame(func_id);
})
}
export {
main,
}
let main = () => {
let obj = {
name: 'zf',
age: 18,
};
// 对象转换成字符串
let str = JSON.stringify(obj);
console.log(str);
// 字符串转换成对象
let new_obj = JSON.parse(str);
console.log(new_obj);
}
export {
main,
}
let main = () => {
$('div').css('cursor', 'pointer');
$('div').click(() => {
// window.open("https://www.acwing.com");
// location.reload();
location.href = "https://www.acwing.com";
})
}
export {
main,
}