Web前端的学习与应用_前端应用-程序员宅基地

技术标签： SSM框架

1. 简介

1.1 Web前端

前端位于整个项目首要要开发的内容，直接和用户打交道，实现页面的展现和交互功能，所以在分类上俗称为前端。随着软件技术的日趋成熟，前端内容也呈现爆炸式的增长，和革命性的变革，前端借鉴后端的发展经验，也开始应用分层体系，也开始术有专攻，解决一个专项的问题，也开始变得庞大和臃肿。从简单单一功能向框架过渡。

1.2 软件架构图

1.3 技术栈

HTML ———— 页面展示
CSS ———— 页面美化
BootStrap ———— 前端UI（User Interface）
JavaScript ———— 形成交互
jQuery ———— 封装JavaScript，代码更加简洁高效
json ———— 数据传输
ajax ———— 异步请求
Web中间件 ———— 处理请求和响应
Tomcat ———— Java大后端
NodeJS ———— JS后端
mysql数据库 ———— 存取数据

1.4 前端发展史

HTML超文本标记语言： 实现页面展现，形成静态网页
CSS层叠样式表： 实现页面美化
JS javascript脚本语言： 实现页面前端和后端的数据交互，形成动态网页
React facebook出品： 前端、移动端JavaScript框架
Angular google 出品： 基于TypeScript的开源 Web 应用框架
Vue 国人出品，阿里收购： 构建用户界面的渐进式框架，自底向上开发
NodeJS： 基于 Chrome V8 引擎的 JavaScript 运行环境

2. 学习工具 — HBuilder

2.1 介绍

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby，本身主体是由Java编写。它基于Eclipse，所以顺其自然地兼容了Eclipse的插件，用过Eclipse的开发者使用HBuilder会非常顺手。形成HBuilderX开发前端内容，Eclipse/Idea开发后端内容的格局。
特点：快，是HBuilder的最大优势，通过完整的语法提示和代码块模板等，大幅提升HTML、js、css的开发效率。

2.2 安装

可在官网下载：https://www.dcloud.io/hbuilderx.html

3. Web基础知识

3.1 静态页面html

3.1.1 概念

HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。

3.1.2 结构

文档声明，用来声明HTML文档所遵循的HTML规范。
头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。
体部分，用来存放网页要显示的数据。
声明网页标题
用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。

3.1.3 入门案例

<html> 
	<head> 
	    <meta charset="utf-8"/>   # 设置字符集，防止中文乱码
		<title>数计学院信息网</title>
	</head>
	<body>
		<h1>数计学院大数据班</h1>
	</body>
</html>

3.1.4 语法

HTML标签
HTML是一门标记语言，标签分为开始标签和结束标签，如：<a> </a>
如果开始和结束中间没有内容，可以合并成一个自闭标签，如：<a/>、<meta/>。
HTML属性
HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。
属性的值要用单引号或者双引号引起来。
如：<a href=" " target=" " name=" " id=" "></a>
HTML注释
格式：
注意：不能交叉嵌套！
如何在网页中体现换行和空格
换行：<br/>
空格：在HTML中，多个空格会被当成一个空格来显示。

3.2 常用标签

3.2.1 标题标签：

<h1></h1>......<h6></h6>

        <h1>我是1号标题</h1>
		<h2>我是2号标题</h2>
		<h3>我是3号标题</h3>
		<h4>我是4号标题</h4>
		<h5>我是5号标题</h5>
		<h6>我是6号标题</h6>

3.2.2 列表标签

列表标签:
<ol><li></li></ol> 有序
<ul><li></li></ul> 无序
type 定义列表符号,默认是 disc：实心小黑圆点，还有square：实心小黑方框，circle：空心小圆点。

 <body>
       <ul type="circle">
           <li>中国</li>
           <li>美国</li>
           <li>小日本</li>
       </ul>

       <ul type="square">
           <li>中国</li>
           <li>美国</li>
           <li>小日本</li>
       </ul>
       
       <ul type="disc">
	       <li>中国</li>
	       <li>美国</li>
	       <li>小日本</li>
	   </ul>

       <ol type="disc">
           <li>中国</li>
           <li>美国</li>
           <li>小日本</li>
       </ol>
    </body>

3.2.3 图片标签

<img src="1.jpg" border="10px" width="50%" height="30%">

img：向网页中引入图片 (相对路径/绝对路径)
border：设置图片的边框粗细
width：设置图片的宽度
height：设置图片的高度
导入图片,只设置一个参数,它会等比缩放。
只设置宽度,高度会自动算，等比缩放;只设置高度,宽度会等比缩放;
既设置宽,设置高,按要求,不等比。
src配置图片来源,相对路径,从自己html文件中出发去找html所在目录下的图片文件。
绝对路径是从根目录出发去找图片文件，即从电脑磁盘中去找。

3.2.4 超链接标签

<a>......</a>
<a href="http://www.baidu.com" target="_blank">你可以百度一下</a>

href 指定要跳转的位置
target 指定要打开的方式

<body>
     <a href="http://www.baidu.com" target="_blank">你可以百度一下</a>
           <a name="top">爱国主义精神</a>
    
           <h3>我爱中国</h3>
		   <h3>我爱中国</h3>
		   <h3>我爱中国</h3>
		   <h3>我爱中国</h3>
    
           <a href="#top">回到顶部</a><!-- 获取top的位置 -->
        </body>

3.2.5 Input标签

<input......./>：输入框。

<body>
    <input type="text" /> 普通文本框
	<br>
    <input type="password" /> 密码
    <br>
	单选框：
    <input type="radio"/>男
	<input type="radio"/>女
    <br>
    <input type="number" />   数字值
    <br>
    <input type="week" />    日历
    <br>
	复选框：
    <input type="checkbox" />北京大学
	<input type="checkbox" />清华大学
	<input type="checkbox" />复旦大学
	<input type="checkbox" />同济大学
    <br>
    按钮:
    <input type="button"  value="点我一下"/>
    <input type="submit"  value="提交数据"/>
	
     </body>

3.2.6 表格标签

<table></table>：表格标签
<tr></tr>：表格里的行
<td></td>：表格里的列
border：表格的边框
cellspacing：单元格的间距
bgcolor：背景颜色
width：宽度
align：位置
colspan=“2”：colspan是列合并，表示列合并2列
rowspan=“2”：rowspan是行合并，表示行合并2行

<body>
       <table border="1px" cellspacing="0" bgcolor="antiquewhite" width="30%" align="left">
              <tr>  
                 <td colspan="2">11</td> <!-- colspan是列合并,合并2列-->
                 <td>12</td>  
                 <td>13</td>   
              </tr>
   
              <tr>   
                 <td>21</td>   
                 <td>22</td>   
                 <td rowspan="2">23</td> <!-- rowspan是行合并,合并2行 -->
              </tr>
   
              <tr>   
                 <td>31</td>   
                 <td>32</td>   
                 <td>33</td>   
              </tr>   
          </table>
   
       </body>

3.2.7 表单标签

<form></form>：表单标签

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>form表单</title>
    </head>
    <body>
       <!-- get方式提交的数据都在地址栏里显示， http://127.0.0.1:8848/cgbtest/3.html?user=&pwd= -->
       <!-- <form method="get"> -->
       <!-- post方式提交比较安全，它不显示数据 -->
       <form method="post">
           <table border="1px" bgcolor="bisque" cellspacing="0" width="35%" cellpadding="3">
              <th colspan="2">注册表单</th>
              <tr>
                  <td>用户名:</td>
                  <td><input type="text" name="user"/></td>
              </tr>
              <tr>
                 <td>密码:</td>
                  <td><input type="password" name="pwd"/></td>
              </tr>
              <tr>
                  <td>确认密码:</td>
                  <td><input type="password" name="repwd"/></td>
              </tr>
              <tr>
                  <td>昵称:</td>
                  <td><input type="text" name="nick"/></td>
              </tr>
              <tr>
                  <td>邮箱:</td>
                  <td><input type="text" name="mail"/></td>
              </tr>
              <tr>
                  <td>性别:</td>
                  <td>
              <!-- 不配name属性,性别是多选!!  sex属性的值按照1 2 提交-->
              <!-- input中,type如果是radio或者checkbox的话,不配置value属性的话,默认提交on -->

                     <input type="radio" name="sex" value="1"/>男
                     <input type="radio" name="sex" value="2"/>女
                  </td>
              </tr>
              <tr>
                  <td>爱好:</td>
                  <td>
                  <!-- name必须配,多选 ,提交的值就是1 2 3 -->
                  <input type="checkbox" name="like" value="1"/>篮球
                  <input type="checkbox" name="like" value="2"/>足球
                  <input type="checkbox" name="like" value="3"/>排球
                  </td>
              </tr>
              <tr>
                  <td>城市:</td>
                  <td>
                   <select name="city"> <!-- 实现下拉框多选,按value提交数据 1 2-->
                         <option value="1">北京</option>
                         <option value="2">上海</option>
						 <option value="3">深圳</option>
						 <option value="4">广州</option>
                   </select>
                  </td>
              </tr>
              <tr>
                  <td>头像:</td>
                  <td>
                     <input type="file" name="path"/>
                  </td>
              </tr>
              <tr>
                  <td colspan="2" align="center">
                     <button type="submit">提交</button>
                  </td>
              </tr>
           </table>
       </form>
    </body>
</html>

3.2.8 其他标签

布局标签：

<div></div>  可自动换行

<p></p>     会自动在其前后行创建空行

<span></span> 不换行

<body>
<div>大家好</div>
<div>大家好</div>
<div>大家好</div>

<p> Nice</p>
<p> Nice</p>
<p> Nice</p>

<span> hello</span>
<span> hello</span>
<span> hello</span>
</body>

