HTML
HTML（超文本标记语言）是一种用于创建网页标记语言。HTML使用标签来定义网页中的元素，如标题、段落、链接、图像等。它是一种静态语言，主要负责网页的结构和语义化。
1、网页基本信息
<!-- DOCTYPE 文本类型，告诉浏览器使用的是什么规范--> <!DOCTYPE html> <html lang="en"> <!-- head 网页头部 --> <head> <!-- meta 描述性标签，可描述一些网站信息：比如编码、关键字、间接叙述--> <meta charset="UTF-8"> <meta name="keywords" content="前端开始"> <meta name="description" content="这是三件套的开始"> <!-- title 打开网站后看到的网站名称 --> <title>First HTML</title> </head> <!-- 主体 内部是可在网页页面上显示的内容--> <body> Hello，HTML </body> </html>
2、基本标签
<!--标题标签--> <h1>复习前端</h1> <h2>复习前端</h2> <h6>复习前端</h6> <!--段落标签，每个标签肚成一段--> <p>复习前端</p> <p>复习前端</p> <!--换行标签，只是换行，多行成一段--> 复习前端<br> 复习前端<br> <!--水平线标签--> <hr> <hr> <!--字体样式标签--> 粗体：<strong>复习前端</strong> 斜体：<em>复习前端</em> <!--特殊格式--> 空 格
3、特殊标签
1.图像标签，其中alt就是图像加载失败时显示的名字
<!--1.图片标签--> <img src="../resources/image/图片一.jpg" alt="风景" content="落日" title="前端复习"> alt图片加载失败时显式的文字，title鼠标悬停到图片显示的文字 <!--2.链接标签--> <a href="HelloHTML.html" target="_blank">点击跳转，文字跳转</a> <a href="HelloHTML.html"> <img src="../resources/image/图片二.jpg" alt="风景" title="前端复习" height="300" width="300"> </a> <!--锚链接，定义一个锚标记，然后跳转到锚标记--> <a href="top">顶部</a> <a href="#top">回到顶部</a> <!--邮件链接--> <a href="mailto:2869861273@qq.com">点击发送邮件</a> </body> <!--3.列表标签--> <!--有序列表--> <ol> <li>前端复习1</li> <li>前端复习2</li> <li>前端复习3</li> </ol> <!--无序列表，不是顺序杂乱，而是没有序号标明顺序--> <ul> <li>前端复习1</li> <li>前端复习2</li> <li>前端复习3</li> </ul> <!--自定义列表,dt标题，dd内容--> <dl> <dt>前端复习</dt> <dd>前端复习1</dd> <dd>前端复习1</dd> <dd>前端复习1</dd> </dl> <!--4.表格标签，tr表格里的行，td表格里的列--> <table border="1px"> <tr> <td colspan="3">1</td> </tr> <tr> <td rowspan="2">复习</td> <td>前端复习</td> <td>前端复习</td> <!-- 当设置了跨行和跨列时，后面所被影响的表格需要去掉从而对齐 --> </tr> <tr> <td>前端复习</td> <td>前端复习</td> </tr> <!--5.音视频标签,controls显示进度条 autoplay设置自动播放--> <video src="" controls autoplay></video> <audio src="" controls autoplay></audio> <!--6.iframe内联标签，即在一个网页里还有一个内联框,内联框里是另一个网址--> <iframe src="https://www.baidu.com" frameborder="0" width="500" height="500"></iframe> </table> <!--7.表单 --> <form action="HelloHTML.html" method="get"> <input type="text" name="username" value="name" size="30"> <input type="password" name="ped" readonly> <input type="submit"> <input type="reset"> <!--单选框 name表示组，只有在同一组的才能选择其一 --> 男<input type="radio" value="girl" name="sex"> 女<input type="radio" value="boy" name="sex"> <!--多选框 checked默认选中 --> <p>爱好： 游戏<input type="checkbox" value="play" name="hobby" checked> 舞蹈<input type="checkbox" value="dance" name="hobby"> 吃<input type="checkbox" value="eat" name="hobby"> </p> <!--按钮--> <input type="button" value="普通按钮" name="but"> <!--8.下拉框 selected默认选择--> <p>下拉框： <select name="列表名称" > <option value="china" selected disabled>中国</option> <option value="us">英国</option> <option value="ufo">美国</option> </select> </p> <!--9.文本域，cols，rows行列长度--> <p>文本域： <textarea name="textarea" cols="30" rows="10">文本框</textarea> </p>
4、表单初级验证
这是为了对表单提交的数据做一定判断
placeholder 用在所有的输入框中，作为底层提示信息，和value默认值不同
required 表框中数据不可为空
pattern 正则表达式判断
CSS
CSS（层叠样式表）是一种用于描述网页样式和布局的样式表语言。它与HTML配合使用，负责网页的外观和样式。通过使用CSS，可以控制元素的大小、颜色、字体、布局，实现网页的美观效果和排版。
优势：
1内容与表现分离，因css文件可独立于html
2.样式更加丰富
3.利用SEO，更便于被搜索引擎收录
1、css导入方式
<!-- 1.内部样式-->
<style>
h1{
color: red;
}
</style>
<!-- 2.外部样式需要link导入-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 3.行内样式-->
<h1 color="green">Hello</h1>
</body>
</html>
2、基本选择器
1.标签选择器
<!-- 1.标签选择器，选择的是所有同一标签-->
<style>
h1{
color: red;
}
</style>
<h1 color="green">Hello</h1>
<h1 color="green">Hello</h1>
2.类选择器
<!-- 2.类选择器，需先在标签里定义一个任意类属性，可多个标签定义同一个，然后在css中.类名-->
<style>
.liy{
color: red;
}
</style>
<h1 class="liy">类选择器</h1>
<h2 class="liy">类选择器</h2>
3.id选择器
<!-- 3.id选择器，同样先定义一个id，再在css中#id选择，但一个id只能定义一个标签 -->
<style>
#gu{
color: red;
}
</style>
<h1 id="gu">id选择器</h1>
3、高级选择器
1.层次选择器
（都是行外样式去渲染）
① 后代选择器
<style>
body p{ 选中的是body下面的所以p标签
background: red;
}
</style>
② 子代选择器
<style>
body>p{ 选中的是body下面的一代p标签
background: red;
}
</style>
③ 相邻向下选择器
用以下两种选择器时需要先激活定义一个标签<p class="active">h1</p>，即针对的是该标签而言
<style>
.active+p { 选的是激活标签下面的一个p标签
background: red;
}
</style>
④ 通用选择器
<style>
.active~p { 选的是激活标签下面的所有p类型标签
background: red;
}
</style>
2.结构伪类选择器
<style>
ul li:first-child { 选择ul下面的li标签的第一个
background: aqua;
}
ul li:last-child{ 选择ul下面的li标签的z一个
background: bisque;
}
</style>
3.属性选择器
① 首先搭建标签并设置标签的格式
<p class="demo"> <a href="www.baidu.com" class="links item first" id="first">1</a> <a href="" class="links item active" target="_blank" title="test">2</a> <a href="resources/image/图片一.jpg" class="links item" >3</a> <a href="abc" class="links item">4</a> <a href="/a.pdf" class="links item">5</a> <a href="/abc.pdf" class="links item">6</a> <a href="abcd.docx" class="links item">7</a> <a href="abc.docx" class="links item">8</a> </p>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #2700ff;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
</style>
② 在style中进行选择，属性选择器格式就是标签+[属性]
/* 1.选择存在id的元素*/
a[id] {
background: red;
}
/* 2.选择id为first的标签*/
a[id="first"] {
color: black;
}
/* 3.选中class里有links的标签*/
a[class*="links"] {
background: bisque;
}
/* 4.特定的开头和结尾 */
a[href^=w] {
background: cornflowerblue;
}
a[href$=x] {
background: red;
}
4、样式设置
1.span标签
<p> 用于突出一句话里的重点字
<span>程序员上午试题分析和</span>备考建议
</p>
<style>
span{
color: red;
font-weight: bolder;
}
</style>
2.字体样式 font-
font-family: ;字体格式 font-size: ;字体大小 font-weight: ;字体粗细
3.文本样式
颜色 RGB/RGBA：A这个参数代表透明度，0-1
text-align:设置左右居中或左右对齐
text-indent：设置首航缩进
line-height:设置行高，同块高一致即是上线居中
text-decoration: underline设置上中下划线
text-decoration: none;取消划线，主要用于超链接去除下划线
vertical-align: middle;图片文字垂直水平对齐
4.超链接伪类样式
<style>
/* 链接被访问过的a链接的颜色*/
a:visited{
color: antiquewhite;
}
/*修改默认a链接颜色*/
a {
text-decoration: none;
color: black;
}
/*鼠标悬浮时的颜色*/
a:hover{
color: chartreuse;
}
</style>
5.列表样式
① 创建一个列表
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="#">图书</a>
<a href="#">音像</a>
<a href="#">数字商品</a>
</li>
<li>
<a href="#">家用电器</a>
<a href="#">手机</a>
<a href="#">数码</a>
</li>
<li>
<a href="#">电脑</a>
<a href="#">办公</a>
</li>
<li>
<a href="#">家居</a>
<a href="#">家装</a>
<a href="#">厨具</a>
</li>
<li>
<a href="#">服饰鞋帽</a>
<a href="#">个性化妆</a>
</li>
<li>
<a href="#">礼品箱包</a>
<a href="#">钟表</a>
<a href="#">珠宝</a>
</li>
<li>
<a href="#">食品饮料</a>
<a href="#">保健食品</a>
</li>
<li>
<a href="#">彩票</a>
<a href="#">旅行</a>
<a href="#">充值</a>
<a href="#">票务</a>
</li>
</ul>
② 用css链接该列表并渲染
渲染的注意点：对应列表从上到下的标签逐一来写；分清楚每一个标签可以渲染什么格式
.title{
text-indent: 2em;
background: red;
line-height: 20px;
font-size: 18px;
}
/* list-style 对ul表格前面的无序序号进行修改
对于列表来说，本身属性只有序号和列表格子尺寸*/
ul li{
list-style: none;
line-height: 18px;
}
a{
line-height: 15px;
font-size: 13px;
color: black;
text-indent: 2em;
text-decoration: none;
}
a:hover{
color: green;
}
ul{
background: aquamarine;
}
5.圆角边框
应用：可以给图片进行边框修改打磨
旋转：旋转顺序左右上下
6.盒子模型
① 盒子模型的大小计算
即边距margin，边框border，填充padding，和实际内容
② 设置消除默认内外边距
一般的边框都有内外边距，所以需要手动设置删除；且边框有四个边
③ 外边距设置居中
前提该标签需要在一个块元素内，即要有边界
margin: auto;
5、浮动
1.display 用于设置行内元素的排列
① 理解行内元素与块元素的区别
div{
height: 200px;
width: 200px;
border: red 2px solid;
font-size: 25px;
}
span{
height: 200px;
width: 200px;
border: red 2px solid;
font-size: 25px;
}
② 理解display的作用
把本来的一个ul li一列的列表设置成一横排，即设置为块元素并且保留行内元素的特性（即标准文档流的性质），把标准文档流可以在行内元素和块元素中切换
display: inline-block;
2.float 用于设置浮动
① 浮动，指独立于底层，浮于低层之上的一种形式，有左浮和右浮两种
float: left; float: right;
② float缺陷，那就是单独于底层成为一个个体之后，会随着网页页面大小而变换位置，这会造成网页排版问题，即父级塌陷
浮动起来的，淹没了父级
标准文档流
对比display和float：
display方向不可以控制.
float浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题~
3.解决父级边框塌陷
① clear 对浮动起来的设置清除，但不能完全解决，只是把浮动起来的元素变为了标准文档流
clear: right; 右侧不允许有浮动元素 clear: both; 两侧都不允许有浮动元素 clear: right; clear: none;
② 增加父级边框的高度，使父级边框足够大
③ 增加一个空div，清除浮动
.clear{
clear: both;
margin: 0;
padding: 0;
}
<div class="clear"></div>
④ 在父级元素中添加overflow
当页面内容大于父级边框时，使用overflow可以把内容变为滚动条模式，但用hidden会把超出边框的部分切割掉
overflow: hidden;
⑤ 给父级添加一个伪类：after
.father：after{
content: ""; 添加一个空内容
display: block; 把该空内容变为一个块
clear: both;
}
6、定位
z-index,最低0，最高999，层级越高就会在约上面的一层
小总结：
1.过程中的调试可在浏览器中完成，达到预期效果后放到前端代码里
2.如何copy一个页面 ——
① 源码之家下载
② 在一个网页页面直接另存为
Java Script
1、Hello
JavaScript是一种基于对象和事件驱动的脚本语言，作用是给网页添加交互功能和动态效果。它可以操作网页元素、响应用户操作、发送网络请求、处理数据等。JavaScript使得网页具有更高级的交互性和动态性，可以实现表单验证、页面动画、实时数据更新等。
1.导入js
① 行内导入
② 外部导入
2.运算符
= 赋值 == 等于（类型不一样，值一样，就为true） === 绝对等于（类型和值都一样才为true）
3.常用网页调试工具
Elements —— 包含html、css可以用于考网站
Console —— 控制台，js只能在控制台调试输出
Soures —— 源码存放
Network —— 请求响应
4.严格检查模式
为防止js的语法随意性，需要在script语法第一行使用use strict严格检查模式说明
使用前提：需要设置js的语法遵循es6语法
2、数据类型
1.字符串
① 支持多行字符串的编写
字符串间不需要任何符号，且可写多种类型，同集合也是可写多种类型 var msg =` java 123 数据类型 `
② 支持字符串模板编写
即支持el表达式格式
let age = 3
var str = `
xmm
${age}
`
2.数组
① 长度
arr.length
数组长度可变，给数组的长度赋值，如果过大则会用empty补充，赋值过小则被剔除
② indexOf
通过元素获得下标索引
var arr = [1,2,3,4,5,6,"1","2"] arr.indexOf(5) 4
③ slice
截取数组的一部分，获得一个新数组
arr.slice(3) (5) [4, 5, 6, '1', '2'] arr.slice(0,5) (5) [1, 2, 3, 4, 5]
④ sort/reverse
排序/反转
⑤ push、pop
在尾部添加和去除元素
arr.push(99,88) 10 arr (10) [1, 2, 3, 4, 5, 6, '1', '2', 99, 88] arr.pop() 88 arr (9) [1, 2, 3, 4, 5, 6, '1', '2', 99]
3.变量、对象的定义
1.定义
变量的定义 ，无视java数据类型，全部类型都是var，
var num = 1; 变量名开头不能是数字
var name = "ggz";
let i = 10; 局部变量需要用let定义
console.log() 控制台输出数据
对象的定义 ， 即{}代表对象
var people ={
name:"ggz",
age:20,
email:"12345567@qq.com",
tags : [1,3,5,"ggz"]
}
2.查找不存在的属性，不会报错
people.haha undefined
3.可以动态的删除和添加对象里的属性
delete people.email
true
people.id = 20
20
people
{name: 'ggz', age: 20, id: 20}
4.判断一个属性是否在该对象里
"age" in people
true
'toString' in people
true
用字符串的格式是因为JS中所有的键都是字符串，值是任意类型
people.hasOwnProperty('toString')
false
因为in在people中找不到一个属性的话会去找它的的父类
hasOwnProperty才是只针对该类去找属性是否存在
4.Map、Set
ES6新特性 Map,同java里的Map js里只有这两个数组和集合
创建、添加、获取操作
控制台书写
var map = new Map([["tom",10],["jack",20],["okk",30]])
map.get("tom")
10
map.set("ggz",8)
Map(4) {'tom' => 10, 'jack' => 20, 'okk' => 30, 'ggz' => 8}
idea书写
var map = new Map([["tom",10],["jack",20],["okk",30]])
var age1 = map.get("tom")
console.log(age1);
map.set("qqz",10);
console.log(map);
var set = new Set([1,2,3,3,3,3]); 是一个无序集合 set.add(5); 添加 set.has(3); 是否包含元素 set.delete(1); 删除 set.has(1);
5.iterable
通过foreach遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。
具有iterable类型的集合可以通过新的for ... of循环来遍历。
// for in/of打印值和下标,in打印的是下标，of是值,可以遍历数组也可遍历出集合
var arr = [5,5,3,3,2,1,"play"];
for (let x in arr){
console.log(x);
}
for (let y of arr){
console.log(y);
}
3、函数
1.定义函数
① 定义
<!-- 函数的定义方式一 -->
'use strict'
function abs(x) {
if (x > 0) {
return x;
} else {
return -x;
//执行到retuen代表函数结束，返回结果，
//如果没有执行return，函数执行完也会返回结果，结果为undefined
}
}
<!-- 函数的定义方式二 -->
//这种形式就是把function (x)当成匿名内部类，但是可以把该类赋值给一个变量，通过变量调用函数
var abs2 = function (x) {
if (x > 0) {
return x;
} else {
return -x;
}
}
② 参数问题
<!-- 规避参数不存在和多个参数问题 -->
参数不存在时可设置抛出异常 ，typeof可判断变量类型
var abs3 = function (x) {
if (typeof x !="number"){
throw "Not a Number";
}
if (x > 0) {
return x;
} else {
return -x;
}
}
对于参数过长
// es5所用方法，arguments关键子，代表一个数组，会把所有传进来的参数都放到里面
var abs4 = function (x) {
console.log(x);
for (let i = 0; i<=arguments.length; i++){
console.log(arguments[i]);
}
}
//e6所用方法，rest关键子，剩余的，会把除定义的参数外其他所有传进来的参数都放到里面。...在java代表可变参数
var abs5 = function (x,y,...rest) {
console.log(x);
console.log(y);
console.log(rest);
}
2.变量作用域
在JavaScript中，函数查找变量从自身函数开始~，由“内"向“外”查找.假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量值。
定义变量的规范
var add = function (){
var x = 1,
y = "name",
z,k,l;
}
//全局变量，window全局作用域，默认所有的全局变量都会绑定在window下，函alert也是 var x = "xxx"; alert(x); alert(window.x); alert(x); window.alert(x);
由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件使用了相同的全局变量，就需要我们自定义一个自己的唯一全局变量
var comgu = {};
comgu.name = "ggz";
comgu.class = function (x) {
return x;
}
局部作用域let，常量const
const PI = "3333333" 是只读变量不可改变 console.log(PI);
3.方法
1.定义和调用
把函数定义到对象内部，就交方法
直接方法名调用
2.方法的使用
① 首先定义一个对象
var xiaoming = {
name: '小明',
birth: 1990
};
但是，如果我们给xiaoming绑定一个函数，就可以做更多的事情。比如，写个age()方法，返回xiaoming的年龄：
var xiaoming = {
name :"xiaomin",
birth: 2000,
age :function (){
var now = new Date().getFullYear();
return now - this.birth; 这里的this不能控制指向的对象，默认只能指向调用它的那个对象
}
}
进行格式更改，并实验
function getAge(){
var now = new Date().getFullYear();
return now - this.birth;
}
var xiaoming1 = {
name :"xiaomin",
birth: 2000,
age :getAge,
}
两种方式调用得到结果不同
xiaoming1.age;
xiaoming1.age();
3.apply控制this的指向
function getAge(){
var now = new Date().getFullYear();
return now - this.birth;
}
var xiaoming1 = {
name :"xiaomin",
birth: 2000,
age :getAge,
}
getAge().apply(xiaoming1,[]);
//apply,所有方法都有这个属性，该属性有两个参数，一是指向哪个对象，二是该对象有什么参数
4.Date和JSON
var now = new Date(); now.getFullYear(); //年 now.getMonth(); //月 0-11月 now.getDay(); //星期 now.getDate(); //日 now.getHours(); //时 now.getMinutes(); //分 now.getSeconds(); //秒 now.getTime(); //时间戳 1970年1.1日到现在的毫秒数，全国统一
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它能够将结构化数据（如对象、数组、字符串、数字等）表示为文本，并通过简单的语法进行序列化和反序列化。
JSON可以理解为一种字符串，因为它在文本中以字符串的形式表示。它使用了一些基于JavaScript语法的约定，例如用大括号表示对象，用方括号表示数组等。但是JSON不仅仅是字符串，它是一种独立的数据格式，具有规范的语法和特定的数据结构。
当我们说"JSON是一个字符串"时，指的是JSON可以表示为一个包含JSON数据的字符串。为了解析和处理JSON数据，我们需要将其从字符串转换为程序内部的数据结构，如对象或数组。反过来，如果我们要将数据转换为JSON格式，我们需要将内部数据结构序列化为JSON字符串。
因此，JSON既可以理解为一个字符串，也可以理解为一种数据格式，取决于我们在使用过程中的上下文。
var user = {
name: "ggz",
age: 10,
sex: "男"
}
console.log(user);
//把对象转化为json字符串
var jsonUser = JSON.stringify(user);
console.log("==========")
console.log(jsonUser);
//把json字符串转为对象，这一步为解析
var nowUser = JSON.parse(jsonUser);
console.log("-----------");
console.log(nowUser);
json与js对比
var js ={name: "ggz", age: 20}
var json ='{"name": "ggz","age":"20"}'
4、面向对象编程
1.继承
1.面向对象继承
var user={
name: "ggz",
age: 20,
study:function (){
console.log(this.name+" do study");
}
}
var old={
name:"xmm",
age:20,
}
old.__proto__ = user; 意思为old继承user里的所有东西，old也叫原型对象
2.面向class定义类
//定义类
class Student{
constructor(name) {
this.name = name;
}
study(){
console.log("do study");
}
}
//创建对象
var xiaoming = new Student("xiaoming");
//如何继承
class Teacher extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
teach(){
console.log("tecah "+this.name);
}
}
5、BOM和DOM
1.BOM
浏览器操作对象，是对浏览器进行操作的几个常用对象（一般在控制台使用）
1.location对象，代表当前页面的url信息
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:" 使用的什么协议
reload: ƒ reload() 刷新网页
设置跳转网址
location.assign('https://upload.youkuaiyun.com/creation/uploadResources?spm=1011.2124.3001.9807')
2.document，代表当前页面文档
//可以设置修改页面文档上的一些数据 document.title = 'BOM浏览器对象' 'BOM浏览器对象' document.title 'BOM浏览器对象' //获取cookie document.cookie //页面的前进后退 history.forward() history.back()
2.DOM
文档对象，每个网页都是一个DOM树形结构，可以对它进行增删改查操作
更新:更新Dom节点 查找:遍历得到Dom节点 删除:删除一个Dom节点 添加:添加一个新的节点
1.获得DOM节点
//获取各个节点
document.getElementsByTagName('h1');
document.getElementById('p1');
document.getElementsByClassName('p2');
//获取父节点
document.getElementById('f1');
//获取父节点下所有子节点
f1.children
2.更新DOM
// 更新dom
//首先获取到一个节点
document.getElementById('dom');
//操作文本节点,需要全部使用冒号
dom.innerText='123';
//操作html节点
dom.innerHTML='888nbsp;999'
//操作js节点
dom.style.color='red';
dom.style.fontSize='100px';
3.删除DOM
// 删除dom
//删除父节点下的一个子节点，需要先获取父节点，再删除子节点
var son = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild('p1');
4.插入DOM
// 插入dom
var s1 = document.getElementById('s1');
var s2 = document.getElementById('s2');
//append插入一个已存在的节点
s2.appendChild(s1);
//插入一个新的节点
var s5 = document.createElement('p');//新建一个空的p标签，这个标签叫s5，<p>
s5.id = 's5'; //给s5这个标签设置id为s5
s5.innerText = '这是新建的一个p标签'; //给s5设置内容
s2.appendChild(s5);
3.操作表单
form，也是DOM树中的一种
<form action="post">
<span>用户名：</span><input type="text" id="username">
</form>
<script>
var name = document.getElementById('username');
//获取表单数据
name.valueOf;
//修改表单数据
name.valueOf='1111111';
</script>
6、jQuery
1.使用jquery
① 官网下载jquery后导入lib目录，然后导入类中
<script src="../../lib/jquery-3.7.1.js"></script>
② jquery使用公式
$(selector)action() $(选择器)事件
③ 使用
<!-- 1.先创建一个标签-->
<a href="" id="jquery">点击事件</a>
<script>
<!-- 2.通过jquery进行操作 -->
$('#jquery').click(function (){
//先选择这个id标签，再操作一个事件，这里操作的是点击事件click，事件里面有个函数
alert('hello,jquery');
})
</script>
2.事件action
jquery事件可分为：鼠标事件，键盘事件，其他时间
3.操作jquery
① jquery操作DOM，更多的还是要看jquery常用API
<ul id="u1">
<li id="u2">ggz</li>
<li class="u3">xmm</li>
<li name="u4">qqz</li>
</ul>
// jquery获取值和设置值,都要加''
$('#u1 li[id=u2]').text('jjz999');
$('u3').text();
$('#u1 li[name=u4]').html();
// 操作css
$('#u1 li[class=u3]').css({"color":"red"},{"background":"blue"})
$('#u2').css({"fontSize":"50px"})
// 文档的显示与隐藏，先设置display: none;，再对某标签进行隐藏和显示
$('#ul').hide();
$('#ul').show();
总结：
1.es6是什么
ES6（ECMAScript 6）是ECMAScript标准的第六个版本，也被称为ES2015。它是JavaScript的一个重要更新，引入了许多新的语言特性和语法改进。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现
JavaScript的创造者将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准，后来ECMA发布标准文件的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。但ES6并不是一种规范浏览器脚本语言的标准，而是JavaScript语言的更新版本。它提供了更多新的功能和语法，使得编写JavaScript代码更加轻松和高效。
但事实上，JavaScript比ECMA-262的含义多得多，一个完整的JavaScript实现应该由以下三个部分组成：
\1) ECMAScript：核心
\2) DOM：文档对象模型
\3) BOM：浏览器对象模型
2.巩固
巩固js，看前端小游戏源码
巩固css，html，扒网站，删除代码看效果
======= 学习资料来源狂神说，感谢狂神老师 ===========
扫一扫
540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
