A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 2017-1-4 21:14 编辑


【济南中心】JavaEE就业班同步笔记第一阶段:
JavaWeb之前端技术--JQuery与BootStrap框架

1  案例一:使用JQuery完成表单校验:
1.1   需求:
之前使用JS做过表单的校验,表单校验对于后台的开发人员比较重要的.使用JQ完成一个复杂点表单的校验.
1.png
1.2  分析:
1.2.1   技术分析:
【JQuery的查找】
* find();        
* parent();
* children();
【JQuery的事件处理】
* bind(type,[data],fn)
* trigger(type,[data])
* triggerHandler(type,[data])
* trigger和triggerHandler区别:
        trigger( event, [data] ) 在每一个匹配的元素上触发某类事件
        riggerHandler( event, [data] ) 将会触发指定事件类型上所有绑定的处理函数。
1.2.2   步骤分析:
【步骤一】:引入注册页面
【步骤二】:引入JQ的js.
【步骤三】:为必填项添加一个 *
【步骤四】:获得表单中的所有的输入项,为所有的输入项添加一个blur事件.
【步骤五】:判断当前输入项是什么(用户名,密码,邮箱)
【步骤六】:为不同的输入项做不同的校验.
【步骤七】:为表单元素添加一个submit事件.
【步骤八】:执行之前的blur函数.查找错误信息的长度,如果长度>0 有错误 不能提交.
1.3   代码实现:
        
[JavaScript] 纯文本查看 复制代码
// 表单校验的操作
                        $(function(){
                                // 步骤一:为必填项添加一个 *.
                                $("form input.required").each(function(){
                                        // 获得他的父元素:
                                        $(this).parent().append("<b class='high'> *</b>");
                                });
                                
                                // 步骤二:获得所有的输入项,为输入项添加一个blur事件.
                                $("form input").blur(function(){
                                        
                                        // 获得该元素的父元素:
                                        var $parent = $(this).parent();
                                        
                                        // 将原有的信息清除掉.
                                        $parent.find(".formtips").remove();
                                        
                                        // 确定点击的输入项是谁?
                                        if($(this).is("#username")){
                                                // 判断用户名是否为空:
                                                if(this.value == ""){
                                                        // 向文本框后添加一个错误提示.
                                                        $parent.append("<span class='formtips onError'>用户名不能为空</span>");
                                                }else{
                                                        // 向文本框后添加一个正确提示.
                                                        $parent.append("<span class='formtips onSuccess'>用户名输入正确</span>");
                                                }
                                        }
                                        
                                        if($(this).is("#password")){
                                                // 判断用户名是否为空:
                                                if(this.value == ""){
                                                        // 向文本框后添加一个错误提示.
                                                        $parent.append("<span class='formtips onError'>密码不能为空</span>");
                                                }else{
                                                        // 向文本框后添加一个正确提示.
                                                        $parent.append("<span class='formtips onSuccess'>密码输入正确</span>");
                                                }
                                        }
                                }).keyup(function(){
                                        $(this).triggerHandler("blur");
                                }).focus(function(){
                                        $(this).triggerHandler("blur");
                                });
                                
                                // 为表单添加一个submit事件.
                                $("form").submit(function(){
                                        // 执行表单中blur事件.
                                        $("form :input").trigger("blur");
                                        // 获得错误信息的长度.
                                        var errorLength = $(".onError").length;
                                        if(errorLength > 0){
                                                return false;
                                        }
                                });
                        });


2   案例二:使用BootStrap设计一个响应式的页面:
2.1  需求:
设计一套页面能够通用在不同的设备上,在手机,pad上,电脑上都可以浏览这个网页,而不影响正常的浏览的方式.
2.2  分析:
2.2.1   技术分析:
【BootStrap的概述】
  • 什么是BootStrap

2.png
  • BootStrap可以在那些地方使用:

BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问.
  • BootStrap的使用:
下载BootStrap: http://www.bootcss.com
引入的文件
3.png
添加一个<meta>标签:
4.png
【BootStrap的全局CSS】
BootStrap的框架提供了一系列的CSS的样式.这些样式可以直接使用.
  • 布局容器:

5.png
  • 栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
使用.row样式定义栅格的行.
定义列:.col-lg-n .col-md-n  .col-sm-n   .col-xs-n
6.png
  • 排版:
  • 对齐
  • 改变大小写
  • 表单