4. Web的实例应用

4.1 永和小票

<!DOCTYPE html>
<html>
	<head>
		<!--meta元信息,charset-->
		<meta charset="utf-8">
		<title>强强科技有限责任公司发票</title>
		<!样式设计>
		<style>
			body{
      width:313px;font-size:10px; /*字体大小 */}
			.please{
      
				font-size: 24px;
				font-weight: bold;/*加粗*/
				}
			.self{
      
				/* padding修饰四周 上右下左（顺时针一圈4个*/
				padding-left:100px;/*左边空一定距离*/
			}
			/*solid 实线，dashed虚线*/
			hr{
      border:1px dashed;}
			.note{
      
				padding-top:20px;/*上空*/
				padding-bottom:15px;/*下空*/
				
				margin-top:20px;/*上空*/
				margin-bottom:15px;/*下空*/
				}
			.img{
      padding-left:80px}
		</style>
	</head>
	
	<body>
		<!--div标签会自动换行；span不换行：块，实现页面布局-->
		<div>顾客联</div>
		<div class="please">请你留言消费账单号</div>
		<div class="self">自取顾客联</div>
		<div>强强科技（北京总公司）</div>
		<div>010-123456789</div>
		<div class="self">--结账单--</div>
        <div class="please">账单号：P000001</div>
		<div>账单类型：酒店住宿</div>
		<div>人数：1</div>
		<div>收银员：小星鑫</div>
		<div>开单时间：2021年2月2日12:12:12</div>
		<div>结账时间：2021年2月2日18:18:18</div>
		
		<hr/>
		<table border="1">
			<tr>
				<td width="50" align="center">数量</td>
				<td width="190" align="center">项目</td>
				<td width="50" align="center">金额</td>
			</tr>
			<tr>
				<td valign="top" align="center">1</td>
				<td align="center">
					总统套房2p<br/>
					 1 早餐<br/>
					 8 停车费
				</td>
				<td valign="top" align="center">1800</td>
			</tr>
		</table>
		
		<hr/>
		
		<table border="1">
			<tr>
				<td width="246">合计</td>
				<td width="50" align="right">1800</td>
			</tr>
			<tr>
				<td>微支付</td>
				<td align="right">1800</td>
			</tr>
		</table>
		<hr/>
		
		<div>打印时间：2021年2月2日18:18:00</div>
		
		<hr/>
		<!&nbsp;表示一个空格>
		<div class="note">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		  根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，
		  如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根
		  据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描
		  时请保持小票平整。</div>
		<img class="img" src="images/qr.png"/>
		
		<div>官网：www.yonghe.com.cn</div>
		<div>加盟热线：86-21-12345678</div>
	</body>
</html>

4.1.1 知识小结

<style></style> 样式设计标签，可将各部分的样式设计全部在该标签里定义。

         <style>
			body{
      width:313px;font-size:10px; /*字体大小 */}
		</style>

对某个标签进行单独样式设计，可以使用class或者id来标记，例如：

<div class="please">请你留言消费账单号</div>
<div id="self">自取顾客联</div>

但在设计样式时，calss对应使用".“来引用，id对应使用”#"来引用。例如：

<style>
.please{
      
	font-size: 24px;
    font-weight: bold;/*加粗*/
		}
 #self{
      
	/* padding修饰四周 上右下左（顺时针一圈4个*/
	padding-left:100px;/*左边空一定距离*/
		}
</style>

padding属性修饰四周，起到填充效果，内部空出一定距离，可按照顺时针上右下左设置值。例如：

（1）padding:10px 5px 15px 20px;
         上填充是 10px；右填充是 5px； 下填充是 15px；左填充是 20px
 
（2）padding:10px 5px 15px;
         上填充是 10px；右填充和左填充是 5px；下填充是 15px
     
（3）padding:10px 5px;
         上填充和下填充是 10px；右填充和左填充是 5px

（4）padding:10px;
         所有四个填充都是 10px；

margin属性可设置所有外边距，也起到修饰四周的作用，可按照顺时针上右下左设置值。

（1）margin:10px 5px 15px 20px;
			上边距是 10px
			右边距是 5px
			下边距是 15px
			左边距是 20px

（2）margin:10px 5px 15px;
			上边距是 10px
			右边距和左边距是 5px
			下边距是 15px

（3）margin:10px 5px;
			上边距和下边距是 10px
			右边距和左边距是 5px

（4）margin:10px;
			所有四个边距都是 10px

<hr/> 表示横线，border表示边框线的粗细，它有两个属性值：solid 实线，dashed虚线。

hr{border:1px dashed;}

font-size表示字体的大小，font-weight表示字体的粗细。

font-size: 24px;
font-weight: bold;/*加粗*/

align横向排列:(left居左;center居中;right居右).；valign纵向排列:(top居上;center居中;bottom居下)

4.2 生成二维码图片

第一步：在Eclipse创建java工程。

第二步：建立一个lib目录。

第三步：将提前准备好的谷歌提供的二维码工具包qr.jar放进lib目录下。再Build Path一下，应用jar包。

第四步：在工程下建立包，创建下面java文件。

package ER;

import qr.CreateQR;

/*
 * 制作二维码
 */

public class QR {
    
public static void main(String[] args) {
    
	//网址必须写上协议头
	String url = "http://www.baidu.com";
	CreateQR.make(150, 150, url, "G:/baidu.png");
}
}

第五步：启动运行。相应的文件目录下就会产生二维码图片。

4. CSS技术

4.1 css概念

CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。
主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。

4.1.1 三种修饰方式

标签style属性页面内部
标签页面内部
引入样式表 *.css文件页面外部

例如：

<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/base.css"/>
	<title>永和大王账单</title>
</head>

4.2 选择器

所谓的选择器就是在html中帮助我们选中想要修饰的标签。

4.2.1 标签名选择器

通过标签名直接在style中进行修饰。

<style> /* 直接在HTML中加入css*/

    span{
       /* 标签名选择器,选中所有span标签 */
       background-color: chartreuse; /* 背景颜色*/ 
       font-size: 24px; /*字号*/
       font-family: 黑体;/* 字体 */
    }

</style>

4.2.2 class选择器

给需要修饰的元素添加class属性，可以同时使用多个属性，属性之间用空格隔开。
可以通过class的值选中指定的元素（.class值）

<p class="a b">123</p> <!-- b覆盖a-->

<style> /* 在HTML中加入css*/
     /* 选择class=a的元素 */
    .a{
      
       background-color: cornflowerblue; /*背景颜色*/
       color:red; /*字体颜色*/
    }
	/*选择class=b的元素*/
    .b{
      
       background-color: lightsalmon;
       color: black;
    }
</style>

4.2.3 id选择器

id属性的值在整个HTML中作为唯一标识的存在。
可以通过id的值选中指定的元素（#id值）

<p id="p1">123</p>
<style>
/* 使用id选中元素 */
#p1{
      
    text-indent: 200px; /* 首行缩进*/
}
</style>

4.2.4 分组选择器

/* 分组选择器,将多个选择器选中的元素组合在一起，统一设置样式 */
<style>
.a,.b,#p1{
      
    background-color: #000000;
}
</style>

4.2.5 属性选择器

根据属性条件选中符合条件的元素来设置样式（逗号隔开）

<style type="text/css">
    /* 选中指定的元素 */
    input[type='text']{
      
       background-color: #6495ED;
    }
</style>

4.3 盒子模型

指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。

4.3.1 margin (外边距)

<input type="radio" name="sex" value="1" style="margin: 20px;"/>男

4.3.2 border（边框）

#div2{
border:10px solid yellow;/*实线*/
border:10px dashed yellow;/* 虚线 */
border:10px dotted yellow;/* 点状 */
}

4.3.3 padding（内边距）

<td style="padding: 20px;">用户名:</td>

4.4 元素类型的补充

4.4.1 块级元素

默认情况下，块级元素独占一行（div , p，h1~h6）
可以设置宽和高。如果不设置宽和高，其中宽是默认填满父元素，而高是由内容
外边距、边框、内边距都可以设置

4.4.2 行内元素

默认情况下，多个行内元素处在同一行
不能设置宽和高
左右外边距、边框、内边距都可以设置，上下外边距设置无效

4.5 应用实例

4.5.1 实例1：永和大王小票

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>永和大王门店系统</title>
    <!—引入外部的css文件
<link rel="stylesheet" href="css/base.css"/>
    -->

    <!--通过style标签插入 css代码用来修饰html网页效果 -->
    <style>
       body{
              
           font-size:8px;
           width:280px;
           margin:5px;
       }

       .please{
      
           font-size:22px;
       }

       .me{
      
           padding-left:60px;
       }

       .doorName{
      
           font-size:10px;
       }

       .note{
      
           text-indent:20px;
           padding-top:5px;
           padding-bottom:5px;
       }

    </style>
</head>

<body>

    <div>顾客联</div>
    <div class="please">请您留意取餐账单号</div>
    <div class="me">自取顾客联</div>
    <div class="doorName">永和大王（北三环西路店）</div>
    <div class="doorName">010-62112313</div>
    <div class="me">--结账单--</div>
    <div class="please">账单号：P000010</div>
    <div>账单类型：堂食</div>
    <div>人数：1</div>
    <div>收银员：张静</div>
    <div>开单时间：2018-04-17 07:24:29</div>
    <div>结账时间：2018-04-17 07:24:38</div>

    <hr style="border:1px dashed;"></hr>
    <table border="1" cellspacing="0">
       <tr>
           <td>数量</td>
           <td>品项</td>
           <td>金额</td>
       </tr>

       <tr>
           <td>1</td>
           <td>玉米肉松蛋饼2P <br> 1X --玉米肉松蛋饼<br /> 1X --现磨豆浆（热/甜）
           </td>
           <td>8.00</td>
       </tr>
    </table>

