bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
历届学生/fontendseven/每天课程/2021-11-19/event.html Normal file
View File

@@ -0,0 +1,40 @@
<!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>事件</title>
</head>
<body>
<!-- <button onclick="test()">点我1</button> -->
<button class="two">点我2</button>
<!-- <button class="three">点我3</button> -->
</body>
<script>
// 1
// function test() {
// alert("hahha")
// }
// 2
// document.querySelector(".two") 返回的是一个js对象
// 虚拟 dom
document.querySelector(".two").onclick = function (event) {
console.log(event);
alert("哈哈哈1")
}
// // 3
// document.querySelector(".three").addEventListener('click', function () {
// alert("1")
// })
</script>
</html>

128
历届学生/fontendseven/每天课程/2021-11-19/index.html Normal file
View File

@@ -0,0 +1,128 @@
<!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>
</head>
<body>
</body>
<script>
// return 返回方法的运行结果的
// 参数
// 无参方法
// 有参方法
// 匿名方法
// 作用域
// 全局作用域
// 局部作用域
// var a = 1;
// function test (num1,num2) {
// c = "2"; // 没有var，涉及到 变量提升
// return num1 + num2;
// }
// var d = test;
// console.log( d(100,300) );
// console.log(c); // ??
// function c () {
// console.log(arguments);
// }
// c(10,11,1,2,13,15,16,25,678,5,333,673,355)
// 异步
// 1: 回调 callback 回调地狱 回调多层嵌套
// 2: promise
// 同步
// function a(callback) {
// var c = null;
// setTimeout(function() {
// c = "哈哈哈哈"
// callback(c)
// }, 3000)
// }
// a( function(d) {
// console.log(d);
// } )
// function demo(callback) {
// callback("demo")
// }
// demo(function (ddd) {
// console.log(ddd);
// })
// es5 来实现js没有的类的概念
// function ddd() {
// }
// 原型 prototype
// ddd.prototype.name = "张三"
// ddd.prototype.test = function () {
// return this.name;
// }
// console.log(ddd.prototype);
// console.log( new ddd().test() );
// es6 class 语法糖
// var name = "里斯"
// 继承 extends
// 封装
// 多态
// class test {
// hello = "还是说"
// }
// 子类 派生类
// 父类 基类
// class ddd extends test {
// name = "张三";
// // 构造函数，类被初始化的时候第一个走的方法
// // 参数的默认设置，用来接收参数
// constructor () {
// super()
// console.log("类被初始化了");
// }
// test () {
// return this.hello;
// }
// }
// var a = new ddd(); // 初始化一个类，得到 类的实列
// console.log( a.test() );
// this
// 指向问题
</script>
</html>

71
历届学生/fontendseven/每天课程/2021-11-19/tabs.html Normal file
View File

@@ -0,0 +1,71 @@
<!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>tabs</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 10px;
}
.active_title {
color: red;
}
.tabs_content li {
display: none;
}
.active_content {
display: inline-block !important;
}
</style>
</head>
<body>
<ul class="tabs_title">
<li class="active_title">搞笑</li>
<li>综艺</li>
<li>娱乐</li>
<li>动漫</li>
</ul>
<ul class="tabs_content">
<li class="active_content">搞笑的内容</li>
<li>综艺的内容</li>
<li>娱乐的内容</li>
<li>动漫的内容</li>
</ul>
</body>
<script>
var titleArr = $(".tabs_title li");
var contentArr = $(".tabs_content li");
titleArr.forEach(function (v,i) {
v.onclick = function () {
// 批量的类名清除操作
titleArr.forEach(function (item,index) {
// 清除标题
item.className = ""
// 清除内容的类名
contentArr[index].className = ""
});
this.className = "active_title"
contentArr[i].className = "active_content"
}
});
function $(className) {
return document.querySelectorAll(className)
}
</script>
</html>

134
历届学生/fontendseven/每天课程/2021-11-19/tabsPlugins.html Normal file
View File

@@ -0,0 +1,134 @@
<!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>tabs</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 10px;
}
.active_title {
color: red;
}
.tabs_content li {
display: none;
}
.active_content {
display: inline-block !important;
}
</style>
</head>
<body>
<ul class="tabs_title">
</ul>
<ul class="tabs_content">
</ul>
</body>
<script>
// json 文本数据交换格式
var tabsData = [
{
title: '搞笑2',
content: [
{ text: '搞笑的内容1' },
{ text: '搞笑的内容2' },
{ text: '搞笑的内容3' },
{ text: '搞笑的内容4' },
{ text: '搞笑的内容5' },
]
},
{
title: '综艺',
content: [
{ text: '综艺的内容1' },
{ text: '综艺的内容2' },
{ text: '综艺的内容3' },
]
},
{
title: '娱乐',
content: [
{ text: '娱乐的内容1' },
{ text: '娱乐的内容2' },
{ text: '娱乐的内容3' },
]
},
{
title: '动漫',
content: [
{ text: '动漫的内容1' },
{ text: '动漫的内容2' },
{ text: '动漫的内容3' },
]
}
]
function rendderTitle() {
tabsData.forEach(function (v, i) {
$(".tabs_title").innerHTML += `<li class="${i == 0 ? 'active_title' : ''}">${v.title}</li>`;
$(".tabs_content").innerHTML += `
<li class="${i == 0 ? 'active_content' : ''}">
${
v.content.map(function (item, index) {
return `<p>${item.text}</p>`
}).toString().replaceAll(",", "")
}
</li>
`;
console.log(v)
});
BindEvent();
}
function BindEvent() {
var titleArr = document.querySelectorAll(".tabs_title li");
var contentArr = document.querySelectorAll(".tabs_content li");
titleArr.forEach(function (v,i) {
v.onclick = function () {
// 批量的类名清除操作
titleArr.forEach(function (item,index) {
// 清除标题
item.className = ""
// 清除内容的类名
contentArr[index].className = ""
});
this.className = "active_title"
contentArr[i].className = "active_content"
}
});
}
rendderTitle()
function $(className) {
return document.querySelector(className)
}
</script>
</html>

16
历届学生/fontendseven/每天课程/2021-11-19/笔记.txt Normal file
View File

@@ -0,0 +1,16 @@
函数（方法）：function
作用：实现代码封装的（具有相同功能代码的集合）
事件：
在网页中的所有操作都是事件
三要素
1：事件源
2：事件类型
3：事件处理函数