day58-jQuery事件的阻止、委托、页面加载、动画、前端框架bootstrap、搭建图书管理系统
作者：互联网
文章目录
每日测验
1.下面这段代码的输出结果是什么，并给出你的解释
def index():
return [lambda x : i * x for i in range(4)]
print([m(2) for m in index()])
2.什么是函数的递归调用?书写递归函数需要注意什么？你能否利用递归函数打印出下面列表中每一个元素(只能打印数字),l = [1,[2,[3,[4,[5,[6,[7,[8,[9]]]]]]]]]
3.jQuery的链式操作有什么特点，如何做到？
4.jQuery绑定事件的方式有哪些，列举出你所知道的事件
昨日内容回顾
-
样式类操作
addClass() classList.add() removeClass() hasClass() toggleClass() -
css操作
.css(属性名,属性值) jQuery链式操作 一行代码可以搞定很多事情 jQuery对象在调用jQuery方法之后返回的还是当前对象本身 (本质:return self) -
位置操作
scrollTop scrollLeft # 回到顶部 $(window).scrollTop() # 获取 $(window).scrollTop(300) # 设置 -
尺寸操作
# 文本的高和宽 height() # 文本+padding innerHeight() # 文本+padding+border outterHeight() -
文本操作
.text() 文本 innerText() .js() 文本+标签 innerjs() 括号内不加参数就是获取 加了就是设置 获取值 .val() value 获取文件数据 转成标签对象.files -
属性操作
.attr() .attr('class') getAttribute .attr('class','c1') setAttribute .removeAttr() removeAttribute # 针对checkbox、radio、option选中的checked、selected属性不要用attr 建议你使用prop() prop('checked') prop('checked',true/false) -
文档处理
# jQuery如何创建标签 document.createElement('p') === $('<p>') A.append(B) B.appendTo(A) prepend() prependTo() ... remove() 移除标签 empty() 清空标签内部所有的内容 -
事件处理
# jQuery两种绑定事件的方式 # 第一种 $('#d1').click(function(){}) # 第二种 $('#d1').on('click',function(){}) this 指代的就是当前被操作对象本身(有点像面向对象的self) # 克隆事件 clone() 默认情况下只克隆标签和文本不克隆事件 clone(true) # 自定义模态框 绑定事件控制标签类属性的添加和删除 # 左侧菜单 一行代码搞定 # 返回顶部 $(window).scroll(function(){ }) # 自定义登陆校验功能 .val() # hover事件 $('#d1').hover(function(){}) # 进出都会触发 $('#d1').hover( function(){}, function(){} ) # input框实时监控输入内容事件 $('#d1').on('input',function(){}) # 键盘按键事件 $(window).keydown(function(event){ event.keyCode }) $(window).keyup(function(){}) web领域永远没有绝对的安全！！！
今日内容概要
- jQuery结束
- 前端框架Bootstrap
- 搭建一个图书管理系统页面
今日内容详细
阻止后续事件执行
<script>
$('#d2').click(function (e) {
$('#d1').text('宝贝 你能看到我吗?')
// 阻止标签后续事件的执行 方式1
// return false
// 阻止标签后续事件的执行 方式2
// e.preventDefault()
})
</script>
阻止事件冒泡
<script>
$('#d1').click(function () {
alert('div')
})
$('#d2').click(function () {
alert('p')
})
$('#d3').click(function (e) {
alert('span')
// 阻止事件冒泡的方式1
// return false
// 阻止事件冒泡的方式2
// e.stopPropagation()
})
</script>
事件委托
<button>是兄弟，就来砍我!!!</button>
<script>
// 给页面上所有的button标签绑定点击事件
// $('button').click(function () { // 无法影响到动态创建的标签
// alert(123)
// })
// 事件委托
$('body').on('click','button',function () {
alert(123) // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
})
</script>
页面加载
等待页面加载完毕再执行代码
window.onload = function(){
// js代码
}
jQuery中等待页面加载完毕
# 第一种
$(document).ready(function(){
// js代码
})
# 第二种
$(function(){
// js代码
})
# 第三种
直接写在body内部最下方
动画效果
$('#d1').hide(5000)
w.fn.init [div#d1]
$('#d1').show(5000)
w.fn.init [div#d1]
$('#d1').slideUp(5000)
w.fn.init [div#d1]
$('#d1').slideDown(5000)
w.fn.init [div#d1]
$('#d1').fadeOut(5000)
w.fn.init [div#d1]
$('#d1').fadeIn(5000)
w.fn.init [div#d1]
$('#d1').fadeTo(5000,0.4)
w.fn.init [div#d1]
补充
# each() 类似于for循环，只能接受两个参数
# 第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9
$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>1</div>
VM243:1 1 <div>2</div>
VM243:1 2 <div>3</div>
VM243:1 3 <div>4</div>
VM243:1 4 <div>5</div>
VM243:1 5 <div>6</div>
VM243:1 6 <div>7</div>
VM243:1 7 <div>8</div>
VM243:1 8 <div>9</div>
VM243:1 9 <div>10</div>
# 第二种方式 可放数组
$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]
有了each之后 就无需自己写for循环了 用它更加的方便
# data()
能够让标签帮我们存储数据 并且用户肉眼看不见
$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
取值
$('div').first().data('info')
"回来吧，我原谅你了!"
$('div').last().data('info')
"回来吧，我原谅你了!"
$('div').first().data('xxx')
undefined
删除数据
$('div').first().removeData('info')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
$('div').first().data('info')
undefined
$('div').last().data('info')
"回来吧，我原谅你了!"
前端框架Bootstrap
该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可
在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可
版本选择建议使用v3版本：https://v3.bootcss.com/
注意
bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery
下载解压之后，可以只留这些文件
布局容器
<div class="container">
左右两侧有留白
</div>
<div class="container-fluid">
左右两侧没有留白
</div>
# 后续在使用bootstrap做页面的时候 上来先写一个div class=container,之后在div内部书写页面
栅格系统
<div class="row"></div>
写一个row就是将所在的区域划分成12份
<div class="col-md-6 "> 获取你所要的份数
# 在使用bootstrap的时候 脑子里面一定要做12的加减法
栅格参数
.col-xs- .col-sm- .col-md- .col-lg-
# 针对不同的显示器 bootstrap会自动选择对应的参数
# 如果你想要兼容所有的显示器 你就全部加上即可
# 在一行如何移动位置
<div class="col-md-8 c1 col-md-offset-2"></div>
排版
bootstrap将所有原生的js标签的文本字体统一设置成了肉眼可以接受的样式
效果一样，但是标签表达的意思不一样（语义）
表格
<table class="table table-hover table-striped table-bordered">
<tr class="success">
<td>1</td>
<td>jason</td>
<td>123</td>
<td>study</td>
</tr>
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
表单
<div class="container">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">登陆页面</h2>
<form action="">
<p>username:<input type="text" class="form-control"></p>
<p>password:<input type="text" class="form-control"></p>
<p>
<select name="" id="" class="form-control">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</select>
</p>
<textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
<input type="submit">
</form>
</div>
</div>
# 针对表单标签 加样式就用form-control
class="form-control"
<input type="checkbox">222
<input type="radio">333
checkbox和radio我们一般不会给它加form-control，直接使用原生的即可
# 针对报错信息 可以加has-error（input的父标签加）
<p class="has-error">
username:
<input type="text" class="form-control">
</p>
按钮
<a href="https://www.mzitu.com/" class="btn btn-primary">点我</a>
<button class="btn btn-danger">按我</button>
<button class="btn btn-default">按我</button>
<button class="btn btn-success">按我</button>
<button class="btn btn-info">按我</button>
<button class="btn btn-warning">按我</button>
#调节尺寸
<button class="btn btn-warning btn-lg">按我</button>
<button class="btn btn-warning btn-sm">按我</button>
<button class="btn btn-warning btn-xs">按我</button>
<input type="submit" class="btn btn-primary btn-block">
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
图标
放在span的class中，可以像文本一样更改颜色，跟文字操作一模一样
<h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>
更改颜色示例
<style>
span {
color: greenyellow;
}
</style>
# 扩展
图标网站：[Font Awesome中文](http://www.fontawesome.com.cn/)
可以下载下来，引入css文件。Font Awesome 完全兼容 Bootstrap 的所有组件。
导航条
代码需要去bootstrap复制，这里是修改导航的颜色的
<nav class="navbar navbar-inverse"> # 可以修改黑色
<nav class="navbar navbar-default"> # 默认为白色
分页器
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li> // 加active激活
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
巨幕
弹框
精美弹框网站：https://lipis.github.io/bootstrap-sweetalert/
需要下载使用，需要引入dist/下的*.css和*.jss文件。它也bootstrap完美兼容
# 中文可能会出现挡住，英文的不会。
swal('你还好吗?')
undefined
swal('你还好吗?')
undefined
swal('你还好吗?','我不好，想你了!')
undefined
swal('你还好吗?','我不好，想你了!','success')
undefined
swal('你还好吗?','我不好，想你了!','warning')
undefined
swal('你还好吗?','我不好，想你了!','error')
undefined
swal('你还好吗?','我不好，想你了!','info')
undefined
# 我们在后面的课程中 还会涉及到该部分内容
进度条
<div class="progress">
<div id='d2' class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
</div>
</div>
<button id="d1" class="btn btn-danger">跑起来</button>
<script>
function func(i){
let tempWidth = 'width:' + i + '%' // style
let contentText = i + '%' // 文本
$('#d2').attr('style',tempWidth).text(contentText)
}
$('#d1').click(function () {
for(let i=0;i<101;i++){
setInterval(func(i),5000)
}
})
</script>
模态框
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
搭建一个图书管理页面
<body>
<!-- 从bootstrap里cv而来的导航条 -->
<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="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Jason</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>
<!-- 左右布局 -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<!-- cv而来的列表 -->
<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>
<div class="col-md-9">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">图书管理系统 <span class="glyphicon glyphicon-qrcode pull-right"></span></h3>
</div>
<div class="panel-body">
<div class="row">
<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-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<!-- pull-right右飘 -->
<button class="btn btn-success pull-right">添加</button>
</div><!-- /.col-lg-6 -->
</div>
<hr>
<div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>username</th>
<th>password</th>
<th>hobby</th>
<th>price</th>
<th class="text-center">action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
<td>666.66</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
<td>666.66</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
<td>666.66</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
<td>666.66</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
<td>666.66</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
<td>666.66</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
<td>666.66</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation" class="text-center">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
作业
今日作业
必做题
1.前端框架Bootstrap整体文档看一遍
2.自定义点赞功能，点击按钮旁边的数字动态加一
3.自己尝试着搭建图书管理系统页面
4.自己尝试着搭建jQuery练习题页面
标签：jQuery,function,标签,bootstrap,day58,div,页面,col,d1 来源： https://blog.csdn.net/zdw20190510/article/details/113000483