<hr style="border:1px dashed;"></hr>
    <table border="1" cellspacing="0">

       <tr>
           <td>合计</td>
           <td>8.00</td>
       </tr>

       <tr>
           <td>微支付</td>
           <td>8.00</td>
       </tr>

    </table>

    <hr style="border:1px dashed;"></hr>
    <div>打印时间：2018-04-17 07:24:38</div>
    <hr style="border:1px dashed;"></hr>   

    <div class="note">根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div>
	<div>官网：www.yonghe.com.cn</div>
    <div>加盟热线：86-21-60769397 或 86-21-60769002</div>

4.5.2 实例2：用户注册页面

<!DOCTYPE html>

<html>

    <head>
       <meta charset="utf-8">
       <title>用户注册</title>    

       <style>

           /* 语法:选择器{样式1;样式2;样式3;} */
           /* 统一网页风格 */
    body{
      

    font-family: "宋体";/* 统一字体 */
    font-size: 15px;/* 统一字号 */
    width: 500px;/* 统一宽度 */
    padding-left: 100px;/* 设置左边距 */
     }

 

/*修饰所有input的样式 */

.a{
      

    height: 20px;/* 高度 */
    width: 300px;/* 宽度 */
    padding: 15px;/* 调整内容和边框的距离,内边距 */
    font-size:20px ;/* 字号变大 */
    margin: 10px;/* 调整盒子间的距离,外边距 */
}

/* 修饰所有提示信息 */
.xiao{
      

    font-size: 8px;/* 字体变小 */
    color: grey;/* 字的颜色 */
    padding-left: 30px;/* 左边距 */
}

/* 修饰同意 */
#note{
      

    height: 60px;/* 高度 */
    text-indent: 40px;/* 首行缩进 */
    font-size: 12px;/* 字号变大 */
}

/* 修饰立即注册按钮 */
#btn{
      

    background-color: #E64346;/* 背景色 */
    font-size: 25px;/* 字号变大 */
    color: white;/* 字的颜色 */
    width: 360px;/* 设置宽度 */
    height: 50px;/* 设置高度 */
    border: #E64346;/* 设置边框 */
}
    
</style>

      
    </head>
    <body>
       <!-- 用户注册的数据需要提交给服务器入库,所以需要form表单 -->
       <form method="get" action="#"> <!-- 指定提交数据的方式-->
           <table>
                  <h2 style="padding-left: 130px;font-size:30px;">用户注册</h2>
                  <tr>
                     <td>
                         <input type="text" placeholder="用户名" class="a"/>
                     </td>
                  </tr>

                  <tr>
                     <td class="xiao">
                         支持中文、字母、数字、“-”、“_”的组合，4-20个字符
                     </td>
                  </tr>

                  <tr>
                     <td>
                         <input type="password" placeholder="设置密码" class="a" />
                     </td>
                  </tr>

                  <tr>
                     <td class="xiao">
                         建议使用数字、字母和符号两种以上的组合，6-20个字符
                     </td>
                  </tr>

                  <tr>
                     <td>
                         <input type="password" placeholder="确认密码" class="a" />
                     </td>

                  </tr>
                  <tr>
                     <td class="xiao">
                         两次密码输入不一致
                     </td>
                  </tr>

                  <tr>
                     <td>
                         <input type="password" placeholder="验证手机" class="a"/>
                         或
                         <a href="#"> 验证邮箱</a>
                     </td>
                  </tr>
				  
                  <tr>
                     <td id="note">
                         <input type="checkbox" />
                         我已阅读并同意
                         <a href="#">《京淘用户注册协议》</a>
                     </td>
                  </tr>

                  <tr>
                     <td>
                         <!-- type类型必须是submit才能提交数据 -->
                         <input  id="btn" type="submit" value="立即注册" />
                     </td>
                  </tr>
           </table>
    </body>
</html>

4.5.3 实例3：头像圆角特效

css设置圆角：border-radius

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圆形图片</title>
		<style>
			#user{
      
				border:1px solid;/*调试，让大家看到div*/
				width:250px;
				height:250px;
				/*设置背景图片*/
				background-image:url(images/user.png) ;
				/*圆形,超过宽度的一半*/
				border-radius:150px;
			}
		</style>
	</head>	
	<body>
		<h3>利用css3样式对div进行圆角，最终实现圆</h3>
		<div id="user"> </div>
	</body>
</html>

4.5.4 实例4: 菜单menu

去掉每个li前面的点：list-style:none;
使li不换行，紧跟在后面：float:left;
鼠标移入触发修改,移出还原。li:hover{ background-color: #31B0D5;/*触发时背景色*/}
a{text.decortion:none;/*取消超链接下面下划线修饰*/ color:white;/*字体颜色：白色*/}
target="_blank"：使得原网页不被覆盖

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页菜单</title>
		<style>
			ur{
      
				list-style:none;/*去掉每个li前面的点*/
			}
			li{
      
				float:left;/*使li不换行，紧跟在后面*/
				margin-right:8px;/*外右侧空白*/
				background-color:#ee1100;/*背景色 #红绿蓝*/
				padding:5px 10px 5px 10px;/*内部四周留白*/
				color: white;
				border-radius:5px;
			}
			li:hover{
      
				/*鼠标移入触发修改,移出还原*/
				background-color: #31B0D5;/*触发时背景色*/
			}
			a{
      
				text.decortion:none;/*取消超链接下面下划线修饰*/
				color:white;/*字体颜色：白色*/
			}
		</style>
	</head>
	<body>
		<h3>使用ul和li标签来实现，通过样式修饰实现</h3>
		<h4>a标签实现超链接</h4>		
		<ur>
			<!--target="_blank"使得原网页不被覆盖-->
			<li><a href="https://www.w3school.com.cn/" target="_blank"> W3CShool </a></li>
			<li><a href="https://www.runoob.com/" target="_blank">菜鸟教程 </a></li>
			<li><a href="https://www.csdn.net/" target="_blank">CSDN</a></li>
			<li><a href="https://segmentfault.com/" target="_blank">思否</a></li>
			<li><a href="http://act.codeboy.com" target="_blank">java培优</a></li>
		</ur>
	</body>
</html>

4.2.3 实例5：文档doc

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>高手班简章</title>
		<style>
			body{
      /*设置全局样式*/
				width: 310px;
				font-size:12px;
			}
			.title{
      
				text-align:center;/*文字横向居中*/
				color: #ff0000;
				font-size:20px;
				font-weight:bold;/*字体加粗*/
			}
			.subtitle{
      
				text-align: center;
				font-weight:bold;
				font-size:18px;
				padding:5px 0px 5px 0px;
			}
			.content1{
      
				background-color:#46B8DA;/*背景色*/
				margin-top:5px;
				margin-bottom:5px;
				color: white;
				line-height: 27px;/*线高，上下空开，有纵向居中效果*/
			}
			.content2{
      
				background-color: #ff0000;
				color:white;
				line-height: 27px;
			}
			.number{
      
				background-color: black;
				width:20px;
				margin-left:5px;
				display:inline-table;/*展现，以表格形式来布局，上下都顶格*/
				text-align: center;
			}
		</style>
	</head>
	<body>
		<!--习惯，把所有页面内容用div括起来，container容器-->
		<div>
		<div class="title">高手班（升职加薪的利器）</div>
		<div class="subtitle">第一部分：基础知识进阶（齐雷）</div>
		<div class="content1"><span class="number">1</span> 新接口规范、Lambda表达式、Stream流、新日期</div>
		<div class="content2"><span class="number">2</span> 多线程、并发安全、锁优化、高级集合、JUC并发</div>
		<div class="content1"><span class="number">3</span> NIO原理分析、RPC设计以及框架中NIO的应用实现</div>
		<div class="content2"><span class="number">4</span> 手写类加载器、JVM调优、GC算法及优化</div>
	    <div/>
	</body>
</html>

4.2.4 实例6：动画特效（拉伸、移动、旋转）

<style>
			.transitionbox{
      
				width:100px;
				height:100px;
				background-color: red;
				
				/*纵向拉伸效果，执行时间2s*/
				transition:height 2s;
			}
			/*鼠标移入div触发动画执行*/
			.transitionbox:hover{
      
				height: 500px;/*拉伸到高度从100到500*/
				}
				
		.movebox{
      
				width:100px;
				height:100px;
				background-color: red;
				
				/*声明调用movebox动画,默认动画页面加载执行一次
				infinite循环执行，永不停息*/
				animation:movebox 5s infinite;
				
				/*改变默认的方式,支持坐标系
				position 位置,relative 相对坐标*/
				position:relative;
			}
			/*定义一个动画(关键key帧frame)
			动画是由一帧一帧的图片组成，1秒36帧以上，人眼无法识别。
			  from代表动画开始的位置，to代表动画结束的位置，
			  过程中css+html会自动产生中间过程，
			  动画一定要设置它的坐标系。
			*/
			@keyframes movebox{
      
				from{
      left:0px;}
				to{
      left:500px;}
			}
			
			.earthrotate{
      
				width:310px;
				height: 310px;
				/*设置背景图*/
				background-image:url(images/earth.png) ;
				border-radius: 160px;/*超过半径就是圆*/
				
				/*设置坐标系*/
				position:relative;
				
				/*创建动画，设置参数。
				run表示动画名称，5s为执行时间，infinite为反复执行。
				它的速度不均匀，前快后慢，解决方法：参数linear
				*/
				animation: run 4s linear infinite;
			}
			.earthrotate:hover{
      
				/*鼠标移入，地球暂时旋转，鼠标移出，继续旋转
				play-state 播放状态：paused暂停*//
				animation-play-state:paused;
				
				}
				/*定义动画关键帧
				变形（形状的变化）transform
				rotate旋转，0deg,从0°开始旋转，到360°结束
				*/
			   @keyframes run{
      
				   from{
      transform: rotate(0deg);}
				   to{
      transform: rotate(360deg);}
			   }
		</style>

4.2.5 实例7：播放视频、音频

<body>
		<h3>播放MP3音频文件</h3>
		<!--src指定要播放的文件，相对路径：从本文件搜索当前目录下audio目录下的MP3文件-->
	<audio src="audio/沙漠骆驼_展展与罗罗.mp3" controls="controls"></audio>

		<h3>播放视频mp4文件</h3>
		<!--绝对路径：直接指定文件所在位置，和当前目录无关,要在本地下打开，相对路径则可以直接用服务器打开。-->
	<video src="audio/110bafd65caa991fa07d5d58d848f107.mp4"  width="400" controls="controls"></video>
	</body>

5. JavaScript技术（JS）

5.1 动态网页的概述

html超文本标记语言实现了网站页面展现，展现文字、表格、图片、超链接等，而css层叠样式表实现了页面的美化，这些技术实现了静态网页。
如果需要根据不同的使用者，来展现不同的内容时，再如我注册登录和你注册登录，我们在网站上显示的登录名称就不同。这html+css就无能为力了，它们无法实现。这时javascript就派上用场了。它能实现浏览器用户和后台服务器进行交互。注册、登录、添加商品到购物车、下订单对它而言都是小菜一碟。有了javascript的加入，实现页面和后台系统的交互，实现用户信息的注册，实现用户的登录，实现个性化的数据展现，功能强大不少。业界把这样的网页称为动态网页，把这样的网站称为动态网站。
简而言之，静态网站只能看，不同浏览者看到内容一致不能变化；动态网站可以读写数据，内容根据不同浏览者展示不同的信息。

5.2 网页与后端的交互

动态网站的软件架构：
交互过程：
（1）用户访问网页，页面触发事件创建XHR对象，进行ajax请求，请求访问服务器端。
（2）请求被web中间件拦截并进行处理，由控制层框架springmvc中的controller进行接收，controller请求业务层spring框架的service服务。（3）service请求持久层mybatis框架的mapper映射，mapper访问数据库。
（4）操作完数据库，返回结果，mybatis封装成java对象传回service，service把java对象传回controller，controller把java对象又转换为json字符串，然后传回浏览器，浏览器传回给调用者XHR，XHR调用回调方法callback，callback进行json字符串的解析，从中拿到要展现的数据，通过javascript处理，最终回显到页面上。

可以看到这个调用过程是非常复杂的，跨越网络，跨域多个服务器，很多技术应用其中，而这一切的始作俑者它就是javascript，它实现了用户的请求和响应，实现了数据的动态展现，使早期静态的网站走向了动态的网站。

5.3 JS概述

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。JavaScript 实现了网站的交互，而javascript是脚本语言，只局限于浏览器。是一种弱类型语言，同其他语言一样，有它自身的语法，数据类型，表达式，算术运算符等。
JS是一门基于对象和事件驱动的脚本语言，通常用来提高网页与用户的交互性。

基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。
事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）
脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。

5.4 Javascript 入门案例

<html>
	<head>
	    <title>hello</title>
	       <meta charset="utf-8"/>
		   
	       <script>/* JS代码 */
	         function fn(){
      
	                     alert("111");
						 alert("恭祝易总喜提工作100万");
	              }
	       </script>
	</head>
	
	<body>
	   <h2>
		<a href="#" onclick="fn();">鼠标点击事件</a>  <!-- 点击按钮，触发函数 -->   
	   </h2>
	</body>
</html>

5.5 javascript的用法

外部用法：<script src="/res/login.js"> </script> 通过路径来引入外部的js文件。
内部用法：

-   <!-- 内部js -->
              <script>
                     alert(10);
                     prompt();
              </script>
       </head>
       <body>
              <a href="#" onclick="alert(1);">点我1</a> 
              <a href="#" onclick="prompt();">点我2</a>
              <a href="#">点我3</a>
       </body>

5.6 javascript的语法

5.6.1 基本数据类型：number/string/boolean/null/undefined

数值类型：number
在JS中，数值类型只有一种，就是number
在JS中，需要时会自动的进行数据类型的转换，比如：在显示和处理的时候，浮点型和整型会自动的转换。 2.4+3.6=6;
Infinity ：正无穷大
-Infinity ：负无穷大
NaN : Not a Number 非数字，和任何值都不相等，包括它本身
字符串类型：String
在JS中，字符串是基本数据类型。
在JS中，字符串直接量是通过单引号或者双引号引起来。
var str1 = “Hello…”;
var str2 = ‘CGB2103…’;
alert(str1);
布尔类型-boolean
其值为true或者是false；
var s1 = false;
console.log(s1);
undefined
其值就是undefined。表示变量没有初始化值。
比如：
a) var num; alert(num);//声明是变量但是没有为变量赋值，该变量的值就是undefined。
b) 或者访问一个对象上不存在的属性时，也是undefined。
c) 或者访问数组中一个没有的元素的位置时，该位置处的值也是undefined.
null
其值就是null。表示空值或不存在的对象。

