10-jQuery04

作者: 努力爬行中的蜗牛 | 来源:发表于2019-01-29 11:30 被阅读3次

移动端js事件

移动端的操作方式和PC端是不同的，移动端主要用于手指操作，所以有特殊的touch事件，touch事件包括如下几个事件：
1、touchstart：// 手指放到屏幕上时触发
2、touchmove：// 手指在屏幕上滑动时触发
3、touchend：// 手指离开屏幕时触发
4、touchcancel: // 系统取消touch事件的时候触发，比较少用
移动端一般有三种操作，点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的4个事件一般很少单独使用，一般是封装使用来实现这三种操作，可以使用封装成熟的js库。

移动端js库
zeptojs
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的类似jquery的js库。
zepto官网：http://zeptojs.com/
zepto中文api：http://www.css88.com/doc/zeptojs_api/
zepto包含很多模块，默认下载版本包含的模块有Core，Ajax，Event，Form，IE模块，如果还需要其他的模块，可以自定义构建。
zepto自定义构建地址：http://github.e-sites.nl/zeptobuilder/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>cookie</title>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript">
        $(function() {
            alert($('#div1').html());
        })
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>

</body>
</html>

swiper

swiper.js是一款成熟稳定的应用于PC端和移动端的欢动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器（IE7），3.x放弃支持低版本浏览器，适合应用在移动端。
2.x版本中文网址：http://2.swiper.com.cn/
3.x版本中文网地址：http://www.swiper.com.cn/

swiper使用参数：
1、initialSilde：初始索引值，从0开始
2、direction：滑动方向 horizontal | vertical
3、speed：滑动速度，单位ms
4、autoplay：设置自动播放及播放时间
5、autoplayDisableOnInteraction：用户操作swipe后师傅自动播放，默认是true，不在自动播放
6、pagination：分页远点
7、paginationClickable：分页于鏊暗点是否点击
8、prevButton：上一页箭头
9、nextButton：下一页箭头
10、loop：是否收尾衔接

bootstrap

简单、直观、强悍的前段开发框架，让web开发更迅速，简单。来自Twitter，是目前很瘦欢迎的前端框架之一。Bootstrap是基于HTML、CSS、JavaScript的，瓤书写代码更容易。移动优先，响应式布局开发。
bootstrap中文网址：http://www.bootcss.com/

bootstrap 容器

container-fluid 流体
container
1170
970
750
100%

