一、图书管理系统页面搭建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <!--导航条开始-->
      <nav class="navbar navbar-inverse">
  <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 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-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="关键字">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <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>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
       <!--导航条结束-->

      <!--左边html-->
      <div class="col-md-4" a>

        <!--列表组-->
        <div class="list-group">
          <a href="#" class="list-group-item active">
            首页
          </a>
          <a href="#" class="list-group-item">图书列表</a>
          <a href="#" class="list-group-item">作者列表</a>
          <a href="#" class="list-group-item">出版社列表</a>
          <a href="#" class="list-group-item">更多详情</a>
        </div>
      </div>

      <!--右边html-->
      <div class="col-md-6" a>
        <!--标题面版-->
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">图书管理系统</h3>
          </div>
          <div class="panel-body">
            <!--输入框组-->
            <div class="col-lg-6">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                  <button class="btn btn-primary" type="button">搜索</button>
                </span>
              </div><!-- /input-group -->
            </div>
            <!--标签组-->
            <div class="col-lg-6">
              <button class="btn btn-info btn-sm pull-right">新增</button>
            </div>
            <br>
            <br>
            <table class="table table-hover table-bordered table-striped">
              <thread>
                <tr>
                  <th>序号</th>
                  <th>书名</th>
                  <th>价格</th>
                  <th>出版社</th>
                  <th>作者</th>
                  <th>操作</th>
                </tr>
              </thread>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>我</td>
                  <td>111</td>
                  <td>上天出版社</td>
                  <td>狗蛋</td>
                  <td>
                    <button class="btn btn-danger btn-xs">编辑</button>
                    <button class="btn btn-danger btn-xs">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>我</td>
                  <td>111</td>
                  <td>上天出版社</td>
                  <td>狗蛋</td>
                  <td>
                    <button class="btn btn-danger btn-xs">编辑</button>
                    <button class="btn btn-danger btn-xs">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>我</td>
                  <td>111</td>
                  <td>上天出版社</td>
                  <td>狗蛋</td>
                  <td>
                    <button class="btn btn-danger btn-xs">编辑</button>
                    <button class="btn btn-danger btn-xs">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>我</td>
                  <td>111</td>
                  <td>上天出版社</td>
                  <td>狗蛋</td>
                  <td>
                    <button class="btn btn-danger btn-xs">编辑</button>
                    <button class="btn btn-danger btn-xs">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>我</td>
                  <td>111</td>
                  <td>上天出版社</td>
                  <td>狗蛋</td>
                  <td>
                    <button class="btn btn-danger btn-xs">编辑</button>
                    <button class="btn btn-danger btn-xs">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>我</td>
                  <td>111</td>
                  <td>上天出版社</td>
                  <td>狗蛋</td>
                  <td>
                    <button class="btn btn-danger btn-xs">编辑</button>
                    <button class="btn btn-danger btn-xs">删除</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

二、jQuery练习题

  1. 找到本页面中id是i1的标签

    $('#i1')

  2. 找到本页面中所有的h2标签

    $('h2')

  3. 找到本页面中所有的input标签

    $('input')

  4. 找到本页面所有样式类中有c1的标签

    $('.c1')

  5. 找到本页面所有样式类中有btn-default的标签

    $('.btn-default')

  6. 找到本页面所有样式类中有c1的标签和所有h2标签

    $('.c1, h2')

  7. 找到本页面所有样式类中有c1的标签和id是p3的标签

    $('.c1,[id="p3"]')

  8. 找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签

    $('.c1, .btn')

  9. 找到本页面中form标签中的所有input标签

    $('form input')

  10. 找到本页面中被包裹在label标签内的input标签

    $('label input')

  11. 找到本页面中紧挨在label标签后面的input标签

    $('label + input')

  12. 找到本页面中id为p2的标签后面所有和它同级的li标签

    $('#p2 ~ li')

  13. 找到id值为f1的标签内部的第一个input标签

    $('#f1 input').first()

  14. 找到id值为my-checkbox的标签内部最后一个input标签

    $('#my-checkbox input').last()

  15. 找到id值为my-checkbox的标签内部没有被选中的那个input标签

    $('#my-checkbox input').not(':checked')

  16. 找到所有含有input标签的label标签

    $('label').has('input')

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery选择器筛选器练习</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>

    .my-padding {
      padding: 10px 0;
    }

    .my-dark {
      background-color: #f5f5f5;
    }

    .footer {
      background: #111;
      font-size: 0.9em;
      position: relative;
      clear: both;
    }
    .my-white {
      color: #ffffff;
    }

    body {
      margin: 0;
    }
    #progress {
      height: 2px;
      background-color: #b91f1f;
      transition: opacity 500ms linear;
    }
    #progress.done{
      opacity: 0;
    }
  </style>