5.6.2 复杂数据类型

函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）

5.6.3 JS的变量

js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。
javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，这点比较灵活。这也是双刃剑，编译期就难以检查出其赋值的错误。

（1）在js中通过var关键字来声明一个变量

  var a=1; alert(a);
  var x=true; alert(x);
  var y=10.8; alert(y);

（2）在js中声明的变量是不区分类型的，可以指向任意的数据类型。

  var a = 1;
  a=true;
  a=100;
  alert(a);//100
  
  function x(){
       var m = 10;
       alert("局部变量:"+m);
       alert("全局变量:"+a);
}
alert("局部变量2:"+m);//局部变量失效,报错

5.6.4 js的运算符

js中的运算符和java中的运算符大致相同。
算术运算符: +，-，，/，%，++，–
赋值运算符: =，+=，-=，=，/=，%=
比较运算符: ，!=，=，!==，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，||
前置逻辑运算符: ! (not)
三元运算符: ? :

（1）常见运算符运算

var a = 3;
var b = 1;
console.log(a+b);//4

a+=4;
console.log(a+b);//8

console.log(a==b); //true 同种数据类型返回true

console.log(a==="3"); //false  如果两边比较的值不是同一种数据类型，=== 直接返回false，如果是同一种数据类型，==和===没有区别！

console.log("1"=="1"); //true   //由于JS中字符串是基本数据类型，比较字符串相等通过 == 进行！

var a = 1;

alert(a++);//1

alert(++a);//3

alert(++a+a+++a);//4+4+5

alert(a>3?10:8);

var b = 10;

alert(a>b?a:b);//求两个数里的大数

var c = 8;

var d = a>b?(a>c?a:c):(b>c?b:c);//

alert(d);//三个数里的大值

（2）typeof运算符：用于返回变量或者表达式的数据类型

var i = 3;
console.log(typeof i);//number

i=true;
console.log(typeof i);//boolean

i="hello";
console.log(typeof i);//string
console.log(typeof 123+"abc");//numberabc
console.log(typeof (123+"abc"));//string

5.6.5 JS语句

js语句与java中的语句用法大致相同。

if.else语句

var i = 3;
if(i==4){
alert(“yes”);
}else{
alert(“no”);//no
}

例如：根据成绩判断所属等级

<!DOCTYPE html>
<html>
       <head>
              <meta charset="utf-8">
              <title>js</title>             

              <!-- 内部js -->

              <script>
                    function f1(){
      
						var score = prompt("请输入你的成绩：");//prompt()是提示框函数，并接收一个值给score
						console.log(score);//在控制台打印成绩
						if(score >= 80 && score <= 100){
      
							alert("你的成绩属于优秀！");//在弹出框输出该信息
						}else if(score >=60 && score < 80){
      
							alert("你的成绩属于中等！");
 					    }else if(score <60 && score >=0){
      
							alert("你的成绩不合格！");
						}else{
      
							alert("你输入的成绩不合法！");
						}
					}
              </script>
       </head>
       <body>
              <a href="#" onclick="f1();">点我一下有惊喜</a>     
       </body>
</html>

Switch…case语句
例如根据输入的数字判断是星期几。
循环语句

for(var i=0;i<5;i++){
    alert( i );
console.log(i);
}

var i=0;
while(i<5){
alert(i);
i++;
}

var sum = 0;
for( var i=1; i<=100; i++ ){
    sum += i; //sum = sum+i;
}
console.log(sum );
//没有增强for循环

注意：js中的语句，判断条件可以不是boolean类型，因为js中会自动进行数据类型的转换。

5.6.6 js数组

JS数组用于在单个的变量中存储多个值(其实就是一个容器)。
JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等。

构造数组的方式一：

var arr1 = new Array();//声明一个空数组
var arr2 = new Array("abc", "hello", true);//声明一个具有初始值的数组
alert(arr2.length);//3

构造数组的方式二：

var arr4 = ["乒乓球","唱歌","爬山","IT计算机"];//声明一个数组
alert(arr4.length);//0
arr4 = ["abc", "hello", true];//声明一个具有初始值的数组
alert(arr4);

数组需要注意的细节

(1)JS数组中可以存放任意的数据类型。
(2)JS中的数组长度可以被改变。

var arr1 = [];//声明一个空数组
console.log( arr1.length ); //此时数组长度为 0

arr1.length = 10;
console.log( arr1.length ); //此时数组长度为 10

arr1[99] = "abc";
console.log( arr1.length ); //此时数组长度为 100

arr1.length = 0;
console.log( arr1.length ); //此时数组长度为 0

数组的常见操作

