Web前端技术栈（待更新......）
一、HTML
1、什么是HTML
1.1、初识HTML
-
HTML：Hyper Text Markup Language(超文本标记语言)
超文本包括：文字、图片、音频、视频、动画等
-
HTML5的优势
①世界知名浏览器厂商对HTML5的支持
1、微软
2、Google
3、苹果
4、Opera
5、Mozilla
②市场的需求
③跨平台 -
W3C标准
①W3C
1、World Wide Web Consortium(万维网联盟)
2、成立于1994年，Web技术领域最权威和具影响力的国际中立性技术准机构。
3、http://www.w3.org/
4、http://www.chinaw3c.org/②W3C标准包括
1、结构化标准语言（HTML、XML）
2、表现标准语言（CSS）
3、行为标准（DOM、ECMAScript） -
常见IDE
①记事本
②Dreamweaver
③IDEA
④WebStorm
…
1.2、HTML基本结构
2、网页
2.1、网页基本信息
<!-- DOCTYPE:告诉浏览器，我么们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签用来代表网页头部-->
<head>
<!--meat描述性标签，它用来描述我们网站的一些信息-->
<!-- meat一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="狂神说Java">
<meta name="description" content="来到这个地方可以学习Java">
<!--title网页标题-->
<title>我的第一个网页</title>
</head>
<!--body标签用来代表网页主体-->
<body>
Hello,World!
</body>
</html>
2.2、网页基本标签
-
标题标签
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> -
段落标签
<p>1 2 3 4 5</p> <p>3 4 5 6 7</p> <p>6 7 8 9 10</p> <p>10 J Q K A</p> -
换行标签
1 2 3 4 5<br/> 3 4 5 6 7<br/> 6 7 8 9 10<br/> 10 J Q K A<br/> -
水平线标签
<hr/> -
字体样式标签
<h1>字体样式标签</h1> 粗体：<strong>I love You</strong> 斜体：<em>I love You</em> -
注释和特殊符号(&…;)
<!--注释:快捷键Ctrl+/--> 空格: 大于:> 小于:< 版权:©
2.3、图像标签
src:图片地址（必填）
alt:图片名字（必填）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--img学习
src:图片地址（必填）
相对地址（推荐使用） 绝对地址
../ --上一级目录
alt:图片名字（必填）
-->
<img src="../resources/image/1.jpg" alt="头像" title="悬停文字" width="300" height="300">
</body>
</html>
2.4、链接标签
href:必填，表示要跳转到那个界面
target:表示窗口在哪里打开
超链接：
- 页面间链接
从一个页面链接到另一个页面 - 锚链接
- 功能性链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>//锚标记
<!--a标签
href:必填，表示要跳转到那个界面
target:表示窗口在哪里打开
_blank 在新标签打开
_self 在当前网页打开(默认)
-->
<a href="3.图像标签.html" target="_blank">点击跳转1</a>
<a href="3.图像标签.html" target="_self">点击跳转2</a>
<a href="https://www.baidu.com">点击跳转到百度</a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resources/image/1.jpg" alt="头像" title="悬停文字" width="300" height="300">
</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>//锚链接
<a name="down">down</a>//锚标记
<!--功能性链接
1、邮件链接: mailto
2、QQ链接
-->
<a href="mailto:[email protected]">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:3157043973:53"
alt="你好，加我免费领取小电影" title="你好，加我免费领取小电影"/></a>
</body>
</html>
2.5、行内元素和块元素
-
块元素
无论内存多少，该元素独占一行（p、h1-h6…）
-
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行（a、strong、em…）
2.6、列表标签
什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者可以更快捷的获得相应的信息
列表的分类
-
有序列表
<!-- 应用范围：试卷、问答... --> <ol> <li>Java</li> <li>Python</li> <li>JavaScript</li> <li>C/C++</li> </ol> -
无序列表
<!-- 应用范围：导航、侧边栏... --> <ul> <li>Java</li> <li>Python</li> <li>JavaScript</li> <li>C/C++</li> </ul> -
自定义列表
<!-- dl：标签 dt：列表名称 dd：列表内容 应用范围：网站底部... --> <dl> <dt>学科</dt> <dd>Java</dd> <dd>Python</dd> <dd>Linux</dd> <dd>C</dd> <dt>位置</dt> <dd>西安</dd> <dd>湖北</dd> <dd>浙江</dd> </dl>
2.7、表格标签
为什么使用表格
-
简单通用
-
结构稳定
基本结构
- 单元格
- 行
<tr></tr> - 列
<td></td> - 跨行
rowspan - 跨列
colspan
<table border="1dx">
<tr>
<!--colspan跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!--rowspan跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
2.8、媒体元素
src：资源路径 （必填）
controls : 控制条
autoplay : 自动播放
-
视频
<video src="../resources/video/1.mp4" controls autoplay></video> -
音频
<audio src="../resources/audio/1.mp3" controls autoplay></audio>
2.9、页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面中的一块区域） |
| section | Web页面中一块独立的区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
2.10、iframe内联框架
scr：地址
w-h：宽度和高度
<iframe src="" name="hello" frameborder="0" width="1000" height="800"></iframe>
<a href="3.图像标签.html" target="hello">点击跳转</a>
3、表单
-
action：表单提交的位置
可以是网站，也可以是一个请求处理地址
-
method： post，get提交方式
get方式提交：可以在url中看到提交的信息 ,不安全,但是高效
post方式提交：比较安全，可以传输大文件
<h1>注册</h1>
<form action="1.我的第一个网页.html" method="get">
<p>用户名：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
<input type="submit">//提交按钮
<input type="reset">//重置按钮
</p>
</form>
3.1、表单元素格式
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text（文本框）、password（密码框）、radio、checkbox（单选框和多选框）、submit（提交按钮）、reset（重置按钮）、file、hidden、image、button，默认为text |
| name(必填) | 指定表单元素的名称 |
| value | 元素的初始值。type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当type为radio为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text或password时，输出的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否被选中 |
-
文本框：input type="text"
value="666" 默认初始值
maxlength = "8" 最长能写几个字符
size = "30" 文本框的长度
<p>用户名：<input type="text" name="username"></p>
- 密码框：input type="password"
<p>密码：<input type="password" name="pwd"></p>
-
单选框：input type="radio"
value：单选框的值
name：表示组
checked：默认选中
<p>
性别:
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
-
多选框：input type="checkbox"
checked：默认选中
<p>
爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
-
按钮：input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
<p>
按钮：
<input type="button" name="btn1" value="点击变长">
<input type="image" src="../resources/image/1.jpg">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
-
列表框
selected:默认选中
<p>国家：
<select name="列表名称">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="eth" selected>瑞士</option>
<option value="yindu">印度</option>
</select>
</p>
- 文本域
<p>
反馈：
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
- 文件域：input type="file" name="files"
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
- 邮箱验证：input type="email"
<p>邮箱：
<input type="email" name="email">
</p>
- URL：input type="url"
<p>url：
<input type="url" name="url">
</p>
- 数字：input type="number"
<p>商品数量：
<input type="number" name="num" max="100" min="0" step="1">
</p>
- 滑块：input type="range"
<p>音量控制：
<input type="range" name="voice" max="100" min="0" step="2">
</p>
- 搜索框：input type="search"
<p>搜索：
<input type="search" name="search">
</p>
- 增强鼠标可用性
<p>
<label for="mark">点我试试</label>
<input type="text" id="mark">
</p>
3.2、表单的应用
- 隐藏域：hidden
- 只读：readonly
- 禁用：disabled
3.3、表单初级验证
- placeholder：提示信息
- required：非空判断
- pattern：正则表达式
二、CSS
1、什么是CSS
1.1、什么是CSS
-
Cascading Style Sheets ：层叠级联样式表
-
CSS：表现(美化网页：字体，颜色，边距，高度，宽度，背景图片，网页)
1.2、发展史
CSS1.0
CSS2.0 DIV(块) + CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画… 浏览器兼容性…
1.3、快速入门
-
基本入门
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS入门</title> <!--规范 <style> 可以编写css代码，每一个声明最好用分号结尾 语法： 选择器{ 声明1; 声明2; 声明3; } --> <style> h1{ color: red; } </style> </head> <body> <h1>我是标题</h1> </body> </html>
CSS的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式丰富
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录
1.4、CSS的三种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式 -->
<style>
h1{
color: green;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式： 在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red;">我是标题</h1>
</body>
</html>
拓展：外部样式两种写法
-
链接式
HTML
<!--外部样式--> <link rel="stylesheet" href="css/style.css"> -
导入式
@import是CSS2.1特有的
<!--导入式--> <style> @import url("css/style.css"); </style>
2、选择器
作用：选择页面上的某一个或某一类元素
2.1、基本选择器
优先级：id选择器>class选择器>标签选择器
-
标签选择器：会选择到页面上所有的这个标签的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器会选择到页面上所有的这个标签的元素*/ h1 { color: #a12d33; background: #3fdu52; border-radius: 10px; } p{ font-size: 80px; } </style> </head> <body> <h1>JavaScript</h1> <h1>JavaScript</h1> <p>Java</p> </body> </html> -
class选择器：可以多个标签归类，是同一个class,可以复用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 类选择器的格式：.class的名称{} 好处：可以多个标签归类，是同一个class,可以复用 */ .xl{ color: #3628ff; } .xiang{ color: #a542ff; } </style> </head> <body> <h1 class="xl">标题一</h1> <h1 class="xiang">标题二</h1> <h1 class="xl">标题三</h1> <p class="xl">p标签</p> </body> </html> -
id选择器：id必须保证全局唯一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* id选择器 ：id必须保证全局唯一 语法： # id名称{} 优先级： 不遵循就近原则 ，是固定的 id选择器>class选择器>标签选择器 */ #xiang{ color: #ff008a; } .xl{ color: #02ff00; } h1{ color: #2dywh6; } </style> </head> <body> <h1 class="xl" id="xiang">标题1</h1> <h1 class="xl">标题2</h1> <h1 class="xl">标题3</h1> <h1>标题4</h1> <h1>标题5</h1> </body> </html>
2.2、层次选择器
-
后代选择器：在某个元素的后面
body p{ background:#3cbda5; } -
子选择器：一代
body>p{ background:#3cbda5; } -
相邻兄弟选择器：当前选中元素的下一个同辈
.active + p{ background:#3cbda5; } -
通用选择器：当前选中元素的向下的所有同辈
.active~p{ background:#3cbda5; }
2.3、结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*选择ul中的第一个子元素*/
ul li:first-child{
background: red;
}
/*选择ul中的最后一个子元素*/
ul li:last-child{
background: blue;
}
/* 选中p1 ：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效，顺序
*/
p:nth-child(1){
background: yellow;
}
/*选中父类元素下的p元素的第二个，类型*/
p:nth-of-type(2){
background: green;
}
/*鼠标移上去变色*/
a:hover{
background:#000b3e;
}
</style>
</head>
<body>
<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<a href="">12345</a>
</body>
</html>
2.4、属性选择器(常用)
id + class结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float:left; /*浮动*/
display:block;
height: 50px;
width: 50px;
border-radius: 20px;
background: blue;
text-align: center; /*对齐方式*/
color : #dfdedb;
text-decoration: none; /*去下划线*/
margin-right: 5px; /*边距*/
font:bold 20px/50px Arial; /*粗体 字体大小/行高 字体格式*/
}
/* 属性名 . 属性名 = 属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素 a[] {}*/
/*a[id]{
background: yellow;
}*/
/* id=first的元素*/
/*a[id=first]{
background: yellow;
}*/
/*class中有links的元素 */
/*a[class*=links]{
background: yellow;
}*/
/*选中href中以http开头的元素*/
/*a[href^=http]{
background: yellow;
}*/
/*选中herf中以pdf结尾的元素*/
a[href$=pdf]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="http://blog.kuangshen.com" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last" last>10</a>
</p>
</body>
</html>
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
3、美化网页元素
3.1、为什么要美化网页
- 有效的传递页面信息
- 美化网页，页面漂亮，才能吸引用户
- 凸显页面的主题
- 提高用户的体验
span标签：重点要突出的字，使用span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
</html>
3.2、字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
font-family :字体
font-size ：字体大小
font-weight ：字体粗细
color: 字体颜色
*/
body {
font-family: "Arial Black" , 楷体;
color:#a13d30;
}
h1 {
font-size: 50px;
}
.p1{
font-weight: bolder;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p>Baby I'm Sorry - 마이네임 (MYNAME)
내가 맘에 들지 않아
我不满意
내곁을 떠나간너
从我身边离开的你
해준것도 없는데
也没什么能给你
왜 내걱정을 하는지
为什么要担心我
하지만 니 맘다 알아
但是你的心意我全都知道
그래서 그게 싫어
所以好讨厌
걱정은 버리고 떠나가
不要担心了走吧
자꾸만 짜증나게
</p>
</body>
</html>
3.3、文本样式
- 颜色 RGB RGBA
- 文本对齐方式 text-align = center
- 首行缩进 text-indent:2em
- 行高 line-height:单行文字上下居中 line-height = height
- 装饰 text-decoration
- 文本图片水平对齐 vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*颜色:
单词：RGB 0~F
RGBA：A 0~1
text-align: center; 排版居中
text-indent: 2em; 段落首行缩进
height: 300px;
line-height: 300px;
行高 和块 的高度一致时，就可以上下居中
*/
h1{
/*color: #0000ff;*/
color :rgba(0,255,255,0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3 {
background: #2700ff;
height: 300px;
line-height: 300px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
/*超链接去下划线*/
a{
text-decoration: none;
}
/*水平对齐：参照物 a b*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<a href="">123</a>
<p class="l1">123456</p>
<p class="l2">123456</p>
<p class="l3">123456</p>
<h1>故事介绍</h1>
<p class="p1">
这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p class="p3">Baby I'm Sorry - 마이네임 (MYNAME)
내가 맘에 들지 않아
我不满意
내곁을 떠나간너
从我身边离开的你
해준것도 없는데
也没什么能给你
왜 내걱정을 하는지
为什么要担心我
하지만 니 맘다 알아
但是你的心意我全都知道
그래서 그게 싫어
所以好讨厌
걱정은 버리고 떠나가
不要担心了走吧
자꾸만 짜증나게
</p>
<p>
<img src="images/a.png" alt="">
<span> asjhl jldlasdhlkjklj</span>
</p>
</body>
</html>
3.4、阴影
/*text-shadow:阴影颜色 水平偏移(左正右负) 垂直偏移(下正上负) 阴影半径 */
#price{
text-shadow: #3cc7f5 10px -10px 2px;
}
3.5、超链接伪类
正常情况下：a:hover
/*默认的颜色*/
a{
text-decoration:none;
color:#000;
}
/*鼠标悬浮的状态(只需要记住：hover)*/
a:hover{
color:orange;
font-size:50px;
}
3.6、列表
list-style：
- none 去掉圆点
- circle 空心圆
- decimal 有序数字
- square 正方形
ul li{
height:30px;
list-style:none;
text-indent:1em;
}
3.7、背景
- 背景颜色
- 背景图片
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red; /* 边框的粗细 实线 颜色*/
background-image: url("images/1.png");
/* 默认是全部平铺的 repeat*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
3.8、渐变
- 网站：Grabient
4、盒子模型
4.1、什么是盒子模型
- margin：外边距
- padding：内边距
- border：边框
4.2、边框
<style>
/* body总有一个默认的外边距margin:0, 常用操作
h1,ul,a,body{
margin: 0;
padding: 0;
text-display: none;
}
border：粗细，样式，颜色*/
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background: #3cbda6;
line-height: 30px;
color:red;
}
form{
background: #3cbda6;
}
div:nth-of-type(1) input{
border: 2px solid black;
}
div:nth-of-type(2) input{
border: 2px dashed green;
}
div:nth-of-type(3) input{
border: 3px dashed blue;
}
</style>
4.3、内外边距
- margin:0 auto 元素居中
- margin(padding):0 0 0 0 顺时针(上右下左)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
h2{
font-size: 16px;
background: red;
line-height: 30px;
text-align: center;
margin:0 1px 2px 3px;
}
form{
background: blue;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 10px 2px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
盒子的计算方式：元素大小=内容宽度+margin+border+padding
4.4、圆角边框
- border-radios:0 0 0 0 顺时针(左上 右上 右下 左下)
<style>
div{
width: 50px;
height: 50px;
background: red;
margin: 100px;
border:10px solid red;
border-radius: 50px 0px 0px 0px;
}
</style>
4.5、阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
margin: 0 auto;
}
img{
border-radius: 50px;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div style="width:500px;text-align:center">
<img src="images/1.png" alt="">
</div>
</body>
</html>
5、浮动
5.1、标椎文档流
-
块级元素：独占一行
h1-h6 p div 列表... -
行内元素：不独占一行
span a img strong...
行内元素可以被包含在块级元素里面，反之不行
5.2、display
-
这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
<style> /*display: block 块元素 inline 行内元素 inline-block 是块元素，但是可以内联在一行 none */ div{ width: 100px; height: 100px; border: 1px solid red; display: none; } span{ width: 100px; height: 100px; border: 1px solid red; display:inline-block; } </style>
5.3、float
-
float：左右浮动
-
选择器
属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动(默认值) div{ margin: 10px; padding: 5px; } #father{ border: 1px solid red; } .layer01{ border: 1px solid black; display: inline-block; float: left; } .layer02{ border: 1px solid #41e5e5; display: inline-block; float: left; } .layer03{ border: 1px solid yellow; display: inline-block; float: left; } .layer04{ border: 1px solid green; font-size:12px; display: inline-block; float:left; clear: both; }
5.4、父级边框塌陷的问题
/*
clear right; 右侧不允许有浮动元素
clear left; 左侧不允许有浮动元素
clear both; 两侧不允许有浮动元素
clear none;
*/
解决方案：
1、增加父级元素的高度
.father{
border: 1px red solid;
height： 800px;
}
2、增加一个空的div标签，清除浮动
<div class="clear"></div>
.clear{
clear: both;
margin: 0;
padding: 0;
}
3、overflow
在父级元素中增加一个 overflow:hidden;
4、父类添加一个伪类：after
#father:after{
content:'';
dispaly:block;
clear:both;
}
小结：
1.浮动元素后面增加空div
简单，代码中尽量避免空div
2.设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
3.overflow
简单，下拉的一些场景避免使用
4.父类添加一个伪类：after(推荐)
写法稍微复杂一些，但是没有副作用，推荐使用
5.5、对比
-
display
方向不可以控制
-
float
浮动起来的话会脱离标椎文档流，所以要解决父级边框塌陷的问题
6、定位
6.1、相对定位
相对定位：position：relative；
相对于原来的位置进行指定的偏移，相对定位的话，它仍然在标椎文档流中，原来的位置会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding:20px;
}
div{
padding: 10px;
margin: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding:0;
}
#first{
background: red;
border: 1px dashed #25aa44;
position: relative;/*相对定位*/
top: -10px;
left: 5px;
}
#second{
background: blue;
border: 1px dashed #3561d9;
}
#third{
background: yellow;
border: 1px dashed #1c5a68;
}
</style>
</head>
<body>
<div id="father">
<div id="first"> 第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
6.2、绝对定位
绝对定位：position: absolute; 基于xxx进行定位，上下左右
1.没有父级元素的前提下，会相对于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它在标准文档流中，原来的位置不会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
padding: 10px;
margin: 5px;
line-height: 25px;
font-size: 12px;
}
#father{
border: 1px solid #666;
position: relative;
}
#first{
background: #35d8a2;
border: 1px dashed #36ae44;
}
#second{
background: #6372d3;
border: 1px dashed #25ae19;
position: absolute;
left: 100px;
}
#third{
background: #a261ad;
border: 1px dashed #c26678;
}
</style>
</head>
<body>
<div id="father">
<div id="first"> 第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
6.3、固定定位
固定定位：position: fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){/*绝对定位，相对于父级元素或浏览器*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){/*fixed，固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
6.4、z-index
- 图层：z-index默认是0，最高无限
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/bg.jpg" alt=""></li>
<li class="tipText">一枕黄粱梦</li>
<li class="tipBg"></li>
<li>时间：2022-03-11</li>
<li>地点：湖北</li>
</ul>
</div>
</body>
</html>
- 背景透明度：opacity: 0.5;
#content{
width: 380px;
padding: 0;
margin: 0;
overflow: hidden;
line-height: 25px;
font-size: 12px;
border: 1px solid black;
}
ul,li{
list-style: none;
padding: 0;
margin: 0;
}
/*父类元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
width: 380px;
height: 25px;
position: absolute;
top: 216px;
}
#tipText{
color: white;
/*z-index: 0;*/
}
#tipBg{
background: black;
opacity: 0.5;/*背景透明度*/
filter:Alpha(opacity=50);/*IE8及其更早版本*/
}
7、动画
三、JavaScript
1、什么是Javascript
1.1、概述
JavaScript 是一种基于对象和事件驱动并具有安全性能的脚本语言 。
JavaScript 官方名称是 "ECMAScript" （ECMA是欧洲电脑商制造协会）。
JavaScript 特点：
- 一种脚本语言
- 基于对象
- 动态性的
- 简单易用性
- 安全性
- 跨平台性
- 改善用户体验
Javascript 脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript 提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
JavaScript 与 Java 的不同点：
-
Java代码必须编译才能执行,而JavaScript不需编译，只需浏览器解释执行
-
Java和JavaScript虽然都可以在服务器与客户端执行，但Java多运行于服务器，而JavaScript多运行于客户端
-
JavaScript使用的是松散型的数据类型，而Java则使用的是严谨的数据类型
组成一个完整的 JavaScript 是由以下 3 个不同部分组成的：
- JavaScript核心（ECMAScript）
- 文档对象模型（Document Object Model，简称DOM）
- 浏览器对象模型（Browser Object Model，简称BOM）
1.2、历史
JavaScript 的历史 (w3school.com.cn)
2、快速入门
2.1、引入JavaScript
-
内部标签
<script></script> -
外部引入
<script src = "abc.js"></script> -
测试代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 在script标签内写JavaScript代码 --> <!--<script> alert('hello,world'); </script>--> <!-- 外部引入，script标签必须要成对 --> <script src="js/js.js"></script> <!-- 不用显示定义type，默认就是 javascript --> <script type="text/javascript"></script> </head> <body> </body> </html>
2.2、基础语法入门
-
绝大部分语法同Java相同
<script> //1.定义变量 变量类型（var） 变量名 = 变量值 var score = 5; //alert(score); 弹窗 //2.条件控制 if (score<60 && score>0){ alert("不及格"); }else if (score<60 && score>0){ alert("及格"); }else { alert("良好"); } //console.log(score); 在浏览器的控制台打印变量 相当于sout </script> -
浏览器上的调试
2.3、数据类型
-
变量
-
number
js中不区分小数和整数
123 //整数123 123.5 //小数123.5 1.2555e5 //科学计数法 -5213 //负数 NaN //not a number Infinity //表示无限大 -
字符串
-
布尔值
-
逻辑运算符
&& 全真为真，全假为假 || 一个为真结果为真 ! 真即是假，假即为真 -
比较运算符
= 赋值 == 等于(类型不一样，值一样也会判断为true) === 绝对等于(类型一样，值一样，结果为true)这是JS的一个缺陷，一定注意不要使用==来比较
注意：
1.NaN==NaN，这个和所有的数值都不相等，包括自己 2.只能通过isNaN(NaN)来判断这个数是否为NaN -
null和undefined
-
数组
-
对象
对象是大括号,数组是中括号.
每一个属性之间使用逗号隔开，最后一个不需要添加.
var person = { name : xianglin, age : 20, tag: ['js','web','java','....'] }
2.4、严格检查模式
-
前提：IEDA需要设置支持es6语法
'use strict':严格检查模式，预防JavaScript的随意性产生的一些问题必须写在JavaScript的第一行
局部变量建议使用let去定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 前提：IEDA需要设置支持es6语法 'use strict';严格检查模式，预防JavaScript的随意性产生的一些问题 必须写在JavaScript的第一行 局部变量建议使用let去定义 --> <script> 'use strict'; let j = 1; </script> </head> <body> </body> </html>
3、数据类型
3.1、字符串
-
正常字符串我们使用单引号或者双引号包裹
-
注意转义字符
' \n \t \u4e2d \u#### Unicode字符 \x41 Ascll字符 -
多行字符串编写
'use scrict'; let msg = `你好呀 hello world` console.log(msg); -
模板字符串
let name = "sunwukong"; let age = 3; let mes = `你好呀 ${name}`; -
字符串长度
console.log(student.length); -
字符串的可变性，不可变性
-
大小写转换
console.log(student.toUpperCase()) //STUDENT console.log(student.toLowerCase()) //student -
student.indexOf(‘t’) 输出t在字符串中的位置
-
截取字符串
student.substring(1) //从第一个字符串截取到最后一个字符串 student.substring(1,3) //[1,3) 含头不含尾
3.2、数组
Array可以包含任意的数据类型
常用方法
-
长度 //假如给arr.length赋值，数组大小会发生变化，如果赋值过小，元素会丢失
-
indexOf通过元素获取下标索引
-
slice() 截取Array的一部分，返回一个新数组，类似于String里的substring
-
数组尾部添加或弹出：push添加 pop弹出
-
头部：unshift添加 shift弹出
-
排序：sort
arr (3) ["b", "c", "a"] arr.sort() (3) ["a", "b", "c"] -
元素反转：reverse
(3) ["a", "b", "c"] arr.reverse() (3) ["c", "b", "a"] -
拼接：concat
arr.concat([1,2,3]) (6) ["c", "b", "a", 1, 2, 3] arr (3) ["c", "b", "a"]注意：concat()并没有修改数据，只是会返回一个新的数组
-
连接符：join
(3) ["a", "b", "c"] arr.join('-') "c-b-a" -
多维数组
var arr = [[1,2],[3,4],[5,6]] undefined arr[1][1] 4 arr (3) [Array(2), Array(2), Array(2)] 0: (2) [1, 2] 1: (2) [3, 4] 2: (2) [5, 6] length: 3
3.3、对象
JavaScript中对象，{…}表示一个对象，键值对描述属性 xxx ： xxx 多个属性之间使用逗号隔开，最后一个不加逗号
JavaScript中所有的键都是字符串，值是任意对象！
var 对象名 = {
属性名1 : 属性值1,
属性名2 : 属性值2,
属性名3 : 属性值3
}
//定义了一个person对象，它有四个属性
var person = {
name : "xiaoming",
age : 5,
email : "[email protected]",
score : 60
}
-
对象赋值
person.age = 76 76 person.age 76 -
使用一个不存在的属性时，不会报错
person.haha undefined -
动态的删减属性，通过delete删除对象的属性
delete person.score true person {name: "xiaoming", age: 76, email: "[email protected]"} -
动态的添加属性，直接给新的属性添加值即可
person.haha = "haha" "haha" person {name: "xiaoming", age: 76, email: "[email protected]", haha: "haha"} -
判断属性值是否在这个对象中！ xxx in xxx
'age' in person true //继承 'toString' in person true -
判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty('age') true person.hasOwnProperty('jah') false
3.4、流程控制
-
if判断
var score = 80; if (score < 60){ alert("不及格"); }else if (score > 60 && score < 80 ) { alert("及格"); }else alert("优秀"); -
while循环
var age = 3; while (age<100){ age++; console.log(age) } -
for循环
for (let i = 0; i < 10; i++) { console.log(i); } -
for Each循环
var arr = [15,56,1,56,56,25,2,8,47]; arr.forEach(function (value){ console.log(value); //lamdba表达式 }) -
for…in
var arr = [15,56,1,56,56,25,2,8,47]; for (let number in arr) { if (arr.hasOwnProperty(number)){ console.log("存在"); console.log(arr[number]); } }
3.5、Map和Set
ES6的新特性
- Map
//ES6 Map
//学生的成绩，学生的名字
//var names = ["tom", "jack", "haha"];
//var scores = [100, 90, 80];
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom');//通过key获得value
map.set('admin',123456);//增加或修改
map.delete("tom");//删除
- Set:无序不重复集合
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素
3.6、iterator
ES6新特性
- 遍历数组
//for of 获取元素值/ for in 获取元素下标
var arr = [3,4,5];
for(let x of arr){
console.log(x)
}
- 遍历map
var map = new Map([["tom",100],["jack",90],["haha",80]]);
for(let x of map){
console.log(x)
}
- 遍历set
var set = new Set([5,6,7]);
for(let x of set){
console.log(x)
}
4、函数及面向对象
4.1、函数定义
定义方式1：
绝对值函数
function abs(x){
if(x>=0){
return x;
}else
return -x;
}
一旦执行到return代表函数结束，直接返回结果。
如果没有执行return，函数执行完也会返回结果，也就是undefined。
定义方式2：
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
function(x){…}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数。
方式一和方式二等价！
调用函数
abs(10) //10
abs(-10) //10
参数问题：JavaScript可以传递任意个参数，也可以不传递参数。
参数进来是否存在的问题？
假设不存在参数，应该如何规避？
var abs = function(x){
//手动抛出异常来判断
if(typeof x !== "number"){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments
arguments是一个JS免费赠送的一个关键字，代表传递进来所有的参数，是一个数组！
var abs = function(x){
console.log("x=>"+x);
for(var i = 0;i < arguments.length;i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有的参数。
rest
if(arguments.length > 2){
for(let i = 2;i<arguments.length;i++){
//。。。
}
}
ES6引入的新特性，获取除了已经定义的参数之外的所有参数
function aaa(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest参数只能写在最后，必须用…标识。
4.2、变量作用域
在JavaScript中，var定义变量实际上是有作用域的。
-
假设在函数体中声明，则在函数外不可以使用(一定要实现的话可以研究一下
闭包)function xl(){ var x = 1; x = x + 1; } x = x + 2;//Uncaught ReferenceError: x is not defined -
如果两个函数使用了相同的变量名，只要在函数内部就不会冲突
function xl(){ var x = 1; x = x + 1; } function xl2(){ var x = 'A'; x = x + 1; } -
内部函数可以访问外部函数的成员，反之不行
function xl(){ var x = 1; function xl2(){ var y = x + 1;//2 } var z = y + 1;//Uncaught ReferenceError: y is not defined } -
假设内部函数和外部函数的变量重名
function xl(){ var x = 1; function xl2(){ var x = 'A'; console.log('inner'+x);//innerA } console.log('outer'+x);//outer1 xl2(); } xl();假设在JavaScript中函数查找变量从自身函数开始，由”内“向”外“查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
-
提升变量的作用域
function xl(){ var x = 'x' + y; console.log(x); var y = 'y'; } xl();结果：xundefined
说明：JavaScript执行引擎，自动提升了y的声明，但是不会提升y变量的赋值
全局函数
//全局变量 var x = 1; function a(){ console.log(x);//1 } a(); console.log(x);//1全局对象
var x = 'xxx'; alert(x); alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下alert()这个函数本身也是一个
window对象var x = 'xxx'; window.alert(x); var old_alert = window.alert; //old_alert(x);//使用old_alert(x)也可以成功输出 window.alert(123); window.alert = function(){ } window.alert(123);//alert失效了 window.alert = old_alert;//恢复 window.alert(456);JavaScript实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错
RefrenceError规范
由于我们所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，就会发生冲突，如何减少冲突？
var xiangApp = {};//唯一全局变量 xiangApp.name = 'xianglin';//定义全局变量 xiangApp.add = function(a,b){ return a + b; }将自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题。
局部作用域
function aaa(){ for(var i = 0; i < 100; i++){ console.log(i); } console.log(i+1);//101 问题：i出了for循环的作用域还可以使用 }ES6关键字
let，去定义局部作用域的变量；function bbb(){ for(let i = 0; i < 100; i++){ console.log(i); } console.log(i+1);//Uncaught ReferenceError: i is not defined }建议以后使用let去定义局部作用域的变量
在ES6之前，怎么定义常量：只要全部用大写字母命名的变量就是常量；
var PI = '3.14'; console.log(PI);//3.14 PI = '123';//可以随意修改这个常量 console.log(PI);//123在ES6中引入了关键字
constconst PI = '3.14';//只读常量 console.log(PI); PI = '123'; console.log(PI);//Uncaught TypeError: Assignment to constant variable.
4.3、方法
定义方法
-
就是把函数放在对象的里面，对象里只有两个东西：属性和方法
var zhangsan = { name : '张三', birth : 2000, age : function () { let now = new Date().getFullYear(); return now - this.birth; } } //属性 zhangsan.name //方法，一定要带（） zhangsan.age() -
this.代表着什么？拆开上面的代码看看
function getAge() { let now = new Date().getFullYear(); return now - this.birth; } var zhangsan = { name : '张三', birth : 2000, age : getAge() } //zhangsan.age() //ok //getAge() //NaN window对象中没有birth
this是无法指向的，是默认指向调用它的那个对象
apply
在JavaScript中可以使用apply控制this指向
function getAge() {
var now = new Date().getFullYear();
return now - this.birth;
}
var zhangsan = {
name : '张三',
birth : 2000,
age : getAge
}
zhangsan.age();//主动调用
getAge.apply(zhangsan,[]); //被动调用，this指向了zhangsan，参数为空
5、内部对象
5.1、Date
- 基本使用
var data = new Date();
data.getFullYear();//年份
data.getMonth();//月份 0~11
data.getDate();//天
data.getDay();//星期几
data.getHours();//小时
data.getMinutes();//分钟
data.getSeconds();//秒
data.getTime();//时间戳
console.log(data = new Date(1616589902676));//转为标准时间
- 转换
data = new Date(1616589902676)
Wed Mar 24 2021 20:45:02 GMT+0800 (中国标准时间)
data.toLocaleDateString(); //"2021/3/24"
data.toGMTString(); //调用方法
//"Wed, 24 Mar 2021 12:45:02 GMT
5.2、JSON
什么是JSON
早期所有数据传输习惯使用XML文件！
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript中一切皆为对象，任何JavaScript支持的类型都可以用JSON表示；如number,string…
格式：
-
对象都用{}
-
数组都用[]
-
所有的键值对都是用 key：value
var user = { name:'zhangsan', age:3, sex:'男' } //对象转化为json字符串 {"name":"zhangsan","age":3,"sex":"男"} var jsonUser = JSON.stringify(user); console.log(jsonUser); //转换字符串为对象 var obj = JSON.parse('{"name":"zhangsan","age":3,"sex":"男"}'); //{name: "zhangsan", age: 3, sex: "男"}JSON和对象的区别
var obj = {a:'hello',b:'hellob'}; var json = '{"a"："hello","b":"hellob"}';
5.3、Ajax
- 原生的js写法 xhr异步请求
- jQuery封装好的方法 $("#name").ajax("")
- axios请求
6、面向对象编程
JavaScript、Java、c#…面向对象编程；JavaScript有何区别
-
类：模板
-
对象：具体的实例
在JavaScript这个需要大家换一下思维方式
原型：
var Student = {
name:"xaioming",
age : 3,
run : function () {
console.log(this.name+" run....");
}
}
var xiaozhang = {
name: "xiaozhang"
}
//原型对象
xiaozhang.__proto__ = Student;
var bird = {
fly : function () {
console.log(this.name+" fly....");
}
};
//小张的原型是Student
xiaozhang.__proto__ = bird;
function Student(name) {
this.name = name;
}
//给Student新增一个方法
Student.prototype.hello = function () {
alert("hello");
};
6.1、class继承
class关键字，是在ES6引入的
1、定义一个类，属性、方法
//定义一个学生的类
class Student{
constructor(name) {
this.name = name;
}
hello (){
alert("hello");
}
}
var xaioming = new Student("xiaoming");
var xaiohong = new Student("xiaohong");
xaioming.hello();
2、继承
class Student{
constructor(name) {
this.name = name;
}
hello (){
alert("hello");
}
}
class xiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
MYGrade(){
alert("我是一名小学生")
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new xiaoStudent("xiaohong,1");
xiaoming.hello();
本质：查看对象原型
6.2、原型链
7、操作Bom对象(重点)
浏览器介绍
JavaScript和浏览器之间的关系？
JavaScript诞生就是为了能够让它在浏览器中运行
BOM：浏览器对象模型
- IE 6-11
- Chrome
- Safari
- FireFox
三方浏览器：QQ浏览器，360浏览器，UC浏览器等
7.1、window
window代表浏览器窗口
window.alert("123")
undefined
window.innerHeight
760
window.innerWidth
491
window.outerHeight
864
window.outerWidth
1536
//通过window获得浏览器窗口大小
7.2、Navigator
Navigator封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36"
navigator.platform
"Win32"
大多数时候，我们不会使用navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码
7.3、screen
代表屏幕尺寸
screen.width
1920 px
screen.height
1080 px
7.4、location(重要)
location代表当前页面的URL信息
location.host "www.baidu.com" //主机
location.href "https://www.baidu.com/" //当前指向的位置
location.protocol "https:" //协议
location.reload //刷新网页
//设置新的地址
location.assign('https://www.kuangstudy.com/')
7.5、Document
-
document代表当前的页面，HTML DOM文档树
document.title "百度一下，你就知道" document.title='666' "666" -
获取具体的文档树节点
<dl id="app"> <dt>javaSE</dt> <dt>javaEE</dt> <dt>javaME</dt> </dl> <script> var dl = document.getElementById('app'); </script> -
获取cookie
document.cookie "_uuid=ABB41E69-8A2D-5C9E-91F8-535FE6C5368696306infoc; buvid3=1E000DC4-7833-4DFC-9F80-ACB1E118A758138376infoc; sid=6m3ndo5f; CURRENT_FNVAL=80; blackside_state=1; rpdid=|(um|RYku~um0J'uY||)Y~Rul" -
劫持cookie原理
www.taobao.com
<script src="aa.js"></script> <!--恶意人员：获取你的cookie上传到他的服务器-->服务器可以设置cookie：httpOnly
7.6、history(不建议使用)
history代表浏览器的历史纪录
history.back()//后退
history.forward()//前进
8、操作DOM对象(重点)
核心
浏览器网页就是一个DOM树形结构
-
更新：更新DOM节点
-
遍历DOM节点：得到DOM节点
-
删除：删除一个DOM节点
-
添加：添加一个DOM节点
要操作一个DOM节点，就必须先获得这个DOM节点
8.1、获得DOM节点
//对应CSS选择器
var h1 = document.getElementsByTagName("h1");
var p1 = document.getElementById("p1");
var p2 = document.getElementsByClassName("p2");
var father = document.getElementById("father")
var children = father.children;//获取父节点下的所有子节点
//father.lastChild;
//father.firstChild;
这是原生代码，之后我们尽量都使用jQurey
8.2、更新节点
<div id="d1"></div>
<script>
var d1 = document.getElementById("d1");
</script>
操作文本：
-
d1.innerText = “123”修改文本的值 -
d1.innerHTML = ‘<strong>123</strong>’可以解析HTML文本标签
操作css:
d1.style.color = 'red' //属性使用 字符串包裹
d1.style.fontSize = '20px' // - 转 驼峰命名问题
d1.style.padding = "2em"
8.3、删除节点
删除节点的步骤： 先获取父节点，通过父节点删除自己
<div>
<h1>标题一</h1>
<p id='p1'>p1</p>
<p class='p2'>p2</p>
</div>
<script>
var self = document.getElementByID('p1');
var father = p1.parentElement; //找到p1的父节点
father.removechild(self) //通过父节点使用removechild删掉自己（只有标记为id选择器的节点才可以删除)
</script>
注意：删除是一个动态的过程，删除多个节点时，children是在时刻变化的，删除节点时一点要注意！
8.4、插入节点
我们获得了某个Dom节点，假设这个Dom节点是空的，我们会通过innterHTML就可以增加一个元素，但是如果这个Dom节点已经存在元素了，我们就不能这样干了，会产生覆盖！
追加：
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById("js");
var list = document.getElementById("list")
list.append(js); //追加节点到后面
</script>
8.5、创建一个新的标签实现插入
<script>
var js = document.getElementById("js");//已经存在的节点
var list = document.getElementById("list")
list.append(js);
var newP = document.createElement("p");//创建一个p标签
newP.id = 'newP';
newP.innerText = 'sunwukong';
list.appendChild(newP);
var myScript = document.createElement("script");//创建一个标签节点
myScript.setAttribute('type',"text/javascript");
var body = document.getElementsByTagName("body");
//body[0].setAttribute('style','backgroundColor = \'#32a356')
//body[0].style.backgroundColor = '#32a356';
//创建一个style标签
var myStyle = document.createElement("style");
myStyle.setAttribute('type','text/css');
myStyle.innerText = 'body{background-color:#000000}';//设置标签内容
document.getElementsByTagName('head')[0].append(myStyle);
</script>
8.6、insertBefore
<script>
let ee = document.getElementById('ee');
let js = document.getElementById('js');
let list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
/*
JavaSE
JavaScript
JavaEE
JavaME
*/
</script>
9、操作表单(验证)
9.1、获取要提交的信息
<form action="#" method="post">
<p>
<span>用户名：</span> <input type="text" id="username">
</p>
<!--多选框的值，就是定义好的value -->
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy"> 男
<input type="radio" name="sex" value="woman" id="girl"> 女
</p>
</form>
<script>
var input_text = document.getElementById("username");
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
//得到输出框的值
input_text.value
//修改输入框的值
input_text.value = '123'
//对于单选框，多选框等固定的值，boy_radio.value只能取到当前的值
boy_radio.checked;//查看返回的结果是否为true，如果为true，则代表选中
boy_radio.checked = true;//赋值
</script>
9.2、提交表单，MD5加密密码，表单优化
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<!--
表单绑定提交事件
onsubmit=绑定一个提交检测的函数，true，flase
将这个结果返回给表单，使用onsubmit接收！
onsubmit="return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名: </span> <input type="text" id="username" name="username">
</p>
<p>
<span>密码: </span> <input type="password" id="input-password" >
</p>
<input type="hidden" id="md5-password" name="password">
<!--绑定事件 onclick 被点击-->
<button type="submit">提交</button>
</form>
<script>
function aaa() {
alert(1);
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
//可以校验判断表单内容，true就是通过提交，false就是阻止提交
return true;
}
</script>
10、jQuery
jQuery库：里面存在大量的JavaScript函数
公式：$(selector).action()
10.1、获取jQuery
- 导入jQuery在线引用地址http://libs.baidu.com/jquery/2.1.4/jquery.min.js
- 官网下载导入项目中 https://jquery.com/download/
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>-->
<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
//公式：$(selector).action()
//选择器就是CSS的选择器
$('#test-jquery').click(function () {
alert('666');
})
</script>
</body>
</html>
10.2、选择器
<script>
//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css里的选择器它都能用！！！
$('p').click(); //标签选择器
$('#id').click();//id选择器
$('.class').click();//class选择器
</script>
文档工具站：https://jquery.cuishifeng.cn
10.3、事件
- 鼠标事件、键盘事件、其他事件…
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Title</title>
<script src="lib/jquery-3.6.0.min.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕后，响应事件
$(function (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x:'+e.pageX + ' y'+e.pageY)
});
});
</script>
</body>
</html>
10.4、操作DOM
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
- 节点文本操作
$('#test-ul li[name=python]').text();// 获得值
$('#test-ul li[name=python]').text('Python');// 设置值
$('#test-ul').html();// 获得值
$('#test-ul').html('<strong>123</strong>');// 设置值
- css的操作
$('#test-ul li[name=python]').css('color','red');
- 元素的显示和隐藏:本质
display : none
// 元素的显示
$('#test-ul li[name=python]').show();
// 元素的隐藏
$('#test-ul li[name=python]').hide();
- 娱乐测试
$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();
四、Vue框架
Vue2.0
1、vue 简介
1.1、Vue
Vue是一套用于构建用户界面的前端框架
- 构建用户界面：用vue往html页面中填充数据，非常的方便
- 框架
- 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
- 要学习vue，就是在学习vue框架中规定的用法！
- vue的指令、组件(是对UI结构的复用)、路由、Vuex、vue组件库。
- 只有把上面老师罗列的内容掌握以后，才有开发vue项目的能力！
1.2、Vue 的特性
- 数据驱动视图
- 数据的变化会驱动视图自动更新
- 好处：程序员只管把数据维护好，那么页面结构会被Vue自动渲染出来！
- 双向数据绑定：在网页中，form表单负责采集数据，Ajax负责提交数据
- js数据的变化，会被自动渲染到页面上
- 页面上表单采集的数据发生变化的时候，会被Vue自动获取到，并更新到js数据中
1.3、MVVM
MVVM是Vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model数据源、View视图、ViewModel就是Vue实例。
- Model表示当前页面渲染时所依赖的数据源
- View表示当前页面所渲染的DOM结构
- ViewModel表示Vue的实例，它是MVVM的核心
1.4、vue 的版本
当前，vue 共有 3 个大版本
- 2.x 版本的 vue 是目前企业级项目开发中的主流版本
- 3.x 版本的 vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广
- 1.x 版本的 vue 几乎被淘汰，不再建议学习与使用
2、vue 的基本使用
2.1、基本使用步骤
- 导入 vue.js 的 script 脚本文件
- 在页面中声明一个将要被 vue 所控制的 DOM 区域
- 创建 vm 实例对象（vue 实例对象）
2.2、基本代码与 MVVM 的对应关系
3、vue 的调试工具
3.1、安装 vue-devtools 调试工具
https://microsoftedge.microsoft.com/addons/detail/vuejs-devtools/olofadcdnkkjdfgjcmjaadnlehnnihnl
3.2、配置edge 浏览器中的 vue-devtools
3.3、使用vue-devtools调试vue页面
3.3、使用 vue-devtools 调试 vue 页面
4、vue 的指令与过滤器
4.1、指令
指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
vue 中的指令按照不同的用途可以分为 6 大类：
-
内容渲染指令
-
v-text：缺点：会覆盖元素内部原有的内容！
-
{{ }}(专业名称：插值表达式)：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
插值表达式只能用在元素的内容节点中，不能用在元素节点中！
-
v-html：可以把带有标签的字符串，渲染成真正的HTML内容！
-
-
属性绑定指令
- v-bind：为元素的属性动态绑定值；
v-bind:简写为:
- v-bind：为元素的属性动态绑定值；
-
事件绑定指令
- v-on:辅助程序员为DOM元素绑定事件监听；
v-on:简写为@
$event应用场景：如果默认的事件对象e被覆盖了，则可以手动传递一个$event<button @click="add(3,$event)"></button> methods: { add(n, e) { this.count += n; }, },事件修饰符 说明 .prevent 阻止默认行为(列如：阻止a链接的跳转，阻止表单的提交等) .stop 阻止事件冒泡 按键修饰符
<input @keyup.enter="xxx"> - v-on:辅助程序员为DOM元素绑定事件监听；
-
双向绑定指令
-
v-model:辅助开发者在不操作DOM的前提下，快速获取表单的数据
- input输入框
- textarea
- select
修饰符 作用 示例 .number 自动将用户的输入值转为数值类型 .trim 自动过滤用户输入的首尾空白字符 .lazy 在‘change’时而非‘input’时更新
-
-
条件渲染指令 :辅助开发者按需控制DOM的显示与隐藏
1、如果要频繁的切换元素的显示状态，用
v-show性能会更好，反之，用v-if2、在实际开发中，大多数情况不用考虑性能问题，直接使用v-if
-
v-show:原理：动态为元素添加或移除
display:none样式，来实现元素的显示或隐藏 -
v-if:原理：每次动态创建或移除元素，实现元素的显示或隐藏
- v-else：必须配合v-if指令一起使用，否则它将不会被识别！
<div v-if="xxx"></div> <div v-else="xxx"></div>- v-else-if：必须配合v-if指令一起使用，否则它将不会被识别！
<div v-if="xxx"></div> <div v-else-if="xxx"></div> <div v-else-if="xxx"></div> <div v-else></div>
-
-
列表渲染指令
-
v-for:辅助开发者基于一个数组来循环渲染一个列表结构。语法结构：
item in items- items是带循环的数组
- item是被循环的每一项
data:{ list:[ {id:1,name:'zs'}, {id:2,name:'ls'}, ] } //-------分割线-------- <ul> <li v-for="(item,index) in list" :key="id">索引是{{index}},姓名是{{item.name}}</li> </ul>
-
4.2、过滤器
- 过滤器
过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式 和 v-bind 属性绑定。
过滤器应该被添加在JavaScript表达式的尾部，由“管道符”进行调用，示例代码如下：
<!--在双花括号中通过“管道符”调用 capitalize 过滤器，对message 的值进行格式化-->
<p>{{ message | capitalize }}</p>
<!--在 v-bind 中通过“管道符”调用 formatId 过滤器，对 rawId 的值进行格式化 -->
<div v-bind:id="rawId | formatId"></div>
- 私有过滤器和全局过滤器
在filters节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前vm实例所控制的el区域内使用。
如果希望在多个vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：
<!--全局过滤器 -独立于每个vm实例之外-->
<!--Vue.filter()方法接收两个参数-->
<!--第1个参数，是全局过滤器的“名字”-->
<!--第2 个参数，是全局过滤器的"处理函数”-->
Vue.filter('capitalize', function(str){
return str.charAt(0).toUpperCase()+str.slice(1)
})
过滤器的注意点
1.要定义到filters节点下，本质是一个函数
2.在过滤器函数中，一定要有return值
3.在过滤器的形参中，就可以获取到“管道符”前面待处理的那个值
4.如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是“私有过滤器”
- 连续调用多个过滤器
过滤器可以串联地进行调用，例如：
<!--把 message 的值，交给 filterA 进行处理-->
<!--把 filterA 处理的结果，再交给 filterB 进行处理-->
<!--最终把 filterB处理的结果，作为最终的值渲染到页面上-->
{{ message | filterA | filterB }}
- 过滤器传参
过滤器的本质是JavaScript函数，因此可以接收参数，格式如下：
<!-- arg1 和 arg2 是传递给 filterA 的参数 -->
<p>{{ message | filterA(arg1, arg2) }}</p >
//过滤器处理函数的形参列表中：
//第一个参数：永远都是“管道符“前面待处理的值
//从第二个参数开始，才是调用过滤器时传递过来的 arg1 和 arg2 参数
Vue.filter('filterA', (msg, arg1, arg2) => (
//过滤器的代码逻辑...
})
-
过滤器的兼容性
过滤器仅在vue 2.x和1.x中受支持，在vue 3.x的版本中剔除了过滤器相关的功能。在企业级项目开发中：
- 如果使用的是2.x版本的vue，则依然可以使用过滤器相关的功能
- 如果项目已经升级到了3.x版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能
- 具体的迁移指南，请参考vue 3.x的官方文档给出的说明：
https://v3.vuejs.org/guide/migration/filters.html#migration-strategy
5、侦听器
5.1、watch侦听器
watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
语法格式如下：
const vm = new Vue({
el:'#app',
data:{ username:''},
watch:{
//监听 username 值的变化
//newVal 是“变化后的新值”，oldVal 是“变化之前的旧值”
username(newWal，oldVal){
console.log(newVal，oldVal)
}
}
})
5.2、使用 watch 检测用户名是否可用
监听username值的变化，并使用axios发起Ajax请求，检测当前输入的用户名是否可用：
watch:{
//监听 username 值的变化
async username(newVal){
if (newVal === '') return
//使用 axios 发起请求，判断用户名是否可用
const { data: res } =await axios.get('https://www.escook.cn/api/finduser/'+newVal)
console.log(res)
}
}
5.3、侦听器的格式
1.方法格式的侦听器
- 缺点1：无法在刚进入页面的时候，自动触发！！！
- 缺点2：如果侦听的是一个对象，如果发生了变化，不会触发侦听器！！！
2.对象格式的侦听器
- 好处1：可以通过immediate选项，让侦听器自动触发！！！
- 好处2：可以通过deep选项，让侦听器深度监听对象中每个属性的变化！！！
immediate选项
watch:{
/／定义对象格式的侦听器
username:{
//侦听器的处理函数,hander是固定写法，当username的值发生变化时触发
handler(newVal,oldVal){
console.log(newVal，oldVal)
},
// immediate 选项的默认值是 false
// immediate 的作用是：控制侦听器是否自动触发一次！
immediate: true
}
}
3.监听对象单个属性的变化
const vm = new Vue({
el:'#app',
data:{
info:{ username:'admin'}
},
watch:{
'info.username':{
handler(newVal){
console.log(newVal)
}
}
)
热门相关：仙城纪 第一神算：纨绔大小姐 刺客之王 大神你人设崩了 第一神算：纨绔大小姐