<!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 type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        .container-fluid, .container {
            height: 50px;
            border: 1px solid #000;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="container-fluid">流体容器</div>
    <br>
    <br>
    <br>
    <div class="container">响应式容器</div>
</body>
</html>

bootstrap 栅格系统

bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：
1、col-lg- 大于1200排成一行，小于1200分别占一行
2、col-md- 大于992排成一行，小于992分别占一行
3、col-sm- 大约768排成一行，小于768分别占一行
4、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>bootstrap</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        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">
            <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>
        </div>
        <br>
        <br>
        <br>
        <div class="row">
            <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>
        </div>
        <br>
        <br>
        <br>
        <div class="row">
            <div class="col-sm-3">col-md-3</div>
            <div class="col-sm-3">col-md-3</div>
            <div class="col-sm-3">col-md-3</div>
            <div class="col-sm-3">col-md-3</div>
        </div>
        <br>
        <br>
        <br>
        <div class="row">
            <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>

列偏移

1、col-lg-offset-
2、col-md-offset-
3、col-sm-offset-
4、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>bootstrap</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        div[class*='col-'] {
            background-color: gold;
            border: 1px solid #000;
            height: 50px;
        }

    </style>
</head>
<body>
    <div class="container">
        <h1>栅格偏移</h1>
    </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-md-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"></div>
            <div class="col-lg-4 col-lg-offset-2  col-md-4 col-md-offset-2"></div>
        </div>
    </div>
    

</body>
</html>

bootstrap 隐藏类

1、hidden-xs
2、hidden-sn
3、hidden-md
4、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>bootstrap</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        div[class*='col-'] {
            background-color: gold;
            border: 1px solid #000;
            height: 50px;
        }

    </style>
</head>
<body>
    <div class="container">
        <h1>栅格隐藏</h1>
    </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 hidden-xs">4</div>
        </div>
    </div>
    

</body>
</html>

bootstrap 按钮

1、btn 声明按钮
2、btn-default 默认按钮样式
3、btn-primary
4、btn-success
5、btn-info
6、btn-warnig
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 宽度是父级宽100%的按钮
13、active
14、disabled
15、btn-group 定义按钮组

按钮用法demo

<!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>bootstrap</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        

    </style>
</head>
<body>
    <div class="container">
        <h1>按钮</h1>
    </div>

    <div class="container">
        <div class="row">
            <input type="button" name="" value="按钮" class="btn btn-primary">
            <a href="#" class="btn btn-success">a标签按钮</a>
            <a href="#" class="btn btn-info">a标签按钮</a>
            <a href="#" class="btn btn-warning">a标签按钮</a>
            <a href="#" class="btn btn-danger">a标签按钮</a>
            <a href="#" class="btn btn-link">a标签按钮</a>

            <a href="#" class="btn btn-danger active">a标签按钮</a>
            <a href="#" class="btn btn-danger disabled">a标签按钮</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">一般的按钮</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 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">
            <div class="btn-group  btn-group-justified">
                <div class="btn-group">
                    <input type="button" name="" value="步骤一" class="btn-primary">
                </div>
                <div class="btn-group">
                    <input type="button" name="" value="步骤二" class="btn-default">
                </div>
                <div class="btn-group">
                    <input type="button" name="" value="步骤三" class="btn-default">
                </div>
                
            </div>
            
        </div>
    </div>
    

</body>
</html>

bootstrap 表单

1、form表明一个表单域
2、form-inline 内联表单域
3、form-horizontal 水平排列表单域
4、form-group 表单组、包括表单文字和表单控件
5、form-control 文本输入框、下拉列表控件样式
6、checkout checkbox-inline 多选框样式
7、radio radio-inline 单选框样式
8、input-group 表单控件组
9、input-group-addon 表单控件组物件样式
10、input-group-btn 表单控件组物件为按钮的样式
11、form-group-lg 大尺寸表单
12、form-group-sm 小尺寸表单

<!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>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <style type="text/css">
        
        .glyphicon-heart{
            font-size:16px;
            color:gold;
        }

        .glyphicon-user{
            font-size:20px;
            color:pink;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <h2>表单</h2>
        </div>
    </div>


    <div class="container">
        <div class="row">
            <form>
                <div class="form-group">
                    <label for="input01"><span class="glyphicon glyphicon-user"></span></label>
                    <input type="text" name="" class="form-control" id="input01">
                </div>

                <div class="form-group">
                    <label for="pwd">密码:</label>
                    <input type="password" name="" class="form-control" id="pwd">
                </div>
            </form>
            
            <br>
            <br>

            <form class="form-inline">
                <div class="form-group form-group-lg">
                    <label for="input02">用户名:</label>
                    <input type="text" name="" class="form-control" id="input02">
                </div>

                <div class="form-group">
                    <label for="pwd02">密码:</label>
                    <input type="password" name="" class="form-control" id="pwd02">
                </div>
            </form>


            <br>
            <br>

            <form class="form-horizontal">
                <div class="form-group form-group-lg">
                    <label for="input03" class="col-xs-2">用户名:</label>
                    <div class="col-xs-10">
                    <input type="text" name="" class="form-control" id="input03">
                    </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" name="" class="form-control" id="input03">
                    </div>
                </div>

                <div class="form-group">
                    <label for="pwd03"  class="col-xs-2">密码:</label>
                    <div class="col-xs-10">
                    <input type="password" name="" class="form-control" id="pwd03">
                    </div>
                </div>


            </form>
            <br>
            <br>
            <br>
            <form>
                <div class="input-group">
                  <span class="input-group-addon">@</span>
                  <input type="text" class="form-control">                
                </div>
                <br>
                <br>

                <div class="input-group">
                  
                  <input type="text" class="form-control">
                  <span class="input-group-btn">
                    <!-- <input type="button" name="" value="搜索" class="btn btn-default"> -->

                    <button class="btn btn-primary">搜索</button>
                  </span>                 
                </div>
                
                <br>
                <br>

                <div class="input-group">
                  
                  <input type="text" class="form-control">
                  <span class="input-group-btn">
                    <!-- <input type="button" name="" value="搜索" class="btn btn-default"> -->

                    <button class="btn btn-primary"><span class="glyphicon glyphicon-heart"></span></button>
                  </span>                 
                </div>

            </form>
        </div>
    </div>

</body>
</html>

bootstrap 导航条

1、navbar 声明导航条
2、navbar-default 声明默认的导航条样式
3、navbar-inverse 声明反白的导航条样式
4、navbar-static-top 去掉导航条圆角
5、navbar-fixed-top 固定到顶部的导航条
6、navbar-fixed-bottom 固定到底部的导航条
7、navbar-header 声明logo的容器
8、navbar-brand 针对logo等固定内容的样式
9、nav navbar-nav 定义导航条中的菜单
10、navbar-form 定义导航条中的表单
11、navbar-btn 定义导航条中的按钮
12、navbar-text 定义导航条中的文本
13、navbar-left 菜单靠左
14、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>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>
<body>
    <div class="navbar navbar-inverse navbar-static-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" name="" 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>
        </div>
    </div>

</body>
</html>

bootstrap 模态框

1、modal 声明一个模态框
2、modal-dialog 定义模态框尺寸
3、modal-lg 定义大尺寸模态框
4、modal-sm 定义次奥尺寸模态框
5、modal-header
6、modal-body
7、modal-footer

<!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>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></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>
        </div>
    </div>

    <div class="modal fade" id="modal01">
        <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>

    <div class="modal fade" id="modal02">
        <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>

    <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>

</body>
</html>

自定义js控制弹窗

<!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>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#btn01').click(function() {
                // $('#modal04').modal('show');
                $('#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>

    <div class="modal fade" id="modal01">
        <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>

    <div class="modal fade" id="modal02">
        <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>

    <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">
                    提示弹窗
                </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 路径导航

bootstrap 下拉菜单

路径导航和下拉菜单

<!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" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">

    </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>

        <br>
        <br>

        <div class="row">
            <div class="dropdown">
                <div class="btn btn-primary drop-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>

正则表达式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>正则表达式</title>

    <script type="text/javascript">
        var re01 = new RegExp('a','i');
        var re02 = /a/;
        var re03 =/\d/;
        var re04 = /^\d+$/;
        // i表示忽略大小写
        var re06 = /^\ab$/i;

        var str01 = 'abcdefg';
        var str02 = 'cdefgh';
        var str03 = '1234abcd';
        var str04 = '12345667';
        var str05 = 'Ab';
        
        // alert(re02.test(str01));
        // alert(re02.test(str02));
        // alert(re03.test(str03));
        // alert(re04.test(str03));
        // alert(re04.test(str04));
        alert(re06.test(str05));

    </script>
</head>
<body>

</body>
</html>

前端性能优化

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

一、代码部署

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

二、编码

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

css
1、精简css选择器
2、把css放到顶部
3、避免@import方式引入样式
4、 css中使用base64图片数据取代图片文件，减少请求数，在线转base64网站：http:tool.css-js.com/base64.html
5、使用css动画来取代JavaScript动画
6、使用字体图标
7、使用css sprite（雪碧图）
8、使用svg图形
9、避免使用css表达式
body {
background-color:expression((new Date().getSeconds()%2 ? "#B8D4FF" : "#F08A00")；
}
10、避免使用css滤镜

JavaScript
1、减少引用卡的个数
2、使用requirejs或seajs异步加载js
3、js放到页面底部引入
4、避免全局查找
5、使用原生方法
6、使用switch语句代替复杂的if else语句
7、减少语句数，比如说多个变量声明可以写成一句
8、使用字面量变大时来初始化数组或者对象
9、使用innerHTML取代复杂的元素注入
10、使用事件代理（事件委托）
11、避免多次访问dom选择集
12、高频出发事件设置使用函数节流
13、使用web storage缓存数据