length属性  --  获取数组的长度，还可以改变数组的长度
var a = [1,2,3]; 
alert(a.length); 

var arr = [123, "abc", false, new Object() ]
//遍历数组
for( var i=0; i< arr.length; i++ ){
    console.log( arr[i] );
}

//for..in
for(var i in a){
    console.log("i:::"+i);
}

//循环接收用户输入，将数据存储在数组中，直至输入‘exit’结束
c();
function c(){
    var a=[];
    for(;;){
       var x=prompt("请输入整数:");
       a[a.length]=x;
       if(x=="exit"){
           break;
       }
    }
    console.log(a);
}

5.6.7 js函数

函数就是一个具有功能的代码块, 可以反复调用。
函数就是包裹在花括号中的代码块，前面使用了关键词 function。

方式一：通过function 关键字声明函数
语法：function 函数名称([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);

案例：
function a(){ //无参函数定义

       var a = [1,2,3,4,5]; //定义数组
       var sum =0; //定义变量
       for (var i = 0; i <a.length; i++) {
              if(a[i]%2==0){
                     sum+=a[i];
              }
       }
       alert(sum);
}

a();//函数调用

function b(x,y){//定义含参函数
       alert(x+y);
}
b(1,"2");//函数调用
b(1,2);//函数调用

方式二：通过函数直接量声明函数
语法：var 函数名称 = function([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);

案例：

// fn2();  //这种方式定义的函数还未加载就调用,会报错.方式1没问题

var fn2 = function(){ //定义无参函数
       alert(100);
}
fn2();  //函数调用

var fn3 = function(x,y){  //定义含参函数
       alert(x*y);
}
fn3(0.32,100);//函数调用

fn2("王海涛");参数个数不匹配，王海涛undefined

var e = function(x,y){ //定义有返回值含参函数
       return x-y;
}
alert("函数返回值:::"+ e(1.1,10.9) ); //函数调用

注意: 在JS中调用函数时, 传递的参数个数如果与声明的参数个数不相同, 也不会报错。
所以，最好按声明的个数来传递, 因为个数不符, 可能会引发一些问题！！！

6. js对象

6.1 内置对象

6.1.1 Window 对象

代表浏览器中一个打开的窗口，很多已经被UI替代。

window.onload() 在浏览器加载完整个html后立即执行!
window.alert(“text”) 提示信息会话框
window.confirm(“text”) 确认会话框
window.prompt(“text”) 键盘输入会话框
window.event 事件对象
window.document 文档对象

6.1.2 Document 对象

代表整个HTML文档，可以用来访问页面中的所有元素。

document.write() ：动态向页面写入内容
document.getElementById(id) ：获得指定id值的元素
document.getElementsByName(name) ：获得指定Name值的元素

学会简单使用，后期被jQuery封装，在后期被Vue框架封装

6.2 自定义对象

方式一：

/* 自定义对象*/
function Person(){ } /* 定义对象*/
var p1 = new Person(); /* 创建对象*/
p1.name="张三"; //设置属性并赋值
p1.age=20;
console.log(p1); 

p1.say = function(){ /* 定义函数*/
console.log("haha");
}
p1.say(); /* 函数调用*/

上面展示了js的强大！js的牛掰之处就在于，它的属性可以边写边创建，非常灵活，而java不行，必须先定义。

方式二：

var p2 = {
         "pname":"李四",
         "page":100,
         "psay":function(){
      /* 函数里不能直接访问对象属性，要加this关键字 */
       console.log(this.pname+this.page);
              }
       }
       console.log(p2);
       p2.psay();  /* 函数调用*/

例如：构建一个Car对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>保时捷718 Cayman T,红色，641000元起</h3>
		<script>
			//js定义一个对象，它有很多属性
			//var car = new Object();
			
			var car = {
       //创建一个对象
				name:"保时捷plus",
				type:"Cayman T"
			};
			
			//js动态增加属性，java做不到，静态语言。
			car.name="保时捷7118";//如果name已有属性，再给一个值，会覆盖。
			car.price=641000;
			console.log(car);
		</script>
	</body>
</html>

构建一个person对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>人的对象：fisrtname姓、lastname名、age年龄、fullName1()方法</h3>
		<h3>动态添加：address地址(属性)，fullName2()（函数）</h3> 
		<script>
			var person = {
      
				firstname:"陈",
				lastname:"强",
				age:18,
				fullName1:function(){
      
					//函数里不能直接访问对象属性，要加this关键字
					return this.firstname+this.lastname;
				}
			}
			console.log(person);
			console.log(person.firstname);
			console.log(person.age);
			console.log(person.fullName1());
			
			//动态添加
			person.address="西安";
			person.fullName2 = function(){
      
				return person.firstname+person.lastname+","+person.age;
			}
			console.log(person);
			console.log(person.fullName2());
		</script>
	</body>
</html>

7. DOM树的作用

7.1 组成

ECMAScript描述了javascript语言的语法和基本对象
文档对象模型DOM（Document Object Model）与HTML网页API接口
浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口
核心对象有：window浏览器窗口，navigator浏览器信息，location浏览器当前地址信息，history浏览器历史信息，screen用户屏幕信息。

7.2 DOM树结构

DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM（Document Object Model）文档对象模型为js操作html文档所提供了一套API，通过这套API可以很方便的对html元素进行访问及增删改查操作。

7.3 document对象和获取页面元素的4种方式

获取对象: window.document
write()–向文档写 HTML 表达式或 JavaScript 代码
title–返回网页的标题
id–设置或返回元素的id
innerHTML–设置或返回元素的内容
getElementsByTagName （<标签>名称） : 得到数组
getElementsByName（name属性） : 得到数组
getElementsByClassName （class属性）: 得到数组
getElementById:（id属性） 单个值
注：只有ById是Element，其它3个都是Elements

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>JavaScript访问DOM树</h3>
		<h5>JavaScript使用api的4种方式：访问h3标签，a标签，获取它们的内容。</h5>
		<h6>分别是：tagName、className、name、id</h6>
		<a href="http://www.taobao.com" target="_blank">淘宝</a>
		<a href="http://www.meitu.com" target="_blank">美图秀秀</a>
		<a class="jd" href="http://www.jd.com" target="_blank">京东</a>
		<a id="cgb" href="http://act.codeboy.com" target="_blank">java培优</a>
		<a name="pdd" href="http://www.pinduoduo.com" target="_blank">拼多多</a>
		
		<!--页面上使用javascript,通过script标签来实现，type="text/javascript"新标准可以省略，
		    默认scr=" "，引入外部js:jquer.js。
			js中可以使用双引号或者单引号来把字符串括起来。
		    js出错是不提示的，按F12，找里面的console控制台才能看到错误。-->
			
		<script>
			 //(过时的方式)
			 window.alert('使用js获取页面元素内容');//BOM中提供弹出框api
			 //获取页面a标签，按tagName方式返回一个数组，第一个元素：arr[0],下标从0开始
			 alert(document.getElementsByTagName("a")[0]);//a标签中第一个href的内容
			 alert(document.getElementsByTagName("a")[0].innerText);//a标签的内容
			 
			/*谷歌浏览器提供console方式，必须按F12查看*/		
			//第一种方式：tagname方式
			console.log(document.getElementsByTagName("a")[0].innerText);//a标签内容
			console.log(document.getElementsByTagName("a")[0].href);//a标签的href属性
			
			//第二种方式：classname方式
			console.log(document.getElementsByClassName("jd")[0].innerText);
			console.log(document.getElementsByClassName("jd")[0].href);
		    
			//第三种方式：name方式
			console.log(document.getElementsByName("pdd")[0].innerText);
			console.log(document.getElementsByName("pdd")[0].href);
			
			//第四种方式：id方式，这种方式获得就是一个值，无需数组方式
			console.log(document.getElementById("cgb").innerText);
			console.log(document.getElementById("cgb").href);
			
			//能否修改页面值，html做不了写死的，css也做不了美化，js可以
			//淘宝改成百度
			//document.getElementsByTagName("a")[0].innerText = "百度";
			//document.getElementsByTagName("a")[0].href = "http://www.baidu.com";
						
			//定义变量a，后面可以操作a
			var a = document.getElementsByTagName("a")[0];
			a.innerText = "百度";
			a.href = "http://www.baidu.com";
		</script>
	</body>
</html>

8. ES6高级语法

8.1 let 变量和const 常量

ES6引入了两个重要的 JavaScript 新关键词：let变量和 const常量。这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。在 ES6 之前，JavaScript只有两种类型的作用域：全局作用域和函数作用域。新的函数，让变量作用域范围更小，控制更加细粒度，更加节省资源，用完就销毁了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//es6的新标准，变量
			let x = 10;
			console.log(x);
			
			{
      
				let x=100;
				console.log(x); //代码段中let定义变量的作用域，代码段结束，里面的x也结束
			}
			console.log(x);
			
			//js中只有变量，没有常量定义；es6定义常量const。常量，不能修改，不能再次赋值。
			const sysname = "学生管理系统";
			console.log(sysname);
					
			const PI = 3.14;
			console.log(PI);
		</script>
	</head>
	<body>
		<h6>es6新标准</h6>
	</body>
</html>

8.2 箭头函数

箭头函数相当于匿名函数，私有较安全

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>箭头函数，新标准</h3>
	</body>
	<script>
		//js函数定义，无参
		var js0 = function(){
      
			console.log("js0 无参");
		}
		js0(); //js函数调用
		
		//箭头函数定义，简写
		var es0 = ()=>{
      
			console.log("es0 无参");
		}
		es0();
		
	   //如果{}中只有一条语句，就可以省略大括号
	   var es0=()=>console.log("es0 无参")
	   es0();
	   
	   //js变量可以不设置类型，它会自动推断类型
	   var js1 = function(arg){
      
		   return arg;
	   }
	   console.log(js1("js1是一个参数"));
	   //箭头函数如果只有一个参数时，{}可省略,如果只有一个语句，return必须省略
	   /*
	   var es1=(arg)=>{
		   return arg;
	   }
	   */
	   var es1=(arg)=>arg;
	   console.log(es1("es1是一个参数"));
	   
	   //js定义两个参数
	   let js2 = function(a,b){
      
		   return a+b;
	   }
	   console.log(js2(10,20));
	   
	   let es2=(a,b)=>a+b;
	   console.log(es2(20,30));
	</script>
</html>

8.3 后期绑定 postbind-login.html

事件绑定有两种方式：

前期绑定：上面的案例在按钮上直接调用onclick事件属于前期绑定
后期绑定：按钮上没有事件，而是在页面最后addEventListener实现事件绑定
目前主流开发方式习惯后期绑定方式，一定要掌握。
去掉按钮上的onclick事件，在body标签后增加下面js脚本

<script>
		//后期绑定，给按钮增加onclick事件
		var btnLogin = document.getElementById('btnLogin');
		btnLogin.addEventListener('click', function(){
      
			doLogin();
		});
		
		var btnClear = document.getElementById('btnClear');
		btnClear.addEventListener('click', function(){
      
			doClear();
		})
	</script>

注：增加事件侦听：addEventListener（js事件名称，匿名函数），在js中大量使用匿名函数。

9. jQuery

9.1 异步请求局部刷新

9.1.1 架构

9.1.2 技术栈

JavaScript：形成交互
jQuery ：封装JavaScript，代码更加简洁高效
ajax ：异步请求
json ：数据传输
Web中间件(tomcat) ：处理请求和响应
mysql数据库：存取数据

9.1.3 执行过程

用户页面中触发ajax请求，访问后端服务器，Web中间件拦截用户请求，转发后端程序进行数据处理，一般还需访问数据库，然后逐层返回。数据库返回数据处理服务，数据处理服务返回Web中间件，Web中间件返回ajax调用，将数据封装到返回的js对象中，目前主流返回数据为json字符串。在回调callback的方法中解析json中的数据，最终回显到页面上。通常我们使用jquery封装过的ajax，写法更加简洁灵活。

9.2 什么是jQuery

jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码。
轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架。
jQuery的核心思想：“写的更少，但做的更多”
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

9.3 jQuery库包含以下功能：

HTML 元素快速选取(给予css选择器,方便快速查询DOM文档中的元素)
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX

9.4 jQuery的语法

jQuery 作用是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号替代 document
选择器（selector）查找定位HTML元素
action() 执行对元素的操作

9.5 jQuery的应用

jQuery其实就是一个JS文件,如需使用 jQuery,可在官网：https://jquery.com/下载，然后
使用 HTML 的 <script> 标签引用它,应该位于页面的 <head> 部分。

<!-- 引入jQuery的函数库文件 -->
<script src="jquery.min.js"></script>
或者：
<script src="jquery.js"></script>

基本选择器

元素选择器:
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素

id 选择器
$("#one") -- 选中id为one的元素
$("p#demo") -- 选取所有 id="demo" 的p元素

class 选择器
$(".mini") -- 选中所有class值为mini的元素
$(".test") -- 选中所有class值为test的元素

属性选择器
$("[href]") -- 选取所有带有 href 属性的元素
$("[href='#']") -- 选取所有带有 href 值等于 "#" 的元素

9.5.1 应用实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<!--导入jQuery-->
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<!--style标签是全局的，style属性只对当前元素生效-->
		<div class="container" style="width:300px;margin-top:50px">
			<fieldset>
				<legend>登录</legend>
				<div class="form-group">
					<label for="uername">用户名：</label>
					<!--autocomplete="off"关闭自动完成，鼠标点击输入框不会弹出内容-->
					<input class="form-control" autocomplete="off" type="text" name="username" id="username"/>
				</div>
				
				<div class="form-group">
					<label for="password">密码：</label>
					<input class="form-control" type="password" name="password" id="password"/>
				</div>
				
				<div class="form-group">
					<!-- onclick事件，单击触发里面的函数，自定义js函数-->
					<button id=btnSave class="btn btn-primary" onclick="jssave()">保存</button>
					<button id=btnClear class="btn btn-danger" onclick="jsclear()">取消</button>
				</div>
			</fieldset>
		</div>
	</body>
	<script>
		//点击保存按钮，获取用户名和密码打印到控制台
		/*	function jssave(){
			let username = document.getElementById("username");
			//不同的元素访问属性不同，a.innerText,div.innerText,input.text.value
			console.log(username.value);
			let password = document.getElementById("password");
			console.log(password.value);
		}*/
	  
	   //默认HBuilderX没有jQuery语法提示，右下角：语法提示库，选择jquery1.8
	    function jssave(){
      
		   //获取页面id为username的input中的值(jquery方式)
		   console.log($("#username").val());
		   console.log($("#password").val());
		  }
		//点击取消按钮，清除输入框的内容
		//clear名称被js新标准征用，不能重名
		/*	function jsclear(){
			//清空的方法：获取这两个框，把它们设置成空字符串
			document.getElementById("username").value="";
			document.getElementById("password").value="";
		}*/
		
		function jsclear(){
      //(jquery方式)
			$("#username").val('');//设置值写在括号内，不需要=
			$("#password").val('');
		}
		//上面的方式是前期绑定
		//下面是jquery的后期绑定,动态给按钮添加事件，实现步骤：1）获取按钮，2）click这里没有on，3）写匿名函数
		$("#btnSave").click(function(){
      
			var username = $("#username").val();
			var password = $("#password").val();
			console.log(username+ ","+password);
		})
		
		$("#btnClear").click(function(){
      
			$("#username").val('');
			$("#password").val('');
		})
	</script>
</html>

9.5.2 禁止按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮禁止</title>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<h1>按钮点击后，被禁止，无法再次点击</h1>
		
		<!--按钮的disabled属性，作用是不允许重复点击 -->
		<button id=pay>支付宝支付</button>
		<button>微信支付</button>
	</body>
	
	<script>
		$("#pay").click(function(){
      
			//设置按钮的禁止属性，attribute(attr),两个参数：属性名和属性值
			//jquery中的disabled是boolean值
			$("#pay").attr("disabled",true);
			
			//改变成文字，this代表当前的按钮对象，在jquery中语法特殊——$(this)
			$("#pay").text($(this).text()+":已支付，请稍后...");
		})		
	</script>
</html>

9.5.3 全选取消

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<h1>多选框，全部选中或全部取消</h1>
		<div>
		<label>爱好:</label>
		<input type="checkbox" name="hobby"  id="hobby">乒乓球</input>
		<input type="checkbox" name="hobby"  id="hobby">钓鱼</input>
		<input type="checkbox" name="hobby"  id="hobby">象棋</input>
		<input type="checkbox" name="hobby"  id="hobby">排球</input>
		</div>
		
		<div>
			<button id="seletAll">全选</button>
			<button id="unseletAll">全取消</button>
		</div>
	</body>
	<script>
		//jquery的checked属性，true选中，false不选
		$("#seletAll").click(function(){
      
		//$("#hobby").attr("checked",true);//attr方法只能执行一次，jquery1.8可以使用prop
		//采用筛选器,$("[id=hobby]")会拿到页面的每个元素
		$("[id=hobby]").prop("checked",true);
		})
		
		$("#unseletAll").click(function(){
      
			$("[id=hobby]").attr("checked",false);
		})
	</script>
	
</html>

9.5.4 读取设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>读取</title>
		<script src="./js/jquery.min.js"></script>
	</head>
	<body>
		<h1>jQuery</h1>
		<h3>1、div 功能：获取txt，获取HTML，隐藏，展现，字体，颜色</h3>
		<h3>2、input 功能：获取值，设置值</h3>
		
		<div id="title"><b>jQuery writer less do more</b></div>
		<input name="username" id="username" value="陈晨"/>
		<input id="password" value="123456" />
	</body>
	
	<script>
			var e = $("#title");			//得到div对象
			
			console.log( e.text() );		//div中的文字
			console.log( e.html() );		//div中的html片段
			
			e.hide();		//隐藏
			e.show();		//展示
			
			e.css("font-size", 40);		//设置字体大小
			e.css("color", "orange");		//设置字体颜色
			
			console.log( $("input[name='username']").val() ); //获取到name=username的input框的值
			console.log( $("input[id='username']").val() ); //获取到id=username的input框的值
			
			var username = $("#username");		//input文本框对象
			console.log( username.val() );		//获取文本框内容
			username.val("陈琦");					//设置文本框内容
	</script>
</html>

9.5.5 加载事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/jquery.min.js"></script>
	</head>
	<body>
		<h1>jQuery ready 事件替代 js.onload事件</h1>
	</body>
	<script>
		//匿名函数方式，js中特别常见，这样就私有，只能内部访问，安全
		// $().ready(function(){
      
		// 	console.log( $("h1").html() );
		// })
		//简写
		$(function(){
      
			console.warn( $("h1").html() );
		})
	</script>
</html>

9.5.6 绑定事件

在运行时进行事件的动态绑定，也称为后期绑定，这样程序更加灵活.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/jquery.min.js"></script>
	</head>
	<body>
		<h1>jQuery 按钮动态绑定（后期绑定）click事件</h1>
		
		<button id="btnBefore" onclick="doBefore()">前期绑定</button>
		<button id="btnAfter">后期绑定</button>
	</body>
	
	<script>
		function doBefore(){
      
			alert("前期绑定，写死啦")
		}
		
		$(function(){
      
			$("#btnAfter").click(function(){
      
				alert("后期绑定，真灵活")
			})
		})
	</script>
</html>

10. json

10.1 什么是json

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）。
它是一种轻量级的数据交换格式。它基于 ECMAScript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者，成为主流开发方式（ajax异步请求，json返回）。
JSON是轻量级的客户端和服务器之间数据交换的格式，本质上就是一个字符串。

10.2 json的作用

JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

10.3 格式

	--普通的json串  "k" : "v"
	--json对象 {"k" : "v" , "k" : "v" , "k" : "v"}
	--json数组 [{"k":"v" , "k":"v" , "k":"v"},{"k":"v" , "k":"v" , "k":"v"}]

10.4 Json测试

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>测试 JSON字符串</title>
			
			<!-- 在网页中,添加JS代码 -->
			<script>
				var p = ' "name":"jack" ' ; //1. 简单的json字符串
				console.log(p); 
				console.log(p.length); //获取字符串的长度
				
				p = ' { "name":"jack" , "age":"20" , "sex":"男"  } ' ; //2. json对象
				console.log(p); 
				console.log(p.concat(123));  //拼接字符串
				
				p = '[{"name":"rose","age":"20"} , {"name":"jack","sex":"女" }]' ; //3. json数组
				console.log(p); 
				
				//4. json字符串 和 js对象 互转:: 利用工具类JSON
					//json字符串 转成 js对象(为了调用对象的属性.函数):: js对象 = JSON.parse(字符串)
					var obj = JSON.parse(p);
					console.log(obj) ; //是数组,可以用下标获取每个对象
					console.log(obj[0].age) ; //20,调用属性的值
					console.log(obj[1].name) ; //jack,调用属性的值
				
					//js对象 转成 json字符串(为了调用字符串的功能):: 字符串 = JSON.stringify(js对象)
					var str = JSON.stringify(obj);
					console.log(str) ;
					console.log(str.length) ; //获取长度
					console.log(str.concat("abc")) ; //拼接字符串
					console.log(str.substring(5)) ; //截取字符串
				
			</script>
		</head>
		<body>
			
		</body>
	</html>

10.5 数据转换工具

使用JS里的内置对象JSON，用来把以 JSON 格式写的字符串和原生 JavaScript 对象互转。

客户端给服务器发送数据：将JS对象转成JSON字符串 JSON.stringify(Js对象 => json字符串)
服务器的数据发送给客户端:：JSON字符串转成JS对象 JSON.parse(“json字符串 => Js对象”)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<h1>写死json，解析json字符串把价格和id展现在页面上</h1>
		
		<div>商品名称：<span id="itemId"></span></div>
		<div>价格：<span id="itemPrice"></span></div>
	</body>
	
	<script>
		//js字符型数组
		var jsonstr = '[{"name":"Apple iPhone 12","price":"6599.00"}]';
		console.log(jsonstr);
		
		//json中浏览器有直接支持技术，有方法将字符串转换成js对象。
		var items = JSON.parse(jsonstr);//转换成js对象
		console.log(items);
		console.log(items[0].name);
		console.log(items[0].price);
		items[0].price="7000";
		
		
		//将js对象转换成json字符串
		var strjson = JSON.stringify(items);
		console.log(strjson);
		
		$("#itemId").text(items[0].name);//将对应的值展示在页面上
		$("#itemId").css("color","blue");//样式的设置
		
		$("#itemPrice").text(items[0].price);
		$("#itemPrice").css("color","red");	
	</script>
</html>

在这里插入代码片

11. Ajax

为了提高浏览器的响应速度,ajax可以实现异步访问(不必等待上一次的结果),局部刷新 (只刷新局部,而不是整个网页)

11.1 概念

Ajax 即Asynchronous Javascript And XML(异步的)。
Ajax并不是一种新的编程语言，而是多种技术的综合应用
Ajax是客户端的技术，它可以实现局部刷新网页
Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

11.2 原理

Ajax 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

11.3 参数详解

8个参数：

$.ajax({				//$.get，$.post，$.getJSON
	async:				//请求同步异步，默认true异步
	type:				//请求类型：GET/POST				
	url:				//请求的网站地址
	data:				//提交的数据，参数
	contentType:		//请求的MIME媒体类型：application/x-www-form-urlencoded（默认）、application/json;charset=UTF-8
	dataType:			//服务器返回MIME类型：xml/html/script/json/jsonp
	success: function(data){	//请求成功回调函数，data封装网站返回的数据
		console.log( data );
	},
	error: function(e){		//请求失败回调函数，e封装错误信息
		console.log(e.status);			//状态码
		console.log(e.responseText);	//错误信息
	}
})

11.4 语法

	--使用JQuery提供的ajax技术,
	--导入JQuery的函数库
	--使用
		$.ajax({
			type:"post" , //请求的方式get/post
			url: "https://p.3.cn/prices/mgets" , //请求的地址
			contentType: "json" , //要发送的数据的类型
			data: {"name":"jack"}, //要访问地址时携带的数据
			dataType: "jsonp", //返回数据的类型
			success: function(data) {   //执行成功后调用的
				console.log(data);
			}
			error: function(data) { //执行失败后调用的
				console.log(data);
			}
		});

11.5 应用实例

		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>测试 ajax</title>
				
				<!--1. 引入jQuery的函数库 -->
				<script src="jquery-1.8.3.min.js"></script>
				
				<!--2. 使用ajax -->
				<script>
					$(function(){
      //文档就绪函数
						$.ajax({
       //指定参数的值就可以
							  type: "POST" , //指定请求方式get post
							  url: "https://p.3.cn/prices/mgets" ,  //指定请求地址
							  contentType: "application/json;charset=utf-8" ,  //发送数据的类型
							  data:{
        "skuIds": "J_100003717483" } ,  //拼接的参数
							  dataType: "jsonp" , //响应的数据的类型
							  success: function(data){
       
								  //data已经被转换成了js对象,可以直接解析属性的值
									console.log(data); //打印了服务器返回的数据
									console.log(data[0].p); //解析返回的数据,p的值
									console.log(data[0].op); //解析返回的数据,op的值
							  },
							  error: function(data){
      
									alert("访问失败.");
							  }
						})
					});
				</script>
			</head>
			<body>
				
			</body>
		</html>

11.5 json和js对象的区别

json字符串: { “id”:“100”,“name”:“tony”,“salary”:“30000” }
js对象：{ “id”:100,“name”:“tony”,“salary”:30000 }

可以看出js对象中value值如果是整数，小数，无需加双引号。
含义不同，json是一种数据格式，js表示类的实例
传输：json用于跨平台、跨网络传输，速度快；js不能传输
展现：json键值对方式，值是字符串不能是对象方法函数；js值不一定加双引号，值可以是对象、函数、字符串等
转换：JSON.parse(jsonStr)； JSON已经作为浏览器内置对象；JSON.stringify(obj)

12. NodeJs

12.1 简介

Node.js，它采用事件驱动，采用主流NIO非阻塞I/O 模型，从而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

12.2 安装

官网：
https://nodejs.org/en/
https://npm.taobao.org/mirrors/node/v10.0.0/ #淘宝镜像链接

12.3 启动停止服务

启动：
在安装目录下启动nodejs，执行命令：node node-server.js
停止：
ctrl+c或者直接关闭窗口

13. 前端框架：Vue（渐进式）

13.1 概述

Vue是我们国人开发，作者：尤雨溪，Vue是一个用于构建用户界面的渐进式SPA单一页面框架。

13.2 MVVM框架

MVVM框架实现了页面和数据的分离，我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码。

特点：
一个轻量级的mvvm框架，双向绑定，数据动态更新；
其核心思想是：数据驱动、组件化的前端开发
原生html页面操作的是dom，而vue.js操作的是数据，从而屏蔽了复杂晦涩难懂的dom结构。和传统前端开发的关注点完全不同，传统方式关注的是都像的document结构的api，而vue关注的是组件，是数据，也更加符合面向对象的方式。

13.3 入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!--两个大括号表示插值表达式，相当于vue定义了个变量，vue会替代它为设置值-->
		<div id="app">{
   {msg}},{
   {fun}}</div>
	</body>
	<script>
		/*--创建Vue对象，它有一个参数，也是一个函数，匿名函数Vue里的参数对象,有多个特定参数,
		el是elment的缩写，代表操作的页面元素,data代表数据.*/
		
	     new Vue({
       //new Vue对象的参数是一个js对象
			el:"#app",//挂载点，和页面上id=app的元素来对应
			data:{
      
				msg:"hello vue2",
				fun:"易总喜提劳斯莱斯"
			}
		});
	</script>
</html>

13.4 双向绑定

双向绑定：通过指令v-model，修改一方同时修改相同的另一方，达到数据同时更新。这是vue框架的魅力。

el：挂载点，绑定到指定名称的html标签上
data：绑定的数据，相当于给html中使用的时候所传的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue数据驱动，双向绑定</title>
		<script src="js/vue.js"></script>
		<script src="../day04/js/jquery.min.js"></script>
	</head>
	<body>
		{
   {address}}   <!--Vue只修饰挂载点内的数据-->
		<div id="app">
			{
   {msg}}
			<h1>{
   {address}}</h1>
			<h2>{
   {address}}</h2>
			<h3>{
   {address}}</h3>
			<h4>{
   {address}}</h4>
			<h5>{
   {address}}</h5>
			<h6>{
   {address}}</h6>
		<!--v-model: 双向绑定属性 -->
			<input type="text" v-model="address" name="address" id="address"/>
			
		</div>
	</body>
	<script>
		//可以操作v.address设置新的值
		var v = new Vue({
      
			el:"#app",
			data:{
      
				msg:"先生们女士们，大家中午好！",
				address:"我爱天安门"
			}
		})
	</script>
</html>

13.5 基础用法

13.5.1 定义data的方式

方式一：js对象写法
data: {
msg: "hello vue js "
}
方式二：函数写法
data:function(){//函数声明，函数有返回值
return{//返回一个js对象
msg:“hello Vue function”,
}
}
方式三：ES6新标准写法
data(){
return{
msg:“hello Vue es6”
}
}

13.5.2 定义object的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象的使用</title>
		<script src="js/vue.js"></script>
		
		<style>
			/*v-cloak:这个指令是页面的选择器，有这个属性就执行这个样式*/
			[v-cloak]{
      
				display: none;//隐藏
			}
		</style>
	</head>
	<body>
		<h3>姓名（单值）、年龄（单值）、爱好（数组）、女朋友（对象）、豪车（对象数组）</h3>
		<div id="app" v-cloak>
			{
   {name}} {
   {age}}
			<hr>
			{
   {hoppy}} {
   {hoppy[0]}} {
   {hoppy[hoppy.length-1]}}
			<hr>
			{
   {girl.name}}、{
   {girl.age}}、{
   {girl}}
			<hr>
			{
   {cars[0].name}}、{
   {cars[1].color}}、{
   {cars[2]}}
		</div>
		<h4>鑫鑫是是变态</h4>
	</body>
	<script>
		new Vue({
      
			el:"#app",
			data:{
      
				msg:"hello VueJS!",
				name:"小强",		//字符串类型两边使用双引号或者单引号
				age:18,	//整数直接写
				hoppy:["乒乓","爬山","唱歌"],//字符串数组
				girl:{
      
					name:"李梅",
					age:16
				},
				cars:[
					{
      name:"劳斯莱斯",color:"white"},
					{
      name:"宝马",color:"red"},
					{
      name:"兰博基尼",color:"blue"}
				]
			}
		});
	</script>
</html>

13.5.3 定义方法的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue定义函数，调用函数</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		{
   {msg}}
		<!--函数的调用,必须用vue的事件来调用-->
		{
   {say()}}
		{
   {whatColor('蓝色')}}
		<hr>
		<button @click="whatColor('green1')">点我有惊喜</button>
		<button @click="whatColor('green2')">点我有惊吓</button>
		</div>
	</body>
	<script>
		//所有的方法必须在vue对象中声明
		new Vue({
      
			el:"#app",
			data:{
      
				msg:"hello VueJS!"
			},
			methods:{
      //所有的方法必须在此定义
			//函数的声明
			say:function(){
      
				//alert("say hi");
				console.log("say method")
			},
			whatColor:function(color){
      
				console.log(color);
				//alert("vue"+color);
			}	
			}
		});
	</script>
</html>

13.5.4 v-指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-show="age>=18">成年</p>
			<p v-show="age<18">未成年</p>
			
			<p v-if="age>=18">成年</p>
			<p v-if="age<18">未成年</p>
			
			<hr>
			<p v-if="salary<=10">普通阶层</p>
			<p v-else-if="salary<=500">中产阶层</p>
			<p v-else="salary>500">富豪阶层</p>
			
			<hr> <!-- 类似java中foreach 循环，in后面就是集合，o代码每次遍历的当前值
				o,i o代表当前行内容，i代表当前索引值，注意顺序，Vue定死顺序
			 -->
			<p v-for="o in hobby">{
   {o}}</p>
			<p v-for="o,i in hobby">{
   {i}}-{
   {o}}</p>
			
			<hr>
			<button v-on:click="show">点我</button>
			<button v-on:click="show()">点我</button>
			<button @click="show()">点我</button>
			
			<hr>
			<!--  插值表达式不能用作属性，值未解析 -->
			<a href="{
     {site.url}}">{
   {site.name}}</a>
			<a href="site.url">{
   {site.name}}</a>
			
			<!-- v-bind指令，其后面的内容就不是普通字符串，而是vue变量 -->
			<a v-bind:href="site.url">{
   {site.name}}</a>
			<a :href="site.url">{
   {site.name}}</a>
			
			<!-- v-text指令它纯文本输出，v-html翻译html标签
				div.innerText，div.innerHTML
			 -->
			<p v-text="sysname"></p>
			<p v-html="sysname"></p>
			<br><br><br><br><br>
		</div>
	</body>
	<script>
		new Vue({
      
			el: "#app",
			data: {
      
				sysname: "<b>京淘</b>电商平台",
				age: 16,
				salary: 900,
				hobby: ["乒乓","爬山","唱歌"],
				site: {
      
					name: "java培优官网",
					url: "http://act.codeboy.com"
				}
			},
			methods:{
      
				show: function(){
      
					console.log("show method");
				}
			}
		});
	</script>
