前端(四)移动端js事件、bootstrap-学习笔记整理

卢志强

2023-12-01

移动端js事件

移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件：

touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，比较少用

移动端一般有三种操作，点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的4个事件一般很少单独使用，一般是封装使用来实现这三种操作，可以使用封装成熟的js库。

zeptojs

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。Zepto的一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的类似jquery的js库。
zepto官网
 zepto中文api
zepto包含很多模块，默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块，如果还需要其他的模块，可以自定义构建。
zepto自定义构建地址

swiper

swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。 swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器(IE7)，3.x放弃支持低版本浏览器，适合应用在移动端。
2.x版本中文网址
 3.x版本中文网地址
swiper使用方法

<script type="text/javascript" src="js/swiper.min.js"></script>

<!--
  如果页面引用了jquery或者zepto，就引用 swiper.jquery.min.js,它的容量比swiper.min.js大

  <script src="path/to/swiper.jquery.min.js"></script>
-->

......

<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
......

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script> 
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
  prevButton: '.swiper-button-prev',
  nextButton: '.swiper-button-next',
    initialSlide :1,
  paginationClickable: true,
  loop: true,
  autoplay:3000,
  autoplayDisableOnInteraction:false
});
</script>

swiper使用参数

initialSlide：初始索引值，从0开始
direction：滑动方向 horizontal | vertical
speed：滑动速度，单位ms
autoplay：设置自动播放及播放时间
autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放
pagination：分页圆点
paginationClickable：分页圆点是否点击
prevButton：上一页箭头
nextButton：下一页箭头
loop：是否首尾衔接

案例：swiper制作天天生鲜移动端幻灯片

<!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">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script type="text/javascript" src="js/set_root.js"></script>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/swiper.jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var swiper = new Swiper('.swiper-container', {
					  pagination: '.swiper-pagination',
					  prevButton: '.swiper-button-prev',
					  nextButton: '.swiper-button-next',
					  // 初始的幻灯片是第几张
					  initialSlide :0,

					 // 小圆点是否可点击
					  paginationClickable: false,

					  //是否连续播放(设置false会在最后一张返回)
					  loop: true,

					  // 设置多长时间间隔播放一张
					  autoplay:3000,

					  // 用户操作后还是否自动播放
					  autoplayDisableOnInteraction:true
				})
		});

	</script>
	<title>天天生鲜-首页</title>
</head>
<body>
	<div class="main_wrap">
		<div class="header clearfix">
			<a href="#" class="logo"><img src="images/logo.png" alt="天天生鲜logo"></a>
			<a href="#" class="search"></a>
		</div>
		<div class="center_con">
			<div class="slide">

				<div class="swiper-container">
				  <div class="swiper-wrapper">
				    <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>
				    <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>
				    <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>
				  </div>
				    <div class="swiper-pagination"></div>
				   <div class="swiper-button-prev"></div>
				   <div class="swiper-button-next"></div>
				</div>

			</div>

			<!-- ul.menu>(li>a+h2{水果})*8 -->
			<div class="menu_con clearfix">
				<ul class="menu">
					<li>
						<a href="#"></a>
						<h2>水果</h2>
					</li>
					<li>
						<a href="#"></a>
						<h2>水果</h2>
					</li>
					<li>
						<a href="#"></a>
						<h2>水果</h2>
					</li>
					<li>
						<a href="#"></a>
						<h2>水果</h2>
					</li>
					<li>
						<a href="#"></a>
						<h2>水果</h2>
					</li>
					<li>
						<a href="#"></a>
						<h2>水果</h2>
					</li>
					<li>
						<a href="#"></a>
						<h2>水果</h2>
					</li>
					<li>
						<a href="#"></a>
						<h2>水果</h2>
					</li>
				</ul>
			</div>
			
			
			<div class="common_model clearfix">
				
				<div class="common_title">
					<h3>新鲜水果</h3>
					<a href="#">更多 &gt;</a>
				</div>

				<a href="#" class="banner"><img src="images/banner.jpg" alt="banner"></a>

				<ul class="goods_list">
					<li>
						<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
						<h4>新西兰皇家大红苹果</h4>						
						<p class="unit">12/提</p>
						<p class="price">¥68.00</p>
						<a href="#" class="add_chart"></a>
					</li>
					<li>
						<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
						<h4>新西兰皇家大红苹果</h4>						
						<p class="unit">12/提</p>
						<p class="price">¥68.00</p>
						<a href="#" class="add_chart"></a>
					</li>
					<li>
						<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
						<h4>新西兰皇家大红苹果</h4>						
						<p class="unit">12/提</p>
						<p class="price">¥68.00</p>
						<a href="#" class="add_chart"></a>
					</li>
				</ul>
			</div>

			<div class="common_model clearfix">
				
				<div class="common_title">
					<h3>新鲜水果</h3>
					<a href="#">更多 &gt;</a>
				</div>

				<a href="#" class="banner"><img src="images/banner.jpg" alt="banner"></a>

				<ul class="goods_list">
					<li>
						<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
						<h4>新西兰皇家大红苹果</h4>						
						<p class="unit">12/提</p>
						<p class="price">¥68.00</p>
						<a href="#" class="add_chart"></a>
					</li>
					<li>
						<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
						<h4>新西兰皇家大红苹果</h4>						
						<p class="unit">12/提</p>
						<p class="price">¥68.00</p>
						<a href="#" class="add_chart"></a>
					</li>
					<li>
						<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
						<h4>新西兰皇家大红苹果</h4>						
						<p class="unit">12/提</p>
						<p class="price">¥68.00</p>
						<a href="#" class="add_chart"></a>
					</li>
				</ul>
			</div>


		</div>


		
		<ul class="footer">
			<li>
				<a href=""></a>
				<h2>首页</h2>
			</li>
			<li>
				<a href=""></a>
				<h2>首页</h2>
			</li>
			<li>
				<a href=""></a>
				<h2>首页</h2>
			</li>
			<li>
				<a href=""></a>
				<h2>首页</h2>
			</li>
		</ul>
		


	</div>



