注：之前上传失败的图片都上传好了
前端开发概述
从软件分类开始说，学习编程语言，主要是为了开发软件的，软件按照使用目的不同可以分为系统软件和应用软件，还可以按照软件程序和数据存储位置的不同，可以分为单机软件、C/S架构软件、B/S架构软件，不同架构的软件，界面的开发方式不同：
- 单机软件：软件程序和数据都存储在客户端 界面：GoQt、GXUI库
- C/S(Client/Server)架构软件：软件程序和数据一部分存在客户端，一部分存在服务器端 界面：GoQt、GXUI库
- B/S(Broswer/Server)架构软件：软件程序和数据全部存在服务器端，界面：网页(web)
前端开发也叫作web前端开发，是为B/S架构的软件提供界面解决方案的。
1.html和css入门
介绍html文档的基本结构，html常用标签的使用，理解html语言制作网页基本原理，理解css的基本语法，css的引入方式，css选择器，css基本属性的使用等等。
1.1html概述及html文档基本结构
html概述
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
html文档基本结构
一个html的基本结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。
html文档快速创建
新建一个html文档后，可以用快捷键的方式快速创建html文档。快捷键：!+tab键，或者 html:5+tab键
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--设置网页在移动端观看时，网页不缩放-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--设置网页在IE上观看时，以IE的最高版本渲染网页-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>1.2html标签入门
标签语法
学习html语言就是学习标签的用法，html常用的标签有20多个，学会这些标签的使用，就基本上学会了HTML的使用。
标签的的使用方法
<!-- 1、成对出现的标签：-->
<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>
<!-- 2、单个出现的标签： -->
<br>
<img src="images/pic.jpg" alt="图片">
<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>
<!-- 4、标签的嵌套 -->
<div>
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>
</div>块元素标签(行元素)和内联元素标签(行内元素)
标签在页面上会显示成一个方块。除了显示成方块，它们一般分为下面两类：
块元素：在布局中默认会独占一行，宽度默认等于父级的宽度，块元素后的元素需换行排列。
内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开，元素之间默认有小间距，而且是基线对齐(文字底部对齐)。
常用块元素标签
1、标题标签，表示文档的标题，除了具有块元素基本特性外，还含有默认的外边距和字体大小
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>2、段落标签，表示文档中的一个文字段落，除了具有块元素基本特性外，还含有默认的外边距
<p>本人叫张山，毕业于某大学计算机科学与技术专业，今年23岁，本人性格开朗、
稳重、待人真诚、热情。有较强的组织能力和团队协作精神，良好的沟通能力和社
交能力，善于处理各种人际关系。能迅速适应环境，并融入其中。</p>
<p>本人热爱研究技术，热爱编程，希望能在努力为企业服务的过程中实现自身价值。</p>3、通用块容器标签，表示文档中一块内容，具有块元素基本特性，没有其他默认样式
<div>这是一个div元素</div>
<div>这是第二个div元素</div>
<div>
<h3>自我介绍</h3>
<p>本人叫张山，毕业于某大学计算机科学与技术专业，今年23岁，本人性格开朗、
稳重、待人真诚、热情。有较强的组织能力和团队协作精神，良好的沟通能力和社
交能力，善于处理各种人际关系。能迅速适应环境，并融入其中。</p>
</div>常用内联元素标签
1、超链接标签，链接到另外一个网页，具有内联元素基本特性，默认文字蓝色，有下划线
<a href="02.html">第二个网页</a>
<a href="http://www.baidu.com">百度网</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a>
<a href="#">默认链接</a>2、通用内联容器标签，具有内联元素基本特性，没有其他默认样式
<p>这是一个段落文字，段落文字中有<span>特殊标志或样式</span>的文字</p>3、图片标签，在网页中插入图片，具有内联元素基本特性，但是它支持宽高设置。
<img src="images/pic.jpg" alt="图片" />其他常用功能标签
1、换行标签
<p>这是一行文字，<br>这是一行文字</p>2、html注释
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
<!-- 这是一段注释 -->常用html字符实体
代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：
<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： -->
<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：
<!-- “<” 和 “>” 的字符实体为 < 和 > -->
<p>
<div>是一个html的一个标签<br>
3 < 5 <br>
10 > 5
</p>1.3html布局
网页布局原理
标签在网页中会显示成一个个的方块，先按照行的方式，把网页划分成多个行，再到行里面划分列，也就是在表示行的标签中再嵌套标签来表示列，整体按照先整体，后局部，先大后小的顺序来书写结构。
布局示例
根据网页布局的原理以及上面的实例，写出网页的html结构代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<!-- 第一行 -->
<div>
<div>今日头条</div>
<div>更多>></div>
</div>
<!-- 第二行 -->
<div><img
src="https://img0.baidu.com/it/u=172033599,4129529091&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1731171600&t=586f7f23df893247f240e0e52afbb203"
alt="AI" width="100" height="auto"></div>
<!-- alt="banner"：这是<img>标签的alt属性，用于提供图片的替代文本。如果图片因为某些原因（如网络问题、文本浏览器、用户使用了禁用图片的浏览器设置等）无法显示，这段替代文本就会显示出来。此外，这个属性对于提高网页的可访问性非常重要，特别是对于使用屏幕阅读器的用户来说。-->
<!-- 第三行 -->
<div><p>人工智能（Artificial
Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。</p>
</div>
</div>
</body>
</html>标签语义化
在布局中需要尽量使用带语义的标签，使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构，提高网站在搜索中的排名(也叫做SEO)，其次是方便代码的阅读和维护。
带语义的标签
1、h1~h6：表示标题
2、p：表示段落
3、img：表示图片
4、a：表示链接
不带语义的标签
1、div：表示一块内容
2、span：表示行内的一块内容
所以我们要根据网页上显示的内容，使用适合的标签，可以优化之前的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<!-- 第一行 -->
<div>
<h3>今日头条</h3>
<a href="#">更多>></a>
</div>
<!-- 第二行 -->
<img src="https://img0.baidu.com/it/u=172033599,4129529091&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1731171600&t=586f7f23df893247f240e0e52afbb203" alt="AI" width="100" height="auto">
<!-- 第三行 -->
<p>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。</p>
</div>
</body>
</html>1.4css介绍
css概述
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
css基本语法
css的定义方法是：
选择器 { 属性：值； 属性：值； 属性：值；}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性，每个属性有一个或多个值。属性和值之间用冒号，一个属性和值与下一个属性和值之间用分号，最后一个分号可以省略，代码示例：
/* 样式中注释的写法，单行或者多行注释 */
div{
width:100px;
height:100px;
background:gold;
}1.5css引入方式
css引入页面的方式有三种：
1、内联式：通过标签的style属性，在标签上直接写样式。
<div style="width:100px; height:100px; background:red ">......</div>2、嵌入式：通过style标签，在网页上创建嵌入的样式表。
<style type="text/css">
div{ width:100px; height:100px; background:red }
......
</style>3、外链式：通过link标签，链接外部样式文件到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css">实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 第三种引入样式的方式：外链式 推荐使用 -->
<link rel="stylesheet" href="css/main.css">
<!-- 第二种引入样式的方式：内嵌式 部分推荐使用，一般首页使用 -->
<style>
div{width:200px;height:200px;background:red}
</style>
</head>
<body>
<!-- 第一种引入样式的方式：内联式 不推荐使用 -->
<h3 style="width:200px;height:200px;background:gold">这是一个h3标题</h3>
<div>这是一个div</div>
<p>这是一个段落</p>
</body>
</html>外链式引入css目录下的main.css文件
p{width:200px;height:200px;background:orange}1.6css选择器一
1、标签选择器
标签选择器，此种选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中。
举例：
div{color:red}
......
<div>这是第一个div</div> <!-- 对应以上样式 -->
<div>这是第二个div</div> <!-- 对应以上样式 -->2、类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
......
<div class="blue">....</div>
<h3 class="blue big box">....</h3>
<p class="blue box">....</p>3、层级选择器
主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。
举例：
.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
......
<div class="con">
<span>....</span>
<a href="#" class="pink">....</a>
<a href="#" class="gold">...</a>
</div>
<span>....</span>
<a href="#" class="pink">....</a>实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 定义标签选取器,标签选择器会影响所有同类型的标签，一般比较少用 */
div{color:red}
/* 定义类选择器，一个类可以用在多个标签上，一个标签可以用多个类，是使用最多的一种选择器 */
.blue{color:blue}
.big{font-size:30px}
/* 定义层级选择器 */
.blue span{color:purple;font-size:20px}
</style>
</head>
<body>
<div>这是一个div</div>
<div>这是第二个div</div>
<p class="blue">这是一个p标签</p>
<p class="big blue">这是第二p标签</p>
<p class="blue">本人叫张山，毕业于某大学<span>计算机科学与技术专业</span>，今年23岁,
本人性格开朗、稳重、待人真诚、热情。有较强的组织能力和</p>
<span>外面的span</span>
</body>
</html>1.7CSS元素属性及盒子模型
盒子模型
元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：
把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。
设置宽高
width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */设置边框
设置一边的边框，比如顶部边框，可以按如下设置：
border-top:10px solid red;其中10px表示线框的粗细；solid表示线性。
设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。
四个边如果设置一样，可以将四个边的设置合并成一句：
border:10px solid red;设置内间距padding
设置盒子四边的内间距，可设置如下：
padding-top：20px; /* 设置顶部内间距20px */
padding-left:30px; /* 设置左边内间距30px */
padding-right:40px; /* 设置右边内间距40px */
padding-bottom:50px; /* 设置底部内间距50px */上面的设置可以简写如下：
padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左
四个方向的内边距值。 */padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/
padding：20px; /* 设置四边内边距为20px */设置外间距margin
外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。
盒子的真实尺寸
盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：
- 盒子宽度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
块元素居中技巧
块元素如果想设置相对页面水平居中，可以使用margin值中的auto关键字，“auto”只能用于左右的margin设置，不能用于上下的：
.box{
width:300px;
height:300px;
background:gold;
margin-left:0px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
}简写如下：
.box{
width:300px;
height:300px;
background:gold;
margin:0px auto;
}实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 清除body标签默认的外边距 */
body{
margin:0;
}
.con{
width:300px;
height:300px;
border:1px solid black;
margin:0 auto;
}
.box{
width:200px;
height:80px;
background:gold;
/*
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
*/
/* margin:0px auto 0px auto; */
margin:0 auto;
}
</style>
</head>
<body>
<div class="con">
<div class="box"></div>
</div>
</body>
</html>设置元素浮动属性float
浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;
设置元素背景属性background
设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
/* 设置宽度 */
width:300px;
/* 设置高度 */
height:300px;
/* 设置背景色 */
background:gold;
/* 设置边框
边框的线型：
solid 实线
dashed 虚线
dotted 点线
*/
/* 设置顶部的边框 */
/* border-top:10px solid black; */
/* 设置左边的边框 */
/* border-left:10px dashed black; */
/* 设置右边的边框 */
/* border-right:10px dotted black; */
/* 设置底部的边框 */
/* border-bottom:10px solid black; */
/* 同时设置四个边框 */
border:10px solid black;
/* 设置内边距 */
/* 设置顶部的内边距 */
/* padding-top:20px; */
/* 设置左边的内边距 */
/* padding-left:40px; */
/* 设置右边的内边距 */
/* padding-right:80px; */
/* 设置底部的内边距 */
/* padding-bottom:160px; */
/* 分别设置四个边的内边距可以合在一起写： */
/* 分别设置（顺时针方向） 上边 右边 下边 左边 的padding值 */
/* padding:20px 80px 160px 40px; */
/* 分别设置上边 左右边 下边 的padding值 */
/* padding:20px 80px 160px; */
/* 分别设置上下边 左右边的padding值 */
/* padding:20px 80px; */
/* 同时设置四个边的padding值 */
padding:20px;
/* 设置外边距 */
/* 设置顶部的外边距 */
/* margin-top:20px; */
/* 设置左边的外边距 */
/* margin-left:40px; */
/* 设置右边的外边距 */
/* margin-right:80px; */
/* 设置底部的外边距 */
/* margin-bottom:160px; */
/* 分别设置四个边的外边距可以合在一起写： */
/* 分别设置（顺时针方向） 上边 右边 下边 左边 的margin值 */
/* margin:20px 80px 160px 40px; */
/* 分别设置上边 左右边 下边 的margin值 */
/* margin:20px 80px 160px; */
/* 分别设置上下边 左右边的margin值 */
/* margin:20px 80px; */
/* 同时设置四个边的margin值 */
margin:20px;
}
</style>
</head>
<body>
<div class="box">HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。</div>
<div>下边的div</div>
</body>
</html>1.8css文本属性
- color 设置文字的颜色，如： color:red;
- font-size 设置文字的大小，如：font-size:12px;
- font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei', Helvetica, Arial, sans-serif; 浏览器会首先尝试使用'Microsoft Yahei' 字体。如果用户的系统上没有安装 "Helvetica Neue"，浏览器会尝试使用 Helvetica。如果 Helvetica 也不可用，它会尝试 Arial。如果 Arial 仍然不可用，浏览器将使用其默认的 sans-serif 字体。
sans-serif是一种字体类别，而不是具体的字体名称，它告诉浏览器在没有找到任何具体字体时使用系统的默认无衬线字体。 - font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
- line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
- text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
- text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
- text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
1.9css布局演示
通过样式，并且参照下图，可以把之前写的布局做进一步的调整，完成最终的布局效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.news_con{
width:285px;
height:310px;
/* 设置顶部边框 */
border-top:1px solid #c8dcf2;
/* 设置底部边框 */
border-bottom:1px solid #c8dcf2;
}
.news_con div{
/* 宽度width不用设置，默认等于父级的宽度 */
height:40px;
}
/* 层级选择器可以越级选择 */
.news_con h3{
/* 设置浮动让h3和a标签可以排列在一行 */
float:left;
/* 清除h3标题默认的外边距 */
margin:0;
/* 设置文字颜色 */
color:#172c45;
/* 设置文字大小 */
font-size:16px;
/* 设置文字字体 */
font-family: 'Microsoft YaHei', Helvetica, Arial, sans-serif;
/* 设置文字不加粗 */
font-weight:normal;
/* 通过设置行高来将单行文字垂直居中 */
line-height:40px;
}
.news_con a{
float:right;
/* 设置文字颜色 */
color:#172c45;
/* 设置文字大小 */
font-size:12px;
/* 设置文字字体 */
font-family: 'Microsoft YaHei', Helvetica, Arial, sans-serif;
/* 通过设置行高来将单行文字垂直居中 */
line-height:40px;
/* 去掉文字默认的下划线 */
text-decoration:none;
}
.news_con p{
/* 设置文字颜色 */
color:#737373;
/* 设置文字大小 */
font-size:12px;
/* 设置文字字体 */
font-family: 'Microsoft YaHei', Helvetica, Arial, sans-serif;
line-height:20px;
/* 设置首行缩进 */
text-indent:24px;
/* 清除p标签默认的外边距 */
margin:0;
margin-top:10px;
}
</style>
</head>
<body>
<div class="news_con">
<!-- 第一行 -->
<div>
<h3>今日头条</h3>
<a href="#">更多>></a>
</div>
<!-- 第二行 -->
<img src="https://img0.baidu.com/it/u=172033599,4129529091&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1731171600&t=586f7f23df893247f240e0e52afbb203" alt="AI" width="285" height="80">
<!-- 第三行 -->
<p>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。</p>
</div>
</body>
</html>1.10练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3>HTML概述</h3>
<p>
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记<br>
语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种<br>
语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的<br>
扩展名为html或者htm。<br>
下面是HTML的特征代码：<br>
<div>这是成对出现的标签</div>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width:300px;
height:300px;
background:gold;
/*
border:50px solid black;
增加了边框后，
元素宽度变成了200px+50px(左边框)+50px(右边框)
元素高度变成了200px+50px(上边框)+50px(下边框)
*/
/*
padding:50px;
增加了padding后，
元素宽度变成了300px(包含边框)+50px(左内边距)+50px(右内边距)
元素高度变成了300px(包含边框)+50px(上内边距)+50px(下内边距)
*/
/*
思考：如果给元素增加边框和内边距，又不想改变元素整体的尺寸，应该怎么做？
答：在width和height的基础上减去由边框和内边距增加的尺寸,上面的元素，将width
和height改成100px，再加上四周50px的边框，四周50px的内边距，元素的宽高保持300px
不变。
*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.p1{
width:340px;
height:240px;
border:10px solid black;
font-size:14px;
line-height:24px;
padding:20px;
}
.p1 span{
font-size:20px;
color:red;
}
</style>
</head>
<body>
<p class="p1">
<span>HTML</span>是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。<br>
下面是HTML的特征代码：<br>
<div>这是成对出现的标签</div>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.con{
width:560px;
height:260px;
border: 1px solid black;
padding:20px;
}
.con img{
float:left;
}
.con p{
width:394px;
margin-top:0;
margin-left:20px;
float:left;
font-size:14px;
line-height:24px;
}
</style>
</head>
<body>
<div class="con">
<img src="https://img2.baidu.com/it/u=1832543642,2024650557&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731171600&t=f91be094c9fe49c3c20d86606c41dfc2" alt="程序员图片" width="146" height="187">
<p> 程序员(英文Programmer)是从事程序开发、维护的专业人员。一般将程序员分为程序设计人员和程序编码人员，但两者的界限并不非常清楚，特别是在中国。软件从业人员分为初级程序员、中级程序员、高级程序员、系统分析员，系统架构师，测试工程师六大类。<br>
世界上第一位程序员是英国著名诗人拜伦的女儿,曾设计了巴贝奇分析机上解伯努利方程的一个程序。她叫AdaLovelace，她甚至还建立了循环和子程序的概念。由于其在程序设计上的开创性工作，AdaLovelace被称为世界上第一位程序员。美国国防部开发的ADA语言就是为纪念这位世界上的第一位程序员而命名的。
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.con{
width:560px;
height:280px;
border: 1px solid black;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
}
.title_con{
width:560px;
height:40px;
border-bottom:1px solid black;
}
.title_con h3{
float:left;
margin:0;
line-height:40px;
font-size:18px;
}
.title_con a{
float:right;
line-height:40px;
text-decoration:none;
font-size:12px;
color:#333;
}
.detail img{
float:left;
margin-top:15px;
}
.detail p{
width:394px;
float:right;
font-size:12px;
line-height:24px;
}
</style>
</head>
<body>
<div class="con">
<div class="title_con">
<h3>程序人生</h3>
<a href="#">更多>></a>
</div>
<div class="detail">
<img src="https://img2.baidu.com/it/u=1832543642,2024650557&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731171600&t=f91be094c9fe49c3c20d86606c41dfc2" alt="程序员图片" width="146" height="187">
<p> 程序员(英文Programmer)是从事程序开发、维护的专业人员。一般将程序员分为程序设计人员和程序编码人员，但两者的界限并不非常清楚，特别是在中国。软件从业人员分为初级程序员、中级程序员、高级程序员、系统分析员，系统架构师，测试工程师六大类。<br>
世界上第一位程序员是英国著名诗人拜伦的女儿,曾设计了巴贝奇分析机上解伯努利方程的一个程序。她叫AdaLovelace，她甚至还建立了循环和子程序的概念。由于其在程序设计上的开创性工作，AdaLovelace被称为世界上第一位程序员。美国国防部开发的ADA语言就是为纪念这位世界上的第一位程序员而命名的。</p>
</div>
</div>
</body>
</html>2.html和css进阶
本节讲述路径相关知识、html标签进阶、css属性进阶。
2.1相对地址与绝对地址
网页上引入或链接到外部文件，需要定义文件的地址，常见引入或链接外部文件包括以下几种：
<!-- 引入外部图片 -->
<img src="images/001.jpg" alt="图片" />
<!-- 链接到另外一个网页 -->
<a href="002.html">链接到网页2</a>
<!-- 外链一个css文件 -->
<link rel="stylesheet" type="text/css" href="css/main.css" />
<!-- 外链一个js文件 -->
<script type="text/javascript" src="js/jquery.js"></script>这些地址分为相对地址和绝对地址:
相对地址
相对于引用文件本身去定位被引用的文件地址，以上的例子都是相对地址，相对地址的定义技巧：
- “ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
- “ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
绝对地址
相对于磁盘的位置去定位文件的地址，比如：<img src="C:\course5\03day\images\001.jpg" alt="图片" /> 绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对地址就没有这个问题。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 定义相对地址 -->
<!-- "./" 表示当前文件所在的目录，一般是省略不写 -->
<img src="./images/banner.jpg" alt="banner">
<img src="images/programmer.jpg" alt="程序员">
<!-- 定义绝对地址 -->
<img src="C:\Users\blur\Desktop\go前端02天\4-代码\images\banner.jpg" alt="banner">
</body>
</html>2.2列表标签
列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单，它是含有语义的，标签结构如下：
<ul>
<li>列表标题一</li>
<li>列表标题二</li>
<li>列表标题三</li>
</ul>列表的内容一般是可以链接的，点击链接到新闻或者文章的具体内容，所以具体结构一般是这样的：
<ul>
<li><a href="#">列表标题一</a></li>
<li><a href="#">列表标题二</a></li>
<li><a href="#">列表标题三</a></li>
</ul>列表相关样式
list-style 去掉列表项的小圆点，比如：list-style:none
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.list{
/* 去掉列表的小圆点 */
list-style:none;
/* 清除列表默认的内边距 */
padding:0;
/* 清除列表默认的外边距 */
margin:0;
}
.list li{
line-height:50px;
border-bottom:1px solid black;
text-indent:20px;
}
</style>
</head>
<body>
<!-- ul>li{列表文字}*6 -->
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
<!-- ul>(li>a{列表文字})*6 -->
<ul>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
</ul>
</body>
</html>2.3html表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
1、<form>标签 定义整体的表单区域
- action属性 定义表单数据提交地址
- method属性 定义表单提交的方式，一般有“get”方式和“post”方式
2、<label>标签 为表单元素定义文字标注
3、<input>标签 定义通用的表单元素
- type属性
-
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
- value属性 定义表单元素的值
- name属性 定义表单元素的名称，此名称是提交数据时的键名
4、<textarea>标签 定义多行文本输入框
5、<select>标签 定义下拉表单元素
6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项
注册表单实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3>用户注册</h3>
<form action="" method="post">
<p>
<label>用户名：</label>
<input type="text" name="username">
</p>
<p>
<label>密 码：</label>
<input type="password" name="password">
</p>
<p>
<label>性 别：</label>
<input type="radio" name="gender" value="0"> 男
<input type="radio" name="gender" value="1"> 女
</p>
<p>
<label>爱 好：</label>
<input type="checkbox" name="hobby" value="programmer"> 编程
<input type="checkbox" name="hobby" value="study"> 学习
<input type="checkbox" name="hobby" value="self-study"> 自习
<input type="checkbox" name="hobby" value="review"> 复习
<input type="checkbox" name="hobby" value="foot"> 捏脚
</p>
<p>
<label>玉 照：</label>
<input type="file" name="pic">
</p>
<p>
<label>籍 贯：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<label>简 介：</label>
<textarea name="info"></textarea>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</p>
</form>
</body>
</html>表单常用样式、属性及示例
outline 设置input框获得焦点时，是否显示凸显的框线，一般设置为没有,比如：outline:none;
placeholder 设置input输入框的默认提示文字。
表单布局实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.search_form{
width:602px;
height:42px;
background:gold;
margin:100px auto;
}
.input_txt{
width:500px;
height:40px;
border:1px solid #0fad10;
/* 清除输入框默认的padding值 */
padding:0px;
/* 通过浮动解决内联元素默认间距以及基线对齐的问题 */
float: left;
/* 让文字缩进 */
text-indent:10px;
/* 去掉输入框点击时显示的蓝色高亮框 */
outline:none;
}
.input_sub{
width:100px;
height:42px;
background: #0fad10;
/* 去掉按钮默认的边框 */
border:0px;
/* 通过浮动解决内联元素默认间距以及基线对齐的问题 */
float: left;
font-size:18px;
color:white;
}
</style>
</head>
<body>
<!--
https://cn.bing.com/search?q=c&qs=n&form=QBLH&sp=-1&pq=c&sc=10-1&sk=&cvid=29A29F29BADE4EFC95283176AAA31A3F
-->
<form class="search_form" action="https://cn.bing.com/search">
<!-- 设置输入框默认的提示文字，用placeholder属性 -->
<input type="text" class="input_txt" placeholder="请输入框搜索内容" name="q">
<input type="submit" value="搜 索" class="input_sub">
</form>
</body>
</html>2.4表格元素及相关样式
1、<table>标签：声明一个表格
2、<tr>标签：定义表格中的一行
3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
表格相关样式属性
- border-collapse 设置表格的边线合并，如：border-collapse:collapse;
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tablestyle01{
width:500px;
height:260px;
border:1px solid black;
/* 让表格水平居中 */
margin:50px auto;
/* 将表格的边线合并成一条线 */
border-collapse:collapse;
}
.tablestyle01 td{
border:1px solid black;
/* 设置文字的水平对齐方式 */
text-align:center;
}
.tablestyle01 th{
border:1px solid black;
background:blue;
color:white;
}
</style>
</head>
<body>
<!-- table>(tr>td*5)*4 -->
<table class="tablestyle01">
<tr>
<th>id</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td>1</td>
<td>张山</td>
<td>男</td>
<td>18</td>
<td>高三</td>
</tr>
<tr>
<td>2</td>
<td>李思</td>
<td>女</td>
<td>19</td>
<td>大一</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>男</td>
<td>17</td>
<td>高三</td>
</tr>
<tr>
<td>4</td>
<td>赵柳</td>
<td>女</td>
<td>20</td>
<td>大三</td>
</tr>
</table>
</body>
</html>2.5css选择器二
4、id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：
#box{color:red}
......
<p id="box">这是一个段落标签</p> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 定义id选择器，id选择器只能用在一个标签上，一般比较少用 */
#box{
color:red;
font-size:30px;
}
</style>
</head>
<body>
<!-- 定义id属性，id属性值是唯一的，不能重复 -->
<div id="box">这是一个div标签</div>
<!-- id名称相同是不合法的 -->
<!-- <div id="box">这是第二个div标签</div> -->
</body>
</html>5、组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器。 举例：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
.box01{
width:200px;
height:200px;
background:gold;
}
.box02{
width:200px;
height:200px;
background:red;
}
.box03{
width:200px;
height:200px;
background:orange;
}
*/
/* 上面的代码可以简化成下面组选择器的写法： */
.box01,.box02,.box03{
width:200px;
height:200px;
}
.box01{
background:gold;
}
.box02{
background:red;
}
.box03{
background:orange;
}
</style>
</head>
<body>
<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>
</body>
</html>6、伪类选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。
.box1:{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width:100px;
height:100px;
background:gold;
}
/* 定义伪类选择器 */
.box:hover{
width:200px;
height:200px;
background:red;
}
.link01{
text-decoration:none;
color:black;
}
.link01:hover{
color:red;
}
</style>
</head>
<body>
<div class="box"></div>
<br>
<br>
<br>
<a href="#" class="link01">这是一个链接</a>
</body>
</html>2.6css显示特性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、inline 元素以行内元素显示
3、block 元素以块元素显示
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
/* 将块元素转化为内联元素 */
display:inline;
}
.link01{
/* 将内联元素转化为块元素 */
display:block;
}
.con{
width:200px;
height:200px;
background:gold;
/* 设置样式将元素隐藏起来 */
display:none;
}
</style>
</head>
<body>
<div class="con" style="display:block"></div>
<div class="box">这是第一个div</div>
<div class="box">这是第二个div</div>
<a href="#" class="link01">这是第一个链接</a>
<a href="#" class="link01">这是第二个链接</a>
</body>
</html>2.7css元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.con {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 60px auto;
/* 在父级上设置子级超出的部分如何显示 */
/*
visible: 显示超出的部分
hidden: 隐藏超出的部分
scroll: 不管子元素是否超出，都显示滚动条或者滚动条的背景框
auto:通过子元素的尺寸，动态显示滚动条
*/
overflow: auto;
padding: 10px
}
.box {
margin: 10px;
border: 2px;
padding: 10px;
width: 200px;
height: 500px;
background: gold;
}
</style>
</head>
<body>
<div class="con">
<div class="box">
<div>文字内容</div>
<br>
<br>
<br>
<div>文字内容</div>
<br>
<br>
<br>
<div>文字内容</div>
</div>
</div>
</body>
</html>2.8练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.form_con{
width:400px;
height:460px;
background:#f2f2f2;
padding:20px;
}
.form_con label{
float:left;
width:80px;
text-align:right;
}
.form_con h3{
margin:0px;
border-bottom:1px solid #ddd;
line-height:50px;
font-size:22px;
font-weight:normal;
}
.input_txt{
width:240px;
height:24px;
}
.input_txt2{
width:240px;
height:100px;
}
.input_select{
width:120px;
height:24px;
}
.ml80{
margin-left:80px
}
</style>
</head>
<body>
<div class="form_con">
<h3>注册表单</h3>
<form action="" method="get">
<p>
<label>姓名：</label><input type="text" name="username" class="input_txt" />
</p>
<p>
<label>密码：</label><input type="password" name="password" class="input_txt" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about" class="input_txt2"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site" class="input_select">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交" class="ml80">
<input type="reset" name="" value="重置">
</p>
</form>
</div>
</body>
</html>3.html和css高级
本节讲述表格的创建、css定位、css权重、photoshop辅助测量与取色、以及前端页面开发流程
3.1定位
文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：
- relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。
- absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
- fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级
伪代码如下:
.box01{
......
position:absolute; /* 设置了绝对定位 */
left:200px; /* 相对于参照元素左边向右偏移200px */
top:100px; /* 相对于参照元素顶部向下偏移100px */
z-index:10 /* 将元素层级设置为10 */
}相对定位实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.con{
width:300px;
height:300px;
border:1px solid black;
margin:50px auto;
}
.box01,.box02,.box03{
width:200px;
height:80px;
margin:10px;
}
.box01{
background:lightgreen;
/* 设置相对定位属性,相对于自己在文档流的位置来偏移 */
position:relative;
/* 设置偏移属性 */
left:50px;
top:50px;
}
.box02{
background:lightcoral;
}
.box03{
background:lightskyblue;
}
</style>
</head>
<body>
<div class="con">
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
</body>
</html>绝对定位实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.con{
width:300px;
height:300px;
border:1px solid black;
margin:50px auto;
/* 将父级设置为相对定位，不设置偏移值，父级就有定位属性了，而且不移动，子级就可以相对于它来做绝对定位 */
position: relative;
overflow: hidden;
}
.box01,.box02,.box03{
width:200px;
height:80px;
margin:10px;
}
.box01{
background:lightgreen;
/* 设置绝对定位属性，相对于有定位属性的父级来偏移 */
position:absolute;
/* 设置偏移属性 */
left:50px;
top:50px;
}
.box02{
background:lightcoral;
}
.box03{
background:lightskyblue;
}
</style>
</head>
<body>
<div class="con">
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
</body>
</html>固定定位实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.con{
width:300px;
height:300px;
border:1px solid black;
margin:50px auto;
}
.box01,.box02,.box03{
width:200px;
height:80px;
margin:10px;
}
.box01{
background:lightgreen;
/* 设置固定定位属性，相对于浏览器窗口来偏移 */
position:fixed;
/* 设置偏移属性 */
right:50px;
bottom:50px;
}
.box02{
background:lightcoral;
}
.box03{
background:lightskyblue;
}
</style>
</head>
<body>
<div class="con">
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
</body>
</html>定位元素层级实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.con{
width:300px;
height:300px;
border:1px solid black;
margin:50px auto;
position:relative;
}
.box01,.box02,.box03{
width:200px;
height:80px;
margin:10px;
position:absolute;
}
.box01{
background:lightgreen;
left:0;
top:0;
/* 设置定位元素的层级 */
z-index:4;
}
.box02{
background:lightcoral;
left:30px;
top:30px;
z-index:5;
}
.box03{
background:lightskyblue;
left:60px;
top:60px;
z-index:3;
}
</style>
</head>
<body>
<div class="con">
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
</body>
</html>水平垂直居中的弹框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.pop{
width:500px;
height:300px;
border:1px solid black;
background:white;
/* 设置固定定位，让弹框相对于浏览器窗口来定位，同时可以盖住其他元素 */
position:fixed;
/* 定位元素水平垂直居中的技巧 */
left:50%;
margin-left:-251px;
top:50%;
margin-top:-151px;
/* 将弹框设置成一个很大的值，保证它可以盖住其他任何元素 */
z-index:9999;
}
.mask{
position:fixed;
/* 设置为固定定位，宽度和高度就可以参照浏览器窗口的大小来设置 */
width:100%;
height:100%;
left:0;
top:0;
background:black;
z-index:9998;
/* 设置元素的透明度 */
opacity:0.3;
/* 透明度兼容IE的写法 */
filter:alpha(opacity=30);
}
.pop_con{
display:none;
}
</style>
</head>
<body>
<h1>页面的内容</h1>
<div class="pop_con" style="display:block">
<div class="pop">
<h3>弹框标题</h3>
<p>弹框的内容</p>
</div>
<div class="mask"></div>
</div>
</body>
</html>新增相关样式属性
/* 设置元素透明度,将元素透明度设置为0.3，此属性需要加一个兼容IE的写法 */
opacity:0.3;
/* 兼容IE */
filter:alpha(opacity=30);3.2CSS权重
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。
权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重
1、内联样式，如：style=””，权重值为1000
2、ID选择器，如：#content，权重值为100
3、类，伪类，如：.content、:hover 权重值为10
4、标签选择器，如：div、p 权重值为1
权重的计算实例
1、实例一：
<style type="text/css">
div{
color:red;
}
</style>
......
<div style="color:blue">这是一个div元素</div>
<!--
两条样式同时作用一个div，上面的样式权重值为1，下面的行间样式的权重值为1000，
所以文字的最终颜色为blue
-->2、实例二：
<style type="text/css">
body #content .main_content h2{
color:red;
}
#content .main_content h2{
color:blue;
}
</style>
......
<div id="content">
<div class="main_content">
<h2>这是一个h2标题</h2>
</div>
</div>
<!--
第一条样式的权重计算： 1+100+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->综合实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 权重值：1 */
div{
color:blue;
}
/* 权重值：1+10+10+1 = 22 */
body .con .box h3{
color:#9f4743;
}
/* 权重值：10+10+1 = 21 */
.con .box h3{
color:red;
}
/* 权重值：10+1 = 11 */
.con h3{
color:blue;
}
.box h3{
color:pink;
}
</style>
</head>
<body>
<!-- style的权重是：1000 -->
<div style="color:red">这是一个div</div>
<div class="con">
<div class="box">
<h3>这是一个h3标题</h3>
</div>
</div>
</body>
</html>3.3Photoshop辅助测量与取色
安装地址：百度网盘 请输入提取码
图片预览的方法
1、图片放缩
2、图片平移（按住空格）
尺寸测量方法
1、设置单位
编辑>首选项>单位与标尺
2、矩形框测量、调整矩形框
3、文字大小的测量
取色方法
1、取色工具
2、前景色按钮
css颜色表示法
css颜色值主要有两种表示方法：
1、颜色名表示，比如：red 红色，gold 金色
2、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
3.4前端页面开发流程顺序
1、创建项目目录
一般先创建一个总目录，然后在此目录中创建images、css、js三个目录，三个目录中分别放图片、css文件以及js文件。
2、切图
通过photoshop对网页效果图进行切图，所使用图片需要是带图层的psd格式。
3、新建html文件，新建css文件
4、参照效果图，编写html和css代码
body{
margin:0;
}
.header{
width: 952px;
height:103px;
/* background:gold; */
margin:0 auto;
padding-top:31px;
}
.login_bg{
height:482px;
background: #518e17
}
.center_wrap{
width:942px;
height:482px;
/* background:gold; */
margin:0 auto;
}
.banner{
float: left;
margin-top:90px;
}
.slogan{
color:#f0f9e8;
font-size:30px;
font-family: 'Microsoft YaHei', 'Arial', sans-serif;
width:30px;
height:300px;
float: left;
text-align:center;
line-height:36px;
margin:100px 0 0 115px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>天天生鲜-登录页</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="header">
<a href="#"><img src="images/logo.png" alt="天天生鲜logo"> </a>
</div>
<div class="login_bg">
<div class="center_wrap">
<img src="images/banner.png" alt="banner" class="banner">
<div class="slogan">日夜兼程·急速送达</div>
</div>
</div>
</body>
</html>4.Javascript入门及进阶
介绍javascript的页面引入方式、javascript变量、javascript函数的使用以及条件语句的基本使用，javascript获取元素及操作元素属性。
4.1JavaScript介绍
JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互，JavaScript是浏览器解释执行的。
前端三大块
1、HTML：页面结构
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
4.2JavaScript嵌入页面的方式
1、行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">2、页面script标签嵌入
<script type="text/javascript">
alert('ok！');
</script>3、外部引入
<script type="text/javascript" src="js/index.js"></script>实例：
点击“这是一个div”弹出弹框
alert('hello world,again and again!');<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 第三种页面引入JavaScript的方式：外链式 推荐使用 -->
<script src="js/hello.js"></script>
<!-- 第二种页面引入JavaScript的方式：内嵌式，部分推荐 -->
<script>
alert('hello world,again!');
</script>
</head>
<body>
<!-- 第一种页面引入JavaScript的方式：行间事件，不推荐使用 -->
<div onclick="alert('hello world!')">这是一个div</div>
</body>
</html>4.3变量、数据类型及基本语法规范
JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'
var iNum = 123;
var sTr = 'asd';
//同时定义多个变量可以用","隔开，公用一个‘var’关键字
var iNum = 45,sTr='qwe',sCount='68';变量类型
5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
1种复合类型：
object
javascript语句与注释
1、javascript语句开始可缩进也可不缩进，缩进是为了方便代码阅读，一条javascript语句应该以“;”结尾;
<script type="text/javascript">
var iNum = 123;
var sTr = 'abc123';
function fnAlert(){
alert(sTr);
};
fnAlert();
</script>2、javascript注释
<script type="text/javascript">
// 单行注释
var iNum = 123;
/*
多行注释
1、...
2、...
*/
var sTr = 'abc123';
</script>变量、函数、属性、函数参数命名规范
1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字
匈牙利命名风格：
对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 单行注释
/*
多行
注释
*/
// 定义变量
/*
var iNum01 = 12;
var sTr = 'abc';
var bIsMove = true;
*/
var iNum01 = 12,sTr = 'abc',bIsMove = true;
// 变量声明但是没有初始化，它的值和类型都是undefined
var iNum02;
alert(iNum01);
alert(sTr);
alert(bIsMove);
alert(iNum02);
</script>
</head>
<body>
</body>
</html>4.4函数
函数就是重复执行的代码片。
函数定义与执行
<script type="text/javascript">
// 函数定义
function fnAlert(){
alert('hello!');
}
// 函数执行
fnAlert();
</script>变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。
<script type="text/javascript">
fnAlert(); // 弹出 hello！
alert(iNum); // 弹出 undefined
function fnAlert(){
alert('hello!');
}
var iNum = 123;
</script>函数传参 javascript的函数中可以传递参数。
<script type="text/javascript">
function fnAlert(a){
alert(a);
}
fnAlert(12345);
</script>函数'return'关键字
函数中'return'关键字的作用：
1、返回函数中的值或者对象
2、结束函数的运行
<script type="text/javascript">
function fnAdd(iNum01,iNum02){
var iRs = iNum01 + iNum02;
return iRs;
alert('here!');
}
var iCount = fnAdd(3,4);
alert(iCount); //弹出7
</script>函数定义和调用以及预解析实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 函数调用,函数在下面定义，在上面调用，这个叫做函数的预解析
fnMyalert();
// 定义函数
function fnMyalert(){
alert('hello!');
}
// 变量在下面定义，在上面调用，变量的值是undefined,这个叫做变量的预解析
alert(iNum01);
var iNum01 = 12;
alert(iNum01);
</script>
</head>
<body>
</body>
</html>函数传参-return关键字实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 定义可以传参的函数
function fnAdd(iNum01,iNum02){
var iRs = iNum01 + iNum02;
//alert(iRs);
}
function fnAdd2(iNum01,iNum02){
var iRs = iNum01 + iNum02;
alert(iNum01);
return iRs; // return 在这一句返回值之后，就结束了函数的运行，它下面的语句不会执行
//return; 只写一个return，表示在这一句结束函数的运行，但是不返回值
alert(iNum02);
}
// 调用传参的函数
// 函数没有返回值，得到的值是undefined
var iRs2 = fnAdd(10,5);
var iRs3 = fnAdd2(20,5);
//alert(iRs2);
alert(iRs3);
</script>
</head>
<body>
</body>
</html>4.5获取元素方法
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：
第一种方法：将javascript放到页面最下边
....
<div id="div1">这是一个div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">这是一个div元素</div>实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 当整个页面加载完之后，再执行大括号里面的代码
window.onload = function(){
var oDiv = document.getElementById('div01');
oDiv.style.color = 'blue';
oDiv.style.width = '300px';
oDiv.style.height = '300px';
oDiv.style.background = 'gold';
}
</script>
</head>
<body>
<div id="div01">这是一个div元素</div>
</body>
</html>4.6操作元素属性
获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
操作元素属性
var 变量 = 元素.属性名 读取属性
元素.属性名 = 新属性值 改写属性
属性名在js中的写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 读取属性值
var sValue = oInput.value;
var sType = oInput.type;
var sName = oInput.name;
var sLinks = oA.href;
// 写(设置)属性
oA.style.color = 'red';
oA.style.fontSize = sValue;
}
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>innerHTML
innerHTML可以读取或者写入标签包裹的内容
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//读取
var sTxt = oDiv.innerHTML;
alert(sTxt);
//写入
oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
}
</script>
......
<div id="div1">这是一个div元素</div>实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.sty01{
color:red;
font-size:20px;
}
.sty02{
color:pink;
font-size:30px;
text-decoration:none;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div01');
var oA = document.getElementById('link01');
// 读取属性值
var sId = oDiv.id;
//alert(sId);
// 写属性值，也叫作设置属性值
oDiv.style.color = 'red';
// 属性名称中带“-”的，要写成驼峰式
oDiv.style.fontSize = '30px';
// 设置class属性值,class属性名称需要写成className
oA.className = 'sty02';
// 操作元素包裹的内容
// 读取包裹的内容
var sTr = oDiv.innerHTML;
//alert(sTr);
// 写元素包裹的内容
oDiv.innerHTML = '改变的文字';
oDiv.innerHTML = '<a href="http://www.baidu.com">百度网</a>';
oDiv.innerHTML = '<ul><li>列表文字</li><li>列表文字</li><li>列表文字</li></ul>'
}
</script>
</head>
<body>
<div id="div01">这是一个div</div>
<a href="#" class="sty01" id="link01">这是一个链接</a>
</body>
</html>4.7事件属性及匿名函数
事件属性
元素上除了有样式，id等属性外，还有事件属性，常用的事件属性有鼠标点击事件属性(onclick)，鼠标移入事件属性(onmouseover),鼠标移出事件属性(onmouseout),将函数名称赋值给元素事件属性，可以将事件和函数关联起来。
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
}
</script>匿名函数
定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联，这样可以减少函数命名，并且简化代码。函数如果做公共函数，就可以写成匿名函数的形式。
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接将匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div01');
/*function fnChange(){
oDiv.style.width = '200px';
oDiv.style.height = '200px';
oDiv.style.background = 'gold';
}
//fnChange();
oBtn.onclick = fnChange;
*/
// 上面两句可以改成下面匿名函数的形式：
oBtn.onclick = function(){
oDiv.style.width = '200px';
oDiv.style.height = '200px';
oDiv.style.background = 'gold';
};
}
</script>
</head>
<body>
<input type="button" value="改变样式" id="btn">
<div id="div01">这是一个div</div>
</body>
</html>网页换肤
body{
background:#ddd;
}
input{
width:200px;
height:50px;
background:pink;
border-radius:25px;
border:0px;
outline:none;
}body{
background:green;
}
input{
width:200px;
height:50px;
background:gold;
border:0px;
outline:none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/skin01.css" id="link01">
<script>
window.onload = function(){
var oLink = document.getElementById('link01');
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
oBtn01.onclick = function(){
oLink.href = 'css/skin01.css';
}
oBtn02.onclick = function(){
oLink.href = 'css/skin02.css';
}
}
</script>
</head>
<body>
<h1>网页内容</h1>
<input type="button" value="皮肤一" id="btn01">
<input type="button" value="皮肤二" id="btn02">
</body>
</html>4.8条件语句
通过条件来控制程序的走向，就需要用到条件语句。
条件运算符
==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
if else
var iNum01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01>iNum02){
sTr = '大于';
}
else
{
sTr = '小于';
}
alert(sTr);多重if else语句
var iNow = 1;
if(iNow==1)
{
... ;
}
else if(iNow==2)
{
... ;
}
else
{
... ;
}条件语句实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var iNum01 = 12;
var sNum01 = '12';
/*if(iNum01==12){
alert('相等！')
}
else{
alert('不相等！');
}*/
// "==" 默认会将符号两边的变量转换成数字在进行对比，这个叫做隐式转换
if(sNum01==12){
alert('相等！')
}
else{
alert('不相等！');
}
// "===" 不会转换符号两边的变量类型
if(sNum01===12){
alert('相等！')
}
else{
alert('不相等！');
}
var iNow = 5;
if(iNow==0){
alert('休息');
}
else if(iNow==1){
alert('学习')
}
else if(iNow==2){
alert('学习')
}
else if(iNow==3){
alert('休息')
}
else{
alert('自习')
}
</script>
</head>
<body>
</body>
</html>聊天对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.talk_con{
width:600px;
height:500px;
border:1px solid #666;
margin:50px auto 0;
background:#f9f9f9;
}
.talk_show{
width:580px;
height:420px;
border:1px solid #666;
background:#fff;
margin:10px auto 0;
overflow:auto;
}
.talk_input{
width:580px;
margin:10px auto 0;
}
.whotalk{
width:80px;
height:30px;
float:left;
outline:none;
}
.talk_word{
width:420px;
height:26px;
padding:0px;
float:left;
margin-left:10px;
outline:none;
text-indent:10px;
}
.talk_sub{
width:56px;
height:30px;
float:left;
margin-left:10px;
}
.atalk{
margin:10px;
}
.atalk span{
display:inline-block;
background:#0181cc;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
.btalk{
margin:10px;
text-align:right;
}
.btalk span{
display:inline-block;
background:#ef8201;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oWord = document.getElementById('words');
var oWho = document.getElementById('who');
var oTalk = document.getElementById('talkwords');
var oBtn = document.getElementById('talksub');
oBtn.onclick = function(){
// 获取下拉框的value属性值
var sVal01 = oWho.value;
// 获取单行文本输入框里面的内容
var sVal02 = oTalk.value;
// 清空输入框的内容
oTalk.value = '';
// 判断输入框是否为空
if(sVal02==''){
alert('请输入内容！');
return;
}
// 拼接结构的字符串
var sTr = '';
if(sVal01==0){
sTr = '<div class="atalk"><span>A说：'+ sVal02 +'</span></div>';
}else{
sTr = '<div class="btalk"><span>B说：'+ sVal02 +'</span></div>';
}
// 将结构的字符串放到聊天记录的容器标签中
oWord.innerHTML = oWord.innerHTML + sTr;
}
}
</script>
</head>
<body>
<div class="talk_con">
<div class="talk_show" id="words">
<div class="atalk"><span>A说：吃饭了吗？</span></div>
<div class="btalk"><span>B说：还没呢，你呢？</span></div>
</div>
<div class="talk_input">
<select class="whotalk" id="who">
<option value="0">A说：</option>
<option value="1">B说：</option>
</select>
<input type="text" class="talk_word" id="talkwords">
<input type="button" value="发送" class="talk_sub" id="talksub">
</div>
</div>
</body>
</html>5.Javascript高级
5.1数组及操作方法
数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。
定义数组的方法
//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,'asd'];操作数组中数据的方法
1、获取数组的长度：aList.length;
var aList = [1,2,3,4];
alert(aList.length); // 弹出42、用下标操作数组的某个数据：aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 弹出13、join() 将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-44、push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,45、reverse() 将数组反转
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,16、indexOf() 返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));7、splice() 在数组中增加或删除成员
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;批量操作数组中的数据，需要用到循环语句
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 创建数组的第一种方式：
var aList01 = new Array(1,2,3);
// 创建数组的第二种方式：直接量的方式
var aList02 = ['a','b','c','d'];
// 获取数组成员的个数
var iLen = aList02.length;
//alert(iLen);
// 操作数组的某个成员
// alert( aList02[2] );
// 在数组后面增加成员
aList02.push('e');
//alert(aList02);
// 删除数组最后一个成员
aList02.pop();
//alert(aList02);
// 将数组反转
aList02.reverse();
//alert(aList02);
// 获取某个成员在数组中第一次出现的索引值
var aList03 = ['a','b','c','d','a','b','c','d'];
var iPos = aList03.indexOf('c');
// 如果成员不存在，就返回-1
var iPos2 = aList03.indexOf('e');
//alert(iPos);
//alert(iPos2);
// 将数组通过某个字符串拼接处一个大的字符串返回
var sTr = aList03.join('-');
var sTr2 = aList03.join('');
//alert(sTr);
//alert(sTr2);
alert(aList03);
// 同时在数组中增加或删除成员
aList03.splice(4,2);
alert(aList03); // a,b,c,d,c,d
aList03.splice(4,2,'e','f','g');
alert(aList03);
</script>
</head>
<body>
</body>
</html>5.2循环语句
程序中进行有规律的重复性操作，需要用到循环语句。
for循环
for(var i=0;i<len;i++)
{
......
}批量操作数组成员实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var aList = ['a','b','c','d','e','f'];
var iLen = aList.length;
for(var i=0;i<iLen;i++){
alert( aList[i] );
}
</script>
</head>
<body>
</body>
</html>1、数组去重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var aList = ['a','b','c','d','e','f','g','a','b','c','d','e','f','g']
var aList2 = [];
for(var i=0;i<aList.length;i++){
if( aList.indexOf( aList[i]) == i ){
aList2.push( aList[i] );
}
}
alert(aList2)
</script>
</head>
<body>
</body>
</html>2、将数组数据放入页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.list{
width:300px;
list-style:none;
padding:0px;
margin:50px auto;
}
.list li{
line-height:50px;
border-bottom:1px dotted black;
}
</style>
<script>
window.onload = function(){
var aList = ['碟中谍6','红海','古墓丽影3','熊出没','喜羊羊和灰太狼','小猪佩奇']
var sTr = '';
var oUl = document.getElementById('list');
for(var i=0;i<aList.length;i++){
sTr += '<li>' + aList[i] + '</li>';
}
//alert(sTr);
oUl.innerHTML = sTr;
}
</script>
</head>
<body>
<ul class="list" id="list">
<!-- <li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li> -->
</ul>
</body>
</html>5.3字符串处理方法
1、字符串合并操作：“ + ”
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02); //弹出36
alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr); // 弹出12abc2、parseInt() 将数字字符串转化为整数
var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02); //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36
alert(parseInt(sNum03)) //弹出数字12 将字符串小数转化为数字整数3、parseFloat() 将数字字符串转化为小数
var sNum03 = '12.32'
alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数4、split() 把一个字符串分隔成字符串组成的数组
var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");
alert(aRr); //弹出['2017','4','2']
alert(aRr2); //弹出['2','0','1','7','-','4','-','2','2']5、indexOf() 查找字符串是否含有某字符
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出26、substring() 截取字符串 用法： substring(start,end)（不包括end）
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);
alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl字符串反转
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var iNum01 = 12;
var iNum02 = 12.32;
var sNum01 = '12';
var sNum02 = '12.32'
// "+" 符号运算，如果符号两边都是数字，就做加法运算，如果有一边是字符串，就做字符串拼接
//alert(iNum01 + 10);
//alert(sNum01 + 10);
// 将整数的字符串转化为整数，用parseInt()方法
//alert( parseInt(sNum01) + 20 );
//alert( parseInt(sNum02) + 20 );
// 将小数的字符串转化为小数，用parseFloat() 方法
//alert( parseFloat(sNum02) + 20 );
// 将字符串分割成数组
var sTr = '2018-9-2';
var aList = sTr.split('-');
var aList2 = sTr.split('');
//alert(aList);
//alert(aList2);
// 获取某小段字符在大段字符里面第一次出现的索引值
var sTr2 = 'abcdef12345ghif1jkl';
var iPos = sTr2.indexOf('f1');
var iPos2 = sTr2.indexOf('i1');
//alert(iPos);
//alert(iPos2); //-1
// 字符串切片
var sTr3 = sTr2.substring(6,11);
// 写一个参数，表示从这个参数一直切割到字符串结尾
var sTr4 = sTr2.substring(6);
alert(sTr3);
alert(sTr4);
</script>
</head>
<body>
</body>
</html>5.4定时器
定时器在javascript中的作用
1、定时调用函数
2、制作动画
定时器类型及语法
/*
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function fnMyalert(){
alert('起床了！');
}
// 创建只执行一次的定时器,第一个参数是函数名称，第二个参数是间隔的时间，单位是毫秒，不用写单位
var timer01 = setTimeout(fnMyalert,2000);
// 关闭只执行一次的定时器
clearTimeout(timer01);
// 创建反复执行的定时器
var timer02 = setInterval(fnMyalert,2000);
// 关闭反复执行的定时器
clearInterval(timer02);
</script>
</head>
<body>
</body>
</html>1、定时器制作移动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width:200px;
height:200px;
background:gold;
position:fixed;
top:100px;
left:0px;
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box');
var iLeft = 0;
var timer = setInterval(fnMove,30);
function fnMove(){
iLeft += 3;
if(iLeft>600){
clearInterval(timer);
}
oBox.style.left = iLeft + 'px';
}
}
</script>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>2、定时器制作左右移动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width:200px;
height:200px;
background:gold;
position: fixed;
left:0px;
top:100px;
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box');
var iLeft = 0;
var iSpeed = 5;
var timer = setInterval(fnMove,30);
function fnMove(){
iLeft += iSpeed;
if(iLeft>600){
iSpeed = -5;
}
if(iLeft<0){
iSpeed = 5;
}
oBox.style.left = iLeft + 'px';
}
}
</script>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>3、定时器制作无缝滚动
无缝滚动原理：无缝滚动是通过将内容进行无限循环滚动，当滚动到最后一个元素时，立即回到第一个元素，形成一个循环，从而给用户带来连续滚动的视觉效果。在实现无缝滚动时，通常会将原始内容复制一份并附加到内容的末尾。这样，当滚动到最后一份内容的末尾时，可以立即跳转到第一份内容的开头，实现无缝衔接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
body,ul{
margin:0;
padding:0;
}
.list_con{
width:1000px;
height:200px;
border:1px solid #000;
margin:10px auto 0;
background-color:#f0f0f0;
position:relative;
overflow:hidden;
}
.list_con ul{
list-style:none;
width:2000px;
height:200px;
position:absolute;
/* 样式的值如果是0，可以不写单位 */
left:0;
top:0;
}
.list_con li{
width:180px;
height:180px;
float:left;
margin:10px;
}
.btns_con{
width:1000px;
height:30px;
margin:50px auto 0;
position:relative;
}
.left,.right{
width:30px;
height:30px;
background-color:gold;
position:absolute;
left:-40px;
top:124px;
font-size:30px;
line-height:30px;
color:#000;
font-family: 'Arial',serif;
text-align:center;
cursor:pointer;
border-radius:15px;
opacity:0.5;
}
.right{
left:1010px;
top:124px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oList = document.getElementById('list');
var oLeft = document.getElementById('btn01');
var oRight = document.getElementById('btn02');
var oSlide = document.getElementById('slide');
// 将ul中的5个li复制一份，成为10个li
oList.innerHTML = oList.innerHTML + oList.innerHTML;
var iLeft = 0;
var iSpeed = -3;
// 定义一个变量，来存储iSpeed上一次的值
var iLastSpeed = -3;
var timer = setInterval(fnMove,30);
function fnMove(){
iLeft += iSpeed;
// 运动到最左边的时候
if(iLeft<-1000){
iLeft = 0;
}
// 运动到最右边的时候，也就是起始位置
if(iLeft>0){
iLeft = -1000;
}
oList.style.left = iLeft + 'px';
}
// 左右箭头的点击事件
oLeft.onclick = function(){
iSpeed = -3;
}
oRight.onclick = function(){
iSpeed = 3;
}
// 给滚动的图片外面的容器标签做鼠标的移入移出事件
oSlide.onmouseover = function(){
//clearInterval(timer);
iLastSpeed = iSpeed;
iSpeed = 0;
}
oSlide.onmouseout = function(){
//timer = setInterval(fnMove,30);
iSpeed = iLastSpeed;
}
}
</script>
</head>
<body>
<div class="btns_con">
<div class="left" id="btn01"><</div>
<div class="right" id="btn02">></div>
</div>
<div class="list_con" id="slide">
<ul id="list">
<li><a href=""><img src="images/zhenhui1.jpg" alt="商品图片" ></a></li>
<li><a href=""><img src="images/zhenhui2.jpg" alt="商品图片" ></a></li>
<li><a href=""><img src="images/zhenhui3.jpg" alt="商品图片" ></a></li>
<li><a href=""><img src="images/zhenhui4.png" alt="商品图片" ></a></li>
<li><a href=""><img src="images/zhenhui5.png" alt="商品图片" ></a></li>
</ul>
</div>
</body>
</html>
5.5调试程序的方法
前端代码一般都是通过chrome浏览器的调试工具来进行调试的，调试方式如下：
输出变量和对象的方法：
1、alert
2、console.log
3、document.title
断点调试
通过chrome浏览器调试工具的sources窗口，可以对外链的js文件进行断点调试
调试案例1：输出变量或对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var iNum01 = 12;
var iNum02 = 24;
var aList = ['a','b','c'];
var sTr = 'a,b,c';
// alert在弹出弹框后，会阻止程序往下执行，点击确定后才会往下执行
//alert(iNum01);
//alert(iNum02);
alert(aList);
alert(sTr);
// console 可以显示变量类型，不会阻止程序往下执行
console.log(aList);
console.log(sTr);
// 通过标题栏来显示变量或对象
document.title = 'iNum01的值是：' + iNum01;
</script>
</head>
<body>
</body>
</html>调试案例2：断点调试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/test.js"></script>
</head>
<body>
<input type="button" value="弹出值" id="btn">
</body>
</html>window.onload = function(){
var oBtn = document.getElementById('btn');
var iNum01 = 12;
oBtn.onclick = function(){
var iNum02 = 24;
var iRs = fnAdd(iNum01,iNum02);
alert(iRs);
}
function fnAdd(a,b){
var iRs2 = a + b;
return iRs2;
}
}5.6变量作用域
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。
1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
<script type="text/javascript">
// 定义全局变量
var a = 12;
function myalert()
{
// 定义局部变量
var b = 23;
alert(a);
// 修改全局变量
a++;
alert(b);
}
myalert(); // 弹出12和23
alert(a); // 弹出13
alert(b); // 出错
</script>实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 定义全局变量
var iNum01 = 12;
function fnMyalert(){
// 定义局部变量
var iNum02 = 24;
// 函数内部调用全局变量
alert(iNum01);
// 函数内部调用局部变量
alert(iNum02);
// 在函数内部修改全局变量的值
iNum01 = 13;
// 函数内部，如果不用var来定义变量，那么这个变量会变成全局变量
iNum03 = 36;
alert(iNum01);
}
fnMyalert();
alert('函数外面调用iNum01: ' + iNum01);
alert('函数外面调用iNum03: ' + iNum03);
alert('函数外面调用iNum02: ' + iNum02);
</script>
</head>
<body>
</body>
</html>5.7封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
一般定义的函数和执行函数：
function myalert(){
alert('hello!');
};
myalert();封闭函数：
(function(){
alert('hello!');
})();还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function(){
alert('hello!');
}()封闭函数的作用
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全，比如：
var iNum01 = 12;
function myalert(){
alert('hello!');
}
(function(){
var iNum01 = 24;
function myalert(){
alert('hello!world');
}
alert(iNum01);
myalert()
})()
alert(iNum01);
myalert();实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/touzi.js"></script>
<script src="js/tishi.js"></script>
<script>
fnTouzi();
</script>
</head>
<body>
</body>
</html>/*
function fnWrap(){
function fnTouzi(){
alert('亲，请关注我们的新产品！');
}
fnTouzi();
};
fnWrap();
*/
// 上面的写法还可能重名，可以改写成下面封闭函数的形式：
// 一个分号表示一个空的js语句，是合法的。
;
// 在代码前面加分号，是为了在代码压缩成一行时，前面的代码在最后没有加分号，导致代码出错！
/*;(function(){
function fnTouzi(){
alert('亲，请关注我们的新产品！');
}
fnTouzi();
})();
*/
// 封闭函数装高手的写法：
/*;!function(){
function fnTouzi(){
alert('亲，请关注我们的新产品！');
}
fnTouzi();
}();
*/
;~function(){
function fnTouzi(){
alert('亲，请关注我们的新产品！');
}
fnTouzi();
}();
function fnTouzi(){
alert('请输入投资金额：');
}6.JQuery入门
介绍jquery的加载、jquery选择器、jquery的样式操作、jquery的click事件、jquery动画。
6.1jquery介绍
jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>jquery的口号和愿望 Write Less, Do More（写得少，做得多）
1、https://jquery.com/ 官方网站
2、jQuery CDN 版本下载
6.2jquery文档加载完再执行
将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。
<script type="text/javascript">
$(document).ready(function(){
......
});
</script>可以简写为：
<script type="text/javascript">
$(function(){
......
});
</script>实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById('div01');
alert('原生javascript获取的div：' + oDiv);
}
/*
$(document).ready(function(){
var $div = $('#div01');
alert('jquery获取的div：' + $div);
})
*/
// 上面ready的写法可以简写成下面的形式：
$(function(){
var $div = $('#div01');
alert('jquery获取的div：' + $div);
})
</script>
</head>
<body>
<div id="div01">这是一个div</div>
</body>
</html>6.3jquery选择器
jquery用法思想一
选择某个网页元素，然后对它进行某种操作
jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素对选择集进行过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').eq(5); //选择第6个div元素选择集转移
$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素
$('#box').prevAll(); //选择id是box的元素之前所有的同辈元素
$('#box').next(); //选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll(); //选择id是box的元素后面所有的同辈元素
$('#box').parent(); //选择id是box的元素的父元素
$('#box').children(); //选择id是box的元素的所有子元素
$('#box').siblings(); //选择id是box的元素的同级元素
$('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素判断是否选择到了元素
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。
var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
<div id="div1">这是一个div</div>jquery选择器实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div01');
var $div2 = $('.box');
var $li = $('li');
var $span = $('.box span');
// 属性选择器
var $div3 = $('div[class="box2"]');
// 选择包含span标签的div
var $div4 = $('div').has('span');
// 选择class不是box2的div
var $div5 = $('div').not('.box2');
// 选择第4个li
var $li2 = $('li').eq(3);
$div.css({'color':'red','font-size':30});
$div2.css({'color':'gold','fontSize':'30px'});
$li.css({'background':'gold'});
$span.css({'color':'red','font-weight':'bold'});
$div3.css({'color':'pink','font-size':30});
$div4.css({'text-indent':50});
$div5.css({'text-decoration':'underline'});
$li2.css({'text-indent':50});
})
</script>
</head>
<body>
<div id="div01">这是一个div</div>
<div class="box">这是第二个<span>div</span></div>
<div class="box">这是第三个div</div>
<div class="box2">这是第四个div</div>
<ul>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
</body>
</html>jquery选择集转移实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div01');
$div.prev().css({'color':'red'});
$div.prevAll().css({'text-indent':50});
$div.next().css({'color':'pink'});
$div.nextAll().css({'text-indent':30});
$div.siblings().css({'text-decoration':'underline'});
$div.parent().css({'background':'#ddd'});
$div.children().css({'color':'red'});
$div.find('.sp02').css({'font-size':20});
})
</script>
</head>
<body>
<div>
<h2>这是一个h2标题</h2>
<p>这是第一个段落标签</p>
<div id="div01">这是一个<span>div</span><span class="sp02">第二个span</span></div>
<h3>这是一个h3标题</h3>
<p>这是第二个段落标签</p>
</div>
</body>
</html>判断是否选择了元素实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div01');
var $div2 = $('#div02');
var $li = $('li');
var $div3 = $div.prev();
var iLen = $div.length;
var iLen2 = $li.length;
// 没有选择元素，length的属性值是0
var iLen3 = $div2.length;
var iLen4 = $div3.length;
alert(iLen);
alert(iLen2);
alert(iLen3);
alert(iLen4);
})
</script>
</head>
<body>
<div id="div01">这是一个div</div>
<ul>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
</body>
</html>6.4jquery样式操作
jquery用法思想二
同一个函数完成取值和赋值
操作行间样式
// 获取div的样式
$("div").css("width");
$("div").css("color");
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。
操作样式类名
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.red{
color:red;
}
.big{
font-size:30px;
}
.noline{
text-decoration:none;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div01');
var $div2 = $('div');
var $a = $('#link01');
// 读取样式属性值
var sSize = $div.css('font-size');
// alert(sSize);
// 写样式属性，也叫作设置样式属性
// 设置一个样式属性可以不写成字典的形式
$div.css('color','red');
$div.css({'font-size':30,'font-weight':'bold'});
// 读取多个元素的样式属性值,得到的是第一个元素的值
var sSize2 = $div2.css('font-size');
//alert(sSize2);
// 操作样式类名
$a.addClass('red');
$a.addClass('big');
$a.addClass('noline');
$a.removeClass('red');
$a.removeClass('noline');
})
</script>
</head>
<body>
<div id="div01">这是一个div</div>
<div>这是第二个div</div>
<a href="#" id="link01">这是一个链接</a>
</body>
</html>6.5绑定click事件
给元素绑定click事件，可以用如下方法：
$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取
var $li = $('.list li').eq(1);
alert($li.index()); // 弹出1
......
<ul class="list">
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>绑定click事件实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $li = $('.list li');
var $p = $('p');
// 绑定click事件
$li.click(function(){
// this表示当前发生事件的对象,它是一个原生js对象
// this.style.background = 'red';
// $(this) 表示当前发生事件的jquery对象
$(this).css('background','gold');
// 获取当前点击的li的索引值
alert( $(this).index() );
})
// alert( $p.eq(0).index() );
// alert( $p.eq(1).index() );
})
</script>
</head>
<body>
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
<div>
<p>这是第一个段落</p>
</div>
<div>
<p>这是第二个段落</p>
</div>
</body>
</html>选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab_con{
width:500px;
height:350px;
margin:50px auto 0;
}
.tab_btns{
height:50px;
}
.tab_btns input{
width:100px;
height:50px;
background:#ddd;
border:0px;
outline:none;
}
.tab_btns .active{
background:gold;
}
.tab_cons{
height:300px;
background:gold;
}
.tab_cons div{
height:300px;
line-height:300px;
text-align:center;
display:none;
font-size:30px;
}
.tab_cons .current{
display:block;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $btn = $('.tab_btns input');
var $div = $('.tab_cons div');
$btn.click(function(){
$(this).addClass('active').siblings().removeClass('active');
// alert( $(this).index() );
$div.eq( $(this).index() ).addClass('current').siblings().removeClass('current');
})
})
</script>
</head>
<body>
<div class="tab_con">
<div class="tab_btns">
<input type="button" value="按钮一" class="active">
<input type="button" value="按钮二">
<input type="button" value="按钮三">
</div>
<div class="tab_cons">
<div class="current">按钮一对应的内容</div>
<div>按钮二对应的内容</div>
<div>按钮三对应的内容</div>
</div>
</div>
</body>
</html>6.6jquery动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
/*
animate参数：
参数一：要改变的样式属性值，写成字典的形式
参数二：动画持续的时间，单位为毫秒，一般不写单位
参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
参数四：动画回调函数，动画完成后执行的匿名函数
*/
$('#div1').animate({
width:300,
height:300
},1000,'swing',function(){
alert('done!');
});jquery动画实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width:200px;
height:200px;
background:gold;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $btn = $('#btn');
var $box = $('.box');
$btn.click(function fnMove(){
//$box.css({'width':1000});
// $box.animate({'width':1000});
/* animate的参数
参数一：要做动画的样式属性，写成字典形式
参数二：动画持续的时间，默认是400毫秒，设置时不写单位
参数三：动画曲线，默认是'swing',缓冲运动，还有'linear' 匀速运动
参数四：动画的回调函数，它是一个匿名函数，在动画结束时会自动调用
*/
$box.animate({'width':1000},1000,'swing',function(){
$box.animate({'margin-top':400},1000,function(){
$box.animate({'width':200,'margin-top':0},1000,function(){
fnMove();
})
})
});
})
})
</script>
</head>
<body>
<input type="button" value="动画" id="btn">
<div class="box"></div>
</body>
</html>7.JQuery进阶
介绍jquery的加载、jquery选择器、jquery的样式操作、jquery的click事件、jquery动画。
7.1jquery特殊效果
fadeIn() 淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素jquery特殊动画效果实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width:200px;
height:200px;
background:gold;
display:none;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $btn = $('#btn');
var $box = $('.box');
$btn.click(function(){
// 元素显示隐藏效果
// $box.hide();
// $box.show();
// $box.toggle();
// 元素淡入淡出效果
// $box.fadeIn();
// $box.fadeOut();
// $box.fadeToggle();
// 元素向下展开和向上卷起的动画
// $box.slideUp();
// $box.slideDown();
$box.stop().slideToggle();
})
})
</script>
</head>
<body>
<input type="button" value="动画" id="btn">
<div class="box"></div>
</body>
</html>7.2jquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素，也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素层级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级菜单</title>
<style type="text/css">
body{
font-family:'Microsoft Yahei',serif;
}
body,ul{
margin:0px;
padding:0px;
}
ul{list-style:none;}
.menu{
width:200px;
margin:20px auto 0;
}
.menu .level1,.menu li ul a{
display:block;
width:200px;
height:30px;
line-height:30px;
text-decoration:none;
background-color:#3366cc;
color:#fff;
font-size:16px;
text-indent:10px;
}
.menu .level1{
border-bottom:1px solid #afc6f6;
}
.menu li ul a{
font-size:14px;
text-indent:20px;
background-color:#7aa1ef;
}
.menu li ul li{
border-bottom:1px solid #afc6f6;
}
.menu li ul{
display:none;
}
.menu li ul.current{
display:block;
}
.menu li ul li a:hover{
background-color:#f6b544;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $a = $('.level1');
$a.click(function(){
//$(this).next().stop().slideToggle();
$(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();
})
})
</script>
</head>
<body>
<ul class="menu">
<li>
<a href="#" class="level1">手机</a>
<ul class="current">
<li><a href="#">iPhone X 256G</a></li>
<li><a href="#">红米4A 全网通</a></li>
<li><a href="#">HUAWEI Mate10</a></li>
<li><a href="#">vivo X20A 4GB</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">笔记本</a>
<ul>
<li><a href="#">MacBook Pro</a></li>
<li><a href="#">ThinkPad</a></li>
<li><a href="#">外星人(Alienware)</a></li>
<li><a href="#">惠普(HP)薄锐ENVY</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">电视</a>
<ul>
<li><a href="#">海信(hisense)</a></li>
<li><a href="#">长虹(CHANGHONG)</a></li>
<li><a href="#">TCL彩电L65E5800A</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">鞋子</a>
<ul>
<li><a href="#">新百伦</a></li>
<li><a href="#">adidas</a></li>
<li><a href="#">特步</a></li>
<li><a href="#">安踏</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">玩具</a>
<ul>
<li><a href="#">乐高</a></li>
<li><a href="#">费雪</a></li>
<li><a href="#">铭塔</a></li>
<li><a href="#">贝恩斯</a></li>
</ul>
</li>
</ul>
</body>
</html>7.3jquery属性操作
1、html() 取出或设置html内容
// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字</span>');2、prop() 取出或设置某个属性的值
// 取出图片的地址
var $src = $('#img1').prop('src');
// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });操作元素属性实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $a = $('#link01');
// 读取属性值
var sId = $a.prop('id');
// alert(sId);
// 写属性值，也叫作设置属性值
$a.prop({'href':'http://www.baidu.com','title':'这是去到百度的链接'})
// 读取元素包裹的内容
var sTr = $a.html();
//alert(sTr);
// 设置元素包裹的内容
$a.html('百度网');
$a.html('<ul><li>列表文字</li><li>列表文字</li><li>列表文字</li></ul>')
})
</script>
</head>
<body>
<a href="#" id="link01">这是一个链接</a>
</body>
</html>jqury实现聊天对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.talk_con{
width:600px;
height:500px;
border:1px solid #666;
margin:50px auto 0;
background:#f9f9f9;
}
.talk_show{
width:580px;
height:420px;
border:1px solid #666;
background:#fff;
margin:10px auto 0;
overflow:auto;
}
.talk_input{
width:580px;
margin:10px auto 0;
}
.whotalk{
width:80px;
height:30px;
float:left;
outline:none;
}
.talk_word{
width:420px;
height:26px;
padding:0px;
float:left;
margin-left:10px;
outline:none;
text-indent:10px;
}
.talk_sub{
width:56px;
height:30px;
float:left;
margin-left:10px;
}
.atalk{
margin:10px;
}
.atalk span{
display:inline-block;
background:#0181cc;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
.btalk{
margin:10px;
text-align:right;
}
.btalk span{
display:inline-block;
background:#ef8201;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $words = $('#words'),
$who = $('#who'),
$talk = $('#talkwords'),
$btn = $('#talksub');
$btn.click(function(){
// 读取属性值
/*var sVal01 = $who.prop('value');
var sVal02 = $talk.prop('value');
*/
// 清空输入框里面的内容
// $talk.prop({'value':''});
// 操作value属性可以改成下面 val() 方法的写法：
// 读取属性值
var sVal01 = $who.val();
var sVal02 = $talk.val();
// 清空输入框里面的内容
$talk.val('');
// 判断输入框是否为空
if(sVal02==''){
alert('请输入内容！');
return;
}
var sTr = ''
if(sVal01==0){
sTr = '<div class="atalk"><span>A说：'+ sVal02 +'</span></div>';
}
else{
sTr = ' <div class="btalk"><span>B说：'+ sVal02 +'</span></div>';
}
$words.html( $words.html() + sTr);
})
})
</script>
</head>
<body>
<div class="talk_con">
<div class="talk_show" id="words">
<div class="atalk"><span>A说：吃饭了吗？</span></div>
<div class="btalk"><span>B说：还没呢，你呢？</span></div>
</div>
<div class="talk_input">
<select class="whotalk" id="who">
<option value="0">A说：</option>
<option value="1">B说：</option>
</select>
<input type="text" class="talk_word" id="talkwords">
<input type="button" value="发送" class="talk_sub" id="talksub">
</div>
</div>
</body>
</html>7.4jquery事件
事件函数列表：
blur() 元素失去焦点
focus() 元素获得焦点
change() 当表单元素的值发生改变时
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
ready() DOM加载完成
submit() 用户递交表单表单相关事件实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $input = $('#input01');
var $form = $('#form01');
// 绑定失去焦点的事件
$input.blur(function(){
//alert( $(this).val() )
})
// 绑定submit事件
$form.submit(function(){
// 判断数据是否合法
// 阻止表单提交
return false;
})
})
</script>
</head>
<body>
<form id="form01">
<label>用户名：</label>
<input type="text" id="input01" name="username">
<input type="submit" value="提交">
</form>
</body>
</html>获得焦点事件及change事件实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $input = $('#input01');
// 绑定获得焦点的事件
/*
$input.focus(function(){
alert( $(this).val() );
})
*/
// 在focus上绑定函数会反复触发，一般不这么用,可以用click事件代替
// focus一般用在让元素起始就获得焦点
$input.focus();
// 绑定change事件
$input.change(function(){
console.log( $(this).val() );
})
})
</script>
</head>
<body>
<input type="text" id="input01">
</body>
</html>鼠标移入移出事件实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width:200px;
height:200px;
background:gold;
margin:50px auto;
}
.box2{
width:100px;
height:100px;
background:green;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// $(document).ready(function(){ })
$(function(){
var $box = $('.box');
// 绑定鼠标移入事件
/*
$box.mouseover(function(){
$(this).animate({'margin-top':100});
})
*/
// 绑定鼠标移出事件
/*$box.mouseout(function(){
$(this).animate({'margin-top':50});
})
*/
// 上面的移入移出事件，移到子元素也会触发，如果不希望触发，可以改成下面的形式：
$box.mouseenter(function(){
$(this).animate({'margin-top':100});
})
$box.mouseleave(function(){
$(this).animate({'margin-top':50});
})
})
</script>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>7.5表单验证
1、什么是正则表达式：
能让计算机读懂的字符串匹配规则。
2、正则表达式的写法：
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;
3、规则中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
2）转义字符匹配：
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
. 匹配一个任意字符
var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false4、量词：对左边的匹配字符定义个数
? 出现零次或一次（最多出现一次）
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次
5、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符
6、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾
7、修饰参数：
g： global，执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
i： ingore case，忽略大小写，默认大小写敏感
8、常用方法
test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假
正则默认规则
匹配成功就结束，不会继续匹配，区分大小写
常用正则规则
//用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;
//邮箱验证：
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
//密码验证：
var rePass = /^[\w!@#$%^&*]{6,20}$/;
//手机号码验证：
var rePhone = /^1[34578]\d{9}$/;正则表达式的使用实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 定义正则表达式
var reTest01 = /a/;
var reTest02 = /a/i; //忽略大小写
var reTest03 = /\d+/; // 匹配数字一个到多个
var reTest04 = /^\d+$/;
var sTr01 = 'abc';
var sTr02 = 'Abc';
var sTr03 = '123456';
var sTr04 = '123456abcdef';
//alert( reTest01.test(sTr01) );
// alert( reTest01.test(sTr02) );
// alert( reTest02.test(sTr02) );
//alert( reTest03.test(sTr03) ); // true
//alert( reTest03.test(sTr04) ); // true
alert( reTest04.test(sTr03) ); //true
alert( reTest04.test(sTr04) );
</script>
</head>
<body>
</body>
</html>注册页面表单验证
$(function(){
var error_name = true;
var error_pwd = true;
var error_check_pwd = true;
var error_email = true;
var error_check = false;
var $name = $('#user_name');
var $pwd = $('#pwd');
var $cpwd = $('#cpwd');
var $email = $('#email');
var $allow = $('#allow');
$name.blur(function() {
check_user_name();
}).click(function() {
$(this).next().hide();
});;
$pwd.blur(function() {
check_pwd();
}).click(function() {
$(this).next().hide();
});
$cpwd.blur(function() {
check_cpwd();
}).click(function() {
$(this).next().hide();
});
$email.blur(function() {
check_email();
}).click(function() {
$(this).next().hide();
});
$allow.click(function() {
if($(this).prop('checked'))
{
error_check = false;
$(this).siblings('span').hide();
}
else
{
error_check = true;
$(this).siblings('span').html('请勾选同意').show();
}
});
function check_user_name(){
//数字字母或下划线
var reg = /^\w{6,15}$/;
var val = $name.val();
if(val==''){
$name.next().html('用户名不能为空！').show();
error_name = true;
return;
}
if(reg.test(val))
{
$name.next().hide();
error_name = false;
}
else
{
$name.next().html('用户名是6到15个英文或数字，还可包含“_”').show();
error_name = true;
}
}
function check_pwd(){
var reg = /^[\w@!#$%&^*]{6,15}$/;
var val = $pwd.val();
if(val==''){
$pwd.next().html('密码不能为空！').show();
error_pwd = true;
return;
}
if(reg.test(val))
{
$pwd.next().hide();
error_pwd = false;
}
else
{
$pwd.next().html('密码是6到15位字母、数字，还可包含@!#$%^&*字符').show();
error_pwd = true;
}
}
function check_cpwd(){
var pass = $('#pwd').val();
var cpass = $('#cpwd').val();
if(pass!=cpass)
{
$cpwd.next().html('两次输入的密码不一致').show();
error_check_pwd = true;
}
else
{
$cpwd.next().hide();
error_check_pwd = false;
}
}
function check_email(){
var re = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/;
var val = $email.val();
if(val==''){
$email.next().html('邮箱不能为空！').show();
error_email = true;
return;
}
if(re.test(val))
{
$email.next().hide();
error_email = false;
}
else
{
$email.next().html('你输入的邮箱格式不正确').show();
error_email = true;
}
}
$('.reg_form form').submit(function() {
if(error_name == false && error_pwd == false && error_check_pwd == false && error_email == false && error_check == false)
{
return true;
}
else
{
return false;
}
});
})8.JQuery高级
介绍事件冒泡、事件委托、Dom操作、javascript对象、json数据格式、ajax以及jsonp。
8.1事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>阻止默认行为
阻止表单提交
$('#form1').submit(function(event){
event.preventDefault();
})合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用
// event.stopPropagation();
// event.preventDefault();
// 合并写法：
return false;事件冒泡和阻止事件冒泡实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.grandfather{
width:300px;
height:300px;
background:purple;
}
.father{
width:200px;
height:200px;
background:gold;
position: relative;
}
.son{
width:100px;
height:100px;
background:red;
position: absolute;
left:0px;
top:400px;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// var $son = $('.son');
$('.son').click(function(){
alert(1);
// 阻止事件冒泡的简略写法：
return false;
});
// 父级阻止事件冒泡
$('.father').click(function(ev){
alert(2);
// 阻止事件冒泡的完整写法：
ev.stopPropagation();
});
$('.grandfather').click(function(){
alert(3);
})
// $(document) 代表最顶级的标签
$(document).click(function(){
alert(4);
});
})
</script>
</head>
<body>
<!-- .grandfather>.father>.son -->
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>页面弹框（点击弹框外弹框关闭）实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn01').click(function(){
$('#pop').show();
// 按钮阻止click的事件冒泡
return false;
});
$('#shutoff').click(function(){
$('#pop').hide();
});
// 点击弹框其他的地方，关闭弹框
$(document).click(function(){
$('#pop').hide();
});
// 点击弹框，弹框不应该隐藏，所以弹框也需要阻止冒泡
$('.pop_con').click(function(){
return false;
})
})
</script>
</head>
<body>
<input type="button" value="弹出弹框" id="btn01">
<div class="pop_main" id="pop">
<div class="pop_con">
<div class="pop_title">
<h3>系统提示</h3>
<a href="#" id="shutoff">×</a>
</div>
<div class="pop_detail">
<p class="pop_text">亲！请关注近期的优惠活动！</p>
</div>
<div class="pop_footer">
</div>
</div>
<div class="mask"></div>
</div>
</body>
</html>.pop_main{
display:none;
}
.pop_con{
width:500px;
height:300px;
background:#fff;
border-radius:4px;
position:fixed;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-150px;
border:1px solid #f0f0f0;
z-index:9999;
}
.pop_title{
width:490px;
height:40px;
background:#157bef;
margin:5px auto 0;
border-radius:6px;
}
.pop_title h3{
float:left;
margin:0px;
margin-left:10px;
line-height:40px;
color:#fff;
font-size:18px;
font-weight:normal;
}
.pop_title a{
float:right;
width:20px;
height:20px;
background:#fff;
margin:10px 10px 0 0;
text-decoration:none;
line-height:20px;
text-align:center;
font-size:20px;
border-radius:4px;
}
.pop_detail{
height:200px;
border-bottom:1px solid #f0f0f0;
/* 解决margin-top塌陷 */
overflow:hidden;
}
.pop_footer{
height:54px;
line-height:54px;
text-align:center;
color:#666;
}
.pop_footer span{
color:red;
padding:0 5px;
}
.mask{
width:100%;
height:100%;
background:#000;
position:fixed;
left:0;
top:0;
opacity:0.3;
filter:alpha(opacity=30);
z-index:9990;
}
.pop_text{
margin:74px 0 0 100px;
font-size:20px;
color:#666;
}
.time_left_bg{
width:994px;
height:380px;
border:1px solid #ddd;
background:url(../images/timg_bg.jpg) no-repeat;
margin:50px auto 0;
position:relative;
}
.time_left_bg div{
position:absolute;
width:95px;
height:95px;
font:normal 70px/95px 'Microsoft Yahei';
text-align:center;
color:#333;
}
.time_left_bg .showday{
left:193px;
top:257px;
}
.time_left_bg .showhour{
left:355px;
top:257px;
}
.time_left_bg .showminute{
left:517px;
top:257px;
}
.time_left_bg .showsecond{
left:678px;
top:257px;
}
.pop_footer{
height:54px;
}
.pop_footer .confirm,.pop_footer .cancel{
float:right;
width:100px;
height:36px;
background:#157bef;
border:0px;
color:#fff;
font-size:16px;
border-radius:4px;
margin:9px 10px 0 0;
}
.pop_footer .cancel{
background:#ddd;
color:#666;
margin-right:20px;
}8.2事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
一般绑定事件的写法
$(function(){
$ali = $('#list li');
$ali.click(function() {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>事件委托的写法
$(function(){
$list = $('#list');
$list.delegate('li', 'click', function() {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>事件委托的原理实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $li = $('.list li');
var $ul = $('.list');
/*
$li.click(function(){
$(this).css({'background':'red'});
})
*/
// 上面的写法性能不高，可以改写成下面事件委托的写法
$ul.delegate('li','click',function(){
$(this).css({'background':'red'});
});
})
</script>
</head>
<body>
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
</body>
</html>8.3Dom操作
Dom操作也叫做元素节点操作，它指的是改变html的标签结构，它有两种情况：
1、移动现有标签的位置
2、将新创建的标签插入到现有的标签中
创建新标签
var $div = $('<div>'); //创建一个空的div
var $div2 = $('<div>这是一个div元素</div>');移动或者插入标签的方法
1、append()和appendTo()：在现存元素的内部，从后面放入元素
var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>2、prepend()和prependTo()：在现存元素的内部，从前面放入元素
3、after()和insertAfter()：在现存元素的外部，从后面放入元素
4、before()和insertBefore()：在现存元素的外部，从前面放入元素
删除标签
$('#div1').remove();dom操作实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div01');
var $p01 = $('#p01');
var $h01 = $('#h01');
var $p02 = $('#p02');
// 当前元素的里面的后面要放另外一个元素
//$div.append($p01);
// 当前元素要放到另外一个元素里面的后面
$p01.appendTo($div);
// 当前元素里面的前面要放另外一个元素
// $div.prepend($h01);
// 当前元素要放到另外一个元素里面的前面
$h01.prependTo($div);
// 当前元素外面的后面要放另外一个元素
// $div.after($p02);
// 当前元素要放到另外一个元素的外面的后面
$p02.insertAfter($div);
// 创建一个新的空的div标签
var $newdiv01 = $('<div>');
// 创建一个有内容的div标签
var $newdiv02 = $('<div>新创建的第二个div</div>');
// 当前元素的外面的前面要放另外一个元素
$div.before($newdiv01);
// 当前元素要放到另外一个元素的外面的前面
$newdiv02.insertBefore($div);
// 删除标签
$newdiv01.remove();
$h01.remove();
})
</script>
</head>
<body>
<p id="p02">div01上面的p标签</p>
<p id="p01">div01外面的p标签</p>
<h2 id="h01">div01外面的h2标签</h2>
<div id="div01">
<h3>div01里面的h3标题</h3>
<p>div01里面的p标签</p>
</div>
</body>
</html>todolist(计划列表)实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con {
width: 600px;
margin: 50px auto 0;
}
.inputtxt {
width: 550px;
height: 30px;
border: 1px solid #ccc;
padding: 0px;
text-indent: 10px;
}
.inputbtn {
width: 40px;
height: 32px;
padding: 0px;
border: 1px solid #ccc;
}
.list {
margin: 0;
padding: 0;
list-style: none;
margin-top: 20px;
}
.list li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
.list li span {
float: left;
}
.list li a {
float: right;
text-decoration: none;
margin: 0 10px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $txt = $('#txt1');
var $btn = $('#btn1');
var $list = $('#list');
$btn.click(function(){
var sVal = $txt.val();
// 清空输入框里面的内容，防止重复添加
$txt.val('');
// 判断输入框是否为空
if(sVal==''){
alert('请输入内容！');
return;
}
var $li = $('<li><span>'+ sVal +'</span><a href="javascript:;" class="up"> ↑ </a>\
<a href="javascript:;" class="down"> ↓ </a>\
<a href="javascript:;"class="del">删除</a></li>');
$li.appendTo($list);
/*var $del2 = $li.find('.del');
$del2.click(function(){
$(this).parent().remove();
})
*/
})
/*
var $del = $('.del');
$del.click(function(){
$(this).parent().remove();
})
*/
// 上面的写法太复杂，而且性能不高，可以改写成事物委托的写法：
$list.delegate('a','click',function(){
var sTr = $(this).prop('class');
// 删除操作
if(sTr=='del'){
$(this).parent().remove();
}
// 上移操作
if(sTr=='up'){
// 判断是否是第一条
if( $(this).parent().prev().length == 0 )
{
alert('到顶了！');
return;
}
$(this).parent().insertBefore( $(this).parent().prev() );
}
// 下移操作
if(sTr=='down'){
if( $(this).parent().next().length == 0 )
{
alert('到底了！');
return;
}
$(this).parent().insertAfter( $(this).parent().next() );
}
})
})
</script>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt">
<input type="button" name="" value="增加" id="btn1" class="inputbtn">
<ul id="list" class="list">
<li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;"
class="del">删除</a></li>
<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;"
class="del">删除</a></li>
<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;"
class="del">删除</a></li>
</ul>
</div>
</body>
</html>8.4javascript对象
javascript中的对象，可以理解成是一个键值对的集合，键是调用每个值的名称，值可以是基本变量，还可以是函数和对象。
创建javascript对象有两种方法，一种是通过顶级Object类来实例化一个对象，然后在对象上面添加属性和方法：
var person = new Object();
// 添加属性：
person.name = 'tom';
person.age = '25';
// 添加方法：
person.sayName = function(){
alert(this.name);
}
// 调用属性和方法：
alert(person.age);
person.sayName();还可以通过对象直接量的方式创建对象：
var person2 = {
name:'Rose',
age: 18,
sayName:function(){
alert('My name is' + this.name);
}
}
// 调用属性和方法：
alert(person2.age);
person2.sayName();创建对象实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 直接量的方式定义对象
var person = {
name:'Tom',
age:18,
showName:function(){
alert('我的名字是：' + this.name )
},
showAge:function(){
alert('我的年龄是：' + this.age)
}
}
// 使用对象
// 调用对象的属性：
alert(person.name);
// 调用对象的方法：
person.showName();
</script>
</head>
<body>
</body>
</html>8.5json
json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的字符串，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。
json数据类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，但不支持undefined，值还可以是数组或者JavaScript对象。
json写法需要注意的是，json中的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。
json格式的数据：
{
"name":"tom",
"age":18
}json的另外一个数据格式是数组，和javascript中的数组字面量相同。
["tom",18,"programmer"]还可以是更复杂的数据机构：
{
"name":"jack",
"age":29,
"hobby":["reading","travel","photography"]
"school":{
"name":"Merrimack College",
"location":'North Andover, MA'
}
}json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象，转化的方式如下：
var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);
// 操作属性
alert(oPerson.name);
alert(oPerson.age);操作json数据实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 定义一个json数据
var sJson = '{\
"name":"tom",\
"age":18,\
"hobby":["study","shopping","singing"],\
"school":{"name":"beida","location":"beijing"}\
}';
// 将json数据转化成JavaScript对象
var oJson = JSON.parse(sJson);
alert( oJson.name );
alert( oJson.hobby[0] );
alert( oJson.school.location );
</script>
</head>
<body>
</body>
</html>8.6ajax
ajax一个前后台配合的技术，它可以让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。jquery将它封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。
ajax需要在服务器环境下运行。
$.ajax使用方法
常用参数：
1、url 请求地址
2、type 请求方式，默认是'get'，常用的还有'post'
3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'text'
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是'true'，表示异步
以前的写法：
$.ajax({
url: '/change_data',
type: 'get',
dataType: 'json',
data:{'code':300268}
success:function(dat){
alert(dat.name);
},
error:function(){
alert('服务器超时，请重试！');
}
});新的写法(推荐)：
$.ajax({
url: '/change_data',
type: 'get',
dataType: 'json',
data:{'code':300268}
})
.done(function(dat) {
alert(dat.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});$.ajax的简写方式
$.ajax按照请求方式可以简写成$.get或者$.post方式
$.get(URL,data,function(data){},dataType);
$.post(URL,data,function(data){},dataType);首页用户信息读取实例：
<script>
$(function(){
/*$.ajax({
url:'js/data.json',
type:'get',
dataType:'json'
/*success:function(dat){
// console.log(dat);
$('.login_btn').hide();
$('.login_info em').html( dat.name ).parent().show();
},
error:function(){
alert('服务器超时，请重试！');
}
}).done(function(dat){
$('.login_btn').hide();
$('.login_info em').html( dat.name ).parent().show();
}).fail(function(){
alert('服务器超时，请重试！');
})
*/
// 上面是完整写法，可以简写成下面$.get的写法：
$.get('js/data.json',function(dat){
$('.login_btn').hide();
$('.login_info em').html( dat.name ).parent().show();
});
})
</script>{"name":"李思","age":18}与ajax相关的概念：
同步和异步
现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。
数据接口
数据接口是后台程序提供的，它是一个url地址，访问这个地址，会对数据进行增、删、改、查的操作，最终会返回json格式的数据或者操作信息，格式也可以是text、xml等。
9.ES6语法
ES6是JavaScript语言的新版本，它也可以叫做ES2015，之前学习的JavaScript属于ES5，ES6在它的基础上增加了一些语法，ES6是未来JavaScript的趋势，而且React库中大量使用了ES6的语法，所以掌握这些常用的ES6语法是必须的
9.1变量声明和赋值
变量声明let和const
let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字，这两个关键字和var的区别是，它们声明的变量没有预解析，let和const的区别是，let声明的是一般变量，const申明的常量，不可修改。
alert(iNum01) // 弹出undefined
// alert(iNum02); 报错，let关键字定义变量没有变量预解析
// alert(iNum03); 报错，const关键字定义变量没有变量预解析
var iNum01 = 6;
// 使用let关键字定义变量
let iNum02 = 12;
// 使用const关键字定义变量
const iNum03 = 24;
alert(iNum01); // 弹出6
alert(iNum02); // 弹出12
alert(iNum03); // 弹出24
iNum01 = 7;
iNum02 = 13;
//iNum03 = 25; // 报错,const定义的变量不可修改,const定义的变量是常量
alert(iNum01)
alert(iNum02);
alert(iNum03);解构赋值
ES6 允许我们按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）
1、数组的解构赋值
const arr = [1, 2, 3]
let [a, b, c] = arr
console.log(a, b, c); // 1 2 32、对象的解构赋值
const obj = { name: 'tom',address:'beijing', age: '100'}
let {name, age} = obj // 变量名称必须和对象的key同名
console.log(name, age); //tom 1003、函数参数的解构赋值
const person = { name: '小明', age: 11}
function printPerson({name, age}) { // 函数参数可以解构一个对象
console.log(`姓名：${name} 年龄：${age}`);
}
printPerson(person) // 姓名：小明 年龄：11字符串模板
ES6中提供了模版字符串，用`（反引号）标识，用${}将变量括起来
let name = '小明';
let age = 11;
alert(`我的名字是${name},我的年龄是${age}岁。`)扩展运算符(...)
扩展运算符（...），它用于把一个数组转化为用逗号分隔的参数序列，它常用在不定参数个数时的函数调用，数组合并等情形。
let arr = [1,2,3];
let arr2 = [...arr,4];
console.log(arr2) // [1,2,3,4]
function fnAdd(a,b,c){
alert(a + b + c);
}
fnAdd(...arr); // 6
function fnMyalert(...a){
console.log(a);
alert(a[0]);
alert(a[1]);
}
fnMyalert(10,5); // [10,5] 10 59.2函数相关
箭头函数
可以把箭头函数理解成匿名函数的第二种写法，箭头函数的作用是可以在对象中绑定this，解决了JavaScript中this指定混乱的问题。
// 定义函数的一般方式
/*
function fnRs(a,b){
var rs = a + b;
alert(rs);
}
fnRs(1,2);
*/
// 通过匿名函数赋值来定义函数
/*
var fnRs = function(a,b){
var rs = a + b;
alert(rs);
}
fnRs(1,2);
*/
// 通过箭头函数的写法定义
var fnRs = (a,b)=>{
var rs = a + b;
alert(rs);
}
// fnRs(1,2);
// 一个参数可以省略小括号
var fnRs2 = a =>{
alert(a);
}
fnRs2('haha!');
// 函数中如果只有一个return语句，return和大括号都可以省略
/*
var fnAdd = function(a,b){
return a + b;
}
*/
var fnAdd = (a,b) => a+b;
// 函数的返回值如果是javascript对象时，对象需要加括号
/*
let fn = function(){
return {"a":5};
}
*/
// fn = ()=>{"a":5}
// 上面这么写是错的，需要写成下面的形式，返回的对象要加括号
fn = ()=>({"a":5})
// 箭头函数的作用，可以绑定对象中的this
var person = {
name:'tom',
age:18,
showName:function(){
setTimeout(()=>{
alert(this.name);
},1000)
}
}
person.showName();9.3模块及面向对象
模块导入import和导出export
javascript之前是没有模块的功能的，之前做js模块化开发，是用的一些js库来模拟实现的，在ES6中加入了模块的功能，一个js文件就是一个模块，js文件中需要先导出(export)后，才能被其他js文件导入(import)
ES6的导出分为名字导出和默认导出 1、名称导出
导入的变量名必须和导出的变量名一致
// mod01.js文件中导出
export let iNum01 = 12;
export let fnMyalert = function(){
alert('hello');
}
// index.html文件中导入
<script type="module">
import {iNum01,fnMyalert} from "./js/mod01.js";
alert(iNum01);
fnMyalert();
</script>
// mod01.js中还可以写成如下：
let iNum01 = 12;
let fnMyalert = function(){
alert('hello');
}
export {iNum01,fnMyalert}2、默认导出(default export) 一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致，这对于导出匿名函数或类非常有用。
// mod02.js文件中导出
export default {"name":"tom","age":18}
// index.html文件中导入
<script type="module">
import person from "./js/mod02.js";
alert(person.name);
</script>对象的简写
javascript对象在ES6中可以做一些简写形式，了解这些简写形式，才能方便我们读懂一些在javascript代码中简写的对象。
let name = '李思';
let age = 18;
/*
var person = {
name:name,
age:age,
showname:function(){
alert(this.name);
},
showage:function(){
alert(this.age);
}
}
*/
// 简写成下面的形式
var person = {
name,
age,
showname(){
alert(this.name);
},
showage(){
alert(this.age);
}
}
person.showname();
person.showage();定义类及类的继承
ES6 封装了class语法来大大简化了类的创建和类的继承
// 定义类，类的首字母要大写
class Person {
// 定义构造函数
constructor(name,age){
this.name = name;
this.age = age;
}
// 定义方法
showname(){
alert('我的名字是：' + this.name);
}
showage(){
alert('我的年龄是：' + this.age);
}
}
// 通过类实例化对象
let Andy = new Person('刘德华',55);
// 调用对象的方法
Andy.showname();
Andy.showage();
// 定义类继承Person类
class Student extends Person{
constructor(name,age,school){
super(name,age);
this.school = school;
}
showschool(){
alert('我的学校是：' + this.school);
}
}
// 通过类实例化对象
let Tom = new Student('小明','16','北京一中');
// 调用对象的方法
Tom.showname();
Tom.showschool();9.4异步请求数据
异步操作
es6新增了异步操作的写法，来解决异步操作函数回调的问题，这个新增的写法就是Promise对象，Promise实际上就是一个特殊的Javascript对象，反映了”异步操作的最终值”。”Promise”直译过来有预期的意思，因此，它也代表了某种承诺，即无论你异步操作成功与否，这个对象最终都会返回一个值给你。
在实际开发中，如果我们在写ajax程序时，我们如果希望两个ajax程序都执行完后，再去做一件事情，我们实现的方法可以是，在一个ajax中嵌套另外一个ajax程序：
$.ajax({
url:'data01.json',
type:'get',
dataType:'json',
success:function(dat1){
$.ajax({
url:'data01.json',
type:'get',
dataType:'json',
success:function(dat2){
console.log([dat1,dat2])
}
})
})上面的写法不方便编写，也不方便阅读，Promise对象就可以解决这个问题
// 实例化一个Promise对象
var pro01 = new Promise(function(resolve,reject){
$.ajax({
url:'js/data01.json',
type:'get',
dataType:'json'
}).done(function(dat){
resolve(dat)
}).fail(function(err){
reject(err)
})
});
var pro02 = new Promise(function(resolve,reject){
$.ajax({
url:'js/data02.json',
type:'get',
dataType:'json'
}).done(function(dat){
resolve(dat)
}).fail(function(err){
reject(err)
})
});
// 通过Promise对象来处理回调
pro01.then(function(dat){
console.log(dat);
}).catch(function(err){
console.log(err)
})上面将两个ajax请求分别放在两个promise对象中，其中resolve参数是处理请求成功的回调函数，reject是处理失败的回调函数，接着就可以通过这个对象，来处理ajax的回调，相当于把回调拆开了写。 如果希望两个ajax程序都执行完后，再去做一件事情，可以写成如下的形式：
Promise.all([pro01,pro02]).then(result=>console.log(result));9.5新增数组操作方法
map() 方法
map方法可以分别处理数组中的成员，返回一个新数组，也可以用于遍历数组
let aList = [1,2,3];
aList.map(function(a){
alert(a);
})
// 弹出 1 2 3concat() 方法
concat() 方法用于连接新的数组成员或者其他数组，返回一个新的数组
let aList01 = [1,2,3];
let aList02 = ['a','b'];
let aList03 = arr.concat(4,5);
let aList04 = aList01.concat(aList02);
console.log(aList03) // [1,2,3,4,5]
console.log(aList04) // [1,2,3,'a','b']10.Vue.js
Vue是前端优秀框架， 是一套用于构建用户界面的渐进式框架
学习网站：https://cn.vuejs.org/guide/introduction.html
10.1Vue开发前的准备
安装Node.js和npm
安装Node.js和npm之后，在终端输入node -v和npm -v验证
安装Vue CLI
全局安装Vue CLInpm install -g @vue/cli
安装之后，验证它是否安装成功
vue -V或者vue --version
创建项目
在需要创建应用的文件夹下运行终端，在命令行执行下面的命令（管理员身份运行）
vue create vue-demo(项目名不能有大写)
运行成功显示如下信息
运行项目
第一步：进入项目根目录 cd vue-demo
第二步：运行 npm run serve 启动项目
10.2模板语法
文本
数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值
<span>Message: {{ msg }}</span>一般配合 js 中的 data() 设置数据
export default {
name: 'HelloWorld',
data(){
return{
msg:"消息提示"
}
}
}实例
<template>
<div class="hello">
<h3>学习Vue：模板语法</h3>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
msg:"学习Vue"
}
}
}
</script>
原始 HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>data(){
return{
rawHtml:"<a href='https://www.itbaizhan.com'>百战</a>"
}
}实例
<template>
<div class="hello">
<h3>学习Vue：模板语法</h3>
<p>{{msg}}</p>
<div v-html="rawHTML"></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
msg:"学习Vue",
rawHTML:"<a href='http://www.baidu.com'>百度</a>"
}
}
}
</script>
属性 Attribute
Mustache 语法不能在 HTML 属性中使用，然而，可以使用v-bind指令
<div v-bind:id="dynamicId"></div>data(){
return{
dynamicId:1001
}
}温馨提示
v-bind: 可以简写成 :
实例
<template>
<div class="hello">
<h3>学习Vue：模板语法</h3>
<p>{{msg}}</p>
<div v-html="rawHTML"></div>
<div :id="dynamicId"></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
msg:"学习Vue",
rawHTML:"<a href='http://www.baidu.com'>百度</a>",
dynamicId:10001
}
}
}
</script>
使用 JavaScript 表达式
在我们的模板中，我们一直都只绑定简单的 property 键值，Vue.js 都提供了完全的 JavaScript 表达式支持
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
<!-- 这是语句，不是表达式：-->
{{ var a = 1 }}
<!-- 流程控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}实例
<template>
<div class="hello">
<h3>学习Vue：模板语法</h3>
<p>{{ msg }}</p>
<div>{{ rawHtml }}</div>
<div v-html="rawHtml"></div>
<div :id="dynamicId"></div>
<p>{{ num+10 }}</p>
<p>{{ flag ? "顾傲气" : "汪康毅" }}</p>
<p>{{ message.split('').reverse().join('') }}</p>
</div>
</template>
<script>
export default {
// innerHTML innerText
name: 'HelloWorld',
data() {
return {
msg: "学习Vue",
rawHtml:"<a href='http://www.baidu.com'>百度</a>",
dynamicId:10001,
num:10,
flag:false,
message:"123456789"
}
}
}
</script>10.3条件渲染
v-if
v-if 指令用于条件性地渲染一块内容。这
块内容只会在指令的表达式返回true值时才被渲染
<p v-if="flag">我是孙猴子</p>data() {
return {
flag: true
}
}v-else
你也可以使用 v-else 为 v-if 添加一个“else 区块”。
<p v-if="flag">我是孙猴子</p>
<p v-else>你是傻猴子</p>data() {
return {
flag: false
}
}v-show
另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样：
<h1 v-show="ok">Hello!</h1>v-if和v-show的区别
v-if是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
v-if也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。
总的来说，v-if 有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if会更合适。
实例
<template>
<div class="hello">
<p v-if="flag">我是谢明宇</p>
<p v-else>我是顾傲气</p>
<p v-show="flag">我是汪康毅</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
flag: true
}
}
}
</script>10.4列表渲染
v-for
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for指令的值需要使用 item in items 形式的特殊语法，其中 items是源数据的数组，而 item 是迭代项的别名：
<ul>
<li v-for="item in items">{{ item.message}}</li>
</ul>data() {
return {
items: [{ message: 'Foo' }, {message: 'Bar' }]
}
}维护状态
当 Vue 正在更新使用 v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key attribute：
<div v-for="(item,index) in items":key="item.id|index">
<!-- 内容 -->
</div>实例
<template>
<div class="hello">
<h3>列表渲染</h3>
<ul>
<li v-for="item in nameList" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
nameList:[
{
id:1001,
name:'谢明宇'
},
{
id:1002,
name:'马庆山'
},
{
id:1003,
name:'汪康毅'
},
{
id:1004,
name:'黄毅超'
}
]
}
}
}
</script>10.5事件处理
监听事件
我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。
用法：v-on:click="handler" 或 @click="handler"。
<button @click="counter += 1">Add 1</button>data() {
return {
counter: 0
}
}事件处理方法
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
<button @click="greet">Greet</button>methods: {
greet(event) {
// `event` 是原生 DOM event
if (event) {
alert(event.target.tagName)
}
}
}内联处理器中的方法
这是官方的翻译称呼，其实我们可以直接叫他 "事件传递参数"
<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>methods: {
say(message) {
alert(message)
}
}实例
<template>
<div class="hello">
<button v-on:click="counter+=1">点击（+）:{{ counter }}</button>
<button @click="clickHandle">按钮</button>
<p>{{ message }}</p>
<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>
<ul>
<li @click="clickItemHandle(item)" v-for="(item, index) in names" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
counter: 1,
message: "消息通知",
names: ["黄毅超", "孤傲气", "谢明宇"]
}
},
methods: {
clickHandle(event) {
console.log("我是彭于晏")
this.message = "消息被撤回了"
console.log(event);
event.target.innerHTML = "点击之后的按钮"
},
say(data) {
console.log(data);
},
clickItemHandle(item) {
console.log(item);
}
}
}
</script>10.6表单输入绑定
你可以用 v-model 指令在表单 <input> 、 <textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。
<input v-model="message" placeholder="editme" />
<p>Message is: {{ message }}</p>data() {
return {
message:""
}
}修饰符
.lazy
默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据
<input v-model.lazy="message" />
<p>Message is: {{ message }}</p>data() {
return {
message:""
}
}.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim修饰符
<input v-model.trim="message" />data() {
return {
message:""
}
}.number
如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：
<input v-model.number="age" />如果该值无法被 parseFloat() 处理，那么将返回原始值。
number 修饰符会在输入框有 type="number" 时自动启用。
实例
<template>
<div class="hello">
<input type="text" v-model.lazy="username">
<input type="text" v-model.trim="password">
<p>{{ username }},{{ password }}</p>
<button @click="clickGetUserName">获取用户名</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
username: "",
password: ""
}
},
methods: {
clickGetUserName() {
console.log(this.username);
}
}
}
</script>10.7组件基础
单文件组件
Vue 单文件组件（又名 *.vue 文件，缩写为 SFC）是一种特殊的文件格式，它允许将 Vue 组件的模板、逻辑 与 样式封装在单个文件中
<template>
<h3>单文件组件</h3>
</template>
<script>
export default {
name:"MyComponent"
}
</script>
<style scoped>
h3{
color: red;
}
</style>加载组件
第一步：引入组件 import MyComponentVue from './components/MyComponent.vue'
第二步：挂载组件 components: { MyComponentVue }
第三步：显示组件 <my-componentVue />
组件的组织
通常一个应用会以一棵嵌套的组件树的形式来组织
实例
<template>
<h3>我是单文件组件</h3>
</template>
<script>
export default {
name: "MyComponent"
}
</script>
<!-- scoped:如果在style中添加此属性，就代表着，当前样式，只在当前组件中生效 -->
<style scoped>
h3 {
color: red;
}
</style><template>
<img alt="Vue logo" src="./assets/logo.png">
<MyComponent/>
<my-component/>
</template>
<script>
import MyComponent from "./components/MyComponent.vue"
export default {
name: 'App',
components: {
MyComponent
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
10.8Props组件交互
组件与组件之间是需要存在交互的，否则完全没关系，组件的意义就很小了
Prop 是你可以在组件上注册的一些自定义 attribute
<my-componentVue title="标题"/><template>
<h3>单文件组件</h3>
<p>{{ title }}</p>
</template>
<script>
export default {
name:"MyComponent",
props:{
title:{
type:String,
default:""
}
}
}
</script>Prop 类型
Prop传递参数其实是没有类型限制的
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function
}温馨提示：数据类型为数组或者对象的时候，默认值是需要返回工厂模式
实例
<template>
<h3>prop传递数据</h3>
<p>{{title}}</p>
<p>age={{age}}</p>
<ul>
<li v-for="(item,index) in names" :key="index">{{item}}</li>
</ul>
</template>
<script>
export default {
name: "MyComponent",
props: {
title:{
type: String,
default: ""
},
age:{
type: Number,
default: 0
},
names:{
type: Array,
//数组和对象必须使用函数进行返回
default:function (){
return []
}
}
}
}
</script>
<style scoped>
</style><template>
<img alt="Vue logo" src="./assets/logo.png">
<MyComponent :title="title" :age="age" :names="names"/>
</template>
<script>
import MyComponent from "./components/MyComponent.vue"
export default {
name: 'App',
data() {
return {
title: "我是一个标题",
age:18,
names: ["谢明宇","顾傲气","黄毅超"]
}
},
components: {
MyComponent
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
10.9自定义事件组件交互
自定义事件可以在组件中反向传递数据， prop 可以将数据从父组件传递到子组件，那么反向如何操作呢，就可以利用自定义事件实现$emit
<template>
<h3>单文件组件</h3>
<button @click="sendHandle">发送数据
</button>
</template>
<script>
export default {
name: "MyComponent",
methods:{
sendHandle(){
this.$emit("onCustom","数据")
}
}
}
</script>
<style scoped>
h3 {
color: red;
}
</style><template>
<my-componentVue @onCustom="getData" />
</template>
<script>
import MyComponentVue from './components/MyComponent.vue'
export default {
name: 'App',
components: {
MyComponentVue
},
methods: {
getData(data) {
console.log(data);
}
}
}
</script>实例
<template>
<h3>自定义事件传递数据</h3>
<button @click="sendClickHandle">点击传递数据</button>
</template>
<script>
export default {
name: "MyComponent",
data(){
return {
msg: "我是自定义事件传递的数据"
}
},
methods: {
sendClickHandle(){
// 参数1：字符串：理论上是随便的，但是需要具有意义
// 参数2：传递的数据
this.$emit("onEvent", this.msg)
}
}
}
</script>
<style scoped>
</style><template>
<img alt="Vue logo" src="./assets/logo.png">
<p>{{ msg }}</p>
<MyComponent @onEvent="getDataHandle"/>
</template>
<script>
import MyComponent from "./components/MyComponent.vue"
export default {
name: 'App',
data() {
return {
msg: "hello world"
}
},
components: {
MyComponent
},
methods: {
getDataHandle(data){
this.msg = data
console.log(data)
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
10.10组件生命周期
每个组件在被创建时都要经过一系列的初始化过程——例如，需要 设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更 新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会
为了方便记忆，我们可以将他们分类：
创建时： beforeCreate 、 created
渲染时： beforeMount 、 mounted
更新时： beforeUpdate 、 updated
卸载时： beforeUnmount 、 unmounted
实例
<template>
<h3>生命周期函数</h3>
<p>{{msg}}</p>
<button @click="msg='点击了'">点击</button>
</template>
<script>
export default {
name: "MyComponent",
data() {
return {
msg: ""
}
},
beforeCreate() {
console.log("beforeCreate:组件创建之前")
},
created() {
console.log("created:组件创建完成")
},
beforeMount() {
console.log("beforeMount:组件渲染之前")
},
mounted() {
console.log("mounted:组件渲染完成")
//把网络请求放到这里
},
beforeUpdate() {
console.log("beforeUpdate:组件更新之前")
},
updated() {
console.log("updated:组件更新完成")
},
beforeUnmount() {
console.log("beforeUnmount:组件卸载之前")
//卸载之前，把消耗性能的处理都干掉，比如定时器
},
unmounted() {
console.log("unmounted:组件卸载完成")
}
}
</script>
<style scoped>
</style><template>
<img alt="Vue logo" src="./assets/logo.png">
<MyComponent />
</template>
<script>
import MyComponent from "./components/MyComponent.vue"
export default {
name: 'App',
components: {
MyComponent
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
10.11Axios网络请求
Axios 是一个基于 promise 的网络请求库
安装
Axios的应用是需要单独安装的npm install --save axios
引入
组件中引入: import axios from "axios"
全局引用：
import axios from "axios"
const app = createApp(App);
app.config.globalProperties.$axios = axios
app.mount('#app')
// 在组件中调用
this.$axios网络请求基本示例
get请求
axios({
method: "get",
url:
"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
}).then(res => {
console.log(res.data);
})post请求
post请求参数是需要额外处理的
- 安装依赖:
npm install --save querystring - 转换参数格式:
qs.stringify({})
axios({
method:"post",
url:"http://iwenwiki.com/api/blueberrypai/l
ogin.php",
data:qs.stringify({
user_id:"iwen@qq.com",
password:"iwen123",
verification_code:"crfvw"
})
}).then(res =>{
console.log(res.data);
})快捷方案
get请求
axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php")
.then(res =>{
console.log(res.data);
})post请求
axios.post("http://iwenwiki.com/api/blueberrypai/login.php", qs.stringify({
user_id: "iwen@qq.com",
password: "iwen123",
verification_code: "crfvw"
}))
.then(res => {
console.log(res.data);
})实例
<template>
<div class="hello">
<p>{{ chengpin.title }}</p>
</div>
</template>
<script>
import axios from "axios";
import querystring from "querystring"
export default {
name: 'HelloWorld',
data() {
return {
chengpin: {}
}
},
mounted() {
// get请求方式
// axios({
// method: "get",
// url: "http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
// }).then(res => {
// this.chengpin = res.data.chengpinDetails[0]
// })
// post请求方式
// axios({
// method: "post",
// url: "http://iwenwiki.com/api/blueberrypai/login.php",
// data: querystring.stringify({
// user_id: "iwen@qq.com",
// password: "iwen123",
// verification_code: "crfvw"
// })
// }).then(res =>{
// console.log(res.data);
// })
axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php")
.then(res => {
console.log(res.data);
})
axios.post("http://iwenwiki.com/api/blueberrypai/login.php", querystring.stringify({
user_id: "iwen@qq.com",
password: "iwen123",
verification_code: "crfvw"
})).then(res => {
console.log(res.data);
})
}
}
</script>10.12Axios网络请求封装
在日常应用过程中，一个项目中的网络请求会很多，此时一般采取的方案是将网络请求封装起来
在 src 目录下创建文件夹utils ，并创建文件 request ，用来存储网络请求对象 axios
import axios from "axios"
import qs from "querystring"
const errorHandle = (status,info) => {
switch(status){
case 400:
console.log("语义有误");
break;
case 401:
console.log("服务器认证失败");
break;
case 403:
console.log("服务器拒绝访问");
break;
case 404:
console.log("地址错误");
break;
case 500:
console.log("服务器遇到意外");
break;
case 502:
console.log("服务器无响应");
break;
default:
console.log(info);
break;
}
}
const instance = axios.create({
timeout:5000
})
instance.interceptors.request.use(
config =>{
if(config.method === "post"){
config.data =qs.stringify(config.data)
}
return config;
},
error => Promise.reject(error)
)
instance.interceptors.response.use(
response => response.status === 200 ?
Promise.resolve(response) :
Promise.reject(response),
error =>{
const { response } = error;
errorHandle(response.status,response.info)
}
)
export default instance;在 src 目录下创建文件夹 api ，并创建文件 index 和 path 分别用来存放网络请求方法和请求路径
// path.js
const base = {
baseUrl:"http://iwenwiki.com",
chengpin:"/api/blueberrypai/getChengpinDetails.php"
}
export default base// index.js
import path from "./path"
import axios from "../utils/request"
export default {
getChengpin(){
return axios.get(path.baseUrl +path.chengpin)
}
}在组件中直接调用网络请求
import api from "../api/index"
api.getChengpin().then(res =>{
console.log(res.data);
})10.13网络请求跨域解决方案
JS采取的是同源策略
同源策略是浏览器的一项安全策略，浏览器只允许js 代码请求和当前所在服务器域名,端口,协议相同的数据接口上的数据,这就是同源 策略.
也就是说，当协议、域名、端口任意一个不相同时，都会产生跨域问题，所以又应该如何解决跨域问题呢
跨域错误提示信息
目前主流的跨域解决方案有两种：
- 后台解决：cors
- 前台解决：proxy
devServer: {
proxy: {
'/api': {
target: '<url>',
changeOrigin: true
}
}
}提示：解决完跨域配置之后，要记得重启服务器才行
实例
<template>
<div class="hello">
<h3>跨域解决方案</h3>
</div>
</template>
<script>
import axios from "axios"
export default {
name: 'HelloWorld',
mounted(){
axios.get("/api/FingerUnion/list.php")
.then(res =>{
console.log(res.data);
})
}
}
</script>
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
'/api': {
target: 'http://iwenwiki.com/',
changeOrigin: true
}
}
}
})10.14Vue引入路由配置
在Vue中，我们可以通过 vue-router 路由管理页面之间的关系
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举
在Vue中引入路由
第一步：安装路由 npm install --save vue-router
第二步：配置独立的路由文件
// index.js
import { createRouter, createWebHashHistory} from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () =>import('../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router第三步：引入路由到项目
// main.js
import router from './router'
app.use(router)实例
项目目录结构：
import { createRouter,createWebHashHistory } from "vue-router"
import HomeView from "../views/HomeView"
import AboutView from "../views/AboutView"
// 配置信息中需要页面的相关配置
const routes = [
{
path:"/",
component:HomeView
},
{
path:"/about",
component:AboutView
}
]
const router = createRouter({
/**
* createWebHashHistory
* home:http://localhost:8080/#/
* about:http://localhost:8080/#/about
*
* 原理：a标签锚点连接
*/
/**
* createWebHistory
* home:http://localhost:8080/
* about:http://localhost:8080/about
* 此种方式，需要后台配合做重定向，否则会出现404问题
*
* 原理：H5 pushState()
*/
history:createWebHashHistory(),
routes
})
export default router;import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')<template>
<router-link to="/">首页</router-link> |
<router-link to="/about">关于</router-link>
<router-view></router-view>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>10.15路由传递参数
页面跳转过程中，是可以携带参数的，这也是很常见的业务
例如：在一个列表项，点击进入查看每个列表项的详情
第一步：在路由配置中指定参数的key
{
path:"/list/:name",
name:"list",
component:() =>import("../views/ListView.vue")
}第二步：在跳转过程中携带参数
<li><router-link to="/list/内蒙">内蒙旅游十大景区</router-link></li>
<li><router-link to="/list/北京">北京旅游十大景区</router-link></li>
<li><router-link to="/list/四川">四川旅游十大景区</router-link></li>第三步：在详情页面读取路由携带的参数
<p>{{ $route.params.name }}城市旅游景区详情</p>实例
项目目录结构：
<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/news">新闻</router-link>
</nav>
<router-view/>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
<template>
<ul>
<li><router-link to="/newsdetails/百度">百度新闻</router-link></li>
<li><router-link to="/newsdetails/网易">网易新闻</router-link></li>
<li><router-link to="/newsdetails/头条">头条新闻</router-link></li>
</ul>
</template><template>
<h3>新闻详情</h3>
<p>{{ $route.params.name }}</p>
</template>import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
},
{
path:"/news",
name:"news",
// 这是异步加载方式
component:() => import("../views/NewsView.vue")
},
{
path:"/newsdetails/:name",
name:"newsdetails",
component:() =>import("../views/NewsDetailsView.vue")
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
createApp(App).use(router).mount('#app')10.16嵌套路由配置
路由嵌套是非常常见的需求
第一步：创建子路由要加载显示的页面
第二步：在路由配置文件中添加子路由配置
{
path:"/news",
name:"news",
redirect:"/news/baidu",
component:() =>import("../views/NewsView.vue"),
children:[
{
path:"baidu",
component:() =>import("../views/NewsList/BaiduNews.vue"),
},
{
path:"wangyi",
component:() =>import("../views/NewsList/WangyiNews.vue"),
}
]
}第三步：指定子路由显示位置 <router-view></router-view>
第四步：添加子路由跳转链接
<router-link to="/news/baidu">百度新闻</router-link> |
<router-link to="/news/wangyi">网易新闻</router-link>第五步：重定向配置redirect:"/news/baidu"
实例
项目目录结构：
<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// 重定向
redirect:"/about/us",
component: () => import('../views/AboutView.vue'),
children:[
{
// 二级导航的路径不要加 /
path:"us",
component:() => import("../views/AboutSub/AboutUS.vue")
},
{
path:"info",
component:() => import("../views/AboutSub/AboutInfo.vue")
}
]
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
10.17实验
10.17.1实验一 Vue.js项目创建与组件的使用
【实验目的】
1、 掌握Vue.js项目的创建方法。
2、 掌握Vue.js的项目结构。
3、 掌握Vue.js组件的创建和使用。
4、 掌握Vue.js组件的交互方式。
【实验内容】
1、 创建项目AustProject。
2、 在AustProject项目中的HelloWorld组件中，编写生命周期钩子方法，使用console.log打印出生命周期方法的名称。
3、 组件交互.
（1） 编写实例通过prop向子组件传递数据。在HelloWorld组件中，接收父组件传过来的msg，并在HelloWorld组件中进行显示。
（2） 实现监听子组件的事件。在HelloWorld组件中，添加一个名为“减少”递减按钮，当单击此按钮，会把父组件中的计数器counter（counter的初始值为100）计数减一。
<template>
<div class="hello">
<p>{{ msg }}</p>
Count:{{count}}
<button @click="plusOne2()">-</button>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({
props: {
msg: String
}
})
export default class HelloWorld extends Vue {
msg!: string
count = 0;
plusOne2() {
this.count--
this.$emit("decrement")
}
// 定义生命周期钩子函数
beforeCreate() {
console.log("beforeCreate:组件创建之前")
}
created() {
console.log("created:组件创建完成")
}
beforeMount() {
console.log("beforeMount:组件渲染之前")
}
mounted() {
console.log("mounted:组件渲染完成")
}
beforeUpdate() {
console.log("beforeUpdate:组件更新之前")
}
updated() {
console.log("updated:组件更新完成")
}
beforeUnmount() {
console.log("beforeUnmount:组件卸载之前")
}
unmounted() {
console.log("unmounted:组件卸载完成")
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div id="app">
<h1>Counter: {{ counter }}</h1>
<!-- 向子组件传递 msg 和 counter，并监听 decrement 事件 -->
<lifeCycleComponent :msg="msg" @decrement="decreaseCounter" />
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import lifeCycleComponent from './components/HelloWorld.vue';
@Options({
components: {
lifeCycleComponent
}
})
export default class App extends Vue {
counter = 100; // 父组件中的计数器
msg = "HelloAust+2021304882"; // 传递给子组件的消息
decreaseCounter() {
this.counter--; // 递减操作由父组件处理
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>10.17.2实验二 Vue.js模版、计算属性与监听器
【实验目的】
1、 掌握Vue.js模板的概念。
2、 掌握Vue.js模版的文本插值的使用方法。
3、 掌握Vue.js模版中使用指令（v-bind和v-on）的方法。
4、 掌握Vue.js计算属性的使用方法。
5、 掌握Vue.js监听器的使用方法。
【实验内容】
1、 创建或打开项目AustProject。
2、 在AustProject项目中的HelloWorld组件中，实现一个超链接，单击超链接打开校园网主页。要求使用a标签。在a标签中使用v-bind绑定href属性，并定一个url变量，值是校园网的网址。
3、 计算属性的应用。
实现如下界面：
其功能是：
（1） 在输入名称中输入物品的名称，可以对显示的物品进行筛选。（计算属性）
（2） 输入物品的数量，自动计算单项物品的总价，并自动计算所有物品的总价。（计算属性）
（3） 单击操作按钮，删除对应的物品。（普通方法）
<template>
<div>
<p>
<a v-bind:href="url">AUST官网</a>
</p>
</div>
</template>
<script lang="ts">
import {Vue} from "vue-class-component";
export default class Test12 extends Vue{
private url: string="https://www.aust.edu.cn/"
}
</script>
<style scoped>
</style>
<template>
<div style="text-align: center">
<HelloWorld/>
<center>
<input placeholder="请输入物品名称" v-model="keyWord" type="text">
<table style="margin-top:10px;" width="500" cellspacing="0" cellpadding="0" border>
<thead>
<tr>
<th>物品</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in searchData " :key="item">
<td align="center">{{ item.name }}</td>
<td align="center">{{ item.price }}</td>
<td align="center">
<button @click="item.num > 1 ? item.num-- : null">-</button>
<input v-model="item.num" type="number">
<button @click="item.num < 99 ? item.num++ : null">+</button>
</td>
<td align="center">{{ item.price * item.num }}</td>
<td align="center">
<button @click="del(index)">删除</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" align="right">
<span>总价：{{ total }}</span>
</td>
</tr>
</tfoot>
</table>
</center>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from "@/components/HelloWorld.vue";
@Options({
components: {HelloWorld}
})
export default class App extends Vue {
private keyWord:string='';
Data: {
name: string,
price: number,
num: number
}[]=[{name: 'apple', price: 5,num: 10},
{name: 'orange', price: 4,num: 12},
{name: 'banana', price: 3,num: 7},
{name: 'pear', price: 2,num: 9},
{name: 'peach', price: 7,num: 2},
{name: 'cherry', price: 9,num: 2},
];
//计算属性
get searchData() {
return this.Data.filter(item => {
return item.name.indexOf(this.keyWord) > -1
})
}
//计算属性
get total() {
return this.searchData.reduce((pre, item) => {
return pre + item.price * item.num
}, 0)
}
//普通方法
del(index: number) {
this.Data.splice(index, 1)
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
10.17.3实验三 Vue.js事件与表单
【实验目的】
1、 掌握Vue.js事件的概念。
2、 掌握Vue.js事件的处理发放。
3、 掌握Vue.js表单中各个组件的使用方法。
实验步骤：
1.创建项目 vue create aust-project
2.添加typescript支持 vue add typescript
3.使用WebStorm或者其他工具打开aust-project项目
4.使用router npm install vue-router --save 或者 yarn add vue-router
5.使用store npm install store --save 或者 yarn add store
6.使用vuex npm install vuex --save 或者 yarn add vuex
7.使用less-loader npm install less-loader --save 或者yarn add less-loader
8.修改main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import store from "./store";
const app= createApp(App)
.use(store)
.use(router)
.mount('#app')9.修改App.vue
<template>
<div id="app">
<router-view />
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';
@Options({
components: {
HelloWorld,
},
})
export default class App extends Vue {}
</script>
<style>
html,body,
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
width: 100%;
height: 100%;
}
</style>10.创建路由。 在src目录下创建router目录，然后在router目录下创建index.ts文件
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
redirect:{
name:"Home"
}
},
{
path: "/home",
name: "Home",
component: () =>
import( "../views/Home.vue"),
},
{
path: "/login",
name: "Login",
component: () =>
import( "../views/Login.vue"),
},
{
path: "/register",
name: "Register",
component: () =>
import( "../views/Register.vue"),
},
{
path: "/:catchAll(.*)",
name: "404",
component: () =>
import( "../views/404.vue"),
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
router.beforeEach((to,from,next)=>
{
//登录及注册页面可以直接进入,而主页面需要分情况
if(to.path=='/login')
{
next();
console.log(localStorage.s);
}
else if(to.path=='/register')
{
next();
}
else
{
if(from.path=="/login")//从登录页面可以直接通过登录进入主页面
{
next();
}
else{
//从/进入,如果登录状态是true，则直接next进入主页面
if(localStorage.s === "true")
{
next();
console.log(localStorage['s'])
}
else {//如果登录状态是false，那么跳转至登录页面,需要登录才能进入主页面
next('/login');
console.log("需要登录")
}
}
}
})
export default router;11.创建store 在src目录下创建store目录，在store目录下创建index.ts文件
import { createStore } from "vuex";
export default createStore({
state: {},
mutations: {},
actions: {},
modules: {},
});12.准备资源文件 在src/assets目录下，准备一张bg.jpg文件和404.gif（可以是任意的图片也可以）
13.编写Home.vue、Login.uve 、Register.vue和404.vue 在src下新建views目录（文件夹）
（1）在views目录下创建Home.vue文件。
<template>
<div id="bg">
<div id="container">
<h1>个人信息</h1>
<p><span>姓名：</span>{{sname}}</p>
<p><span>邮箱:</span>{{smail}}</p>
<p><span>手机号：</span>{{stel}}</p>
<button @click.prevent="logout">退出</button>
</div>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({})
export default class Home extends Vue {
private sname:any=localStorage.getItem('name');
private smail:any=localStorage.getItem('mail');
private stel:any =localStorage.getItem('tel');
private isAuth:string=""; //是否保持登录状态
private logout():void{
this.isAuth="false";//修改登录状态
localStorage.setItem('s',this.isAuth);
localStorage.removeItem('s');
this.$router.push('/login');
}
}
</script>
<style scoped>
#container{
width: 480px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
opacity: 0.85;
transform: translate(-50%,-50%);
background: #228B22;
box-shadow: 0 0 18px rgba(0,0,0,.3);
text-align: center;
border-radius: 20px;
margin-top: 10px;
color: white;
}
#bg{
width: 100%;
height: 100%;
background: url("../assets/bg.jpg");
background-size:100% 100%;
position: fixed;
top: 0;
left: 0;
}
p{
font-size: 20px;
margin-top: 20px;
text-align: left;
margin-left: 32%;
}
button{
position: relative;
height: 33px;
width: 150px;
background: rgba(35, 19, 252, 0.425);
border-radius: 10px;
margin-top: 10px;
box-shadow: none;
color: white;
margin-left: 10px;
}
</style>
（2）在views目录下创建Login.vue文件。
<template>
<div id="background">
<div class="container">
<form action="">
<h1>Login</h1>
<div class="form">
<div class="item">
<label>用户名：</label><input type="text" name="username" v-model.trim="name" placeholder="请输入用户名">
<!-- v-model把输入的值传输给name变量 -->
<br/>
</div>
<div class="item">
<label>密码：</label><input type="password" name="password" v-model.trim="password" placeholder="请输入密码">
<br/>
</div>
<div class="keep">
<input @click="handlesave" id="yes" type="radio" value="0" ><!-- 点击选中 -->
<label for="yes">保持登录状态</label>
</div>
</div>
</form>
<button type="submit" @click.prevent="handlelogin">登录 </button>
<!-- v-on点击按钮触发handlelogin方法 -->
<button @click.prevent="handleregister">注册</button>
<router-view></router-view>
</div>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({
})
export default class Login extends Vue {
private name:string ="";
private password:string="";
private st:string='false';
private handlesave():void{
// console.log("保存");
// console.log(this.st);
this.st='true';//修改登录状态为true
localStorage.setItem('s',this.st);
console.log(localStorage.s);
}
private handlelogin():void{
if(this.name===localStorage['name'] && this.password===localStorage['password'])
{
this.$router.push({path:"/home"});//如果输入的名字以及密码正确路由跳转至个人页面
}
else if(this.name==='')//名字为空
{
alert('用户名不为空');
}
else if(this.password==='')//密码为空
{
alert('密码不为空');
}
else{
alert('账号不存在，请注册后登录');//查无此号
}
// console.log("登录");
// console.log(this.name);
// console.log(this.password);
// console.log(this.st);
// console.log(this.$router);
// console.log(this.$router.push({path:"/home"}));
// console.log(this.$router.go(1));
// console.log(this.$router.go(-1));
// console.log(this.$router.go(0));
// console.log(this.$router.back());
// console.log(this.$router.forward());
// console.log(this.$router.replace({path:"/home"}));
// console.log(this.$router.currentRoute);
}
private handleregister():void{
console.log("注册");
// console.log(this.$router.push({path:"/register"}));
this.$router.push({path:"/register"});
}
}
</script>
//css
<style scoped>
#background{
width: 100%;
height: 100%;
background: url("../assets/bg.jpg");
background-size:100% 100%;
position: fixed;
top: 0;
left: 0;
}
.container{
width: 480px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
opacity: 0.85;
transform: translate(-50%,-50%);
background: #228B22;
box-shadow: 0 0 18px rgba(0,0,0,.3);
text-align: center;
border-radius: 20px;
margin-top: 10px;
}
.container h1{
color: aliceblue;
margin-left: 20px;
}
.item {
color: white;
margin-left: 15%;
margin-top: 35px;
font-size: 20px;
text-align: left;
}
.item label{
float:left;
width: 5em;
margin-right: 1em;
text-align: right;
}
input{
margin-left: -5px;
padding: 4px;
border: solid 1px #4e5ef3;
outline: 0;
font: normal 13px/100% Verdana,Tahoma,sans-serif;
width: 200px;
height: 23px;
background:#f1f1f190;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
button{
position: relative;
height: 33px;
width: 100px;
background: rgba(35, 19, 252, 0.425);
border-radius: 10px;
margin-top: 18px;
box-shadow: none;
color: white;
margin-left: 40px;
margin-right: 10px;
}
.keep{
color: white;
}
.keep input{
width: 15px;
height: 15px;
margin-top: 7px;
margin-left: 10px;
margin-right: 10px;
}
</style>
（3）在views目录下创建Register.vue文件。
<template>
<div id="background">
<div id="contain">
<h1>Register</h1>
<div class="form">
<label>用户名：</label><input type="text" v-model.trim="name"><br/>
</div>
<div class="form">
<label>密码：</label><input type="password" v-model.trim="password"><br/>
</div>
<div class="form">
<label>邮箱：</label><input type="email" v-model.trim="mail"><br/>
</div>
<div class="form">
<label>手机号：</label><input type="tel" v-model.trim="tel"><br/>
</div>
<button @click.prevent="handlefinish">提交</button>
</div>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({
pros:{
msg: String
}
})
export default class Register extends Vue {
private name:string = '';
private password:string = '';
private mail:string = '';
private tel:string = '';
private handlefinish():void{
// const data = {
// name: this.name,
// password: this.password,
// mail: this.mail,
// tel: this.tel
// }
if(localStorage['name']===this.name)
{
alert("用户名已存在");//如果用户名已存在则无法注册
}
else if(this.name==='')
{
alert("用户名不能为空");
}
else{//将新用户信息存储到localStorage
localStorage.setItem('name',this.name);
localStorage.setItem('password',this.password);
localStorage.setItem('mail',this.mail);
localStorage.setItem('tel',this.tel);
localStorage.setItem('s',"false");
alert("注册成功");
this.$router.replace('/Login');//完成注册后跳转至登录页面
}
// this.$emit('register',data);
}
}
</script>
<style scoped>
#background{
width: 100%;
height: 100%;
background: url("../assets/bg.jpg");
background-size:100% 100%;
position: fixed;
top: 0;
left: 0;
}
#contain{
width: 580px;
height: 560px;
position: absolute;
top: 50%;
left: 50%;
opacity: 0.85;
transform: translate(-50%,-50%);
background: #228B22;
box-shadow: 0 0 18px rgba(0,0,0,.3);
text-align: center;
border-radius: 20px;
}
#contain h1{
color: white;
}
.form{
color: white;
margin-left: 20%;
margin-top: 60px;
font-size: 20px;
text-align: left;
}
label{
float:left;
width: 5em;
margin-right: 1em;
text-align: right;
}
input,textarea{
margin-left: 10px;
padding: 4px;
border: solid 1px #4e5ef3;
outline: 0;
font: normal 13px/100% Verdana,Tahoma,sans-serif;
width: 200px;
height: 20px;
background:#f1f1f190;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
input:hover,textarea:hover,input:focus,textarea:focus{border-color:#0d0aa1;}
button{
position: relative;
height: 33px;
width: 150px;
background: rgba(35, 19, 252, 0.425);
border-radius: 10px;
margin-top: 38px;
box-shadow: none;
color: white;
margin-left: 40px;
}
</style>
（4）在views目录下创建404.vue文件。
<template>
<div class="not-found">
<img src="../assets/404.gif" alt="">
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({})
export default class Home extends Vue {
}
</script>
<style scoped>
.not-found{
width: 100%;
height: 100%;
overflow: hidden;
}
.not-found img{
width: 100%;
height: 100%;
}
</style>14.项目目录结构
15.下载依赖包 yarn install 或者 npm install
16.项目演示
10.17.4实验四 Vue.js的HTTP客户端编程与应用
【实验目的】
1、 掌握Vue.js的Http客户端的概念。
2、掌握Vue.js的axios的具体用法。
实验步骤
1、安装axios npm install --save axios vue-axios
2.在Login.vue界面导入axios。import axios from "axios";
3.编写登录事件逻辑代码
（1）定义变量和登录地址
private msg:string ='';
private loginUrl:string ="https://boot3.jeecg.com/jeecgboot/sys/mLogin";
private userInfo :any={};
private token:string='';
（2）改写handlelogin事件方法，连接远程服务器。并把获取的用户信息存到本地缓存中。
private handlelogin():void{
// 账号： jeecg 密码：jeecg#123456
let params:any={
username:this.name,
password:this.password
}
axios.post(this.loginUrl, params, {
headers:{'Content-Type': 'application/json'}
}).then((response: any) => {
// console.log(response.data);
let data=response.data;
if(data.code==200){
this.userInfo=data.result.userInfo;
this.token=data.result.token;
localStorage.setItem('userInfo',JSON.stringify(this.userInfo));
localStorage.setItem('token',this.token);
this.$router.push({path:"/home"});
// this.msg=this.userInfo.userInfo.username+"，登录成功！";
}else{
this.msg=data.message;
}
});
}
4、修改Home界面的代码，把登录获取的用户信息进行显示。
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({})
export default class Home extends Vue {
private sname:any='';
private smail:any='';
private stel:any ='';
private userInfo:any={};
private isAuth:string=""; //是否保持登录状态
created(){
let userInfoStr:any=localStorage.getItem('userInfo');
this.userInfo=JSON.parse(userInfoStr);
this.sname=this.userInfo.realname;
this.smail=this.userInfo.email;
this.stel=this.userInfo.phone;
}
private logout():void{
this.isAuth="false";//修改登录状态
localStorage.setItem('s',this.isAuth);
localStorage.removeItem('s');
localStorage.removeItem('userInfo');
localStorage.removeItem('token');
this.$router.push('/login');
}
}
</script>
完整代码：
Login.vue
<template>
<div id="background">
<div class="container">
<form action="">
<h1>Login</h1>
<div class="form">
<div class="item">
<label>用户名：</label><input type="text" name="username" v-model.trim="name" placeholder="请输入用户名">
<!-- v-model把输入的值传输给name变量 -->
<br/>
</div>
<div class="item">
<label>密码：</label><input type="password" name="password" v-model.trim="password" placeholder="请输入密码">
<br/>
</div>
<div class="keep">
<input @click="handlesave" id="yes" type="radio" value="0" ><!-- 点击选中 -->
<label for="yes">保持登录状态</label>
</div>
</div>
</form>
<button type="submit" @click.prevent="handlelogin">登录 </button>
<!-- v-on点击按钮触发handlelogin方法 -->
<button @click.prevent="handleregister">注册</button>
<router-view></router-view>
</div>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import axios from "axios";
@Options({
})
export default class Login extends Vue {
private name:string ="";
private password:string="";
private st:string='false';
private msg:string ='';
private loginUrl:string ="https://boot3.jeecg.com/jeecgboot/sys/mLogin";
private userInfo :any={};
private token:string='';
private handlesave():void{
this.st='true';//修改登录状态为true
localStorage.setItem('s',this.st);
console.log(localStorage.s);
}
private handlelogin():void{
// 账号： jeecg 密码：jeecg#123456
let params:any={
username:this.name,
password:this.password
}
axios.post(this.loginUrl, params, {
headers:{'Content-Type': 'application/json'}
}).then((response: any) => {
// console.log(response.data);
let data=response.data;
if(data.code==200){
this.userInfo=data.result.userInfo;
this.token=data.result.token;
localStorage.setItem('userInfo',JSON.stringify(this.userInfo));
localStorage.setItem('token',this.token);
this.$router.push({path:"/home"});
// this.msg=this.userInfo.userInfo.username+"，登录成功！";
}else{
this.msg=data.message;
}
});
}
private handleregister():void{
console.log("注册");
this.$router.push({path:"/register"});
}
}
</script>
//css
<style scoped>
#background{
width: 100%;
height: 100%;
background: url("../assets/bg.jpg");
background-size:100% 100%;
position: fixed;
top: 0;
left: 0;
}
.container{
width: 480px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
opacity: 0.85;
transform: translate(-50%,-50%);
background: #228B22;
box-shadow: 0 0 18px rgba(0,0,0,.3);
text-align: center;
border-radius: 20px;
margin-top: 10px;
}
.container h1{
color: aliceblue;
margin-left: 20px;
}
.item {
color: white;
margin-left: 15%;
margin-top: 35px;
font-size: 20px;
text-align: left;
}
.item label{
float:left;
width: 5em;
margin-right: 1em;
text-align: right;
}
input{
margin-left: -5px;
padding: 4px;
border: solid 1px #4e5ef3;
outline: 0;
font: normal 13px/100% Verdana,Tahoma,sans-serif;
width: 200px;
height: 23px;
background:#f1f1f190;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
button{
position: relative;
height: 33px;
width: 100px;
background: rgba(35, 19, 252, 0.425);
border-radius: 10px;
margin-top: 18px;
box-shadow: none;
color: white;
margin-left: 40px;
margin-right: 10px;
}
.keep{
color: white;
}
.keep input{
width: 15px;
height: 15px;
margin-top: 7px;
margin-left: 10px;
margin-right: 10px;
}
</style>
Home.vue：
<template>
<div id="bg">
<div id="container">
<h1>个人信息</h1>
<p><span>姓名：</span>{{sname}}</p>
<p><span>邮箱:</span>{{smail}}</p>
<p><span>手机号：</span>{{stel}}</p>
<button @click.prevent="logout">退出</button>
</div>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({})
export default class Home extends Vue {
private sname:any='';
private smail:any='';
private stel:any ='';
private userInfo:any={};
private isAuth:string=""; //是否保持登录状态
created(){
let userInfoStr:any=localStorage.getItem('userInfo');
this.userInfo=JSON.parse(userInfoStr);
this.sname=this.userInfo.realname;
this.smail=this.userInfo.email;
this.stel=this.userInfo.phone;
}
private logout():void{
this.isAuth="false";//修改登录状态
localStorage.setItem('s',this.isAuth);
localStorage.removeItem('s');
localStorage.removeItem('userInfo');
localStorage.removeItem('token');
this.$router.push('/login');
}
}
</script>
<style scoped>
#container{
width: 480px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
opacity: 0.85;
transform: translate(-50%,-50%);
background: #228B22;
box-shadow: 0 0 18px rgba(0,0,0,.3);
text-align: center;
border-radius: 20px;
margin-top: 10px;
color: white;
}
#bg{
width: 100%;
height: 100%;
background: url("../assets/bg.jpg");
background-size:100% 100%;
position: fixed;
top: 0;
left: 0;
}
p{
font-size: 20px;
margin-top: 20px;
text-align: left;
margin-left: 32%;
}
button{
position: relative;
height: 33px;
width: 150px;
background: rgba(35, 19, 252, 0.425);
border-radius: 10px;
margin-top: 10px;
box-shadow: none;
color: white;
margin-left: 10px;
}
</style>
5、运行结果展示
（1）登录页面，用户名：jeecg 密码：jeecg#123456
（2）登录成功后展示用户信息
10.17.5实验五 Spring Boot项目创建与运行
【实验目的】
1、 掌握使用Gradle或者Maven创建Spring Boot项目。
2、 掌握Spring Boot项目运行的方法
【实验内容】
1、 创建项目AustProject。
2、 在AustProject项目添加Web支持。
3、 编写HelloController，路由是“/aust”，方法使用get，返回“hello+自己的学号”。
4、 使用浏览器访问编写的路由，截图提交。
实验步骤
1.IDEA新建项目选择Spring Boot生成器，并依照选项填写
Spring Initializr 服务器 URL：Idea中默认使用为https://start.spring.io/，国内网络如果不稳定创建工程会很慢，可以修改为阿里云地址https://start.aliyun.com/
注意：JDK选择方面不要选系统自带的，自己选择一个和Java版本匹配的JDK版本下载
2.添加Spring Web依赖，创建
3.等项目加载完成查看gradle组件是否安装成功
如图即安装成功
如果gradle组件安装出现问题可以在gradle\wrapper目录下的gradle-wrapper.properties文件中修改依赖
distributionUrl=https://mirrors.aliyun.com/macports/distfiles/gradle/gradle-8.10.2-bin.zip
4.运行bulid.gradle
5.在src\main\java\org.example.austproject下创建HelloController.java文件
package org.example.austproject;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class HelloController {
@GetMapping("/aust")
public String hello() {
// 替换为你的学号
return "hello+2021304882";
}
}
6.运行同目录下的AustProjectApplication文件
可以看到端口号为8080
9.在浏览器中输入http://localhost:8080/aust
10.17.6实验六 Spring MVC的使用和应用
【实验目的】
1、 掌握Srping MVC的使用方法。
2、 掌握接口返回JSON类型的数据的方法。
【实验内容】
使用Spring MVC实现文件上传功能，前端不限制使用什么方法。
10.17.7实验七 Spring数据持久化和Security集成
【实验目的】
1、掌握Spring Boot连接数据库的配置方法。
2、掌握Spring Security的配置和Spring Boot集成的方法。
3、掌握Jeecg Boot框架的配置和运行。
【实验内容】
1、下载Jeecg Boot
2、启动Redis服务
3.创建jeecg-boot数据库，运行sql文件
4.使用IDEA打开后端程序。配置数据库连接字符串
找到application-dev.yml文件在165，166行修改数据库配置
配置好数据库连接字符串后，可以启动后端项目，见到如下界面即成功
5、用WebStorm打开前端代码。
（1）如果第一次打开，需要使用 yarn install安装依赖
运行
右键package.json文件，点击显示npm脚本
使用dev调试启动前端项目，在启动后，看到如下界面说明启动成功。任选一个IP地址，打开前端界面。
运行成功，登录即可
6.在application-mysql.yml文件中可查看配置项
7.打包后端项目，生成jar文件
点击Maven，双击package，打包成jar包
出现以下画面即打包成功
打包好的jar包位置在这里
8.前端打包，在WebStorm中
修改VITE_PORT = 80
修改VITE_GLOB_DOMAIN_URL=http://127.0.0.1:8080/jeecg-boot
双击build进行打包，出现以下界面即打包成功
打包好的文件在这里
10.17.8实验八 基于Vue.js和Spring Boot的Web应用搭建与发布
【实验目的】
1、掌握jar包的运行方法。
2、掌握nginx服务器的配置。
3、掌握前端代码发布到nginx服务器的方法。
实验步骤
1、运行jar包。
（1）下载jar包的压缩文件。
（2） 通过jar包修改数据库连接字符串。
使用压缩软件，打开jar包，找到如图配置文件的位置，并打开
打开并编辑dev的配置文件。找到数据库的链接字符串，把数据库相关参数修改成自己的设置。
参考实验七里的application-dev.yml文件，修改成自己数据库的参数
（3） 把修改保存到jar里
进入文件所在位置运行终端输入java -jar aust.jar运行后端程序
如图所示即启动成功
2.运行nginx服务器
（1）下载nginx
下载解压完成后双击nginx运行服务器
在浏览器地址栏输入127.0.0.1，看到如下界面，则运行成功
3.把前端代码发布到nginx的html目录下，再重启nginx服务器，即可发布前端代码。
（1）配置nginx
进入conf文件夹，找到nginx.conf文件，用记事本打开，添加配置
添加如下配置
upstream localhost {
server 127.0.0.1:80;
}location / {
# 用于配合 browserHistory使用
try_files $uri $uri/ /index.html;
}
location /jeecgboot/ {
#后台接口地址(我们部署去掉了/jeecg-boot项目名，如果你有请加上）
proxy_pass http://127.0.0.1:8080/jeecg-boot/;
proxy_redirect off;
#真实IP获取
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
set $my_proxy_add_x_forwarded_for $proxy_add_x_forwarded_for;
if ($proxy_add_x_forwarded_for ~* "127.0.0.1"){
set $my_proxy_add_x_forwarded_for $remote_addr;
}
proxy_set_header X-Forwarded-For $my_proxy_add_x_forwarded_for;
}（2）把前端dist文件夹内的所有文件夹和文件拷贝html目录下。
（3） 重启nginx。
在浏览器中地址栏中输入127.0.0.1，打开程序。
10.17.9Fisco Webase
1.搭建第一个区块链网络
第一步. 安装依赖
安装ubuntu依赖
sudo apt install -y openssl curl
第二步. 创建操作目录, 下载安装脚本
## 创建操作目录
cd ~ && mkdir -p fisco && cd fisco
## 下载脚本
curl -#LO https://github.com/FISCO-BCOS/FISCO-BCOS/releases/download/v2.11.0/build_chain.sh && chmod u+x build_chain.sh
第三步. 搭建单群组4节点联盟链
bash build_chain.sh -l 127.0.0.1:4 -p 30300,20200,8545
第四步. 启动FISCO BCOS链
bash nodes/127.0.0.1/start_all.sh
第五步. 检查进程
ps -ef | grep -v grep | grep fisco-bcos
正常情况会有类似下面的输出； 如果进程数不为4，则进程没有启动（一般是端口被占用导致的）
2.快速搭建Webase
1.Java部署
sudo apt install -y default-jdk
检查java版本java -version
2.下载安装包
wget https://github.com/WeBankBlockchain/WeBASELargeFiles/releases/download/v1.5.5/webase-front.zip
3.解压并进入文件夹
unzip webase-front.zip
cd webase-front
4.拷贝sdk证书文件（build_chain的时候生成的）
将fisco/nodes/127.0.0.1/sdk目录下的所有文件拷贝到webase-front目录下的conf目录中，这里使用绝对路径
cp -r /home/handsome/fisco/nodes/127.0.0.1/sdk/* ./conf/
5.服务启停
服务启停命令：
启动： bash start.sh
停止： bash stop.sh
检查： bash status.sh
这里会出现java环境变量问题
先切换root权限
sudo su
进入文件添加环境变量
vim /etc/profile
添加变量
选择好自己的java版本添加，实在不行就直接进入这个路径查看/usr/lib/jvm
export JAVA_HOME=/usr/lib/jvm/java-11-openjdk-amd64
export PATH=$PATH:$JAVA_HOME/bin
再执行source /etc/profile使修改生效
再次启动bash start.sh
检查日志查看是否启动成功grep -B 3 "main run success" log/WeBASE-Front.log
输出如下：
6.访问
在浏览器中输入http://192.168.232.133:5002/WeBASE-Front ip地址为虚拟机ip地址
访问成功出现下面界面
11.React入门和进阶
介绍React.js库的相关概念及基本使用
11.1React介绍
React.js是前端三大新框架：Angular.js、React.js、Vue.js之一，这三大新框架的很多理念是相同的，但是也有各自的特点。
React起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
React可以作为一个js库来使用，我们在页面上引用相关的js文件，就可以使用它来做一些页面效果。
React也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)应用系统。
React 文档
React使用文档可以通过如下地址查看： React 官方中文文档
11.2快速开始
首先通过将React作为一个js库来使用，来学习React的一些基本概念，在页面上引入已经下载好的三个js文件，就可以使用React了。
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>其中，前两个js文件是React的核心文件，第三个js文件是一个转换编译器，它能将ES6语法及jsx语法转换成可以在浏览器中运行的代码。
编写hello world程序
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('root')
)
</script>上面编写的，不是真正的JavaScript代码，因为上面是JavaScript代码和html的混合，所以它的类型需要写成“text/babel”，最终通过编译器编译成浏览器可以执行的js。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<!-- 以下js库负责编译es6语法和jsx语法，编译成浏览器可以识别的语法 -->
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>hello world!</h1>,
document.getElementById('root')
)
</script>
</body>
</html>11.3JSX语法
jsx语法是一种类似于html标签的语法，它的作用相当于是让我们在JavaScript代码中直接写html代码，但是jsx不完全是html，它是 JavaScrip 的一种扩展语法，它具有 JavaScript 的全部能力，我们还可在jsx代码中插入变量或者表达式，用jsx语法写出来的语句是一个对象，我们可以将它存为一个变量，这个变量作为ReactDOM对象的render方法的第一个参数。
let el = <h1>Hello world!</h1>;
ReactDOM.render(
el,
document.getElementById('root')
)jsx的结构还可以写得更复杂，可以是嵌套结构，如果是嵌套结构，需要有唯一的一个外层标签。标签中如果是单个的标签，在结尾要加“/”,在jsx中可以通过“{}”插入变量，表达式或者函数调用。
<script type="text/babel">
let iNum01 = 10;
let sTr = 'abc123456';
function fnRev(s){
return s.split('').reverse().join('');
}
let el = (
<div>
<h3>jsx语法</h3>
{/* 插入变量及运算 */}
<p>{ iNum01+5 }</p>
{/* 插入表达式 */}
<p>{ sTr.split('').reverse().join('') }</p>
{/* 插入函数调用 */}
<p>{ fnRev(sTr) }</p>
{/* 插入三元运算表达式 */}
<p>{ ok?'YES':'NO' }</p>
</div>
);
ReactDOM.render(
el,
document.getElementById('root')
)
</script>jsx中指定标签的属性值建议用双引号，不能不用引号，属性名建议用驼峰式，其中class属性需要写成className，属性值如果是可变的，也可以写成“{}”的形式，里面可以和上面写法一样。 标签如果是单个的，在结尾一定要加“/”
{/* 定义class */}
<p className="sty01">使用样式</p>
{/* 单个标签，结尾要加“/” */}
<img src={user.avatarUrl} />实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.sty01{
font-size:30px;
color:red;
}
</style>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let iNum01 = 10;
let sTr = 'abcdefgh123456';
let ok = false;
let url = 'http://www.baidu.com'
function fnRev(s){
return s.split('').reverse().join('');
}
let el = (
<div>
<h2>jsx语法</h2>
{/* jsx里面的注释 */}
<p>{ iNum01+5 }</p>
<p>{ sTr }</p>
<p>{ sTr.split('').reverse().join('') }</p>
<p>{ fnRev(sTr) }</p>
<p>{ ok?'YES':'NO' }</p>
<a href={url} className="sty01">这是一个链接</a>
</div>
);
ReactDOM.render(el,document.getElementById('root') );
</script>
</body>
</html>11.4组件和属性(props)
组件可以理解成是一个组成页面的部件或者零件，每个部件都有自己完整的结构和功能，多个部件拼装在一起就可以组成一个页面，从组件的实现来看，组件最终是要返回一个jsx对象，不过它和jsx对象的区别是，它在jsx对象的基础上，还带有自己的方法和属性，能完成它自己的交互功能。 组件有两种定义方式：一种是函数式定义，一种是类定义。
函数式定义组件
通过函数来定义一个组件，组件名称首字母要大写，函数接收一个参数props，返回一个jsx对象。其中，name属性是在渲染组件时，通过定义属性传入进来的。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}类方式定义组件
上面的组件可以通过下面ES6的类的方式定义，定义的类都要继承于React对象中的Component类，这个定义的组件和上面的功能是等效的。
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}组件渲染
组件渲染和jsx对象一样，我们可以通过ReactDOM.render()方法来渲染组件。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);组件组合
可以在一个组件内，拼装其他的组件，从而组合成一个更大的组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 通过类的方式定义组件
class Welcome extends React.Component{
render(){
return(
<h1>Hello,{ this.props.name }</h1>
);
}
}
// 定义一个大的组件，组合上面的组件
class WelcomeAll extends React.Component{
render(){
return(
<div>
<Welcome name="Sara" />
<Welcome name="Tom" />
<Welcome name="Rose" />
</div>
);
}
}
// this.props = {name:"Sara"}
// 渲染小的组件
// ReactDOM.render(<Welcome name="Sara" />,document.getElementById('root') )
// 渲染大的组件
ReactDOM.render(<WelcomeAll />,document.getElementById('root') )
</script>
</body>
</html>11.5绑定事件
React绑定事件和JavaScript中的行间事件类似，事件绑定是写在标签中的，但是，React事件是在原生事件的基础上做了封装，它的事件使用驼峰命名，而不是全部小写。事件需要传递一个函数作为事件处理程序，这个函数在哪里定义呢？我们可以通过类定义组件，将这个函数作为一个方法定义在组件中。
定义一个点击能弹出名称的组件：
class Helloname extends React.Component {
fnHello(){
alert('Hello,Tom');
}
render(){
return (
<input type="button" value="打招呼" onClick={this.fnHello} />
)
}
}
ReactDOM.render(<Helloname />, document.getElementById('root'));如果想把这个组件定义成可以传递名称参数的，可以定义如下：
class Helloname extends React.Component {
fnHello(){
alert(this.props.name);
}
render(){
return (
<input type="button" value="打招呼" onClick={this.fnHello.bind(this)} />
)
}
}
ReactDOM.render(<Helloname name="Tom" />, document.getElementById('root'));需要注意的是，按钮在调用方法时，此时的this默认会指向这个按钮，所以在绑定事件时，需要绑定this，将this指向当前对象。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class HelloTom extends React.Component {
//定义click事件的处理方法
fnHello(){
alert('Hello,Tom!');
}
render(){
return (
<input type="button" value="打招呼" onClick={this.fnHello} />
)
}
}
class HelloName extends React.Component {
//定义click事件的处理方法
fnHello(){
alert('Hello,'+this.props.name);
}
render(){
return (
// 在事件调用方法时，如果方法里面使用了this，在方法中需要绑定this
<input type="button" value="打招呼" onClick={this.fnHello.bind(this)} />
)
}
}
ReactDOM.render(<HelloName name="Jack" />,document.getElementById('root'));
</script>
</body>
</html>11.6状态
组件如果需要定义默认属性呢？而且这个默认属性还是可变的呢？这个就是组件的状态属性了，状态属性默认名称是state，这个属性需要在组件定义时初始化，所以我们需要使用类的构造函数来对这个属性进行初始化。
定义一个点击按钮数字递增的
class Increase extends React.Component {
constructor(props){
super(props);
this.state = {iNum:10};
// 也可以在组件初始化时将方法绑定this
this.fnAdd = this.fnAdd.bind(this);
}
fnAdd(){
// 使用setState来改变state中的值
this.setState(prevState=>({
iNum:prevState.iNum+1
}));
}
render(){
return (
<div>
<p>{ this.state.iNum }</p>
<input type="button" onClick={this.fnAdd} value="递增" />
</div>
);
}
}
ReactDOM.render(
<Increase />,
document.getElementById('root')
);state注意点
1、不能直接修改state的值，应该用setState代替
// 下面写法是不会更新组件，是错误的
this.state.iNum = 11;
// 应该写成setState的形式
this.setState({iNum: 11});2、state的值可能是异步的，如果需要在state的值的基础上修改得到新的值，可以使用函数的形式，函数的参数中传递的第一个参数是state上一个状态的值，我们可以在这个值基础上修改，下面的prevState代表state上一个状态的值。
this.setState(prevState=>({
iNum:prevState.iNum+1
}));实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Increase extends React.Component {
constructor(props){
super(props);
this.state = {iNum:10}
}
// 要通过setState方法来改变state里面的值
// setState里面可以传一个对象，也可以传一个函数，函数需要返回一个对象
fnAdd(){
/*
this.setState({
iNum:11
})
*/
// prevState 指的是state最新的值
/*
this.setState(function(prevState){
return { iNum:prevState.iNum+1}
})
*/
this.setState(prevState=>
({ iNum:prevState.iNum+1})
)
}
render(){
return (
<div>
<p>{this.state.iNum}</p>
<input type="button" value="递增" onClick={this.fnAdd.bind(this)} />
</div>
);
}
}
ReactDOM.render(<Increase />,document.getElementById('root'));
</script>
</body>
</html>实例
选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab_con{
width:500px;
height:350px;
margin:50px auto 0;
}
.tab_btns{
height:50px;
}
.tab_btns input{
width:100px;
height:50px;
background:#ddd;
border:0px;
outline:none;
}
.tab_btns .active{
background:gold;
}
.tab_cons{
height:300px;
background:gold;
}
.tab_cons div{
height:300px;
line-height:300px;
text-align:center;
display:none;
font-size:30px;
}
.tab_cons .current{
display:block;
}
</style>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Tab extends React.Component{
constructor(props){
super(props);
this.state = {iNow:0}
}
fnChange(i){
this.setState({
iNow:i
})
}
render(){
return (
<div className="tab_con">
<div className="tab_btns">
<input type="button" value="按钮一" className={(this.state.iNow==0)?"active":''} onClick={this.fnChange.bind(this,0)} />
<input type="button" value="按钮二" className={(this.state.iNow==1)?"active":''} onClick={this.fnChange.bind(this,1)}/>
<input type="button" value="按钮三" className={(this.state.iNow==2)?"active":''} onClick={this.fnChange.bind(this,2)}/>
</div>
<div className="tab_cons">
<div className={(this.state.iNow==0)?"current":''}>按钮一对应的内容</div>
<div className={(this.state.iNow==1)?"current":''}>按钮二对应的内容</div>
<div className={(this.state.iNow==2)?"current":''}>按钮三对应的内容</div>
</div>
</div>
);
}
}
ReactDOM.render(<Tab />, document.getElementById('root'));
</script>
</body>
</html>11.7列表渲染
如何拼装数组中的数据放入页面呢？可以将数组中的数据通过数组遍历渲染成一个jsx对象，在通过React渲染这个对象就可以了。
let aList = ['红海','复联3','碟中谍6','熊出没'];
let el = aList.map((item,i)=>
<li key={i}>{ item }</li>
);
ReactDOM.render(
<ul>{el}</ul>,
document.getElementById('root')
);通过map方法遍历数组中的成员，map方法的第二个参数是数组中的索引值，在循环生成li结构时，需要给每个li加上一个key，这个key的值可以用数组中的成员索引值。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let aList = ['红海','复联3','碟中谍6','熊出没'];
let el = aList.map(function(item,i){
return <li key={i}>{ item }</li>;
})
ReactDOM.render(<ul>{el}</ul>,document.getElementById('root'));
</script>
</body>
</html>11.8表单数据绑定
表单元件对应着数据，而且这些数据都是变化的，所以我们会将表单元件的数据对应于组件中的state属性值，让它们之间的值实现双向数据绑定的效果，要实现这个效果，需要在表单元件上绑定onchange事件，来将state中的值改变为表单元件中的值，同时也需要将表单的value属性值，设置为等于state中的属性值。
表单数据绑定示例：
class Myform extends React.Component {
constructor(props){
super(props);
this.state = {
uname:''
};
}
// ev指的是系统自动产生的事件对象
// ev.target指的是发生事件的元素
fnNameInput(ev){
this.setState({
uname:ev.target.value
})
}
render(){
return(
<form>
<p>用户的名称是：{ this.state.uname }</p>
<input type="text" value={this.state.uname} onChange={this.fnNameInput.bind(this)} />
</form>
);
}
}
ReactDOM.render(
<Myform />,
document.getElementById('root')
);实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Inputxt extends React.Component {
constructor(props){
super(props);
this.state = {iNum:11}
}
fnChange(ev){
this.setState({
iNum:ev.target.value
})
}
render(){
return(
<div>
<p>{ this.state.iNum }</p>
<input type="text" value={this.state.iNum} onChange={this.fnChange.bind(this)} />
</div>
);
}
}
ReactDOM.render(<Inputxt />, document.getElementById('root'));
</script>
</body>
</html>实例
todolist(计划列表)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Todolist extends React.Component {
constructor(props){
super(props);
this.state = {
aList:['学习html','学习css','学习javascript','学习go语言'],
sTodo:''
}
}
fnChange(ev){
this.setState({
sTodo:ev.target.value
})
}
fnAdd(){
this.setState(function(prevState){
// 判断是否为空
if(prevState.sTodo==''){
alert('请输入内容！')
return;
}
return {aList:[...prevState.aList,prevState.sTodo],sTodo:''}
})
}
fnDel(i){
this.setState(prevState=>{
let list = [...prevState.aList];
list.splice(i,1);
return {aList:list};
})
}
fnUp(i){
this.setState(prevState=>{
if(i==0){
alert('到顶了！');
return;
}
let list = [...prevState.aList];
let nowItem = list[i];
list.splice(i,1);
list.splice(i-1,0,nowItem);
return {aList:list};
})
}
fnDown(i){
this.setState(prevState=>{
if(i==prevState.aList.length-1){
alert('到底了！');
return;
}
let list = [...prevState.aList];
let nowItem = list[i];
list.splice(i,1);
list.splice(i+1,0,nowItem);
return {aList:list};
})
}
render(){
return (
<div className="list_con">
<h2>To do list</h2>
<input type="text" value={this.state.sTodo} id="txt1" className="inputtxt" onChange={this.fnChange.bind(this)} />
<input type="button" value="增加" id="btn1" className="inputbtn" onClick={this.fnAdd.bind(this)} />
<ul id="list" className="list">
{
this.state.aList.map((item,i)=>
<li key={i}><span>{ item }</span><a href="javascript:;" className="up" onClick={this.fnUp.bind(this,i)}> ↑ </a><a href="javascript:;" className="down" onClick={this.fnDown.bind(this,i)}> ↓ </a><a href="javascript:;" className="del" onClick={this.fnDel.bind(this,i)}>删除</a></li>
)
}
</ul>
</div>
)
}
}
ReactDOM.render(<Todolist />, document.getElementById('root'));
</script>
</body>
</html>12.React高级
介绍react生命周期方法，数据交互及脚手架开发流程。
12.1生命周期方法
生命周期方法，指的是在组件初始化后，以及组件销毁时，会自动执行的两个方法，我们可以在初始化方法中执行获取数据的操作，在组件销毁方法中执行一些清除操作，比如清除定时器等操作。这两个方法分别是：componentDidMount 和 componentWillUnmount。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Helloworld extends React.Component{
componentDidMount(){
console.log('componentDidMount');
}
componentWillUnmount(){
console.log('componentWillUnmount');
}
render(){
return(
<h1>Hello world!</h1>
)
}
}
ReactDOM.render(<Helloworld />, document.getElementById('root'));
setTimeout(() => {
ReactDOM.render(<h1>Bye Bye!</h1>, document.getElementById('root'));
}, 3000);
</script>
</body>
</html>12.2数据交互
React没有集成ajax功能，要使用ajax功能，可以使用官方推荐的axios.js库来做ajax的交互。 axios库的下载地址：https://github.com/axios/axios
axios使用方法
常用参数：
1、url 请求地址
2、method 请求方式，默认是'GET'，常用的还有'POST'
3、responsetype 设置返回的数据格式，常用的是'json'格式，也可以设置为'text'或者'html'
4、params 设置发送给服务器的数据
5、then 设置请求成功后的回调函数
6、catch 设置请求失败后的回调函数
axios完整写法：
axios({
url: '/user/12345',
method: 'get',
responsetype:'json',
params: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});axios请求的写法也写成get方式后post方式。
执行get请求
// 为给定 ID 的 user 创建请求
// then是请求成功时的响应，catch是请求失败时的响应
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可选地，上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});执行post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});11.3脚手架开发
脚手架开发指的是react提供了完整的自动化开发工具及规划好了开发一个应用的项目目录，这些工具是通过nodejs开发的，我们可以通过npm(nodejs包管理命令)来安装这些工具，同时可以通过这个工具生成一个应用的项目目录。
安装脚手架工具
脚手架工具是nodejs的一个包，安装这个工具之前需要先安装nodejs，然后在终端执行以下命令：
1、设置npm淘宝镜像
npm config set registry https://registry.npmmirror.com
//查看镜像命令
npm config get registry
2、安装
npm install -g create-react-app
生成应用项目目录
3、生成app
create-react-app my-app
4、启动
cd my-app
npm start
5、生成上线文件
npm run build
项目目录说明
以上是执行生成命令自动生成的项目目录，对应的文件夹作用如下：
目录一：src目录，主开发目录，里面包含所有项目的组件，开发组件都是基于此目录
目录二：public目录，项目入口文件目录，目录中的文件不用动
目录三：项目开发依赖包文件目录，项目安装的包都会自动安装在这个文件夹中
目录四：build目录，项目上线时，执行npm run build生成的目录，这里面是自动化工具生成的上线文件
安装axios模块
1、在终端的项目目录，执行如下命令
npm install axios
2、在模块文件中引入
import axios from 'axios';
扫一扫
100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