</html>

本文链接：https://blog.csdn.net/XQ_898878888/article/details/119296743

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

c语言表达式求解,C语言的基于栈实现的表达式求值-程序员宅基地

文章浏览阅读210次。一、目的理解中缀表达式求值的过程理解中缀转后缀表达式求值的过程掌握堆栈的应用二、问题描述缀表达式，其中包含括号，加减乘除，乘方等运算，利用中缀表达式，对表达式分析并求值入的中缀表达式转换为后缀形式，显示后缀形式，并通过后缀形式求值三、数据结构//运算符结构体typedef struct{char OPname; //存储运算符int inOP; //存储栈内级别int outOP; //存储栈外级..._c表达式求解堆栈

放弃Gitflow Workflow的原因——Gitflow Workflow（六）_gitflow的缺点-程序员宅基地

文章浏览阅读289次。放弃Gitflow Workflow的原因。经历过才会明白，原来我们不合适，哈哈~~_gitflow的缺点

如何在Linux命令行下发送和接收UDP数据包_nc 发包-程序员宅基地

文章浏览阅读3.6k次。众所周知，在传输层有两个常用的协议TCP和UDP，本文介绍在Linux命令行下，如何使用nc命令发送或接收UDP数据包，这些命令的用法对调试UDP通信程序将有所帮助。_nc 发包