</head>
<body>
<div id="progress"></div>
<!--导航栏开始-->
<nav class="navbar navbar-inverse my-nav">
  <div class="container">
    <!-- 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="http://www.oldboyedu.com/"><strong>OldBoy Edu</strong></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><a href="#">Python学院<span class="sr-only">(current)</span></a></li>
        <li><a href="#">Linux学院</a></li>
        <li><a href="http://luffy.oldboyedu.com">路飞学城</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <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="#">Jason</a></li>
            <li><a href="#">Sean</a></li>
            <li><a href="#">Oscar</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Jason</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!--导航栏结束-->

<div class="container">

  <div class="jumbotron">
    <div id="i1" class="container">
      <h1 class="c1">Jason</h1>
      <h1 class="c1">带你学习jQuery</h1>
      <p id="p1"><a class="btn btn-primary btn-lg" href="https://q1mi.github.io/Blog/2017/07/10/about_jQuery/"
                    role="button">查看更多</a></p></div>
  </div>
  <hr>
  <div class="row">
    <div class="col-md-12">
      <table class="table table-bordered table-striped">
        <thead>
        <tr>
          <th>#</th>
          <th>姓名</th>
          <th>爱好</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <th>1</th>
          <td>Jason</td>
          <td>学习</td>
          <td>
            <button class="btn btn-warning">编辑</button>
            <button class="btn btn-danger">删除</button>
          </td>
        </tr>
        <tr>
          <th>2</th>
          <td>Oscar</td>
          <td>大饼</td>
          <td>
            <button class="btn btn-warning">编辑</button>
            <button class="btn btn-danger">删除</button>
          </td>
        </tr>
        <tr id="tr3">
          <th>3</th>
          <td>Egon</td>
          <td>吹牛逼</td>
          <td>
            <button class="btn btn-warning">编辑</button>
            <button class="btn btn-danger">删除</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>

  <hr>
  <div class="row">
    <div class="col-md-12">
      <form id="f1">
        <div class="form-group">
          <label for="exampleInputEmail1">邮箱</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">密码</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">上传头像</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">只支持img格式。</p>
        </div>
        <button id="btnSubmit" type="submit" class="btn btn-default">提交</button>
      </form>
    </div>
  </div>

  <hr>

  <div class="row">
    <div class="col-md-12">
      <div class="checkbox-wrapper">
        <div class="panel panel-info">
          <div class="panel-heading">jQuery学习指南</div>
          <div id="my-checkbox" class="panel-body">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="0">
                jQuery一点都不难
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="1" checked>
                jQuery一学就会
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="2">
                jQuery就要多练
              </label>
            </div>

            <div class="checkbox">
              <label>
                <input type="checkbox" value="3" disabled>
                jQuery学不好
              </label>
            </div>
          </div>
        </div>
      </div>
      <hr>
      <div class="radio-wrapper">

        <div class="panel panel-info">
          <div class="panel-heading">我来老男孩之后...</div>
          <div class="panel-body">
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                我的心中只有学习
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                学习真的太TM有意思了
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <hr>

  <div>
    <i class="fa fa-hand-pointer-o fa-lg fa-rotate-90" aria-hidden="true"></i>
    <a class="btn btn-success" href="http://jquery.cuishifeng.cn/">jQuery中文API指南</a>
  </div>

  <hr>

  <div class="row">
    <div class="col-md-12">
      <h2>练习题:</h2>
      <ol id="o1">
        <li>找到本页面中id是<code>i1</code>的标签</li>
        <li>找到本页面中所有的<code>h2</code>标签</li>
        <li>找到本页面中所有的<code>input</code>标签</li>
        <li>找到本页面所有样式类中有<code>c1</code>的标签</li>
        <li>找到本页面所有样式类中有<code>btn-default</code>的标签</li>
        <li>找到本页面所有样式类中有<code>c1</code>的标签和所有<code>h2</code>标签</li>
        <li>找到本页面所有样式类中有<code>c1</code>的标签和id是<code>p3</code>的标签</li>
        <li>找到本页面所有样式类中有<code>c1</code>的标签和所有样式类中有<code>btn</code>的标签</li>
        <p id="p2" class="divider"></p>
        <li>找到本页面中<code>form</code>标签中的所有<code>input</code>标签</li>
        <li>找到本页面中被包裹在<code>label</code>标签内的<code>input</code>标签</li>
        <li>找到本页面中紧挨在<code>label</code>标签后面的<code>input</code>标签</li>
        <li>找到本页面中id为<code>p2</code>的标签后面所有和它同级的<code>li</code>标签</li>
        <p id="p3" class="divider"></p>
        <li>找到id值为<code>f1</code>的标签内部的第一个input标签</li>
        <li>找到id值为<code>my-checkbox</code>的标签内部最后一个input标签</li>
        <li>找到id值为<code>my-checkbox</code>的标签内部没有被选中的那个input标签</li>
        <li>找到所有含有<code>input</code>标签的<code>label</code>标签</li>
      </ol>
    </div>
  </div>
</div>

