（day48作业）jQuery+Bootstrap练习题
一、图书管理系统页面搭建
<!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练习题
找到本页面中id是
i1的标签$('#i1')找到本页面中所有的
h2标签$('h2')找到本页面中所有的
input标签$('input')找到本页面所有样式类中有
c1的标签$('.c1')找到本页面所有样式类中有
btn-default的标签$('.btn-default')找到本页面所有样式类中有
c1的标签和所有h2标签$('.c1, h2')找到本页面所有样式类中有
c1的标签和id是p3的标签$('.c1,[id="p3"]')找到本页面所有样式类中有
c1的标签和所有样式类中有btn的标签$('.c1, .btn')找到本页面中
form标签中的所有input标签$('form input')找到本页面中被包裹在
label标签内的input标签$('label input')找到本页面中紧挨在
label标签后面的input标签$('label + input')找到本页面中id为
p2的标签后面所有和它同级的li标签$('#p2 ~ li')找到id值为
f1的标签内部的第一个input标签$('#f1 input').first()找到id值为
my-checkbox的标签内部最后一个input标签$('#my-checkbox input').last()找到id值为
my-checkbox的标签内部没有被选中的那个input标签$('#my-checkbox input').not(':checked')找到所有含有
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">©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练习题的更多相关文章
- 第五模块·WEB开发基础-第3章jQuery&Bootstrap
01-jQuery介绍 02-如何使用jQuery 03-jQuery的入口函数 04-jQuery对象和JS对象的相互转换 05-jQuery如何操作DOM 06-底层选择器 07-基本过滤器 08 ...
- html+css复习之第3篇 | jquery | bootstrap
html+css复习之第3篇 | jquery | bootstrap
- webpack 引用 jquery + bootstrap 报错解决
webpack 引用 jquery + bootstrap , error : jQuery is not defind 在webpack.dev.conf.js plugins[] 加入 new w ...
- 在vue下引入jquery bootstrap
在vue 项目中引入jquery bootstrap 引入jquery npm install jquery --save-dev 在项目根目录下的build/webpack.base.conf.js ...
- jQuery+bootstrap实现有省略号的数据分页
1.前言 在前端通过ajax请求数据后,可以通过bootstrap实现分页.由于bootstrap只提供分页的按钮的样式.数据分页我们需要实现页码跳转,上一页下一页,数据过多显示省略号,点击省略号能快 ...
- jquery+bootstrap使用数字增减按钮
<div class="container"> <div class="page-header"><h1>Bootstrap ...
- Angular 引入第三方框架方法（如Jquery,Bootstrap）
1.npm i jquery --save / npm i bootstrap --save 2.angular.json 引入路径 3.引入Jquery和Bootstrap的类型描述文件 ...
- jquery&bootstrap
学会了用bootstarp和jquery的引用,布局就简单多了,但就是不怎么自由,必须按照固定的来: 引用文件: <script type="text/javascript" ...
- 集成vue到jquery/bootstrap项目
说明,项目本身使用jquery和bootstrap做的管理后台,部分登录接口跑在node服务端,大部分接口使用springmvc实现.现在,使用vue开发,集成vue到原先的项目中.不影响原先的框架. ...
随机推荐
- 关于npm(一)
npm install X: 把X包安装到node_modules目录中修改package.json运行npm install命令时,不会自动安装X npm install X –save: 把X包安 ...
- [PHP] 再续 Laravel 5.5 接口 跨域问题 【终极暴力解决办法】
上文中提到 Laravel5.5 使用 laravel-cors 实现 Laravel 的跨域配置 用插件来跨域 此方法能解决一部分api 请求问题 但我碰到的是 接口 请求size 超过10k,导致 ...
- ASP.NET开发实战——（十一）ASP.NET MVC 与数据库之EntityFramework配置与连接字符串
前几篇文章中介绍了如何使用Entity Framework来操作数据库,但是对EF的配置.连接字符串的指定仍然存在一些疑问,EF可以通过两种方式来实现配置,分别是代码方式和配置文件. 本章将通过以下几 ...
- 首次使用gradle出现Could not find method leftShift() for arguments解决办法
1.在win10桌面编写test.gradle脚本,里面内容如下 task helloword << { println 'Hello gradle qick start' } 2.在do ...
- Navicat Premium Mac 12 破解(亲测可用!!!)
今天不知怎的,出于强迫症的我就是要强行搞个Navicat Premium Mac 12 破解版本. 历经了种种种种种种磨难与艰辛与火海,终于破解成功了. 因为要经常使用MySQL,使用命令行那是相当的 ...
- C++ 回调函数的多种用法
什么是回调函数, 就是以函数指针做参数传递给另一个函数称之为回调函数, 字面意思很简单, 但就这几个字想理解回调函数, 那又很难.因此别就这这字面意思, 只要知道怎么用, 在什么情况下用就行了 什么场 ...
- centos7下安装php-memcached扩展
-> https://blog.csdn.net/sinat_35861664/article/details/72831556 安装扩展进行编译时如果报错,则将 ./configure --w ...
- 一种单机支持 JavaWeb 容器万级并发的设想
当前的大部分 Java web 容器基于 Bio 线程模型,例如常见的 tomcat ,默认 200 线程,即 200 连接.由此带来的问题是,如果想提高并发,或者提高资源利用率,就得加大线程数. 如 ...
- [NewLife.XCode]百亿级性能
NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netcore,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和 ...
- 1+x 证书 Web 前端开发 CSS3 专项练习
官方QQ群 1+x 证书 Web 前端开发 CSS3 专项练习 http://blog.zh66.club/index.php/archives/196/