科大讯飞年报出炉，2018每天赚148万元，53%是政府补助-程序员宅基地

文章浏览阅读2k次。A股AI第一股——科大讯飞，2018年报刚刚出炉。全年营收79.17亿元，毛利润39.61亿元，净利润5.42亿元，核心指标都在同比上涨。这是一份怎样的答卷？如果上述数据还不够具象，可以更直接换算一下：2018年全年，讯飞每天营收入账2169万元，净赚148万元。当然，净利润所得，还包含了讯飞的政府补助。2018年年报中，讯飞获得政府补助总额2.85亿元，占比净利52.5...

tinyMCE本地视频上传_tinymce上传视频-程序员宅基地

文章浏览阅读1.6w次，点赞4次，收藏21次。摘要期望：在tinyMCE富文本编辑器中将本地图片上传至服务器背景：vue tinyMCE^4.7.4步骤：1.在工具栏toolbar中显示视频图标 2.在弹出的媒体窗口中添加本地上传图标 3.视频上传服务器并将视频添加入编辑内容中 4.优化：a.显示上传状态文章示例代码地址：https://codepen...._tinymce上传视频

C语言例题-关键词提取_c语言查找关键词并输出-程序员宅基地

文章浏览阅读152次。请你先将单词全部转为小写，找出小写单词里面出现最多的一个单词视为关键词，如果这样的单词有多个，那么找出其中字典序最小的一个。比如a小于b，ah1x小于ahb，acb小于b。时间限制：C/C++ 1秒，其他语言2秒空间限制：C/C++ 64M，其他语言128M 输入描述：输入的第一行输入这堆单词的个数，每行一个长度不超过的字符串，代表一个单词。输出描述：一行输出一个字符串以及一个正整数，代表提取出的关键词，以及关键词出现的次数。输入例子： 4 B b c ad。输入例子： 3 b c ad。_c语言查找关键词并输出