</body>
</html>

bootstrap

Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。移动优先，响应式布局开发。
bootstrap中文网址

bootstrap 容器

container-fluid 流体
container
- 1170
- 970
- 750
- 100%

bootstrap响应式查询区间

大于等于768
大于等于992
大于等于1200

bootstrap 栅格系统

bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统

col-lg- 大于1200排成一行，小于1200分别占一行
col-md- 大于992排成一行，小于1200分别占一行
col-sm- 大于768排成一行，小于992分别占一行
col-xs- 始终排列成一行

<!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">
	<title>bootstrp栅格系统</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<style>
		/*E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”*/
		div[class*="col-"]{
			height:50px;
			background-color: gold;
			border:1px solid #000;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>栅格系统</h1>
	</div>
	<div class="container">
		<div class="row">
			<!-- bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类 -->
			<div class="col-lg-3">col-lg-3</div>  
			<div class="col-lg-4">col-lg-4</div>
			<div class="col-lg-2">col-lg-2</div>
			<div class="col-lg-3">col-lg-3</div>
			<br>
			<br>
			<br>
			<div class="col-md-4">col-md-4</div>  
			<div class="col-md-4">col-md-4</div>
			<div class="col-md-4">col-md-4</div>
			<br>
			<br>
			<br>
			<div class="col-sm-3">col-sm-3</div>  
			<div class="col-sm-3">col-sm-3</div>
			<div class="col-sm-3">col-sm-3</div>
			<div class="col-sm-3">col-sm-3</div>
			<br>
			<br>
			<br>
			<div class="col-xs-5">col-xs-5</div>  
			<div class="col-xs-3">col-xs-3</div>
			<div class="col-xs-2">col-xs-2</div>
			<div class="col-xs-2">col-xs-2</div>
		</div>
	</div>
</body>
</html>

列偏移

col-lg-offset-
col-md-offset-
col-sm-offset-
col-xs-offset-

<!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">
	<title>栅格偏移</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<style>
		/*E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”*/
		div[class*="col-"]{
			background-color: gold;
			border:1px solid #000;
			height:50px;
		}
		
	</style>
</head>
<body>
	<div class="container">
		<h1>栅格偏移</h1>
		<!-- 
		1、col-lg-offset-
		2、col-md-offset-
		3、col-sm-offset-
		4、col-xs-offset- -->
	</div>
	<div class="container">
		<div class="row">
			<!-- 栅格左右的间隔一样的时候可以实现居中 -->
			<div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">col-lg-5</div>
			<div class="col-lg-5">col-lg-5</div>	
		</div>
		<br>
		<br>
		<div class="row"> 
			<div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1">col-lg-4</div>
			<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">col-lg-4</div>
		</div>
	</div>
</body>
</html>

bootstrap 隐藏类

hidden-xs
hidden-sm
hidden-md
hidden-lg

<!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">
	<title>栅格隐藏</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<style>
		/*E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”*/
		div[class*="col-"]{
			background-color: gold;
			border:1px solid #000;
			height:50px;
		}
		
	</style>
</head>
<body>
	<div class="container">
		<h1>栅格隐藏</h1>
		<!-- 
		1、hidden-xs
		2、hidden-sm
		3、hidden-md
		4、hidden-lg -->
	</div>
	<div class="container">
		<div class="row">
			<div class="col-lg-3 col-md-4 col-sm-6">1</div>
			<div class="col-lg-3 col-md-4 col-sm-6">2</div>
			<div class="col-lg-3 col-md-4 col-sm-6">3</div>
			<div class="col-lg-3 col-md-4 hidden-md col-sm-6 hidde-xs">4</div>
		</div>
	</div>
	<div class="container">
	<div class="row">
	<table class="table table-striped">
      <caption>Optional table caption.</caption>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
    </div>

    </div>
</body>
</html>

bootstrap 按钮

btn 声明按钮
btn-default 默认按钮样式
btn-primay
btn-success
btn-info
btn-warning
btn-danger
btn-link
btn-lg
btn-md
btn-xs
btn-block 宽度是父级宽100%的按钮
active
disabled
btn-group 定义按钮组

<!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">
	<title>按钮</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<div class="row">
			<h2>按钮</h2>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<input type="button" value="按钮1" class="btn btn-primary">
			<a href="#" class="btn btn-success">a标签按钮1</a>
			<a href="#" class="btn btn-info">a标签按钮2</a>
			<a href="#" class="btn btn-warning">a标签按钮3</a>
			<a href="#" class="btn btn-danger">a标签按钮4</a>
			<a href="#" class="btn btn-link">a标签按钮5</a>
			<a href="#" class="btn btn-danger active">a标签按钮6</a>
			<a href="#" class="btn btn-link disabled">a标签按钮7</a>

		</div> 
		<br>
		<br>
		<div class="row">
			<a href="#" class="btn btn-success btn-lg">大按钮</a>
			<a href="#" class="btn btn-info btn-md">中等按钮</a>
			<a href="#" class="btn btn-warning btn-xs">小按钮</a>
			<a href="#" class="btn btn-danger btn">一般按钮</a>
		</div> 
		<br>
		<br>
		<div class="row">
			<a href="#" class="btn btn-primary btn-block">宽度100%按钮</a>
		</div> 
		<br>
		<br>
		<div class="row">
			<div class="btn-group">
				<a href="#" class="btn btn-primary">步骤一</a>
				<a href="#" class="btn btn-default">步骤二</a>
				<a href="#" class="btn btn-default">步骤三</a>
			</div>
			
		</div> 
		<br>
		<br>
		<div class="row">
			<div class="btn-group btn-group-justified">
				<a href="#" class="btn btn-primary">步骤一</a>
				<a href="#" class="btn btn-default">步骤二</a>
				<a href="#" class="btn btn-default">步骤三</a>
			</div>
			
		</div> 
		<br>
		<br>
		<div class="row">
			<!-- input标签做按钮组时候,不能直接加btn-group-justified,必须每一个按钮再包一层btn-group -->
			<div class="btn-group btn-group-justified">
				<div class="btn-group">
					<input type="button" name="" value="按钮一" class="btn btn-primary">
				</div>
				<div class="btn-group">
					<input type="button" name="" value="按钮二" class="btn btn-warning">
				</div>
			    <div class="btn-group">
			    	<input type="button" name="" value="按钮三" class="btn btn-danger">
			    </div>		
			</div>
		</div> 
	</div>
</body>
</html>

bootstrap 表单

form 声明一个表单域
form-inline 内联表单域
form-horizontal 水平排列表单域
form-group 表单组、包括表单文字和表单控件
form-control 文本输入框、下拉列表控件样式
checkbox checkbox-inline 多选框样式
radio radio-inline 单选框样式
input-group 表单控件组
input-group-addon 表单控件组物件样式
input-group-btn 表单控件组物件为按钮的样式
form-group-lg 大尺寸表单
form-group-sm 小尺寸表单

bootstrap 字体图标

通过字体代替图标，font文件夹需要和css文件夹在同一目录

<!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">
	<title>表单</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<style>
		/*字体图标使用看似文字对待*/
		.glyphicon-heart{
			font-size:16px;
			color:red;
		}
	</style>
	
</head>
<body>
	<div class="container">
		<div class="row">
			<h2>表单</h2>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<form>
				<div class="form-group">
					<!-- for属性为点击id属性的内容激活input -->
					<label for="input01">用户名:</label>
					<input type="text" class="form-control" id="input01" placeholder="username">
				</div>
				<div class="form-group">
					<label for="pwd">密码:</label>
					<input type="password" class="form-control" id="pwd" placeholder="password">
				</div>
			</form>
			<br>
			<br>
			<!-- form-inline内联表单 -->
			<form class="form-inline">
				<div class="form-group">
					<!-- for属性为点击id属性的内容激活input -->
					<label for="input02">用户名:</label>
					<input type="text" class="form-control" id="input02" placeholder="username">
				</div>
				<div class="form-group">
					<label for="pwd02">密码:</label>
					<input type="password" class="form-control" id="pwd02" placeholder="password">
				</div>
			</form>
			<br>
			<br>
			<!-- form-horizontal水平排列,需要和栅格配合,input需要用div包起来 -->
			<form class="form-horizontal">
				<div class="form-group">
					<label for="input03" class="col-xs-2">用户名:</label>
					<div class="col-xs-10">
						<input type="text" class="form-control" id="input03" placeholder="username">
					</div>
				</div>

				<div class="form-group">
					<label for="pwd03" class="col-xs-2">密码:</label>
					<div class="col-xs-10">
						<input type="password" class="form-control col-xs-10" id="pwd03" placeholder="password">
					</div>	
				</div>
				<div class="form-group form-group-sm">
					<label for="input03" class="col-xs-2">小尺寸用户名:</label>
					<div class="col-xs-10">
						<input type="text" class="form-control" id="input03" placeholder="username">
					</div>
				</div>
				<div class="form-group form-group-lg">
					<label for="pwd03" class="col-xs-2">大尺寸密码:</label>
					<div class="col-xs-10">
						<input type="password" class="form-control col-xs-10" id="pwd03" placeholder="password">
					</div>	
				</div>
			</form>
			<!-- 表单控件组 -->
			<form>
				<!-- 提示 -->
				<div class="input-group">
					<span class="input-group-addon">@</span>
				 	<input type="text" class="form-control" placeholder="tips"> 
				</div>
				<br>
				<br>
				<!-- 按钮 -->
				<div class="input-group">
				 	<input type="text" class="form-control" placeholder="search"> 
				 	<span class="input-group-btn">
				 		<button class="btn btn-default" type="button">search</button>
				 	</span>
				</div>
				<br>
				<br>
				<!-- 文字图标 需要用span标签包起来-->
				<div class="input-group">
				 	<input type="text" class="form-control" placeholder="search"> 
				 	<span class="input-group-btn">
				 		<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span></button>
				 	</span>
				</div>
			</form>
			
		</div>
	</div>
</body>
</html>

bootstrap 导航条

navbar 声明导航条
navbar-default 声明默认的导航条样式 //灰色
navbar-inverse 声明反白的导航条样式 //黑色
navbar-static-top 去掉导航条的圆角
navbar-fixed-top 固定到顶部的导航条
navbar-fixed-bottom 固定到底部的导航条
navbar-header 申明logo的容器
navbar-brand 针对logo等固定内容的样式
nav navbar-nav 定义导航条中的菜单
navbar-form 定义导航条中的表单
navbar-btn 定义导航条中的按钮
navbar-text 定义导航条中的文本
navbar-left 菜单靠左
navbar-right 菜单靠右

<!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">
	<title>导航条</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<style>
		/*字体图标使用看似文字对待*/
		.glyphicon-heart{
			font-size:16px;
			color:red;
		}
	</style>
	
</head>
<body>
	<div class="navbar navbar-inverse navbar-staitc-top">
		<div class="container">
			<!-- 定义头部logo -->
			<div class="navbar-header">
				<!-- 菜单大小尺寸切换 -->
				<button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
					<!-- ——小横线 -->
					<span class="icon-bar"></span> 
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>

				<a href="#" class="navbar-brand">LOGO</a>
			</div>
			<!-- 页面缩小后，隐藏菜单 -->
			<div class="collapse navbar-collapse" id="mymenu">
					<!-- 定义菜单 -->
				<ul class="nav navbar-nav">
					<li class="active">
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">公司简介</a>
					</li>
					<li>
						<a href="#">解决方案</a>
					</li>
				</ul>
				<!-- 定义菜单里面的表单 -->
				<form class="navbar-form navbar-right">
					<div class="form-group">
						<div class="input-group">
							<input type="text" class="form-control">
							<span class="input-group-btn">
								<button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
							</span>
						</div>
					</div>
				</form>	
			</div>
			<!-- 路径导航 -->
			<ol class="breadcrumb">
			  <li><a href="#">Home</a></li>
			  <li><a href="#">Library</a></li>
			  <li class="active">Data</li>
			</ol>
		</div>
	</div>
	<!-- 巨幕 -->
	<div class="jumbotron">
	  <div class="container">
	    ...
	  </div>
	</div>
</body>
</html>

路径导航

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>路径导航</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<ol class="breadcrumb">
			  <li><a href="#">首页</a></li>
			  <li><a href="#">产品列表</a></li>
			  <li class="active">水果</li>
			</ol>

			<div class="dropdown">
		        <div class="btn btn-primary  dropdown-toggle" data-toggle="dropdown">
		            下拉菜单
		            <span class="caret"></span>
		        </div>
		        <ul class="dropdown-menu">
		            <li><a href="#">菜单一</a></li>
		            <li><a href="#">菜单二</a></li>
		            <li><a href="#">菜单三</a></li>
		        </ul>
		    </div>
		</div>
	</div>
</body>
</html>

巨幕

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

bootstrap 模态框

modal 声明一个模态框
modal-dialog 定义模态框尺寸
modal-lg 定义大尺寸模态框
modal-sm 定义小尺寸模态框
modal-header
modal-body
modal-footer

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模态框即弹框</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script>
		$(function(){
			$("#btn01").click(function(){
				// $("#modal04").modal("show");
				//设置modal参数，实现点击空白处无法关闭弹框
				$("#modal04").modal({
					show:true,
					backdrop:"static"
				});
			})
			$("#shutoff").click(function(){
				$("#modal04").modal("hide");
			})
		})
	</script>
</head>
<body>
	<div class="container">
		<div class="row">
			<button class="btn btn-primary" data-toggle = "modal" data-target="#modal01">弹出模态框</button>
			<button class="btn btn-primary" data-toggle = "modal" data-target="#modal02">弹出大号模态框</button>
			<button class="btn btn-primary" data-toggle = "modal" data-target="#modal03">弹出小号模态框</button>
			<button class="btn btn-primary" id="btn01">js控制的弹框</button>

		</div>
	</div>
	<!-- .modal>.modal-dialog>.modal-content>(.modal-header+.modal-body+.modal-footer) -->
		<!-- 
		1、modal 声明一个模态框
		2、modal-dialog 定义模态框尺寸
		3、modal-lg 定义大尺寸模态框
		4、modal-sm 定义小尺寸模态框
		5、modal-header
		6、modal-body
		7、modal-footer -->
	<div class="modal fade" id="modal01">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					提示弹框
				</div>
				<div class="modal-body">
					<p>弹框内文字内容</p>
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary">确定</button>
					<button class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>
	<br>
	<br>
	<div class="modal fade" id="modal02">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					提示弹框
				</div>
				<div class="modal-body">
					<p>弹框内文字内容</p>
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary">确定</button>
					<button class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>
	<br>
	<br>
	<div class="modal fade" id="modal03">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					提示弹框
				</div>
				<div class="modal-body">
					<p>弹框内文字内容</p>
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary">确定</button>
					<button class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="modal04">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					js控制的弹框
				</div>
				<div class="modal-body">
					<p>弹框内文字内容</p>
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary" >确定</button>
					<button class="btn btn-default" id="shutoff">取消</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

bootstrap 下拉菜单

dropdown-toggle
dropdown-menu

案例：bootstrap 制作水果节活动首页
文件目录

│  index.html
│
├─css
│      bootstrap.min.css
│      index.css
│
├─fonts
│      glyphicons-halflings-regular.eot
│      glyphicons-halflings-regular.svg
│      glyphicons-halflings-regular.ttf
│      glyphicons-halflings-regular.woff
│
├─images
│      001.png
│      active01.jpg
│      active02.jpg
│      active03.jpg
│      active04.jpg
│      banner_bg.jpg
│      banner_title.png
│      basket.png
│      goods.jpg
│      location_bg.jpg
│      logo.png
│      水果节效果图.psd
│
└─js
        bootstrap.min.js
        jquery-1.12.4.min.js

index.html

<!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">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<title>天天生鲜-水果节</title>
</head>
<body>
	<div class="navbar navbar-inverse navbar-static-top">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
					 <span class="icon-bar"></span>
					 <span class="icon-bar"></span>
					 <span class="icon-bar"></span>
				</button>
				<a href="#" class="navbar-brand"><img src="images/logo.png" alt="天天生鲜logo"></a>
			</div>
			<div class="collapse navbar-collapse" id="mymenu">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">首页</a></li>
					<li><a href="#">推荐商品</a></li>
					<li><a href="#">手机生鲜</a></li>
					<li><a href="#">抽奖</a></li>				           
				</ul>
				<form class="navbar-form navbar-right">
					<div class="form-group">
						<div class="input-group">
							<input type="text" name="" class="form-control" placeholder="请输入搜索内容">
							<span class="input-group-btn">
								<button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
							</span>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>


	<div class="jumbotron">
	  <div class="container">
	    <div class="row">
			<div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">
				<img src="images/banner_title.png" alt="banner标题" class="banner_pic_title img-responsive">
				<h2 class="banner_title">水果节介绍</h2>
				<p class="banner_detail">天天生鲜将在北京、天津、上海、南京、苏州、杭州、成都、武汉8座核心城市同期推出北京水果专场，借助天天生鲜产地端到用户端的渠道，果品流转效率得以大大提高。依托天天生鲜的渠道优势，首届果节做到了高质低价。</p>
			</div>

			<div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 hidden-sm hidden-xs">
				<img src="images/basket.png" alt="水果篮" class="img-responsive">
			</div>
	    </div>
	  </div>
	</div>


	<div class="container">
		<h3 class="active_title text-center">活动图片</h3>
		<p class="active_detail text-center">天天生鲜产地直采的果品甚至可以追溯到种植者和生产的地块儿。确定具体采摘地块儿后，在适合的时间将水果采摘下来后，直接在地头包装成箱，根据订单分装运到各个分仓，然后由配送员送到用户手中。以下是本次活动相关的图片</p>
	</div>


	<div class="container pic_list">
		<div class="row">
			<div class="col-lg-3 col-md-3 col-sm-6">
				<div class="thumbnail">
				<img src="images/active01.jpg" alt="活动图片" class="img-responsive">
				<h4>活动的标题</h4>
				</div>
			</div>

			<div class="col-lg-3 col-md-3 col-sm-6">
				<div class="thumbnail">
				<img src="images/active02.jpg" alt="活动图片" class="img-responsive">
				<h4>活动的标题</h4>
				</div>
			</div>

			<div class="col-lg-3 col-md-3 col-sm-6">
				<div class="thumbnail">
				<img src="images/active03.jpg" alt="活动图片" class="img-responsive">
				<h4>活动的标题</h4>
				</div>
			</div>

			<div class="col-lg-3 col-md-3 col-sm-6">
				<div class="thumbnail">
				<img src="images/active04.jpg" alt="活动图片" class="img-responsive">
				<h4>活动的标题</h4>
				</div>
			</div>
		</div>
	</div>
	

	<div class="container">
		<div class="row common_title">
			<h3 class="pull-left">推荐商品</h3>
			<a href="#" class="pull-right">更多 &gt;&gt;</a>
		</div>
	</div>


	<div class="container goods_list">
		<div class="row">
			<div class="col-lg-2">
				<div class="thumbnail">
					<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
					<h4>进口草莓</h4>
					<p>¥ <em>25.00</em>/500g</p>
				</div>
			</div>
			<div class="col-lg-2">
				<div class="thumbnail">
					<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
					<h4>进口草莓</h4>
					<p>¥ <em>25.00</em>/500g</p>
				</div>
			</div>
			<div class="col-lg-2">
				<div class="thumbnail">
					<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
					<h4>进口草莓</h4>
					<p>¥ <em>25.00</em>/500g</p>
				</div>
			</div>
			<div class="col-lg-2">
				<div class="thumbnail">
					<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
					<h4>进口草莓</h4>
					<p>¥ <em>25.00</em>/500g</p>
				</div>
			</div>
			<div class="col-lg-2">
				<div class="thumbnail">
					<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
					<h4>进口草莓</h4>
					<p>¥ <em>25.00</em>/500g</p>
				</div>
			</div>
			<div class="col-lg-2">
				<div class="thumbnail">
					<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
					<h4>进口草莓</h4>
					<p>¥ <em>25.00</em>/500g</p>
				</div>
			</div>
			<div class="col-lg-2">
				<div class="thumbnail">
					<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
					<h4>进口草莓</h4>
					<p>¥ <em>25.00</em>/500g</p>
				</div>
			</div>
			<div class="col-lg-2">
				<div class="thumbnail">
					<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
					<h4>进口草莓</h4>
					<p>¥ <em>25.00</em>/500g</p>
				</div>
			</div>
			<div class="col-lg-2">
				<div class="thumbnail">
					<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
					<h4>进口草莓</h4>
					<p>¥ <em>25.00</em>/500g</p>
				</div>
			</div>
			<div class="col-lg-2">
				<div class="thumbnail">
					<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
					<h4>进口草莓</h4>
					<p>¥ <em>25.00</em>/500g</p>
				</div>
			</div>


		</div>
	</div>


	<div class="container-fluid footer">
		<div class="links">
		<a href="#">关于我们</a>
		<span>|</span>  
		<a href="#">联系我们</a> 
		<span>|</span> 
		<a href="#">招聘人才</a>  
		<span>|</span> 
		<a href="#">友情链接</a></div>
<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
<p>电话：010-****888    京ICP备*******8号</p>
</div>
</body>
</html>

main.css

.navbar-brand{
	padding:5px 15px;
}
.navbar-inverse {
    background-color: #ff722b;
    border-color: #ff722b;
}
.navbar-inverse .navbar-nav>li>a {
    color: #fff;
}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>.active>a:focus {
    color: #fff;
    background-color: #db6226;
}
.navbar-inverse .navbar-toggle {
    border-color: #fff;
}
.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus {
    background-color: #db6226
}
.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form {
    border-color: #fff
}

.navbar{
	margin-bottom:0;
}

.jumbotron{
	background:url(../images/banner_bg.jpg) center center no-repeat;
	padding:24px 0;
	margin-bottom:0;
}


.banner_title{
	font-size:18px;
	color:#ffff00;
}

.jumbotron .banner_detail{
	font-size:14px;
	color:#fff;
	line-height:28px;
}

.banner_pic_title{
	margin-top:46px;
}


@media (max-width:1200px){
	.banner_pic_title{
		margin-top:20px;
	}

}


@media (max-width:992px){
	.banner_pic_title{
		margin-top:10px;
	}

}

.active_title{
	margin-top:30px;
	font-size:30px;
	color:#333;
}

.active_detail{
	font-size:14px;
	color:#333;
	line-height:21px;
	margin-top:20px;
}

.pic_list{
	margin-top:10px;
}

.pic_list h4{
	font-size:15px;
	color:#333;
	text-align:center;
}

.pic_list .thumbnail{
	max-width:260px;
	margin:0 auto 20px;
}

.common_title{
	background-color:#ff722b;
	margin:0;
	height:40px;
}

.common_title h3{
	font-size:16px;
	color:#fff;
	line-height:40px;
	margin:0;
	text-indent:10px;
}

.common_title a{
	font-size:12px;
	color:#fff;
	margin:20px 10px 0 0;
}

.goods_list{
	margin-top:20px;
}

.goods_list .col-lg-2{
	width:20%;
}

.goods_list h4{
	text-align:center;
	font-size:14px;
	color:#666;
}

.goods_list p{
	text-align:center;
	color:#ff0000;
	font-size:16px;
}

.goods_list p em{
	font-size:22px;
	font-style:normal;
}

.goods_list .thumbnail{
	max-width:260px;
	margin:0 auto 20px;
}


@media (max-width:1200px){

	.goods_list .col-lg-2{
		width:25%;
		float:left;
	}

}


@media (max-width:992px){

	.goods_list .col-lg-2{
		width:50%;
		float:left;
	}

}

@media (max-width:768px){

	.goods_list .col-lg-2{
		width:100%;
		float:left;
	}

}


.footer{
	background-color:#ff722b;
	padding-bottom:20px;
}

.footer .links{
	text-align:center;
	margin-top:35px;
}

.footer .links a{
	color:#fff;
}

.footer .links span{
	color:#fff;
	padding:0 10px;
}

.footer p{
	text-align:center;
	margin:10px 0;
	color:#fff;
}

正则表达式

正则默认规则
匹配成功就结束，不会继续匹配，区分大小写
正则表达式的写法

var re=new RegExp('规则', '可选参数');
var re=/规则/参数;

规则中的字符
普通字符匹配
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’

转义字符匹配

\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>正则表达式</title>
	<script>
		/*var re=new RegExp('规则', '可选参数');
		var re=/规则/参数;*/
		var re01 = new RegExp("a","i");  //匹配a,忽略大小写
		//等同于
		var re02 = /a/i;
		var re03 = /\d/; //匹配一个数字
		var re04 = /\d+/;  //匹配多个数字  +为至少一个
		var re05 = /^\d+$/;  //匹配以数字开头并结尾的任意多个,即全数字

		var sTr01 = "abcdefg";
		var sTr02 = "cdefgh";
		var sTr03 = "abcd1234";
		var sTr04 = "12314";
		var sTr05 = "1asv5";
/*		alert(re02.test(sTr01));   //true
		alert(re02.test(sTr02)); //false
		alert(re03.test(sTr03));  //true
		alert(re04.test(sTr03)); //true*/
		alert(re05.test(sTr04)); //true
		alert(re05.test(sTr05));  //false

	</script>
</head>
<body>
	  
</body>
</html>

量词：对左边的匹配字符定义个数

? 出现零次或一次（最多出现一次）
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次

任意一个或者范围

[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符

限制开头结尾

^ 以紧挨的元素开头
$ 以紧挨的元素结尾

修饰参数

g： global，全文搜索，默认搜索到第一个结果接停止
i： ingore case，忽略大小写，默认大小写敏感

常用函数

test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假
replace
用法：字符串.replace(正则，新的字符串) 匹配成功的字符去替换新的字符

常用正则规则

//用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;

//邮箱验证：  
//以1个数字或a-z的字母开头，后续为数字字母下划线或.或-任意多个@一个或者多个字母/数字/-，以.2-5位的字母组合整体一到2个（如.com.cn）结尾，以上不区分大小写      
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;

//密码验证：以数字字母下划线及!@#$%^&*开头结尾的6-20位组合
var rePass = /^[\w!@#$%^&*]{6,20}$/;

//手机号码验证：开头为1，并13/14/15/18 + 9位数字组合
var rePhone = /^1[3458]\d{9}$/;

案例：注册页面表单验证
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-注册</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/register.js"></script>
</head>
<body>
	<div class="register_con">
		<div class="l_con fl">
			<a class="reg_logo"><img src="images/logo02.png"></a>
			<div class="reg_slogan">足不出户  ·  新鲜每一天</div>
			<div class="reg_banner"></div>
		</div>

		<div class="r_con fr">
			<div class="reg_title clearfix">
				<h1>用户注册</h1>
				<a href="#">登录</a>
			</div>
			<div class="reg_form clearfix">
				<form>
				<ul>
					<li>
						<label>用户名:</label>
						<input type="text" name="user_name" id="user_name">
						<span class="error_tip">提示信息</span>
					</li>					
					<li>
						<label>密码:</label>
						<input type="password" name="pwd" id="pwd">
						<span class="error_tip">提示信息</span>
					</li>
					<li>
						<label>确认密码:</label>
						<input type="password" name="cpwd" id="cpwd">
						<span class="error_tip">提示信息</span>
					</li>
					<li>
						<label>邮箱:</label>
						<input type="text" name="email" id="email">
						<span class="error_tip">提示信息</span>
					</li>
					<li class="agreement">
						<input type="checkbox" name="allow" id="allow" checked="checked">
						<label>同意”天天生鲜用户使用协议“</label>
						<span class="error_tip2">提示信息</span>
					</li>
					<li class="reg_sub">
						<input type="submit" value="注 册" name="">
					</li>
				</ul>				
				</form>
			</div>

		</div>

	</div>

	<div class="footer no-mp">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	
</body>
</html>

$(function(){

	var error_name = false;
	var error_password = false;
	var error_check_password = false;
	var error_email = false;
	var error_check = false;


	$('#user_name').blur(function() {
		check_user_name();
	});

	$('#user_name').focus(function() {
		$(this).next().hide();
	});


	$('#pwd').blur(function() {
		check_pwd();
	});

	$('#pwd').focus(function() {
		$(this).next().hide();
	});

	$('#cpwd').blur(function() {
		check_cpwd();
	});

	$('#cpwd').focus(function() {
		$(this).next().hide();
	});

	$('#email').blur(function() {
		check_email();
	});

	$('#email').focus(function() {
		$(this).next().hide();
	});

	$('#allow').click(function() {
		if($(this).is(':checked'))
		{
			error_check = false;
			$(this).siblings('span').hide();
		}
		else
		{
			error_check = true;
			$(this).siblings('span').html('请勾选同意');
			$(this).siblings('span').show();
		}
	});


	function check_user_name(){
		//数字字母或下划线
		var reg = /^\w{6,15}$/;
		var val = $('#user_name').val();

		if(val==''){
			$('#user_name').next().html('用户名不能为空！')
			$('#user_name').next().show();
			error_name = true;
			return;
		}

		if(reg.test(val))
		{
			$('#user_name').next().hide();
			error_name = false;
		}
		else
		{
			$('#user_name').next().html('用户名是5到15个英文或数字，还可包含“_”')
			$('#user_name').next().show();
			error_name = true;
		}

	}


	function check_pwd(){
		var reg = /^[\w@!#$%&^*]{6,15}$/;
		var val = $('#pwd').val();

		if(val==''){
			$('#pwd').next().html('密码不能为空！')
			$('#pwd').next().show();
			error_password = true;
			return;
		}

		if(reg.test(val))
		{
			$('#pwd').next().hide();
			error_password = false;
		}
		else
		{
			$('#pwd').next().html('密码是6到15位字母、数字，还可包含@!#$%^&*字符')
			$('#pwd').next().show();
			error_password = true;
		}		
	}


	function check_cpwd(){
		var pass = $('#pwd').val();
		var cpass = $('#cpwd').val();

		if(pass!=cpass)
		{
			$('#cpwd').next().html('两次输入的密码不一致')
			$('#cpwd').next().show();
			error_check_password = true;
		}
		else
		{
			$('#cpwd').next().hide();
			error_check_password = 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('邮箱不能为空！')
			$('#email').next().show();
			error_email = true;
			return;
		}

		if(re.test(val))
		{
			$('#email').next().hide();
			error_email = false;
		}
		else
		{
			$('#email').next().html('你输入的邮箱格式不正确')
			$('#email').next().show();
			error_email = true;
		}

	}


	$('.reg_form').submit(function() {

		check_user_name();
		check_pwd();
		check_cpwd();
		check_email();

		if(error_name == false && error_password == false && error_check_password == false && error_email == false && error_check == false)
		{
			return true;
		}
		else
		{
			return false;
		}

	});

})

前端性能优化

从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，所有前端性能优化很重要。
前端性能优化分为如下几个方面：

代码部署：

代码的压缩与合并
图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。
使用内容分发网络 CDN
为文件设置Last-Modified、Expires和Etag
使用GZIP压缩传送
权衡DNS查找次数(使用不同域名会增加DNS查找)
避免不必要的重定向(加"/")

编码

html

使用结构清晰，简单，语义化标签
避免空的src和href
不要在HTML中缩放图片

css

精简css选择器
把CSS放到顶部
避免@import方式引入样式
css中使用base64图片数据取代图片文件，减少请求数在线转base64
使用css动画来取代javascript动画
使用字体图标
使用css sprite(雪碧图)
使用svg图形
避免使用CSS表达式

body{
 background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );  
}

避免使用css滤镜

javascript

减少引用库的个数
使用requirejs或seajs异步加载js
JS放到页面底部引入
避免全局查找
使用原生方法
用switch语句代替复杂的if else语句
减少语句数，比如说多个变量声明可以写成一句
使用字面量表达式来初始化数组或者对象
使用innerHTML取代复杂的元素注入
使用事件代理(事件委托)
避免多次访问dom选择集
高频触发事件设置使用函数节流
使用Web Storage缓存数据