【BootStrap的组件】
  • 按钮
  • 导航
  • 标签
  • 标记
  • 排版
  • 缩略图
  • 警告
  • 进度条
  • 杂项

【BootStrap的JS的插件】
  • 对话框
  • 下拉项
  • 滚动侦测
  • 标签页
  • 工具提示
  • 弹出提示

3  案例三:使用BootStrap布局首页
3.1  需求:
7.png
3.2   分析:
3.2.1   技术分析:
【BootStrap的组件和JS的插件】
(见上文)
3.2.2  步骤分析:
【步骤一】:定义一个外层div元素
【步骤二】:定义里层8个div
【步骤三】:为每层中的div添加元素.
3.3   代码实现:
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <!-- 根据设备宽度,调整缩放比例 -->
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <title>网站首页</title>
                <!-- 引入BootStrap的CSS -->
                <link rel="stylesheet" href="../css/bootstrap.min.css" />
                <link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
                <!-- 引入JS-->
                <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
                <script type="text/javascript" src="../js/bootstrap.min.js" ></script>
                
        </head>
        <body>
                <!--整体div-->
                <div class="container">
                        <!--Logon部分DIV-->
                        <div class="row">
                                <div class="col-md-4">
                                        <img src="../img/logo2.png" />
                                </div>
                                <div class="col-md-4">
                                        <img src="../img/header.png" />
                                </div>
                                <div class="col-md-4">
                                        <a href="">登录</a>
                                        <a href="">注册</a>
                                        <a href="">购物车</a>
                                </div>
                        </div>
                        <!--导航条部分DIV-->
                        <div class="row">
                                <nav class="navbar navbar-default">
                                  <div class="container-fluid">
                                    <!-- Brand and toggle get grouped for better mobile display -->
                                    <div class="navbar-header">
                                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                      </button>
                                      <a class="navbar-brand" href="#">首页</a>
                                    </div>
                                
                                    <!-- Collect the nav links, forms, and other content for toggling -->
                                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                      <ul class="nav navbar-nav">
                                        <li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
                                        <li><a href="#">电脑办公</a></li>
                                        <li><a href="#">电脑办公</a></li>
                                        <li><a href="#">电脑办公</a></li>
                                        <li><a href="#">电脑办公</a></li>
                                        <li class="dropdown">
                                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
                                          <ul class="dropdown-menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li role="separator" class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                            <li role="separator" class="divider"></li>
                                            <li><a href="#">One more separated link</a></li>
                                          </ul>
                                        </li>
                                      </ul>
                                      <form class="navbar-form navbar-right" role="search">
                                        <div class="form-group">
                                          <input type="text" class="form-control" placeholder="Search">
                                        </div>
                                        <button type="submit" class="btn btn-default">Submit</button>
                                      </form>
                                      
                                    </div><!-- /.navbar-collapse -->
                                  </div><!-- /.container-fluid -->
                                </nav>
                        </div>
                        <!--图片轮播部分DIV-->
                        <div class="row">
                                <!-- 图片的小点儿 -->
                                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                  <!-- Indicators -->
                                  <ol class="carousel-indicators">
                                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                                  </ol>
                                
                                  <!-- 图片-->
                                  <div class="carousel-inner" role="listbox">
                                    <div class="item active">
                                      <img src="../img/bartlesvillecf.jpg" >
                                      <div class="carousel-caption">
                                       
                                      </div>
                                    </div>
                                    <div class="item">
                                      <img src="../img/okwu-athletics.jpg">
                                      <div class="carousel-caption">
                                       
                                      </div>
                                    </div>
                                    <div class="item">
                                      <img src="../img/okwu.jpg">
                                      <div class="carousel-caption">
                                       
                                      </div>
                                    </div>
                                    <div class="item">
                                      <img src="../img/emancipation.jpg">
                                      <div class="carousel-caption">
                                       
                                      </div>
                                    </div>
                                  </div>
                                
                                  <!-- 图片左右选择 -->
                                  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                  </a>
                                  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                  </a>
                                </div>
                        </div>
                        <!--最新商品部分DIV-->
                        <div class="row">
                                <div >
                                        <h3>最新商品<img src="../img/title2.jpg"></h3>
                                </div>
                                <div >
                                        <div class="col-md-2" style="padding: 0px;height: 440px;">
                                                <img src="../img/big01.jpg" width="100%" height="100%"/>
                                        </div>
                                        <div class="col-md-10">
                                                <!--第一行-->
                                                <div class="row" >
                                                        <div class="col-md-6" style="height:230px;padding: 0px;">
                                                                <img src="../img/middle01.jpg" height="100%" width="100%"/>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small01.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small02.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small03.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                </div>
                                                <!--第一行-->
                                                <div class="row">
                                                        <div class="col-md-2">
                                                                <img src="../img/small01.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small02.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small03.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small01.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small02.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small03.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
                        <!--广告部分DIV-->
                        <div class="row">
                                <img src="../img/ad.jpg" width="100%"/>
                        </div>
                        <!--热门商品部分DIV-->
                        <div class="row">
                                 <div >
                                        <h3>热门商品<img src="../img/title2.jpg"></h3>
                                </div>
                                <div >
                                        <div class="col-md-2" style="padding: 0px;height: 440px;">
                                                <img src="../img/big01.jpg" width="100%" height="100%"/>
                                        </div>
                                        <div class="col-md-10">
                                                <!--第一行-->
                                                <div class="row" >
                                                        <div class="col-md-6" style="height:230px;padding: 0px;">
                                                                <img src="../img/middle01.jpg" height="100%" width="100%"/>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small01.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small02.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small03.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                </div>
                                                <!--第一行-->
                                                <div class="row">
                                                        <div class="col-md-2">
                                                                <img src="../img/small01.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small02.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small03.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small01.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small02.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                        <div class="col-md-2">
                                                                <img src="../img/small03.jpg" />
                                                                <center><p>豆浆机</p>
                                                                <p style="color:red">¥299</p></center>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
                        <!--footer部分DIV-->
                        <div class="row">
                                <img src="../img/footer.jpg" width="100%"/>
                        </div>
                        <!--链接及关于我们部分DIV-->
                        <div class="row">
                                <center>
                                        

    关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 <br/>