随便推点

CentOS7.9基于Apache2.4+Php7.4+Mysql8.0+Agent2架构部署Zabbix6.0LTS 亲测验证完美通过方案_php7.4 mysql8-程序员宅基地

文章浏览阅读1.1k次，点赞22次，收藏15次。Zabbix 由 Alexei Vladishev 创建，目前由 Zabbix SIA 主导开发和支持。Zabbix 是一个企业级的开源分布式监控解决方案。Zabbix 是一款监控网络的众多参数以及服务器、虚拟机、应用程序、服务、数据库、网站、云等的健康和完整性的软件。Zabbix 使用灵活的通知机制，允许用户为几乎任何事件配置基于电子邮件的告警，以实现对服务器问题做出快速反应。Zabbix 基于存储的数据提供出色的报告和数据可视化功能。这使得 Zabbix 成为容量规划的理想选择。_php7.4 mysql8

2023年的深度学习入门指南(21) - 百川大模型_百川大模型怎么使用-程序员宅基地

文章浏览阅读2.9k次，点赞3次，收藏25次。前面我们用了三节的篇幅介绍了目前最强大的开源模型LLaMA2。这一节我们说一说国产大模型的一个代表，百川大模型。_百川大模型怎么使用

C/C++高级语言程序设计课程设计任务书[2022-01-02]_题目四、医院预约系统(难度系数**) 模拟微信公众号“美丽厦门智慧健康”,用c语言-程序员宅基地

文章浏览阅读466次。高级语言程序设计课程设计任务书课程设计名称中文：高级语言程序设计课程设计英文：Computer Programming Basic Comprehensive Practice适用专业网络22 培养层次本科学期第1学期周数 1.5 学分 1 总学时 1.5周一、课程设计目的与要求课程设计目的在理论学习和基础实验的基础上，开发规模较大的程序，掌握应用计算机解决实际问题的基本方法，熟悉C程序开发的全过程。_题目四、医院预约系统(难度系数**) 模拟微信公众号“美丽厦门智慧健康”,用c语言