<div class="my-dark my-padding">
  <div class="container">
    <div class="col-sm-8 my-center">
      <p>写很少的代码,做很多的事。</p>
      <h4>所以说</h4>
      <p>学好jQuery真的很重要,学好jQuery真的很重要,学好jQuery真的很重要。</p>
    </div>
  </div>
</div>

<div class="footer">
  <div class="row">
    <div class="col-md-12 text-center">
      <span class="my-white">&copy;2019 Jason</span>
    </div>
  </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

(day48作业)jQuery+Bootstrap练习题的更多相关文章

  1. 第五模块·WEB开发基础-第3章jQuery&Bootstrap

    01-jQuery介绍 02-如何使用jQuery 03-jQuery的入口函数 04-jQuery对象和JS对象的相互转换 05-jQuery如何操作DOM 06-底层选择器 07-基本过滤器 08 ...

  2. html+css复习之第3篇 | jquery | bootstrap

    html+css复习之第3篇 | jquery  | bootstrap

  3. webpack 引用 jquery + bootstrap 报错解决

    webpack 引用 jquery + bootstrap , error : jQuery is not defind 在webpack.dev.conf.js plugins[] 加入 new w ...

  4. 在vue下引入jquery bootstrap

    在vue 项目中引入jquery bootstrap 引入jquery npm install jquery --save-dev 在项目根目录下的build/webpack.base.conf.js ...

  5. jQuery+bootstrap实现有省略号的数据分页

    1.前言 在前端通过ajax请求数据后,可以通过bootstrap实现分页.由于bootstrap只提供分页的按钮的样式.数据分页我们需要实现页码跳转,上一页下一页,数据过多显示省略号,点击省略号能快 ...

  6. jquery+bootstrap使用数字增减按钮

    <div class="container"> <div class="page-header"><h1>Bootstrap ...

  7. Angular 引入第三方框架方法(如Jquery,Bootstrap)

    1.npm i jquery --save    /    npm i bootstrap --save 2.angular.json 引入路径 3.引入Jquery和Bootstrap的类型描述文件 ...

  8. jquery&bootstrap

    学会了用bootstarp和jquery的引用,布局就简单多了,但就是不怎么自由,必须按照固定的来: 引用文件: <script type="text/javascript" ...

  9. 集成vue到jquery/bootstrap项目

    说明,项目本身使用jquery和bootstrap做的管理后台,部分登录接口跑在node服务端,大部分接口使用springmvc实现.现在,使用vue开发,集成vue到原先的项目中.不影响原先的框架. ...

随机推荐

  1. CF-579 D. "Or" Game

    题意: 给一列数,任选一个数,乘x,最多操作k次,问最后a[1]|a[2]|...|a[n]的最大值是多少; 思路: 或运算是0|0=0,1|0=1,0|1=1,1|1=1,那么每次乘一个大于等于2的 ...

  2. Reat学习笔记4

    相信很多初学react的朋友在研究组件的路由配置问题时都很困扰,我也是折腾了半天才搞明白的. 一般情况下路由配置包含path和component两个信息: component顾名思义是组件的意思,指的 ...

  3. MySQL实战45讲学习笔记:第四十三讲

    一.本节概述 我经常被问到这样一个问题:分区表有什么问题,为什么公司规范不让使用分区表呢?今天,我们就来聊聊分区表的使用行为,然后再一起回答这个问题. 二.分区表是什么? 为了说明分区表的组织形式,我 ...

  4. Ubuntu安装有道词典

    dpkg -i youdao-dict.deb正常安装 会报一堆依赖关系的错误, 1.更新系统 #更新系统 apt-get update apt-get dist-upgrade 2.对每一个未安装的 ...

  5. 使用mybatis动态where字句方法

    上篇文章介绍了如何使用mybatis-generator生成实体类.Mapper接口代码,其中生成的Mapper接口代码是不带ByExample方法的.本篇文章将介绍如何使用mybatis-gener ...

  6. 在使用confluent-kafka-go 时遇到如下问题

    问题 $ go build t.go # pkg-config --cflags rdkafka Package rdkafka was not found in the pkg-config sea ...

  7. Nginx的性能优化方案

    nginx的优化 . gzip压缩优化 . expires缓存有还 . 网络IO事件模型优化 . 隐藏软件名称和版本号 . 防盗链优化 . 禁止恶意域名解析 . 禁止通过IP地址访问网站 . HTTP ...

  8. ubuntu / zsh shell / oh-my-zsh / 常用插件

    记录一下 zsh 的下载与配置,省得每次重装系统都要上网到处查. 安装 zsh shell sudo apt install zsh 切换 shell chsh -s /bin/zsh 安装 oh-m ...

  9. Elasticsearch搜索调优权威指南 (1/3)

    本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/qwkZKLb_ghmlwrqMkqlb7Q英文原文:https://qbox.io/blog/ela ...

  10. div+css画一个小猪佩奇

    用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container&quo ...