Copyright ? 2005-2016 传智商城 版权所有 
                                </center>
                        </div>
                </div>
        </body>
</html>

评分

参与人数 1黑马币 +5 收起 理由
gedingbaod + 5 很给力!

查看全部评分

40 个回复

倒序浏览

回帖奖励 +1 黑马币

感谢老师分享!
回复 使用道具 举报

回帖奖励 +1 黑马币

立马就收藏了
回复 使用道具 举报

回帖奖励 +1 黑马币

不明觉厉
回复 使用道具 举报

回帖奖励 +1 黑马币

谢谢分享,好棒
回复 使用道具 举报

回帖奖励 +1 黑马币

感谢老师的分享
来自宇宙超级黑马专属苹果客户端来自宇宙超级黑马专属苹果客户端
回复 使用道具 举报

回帖奖励 +1 黑马币

感谢楼主分享!赞赞
回复 使用道具 举报

回帖奖励 +1 黑马币

收藏了,谢谢分享
回复 使用道具 举报

回帖奖励 +1 黑马币

感谢分享!
回复 使用道具 举报

回帖奖励 +1 黑马币

66666666666666666
回复 使用道具 举报

回帖奖励 +1 黑马币

谢谢,好好预习下
回复 使用道具 举报
。。。。。。
回复 使用道具 举报

回帖奖励 +1 黑马币

顶顶贴 加加油
回复 使用道具 举报

回帖奖励 +1 黑马币

跟我这里的上课时间正好一致
回复 使用道具 举报

回帖奖励 +1 黑马币

厉害啊持续更新了好多啊
回复 使用道具 举报

回帖奖励 +1 黑马币

顶一下,祝黑马越办越好
回复 使用道具 举报

回帖奖励 +1 黑马币

这种资料直接保存 绝对不嫌多
回复 使用道具 举报

回帖奖励 +1 黑马币

谢谢分享 赞赞赞!!!!!
回复 使用道具 举报

回帖奖励 +1 黑马币

谢谢老师~!~感谢感谢
回复 使用道具 举报

回帖奖励 +1 黑马币

谢谢分享!
回复 使用道具 举报
123下一页
您需要登录后才可以回帖 登录 | 加入黑马