目录
一、jQuery结束
1 阻止后续事件执行
// 有些标签会自带一些事件，比如说提交事件，会自动刷新当前页面，我们可以通过下面的方法组织后续发生的刷新事件
<script>
$('#d2').click(function (e) {
$('#d1').text('宝贝 你能看到我吗?')
// 阻止标签后续事件的执行 方式1
// return false
// 阻止标签后续事件的执行 方式2
// e.preventDefault()
})
</script>
2 阻止事件冒泡
// 比如我们写了一个div里面包了一个p，p里面包了一个span，给他们都设置了点击事件，由于span在p和div的范围里面，所以点击span也会触发p和div的事件，这叫做事件冒泡
<script>
$('#d1').click(function () {
alert('div')
})
$('#d2').click(function () {
alert('p')
})
$('#d3').click(function (e) {
alert('span')
// 阻止事件冒泡的方式1
// return false
// 阻止事件冒泡的方式2
// e.stopPropagation()
})
</script>
3 事件委托
// 当我们写好页面去展示出来的时候，这个时候我们去通过console动态的添加标签，这个标签无法被我们原本页面中的普通事件渲染，可以通过事件委托的方式
// 在指定的范围内，把事件委托给某个标签，无论这个标签是先写好的还是动态创建的
<button>是兄弟，就来砍我!!!</button>
<script>
// 给页面上所有的button标签绑定点击事件
// $('button').click(function () { // 无法影响到动态创建的标签
// alert(123)
// })
// 事件委托 在body范围内，给所有的button标签委托click事件
$('body').on('click','button',function () {
alert(123)
})
</script>
4 页面加载
// 等待页面加载完毕再执行代码
window.onload = function(){
// js代码
}
"""jQuery中等待页面加载完毕"""
// 第一种
$(document).ready(function(){
// js代码
})
// 第二种
$(function(){
// js代码
})
// 第三种
"""直接写在body内部最下方"""
5 动画效果
$('#d1').hide(5000) // 5秒内缩小到消失
w.fn.init [div#d1]
$('#d1').show(5000) // 5秒内方法到出现
w.fn.init [div#d1]
$('#d1').slideUp(5000) // 5秒内向上消失
w.fn.init [div#d1]
$('#d1').slideDown(5000) // 5秒内向下显示
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) // 淡出，后面跟淡出的透明度0是完全淡出
w.fn.init [div#d1]
6 补充知识点
$('div').data('info','回来吧，我原谅你了!') // 这种隐藏方式在页面中看不到
// each（）获取具体标签信息
$('div') // 这个获取的是一个jQuery对象，包含着所有div标签，要拿到全部还需要for循环
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>
// data（） 隐秘的存储数据
$('div').data('info','回来吧，我原谅你了!') // 这种隐藏方式在页面中看不到
$('div').first().removeData('info') // 移除隐藏属性
二、前端框架Bootstrap
注意：bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery
bootstrap官网：https://v3.bootcss.com/
bootCDN官网：https://www.bootcdn.cn/
图标库官网：http://www.fontawesome.com.cn/faicons/
使用图标库的时候需要下载到本地，然后连接其中的css文件，具体使用就是集成类即可
1 布局容器
<div class="container">
左右两侧有留白
</div>
<div class="container-fluid">
左右两侧没有留白
</div>
// 后续在使用bootstrap做页面的时候 上来先写一个div class=container,之后在div内部书写页面
2 栅格系统
<div class="row"></div>
// 写一个row就是将所在的区域划分成12份
<div class="col-md-6 "> // 获取你所要的份数
// 在使用bootstrap的时候 脑子里面一定要做12的加减法
3 栅格参数
.col-xs- .col-sm- .col-md- .col-lg-
# 针对不同的显示器 bootstrap会自动选择对应的参数
# 如果你想要兼容所有的显示器 你就全部加上即可
# 在一行如何移动位置
<div class="col-md-8 c1 col-md-offset-2"></div> # 从左向右移动2个单位
4 排版
bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式
效果一样，但是标签表达的意思不一样（语义）
5 表格
<table class="table table-hover table-striped table-bordered">
// 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>
6 表单
表单里的样式除了特别几个选择框无脑加form-control就行了
<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>
// 针对报错信息 可以加has-error（input的父标签加）
<p class="has-error">
username:
<input type="text" class="form-control">
</p>
7 按钮
<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）元素。
8 图标
<h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>
<style>
span {
color: greenyellow;
}
</style>
// 去bootstrap官网找到图标，复制来即可
9 导航条
<nav class="navbar navbar-inverse"> // 白色
<nav class="navbar navbar-default"> // 黑色
10 分页器
<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>
<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>
11 弹框
// 是js中alter的进阶版本 优化了视觉效果
swal('你还好吗?')
undefined
swal('你还好吗?')
undefined
swal('你还好吗?','我不好，想你了!')
undefined
swal('你还好吗?','我不好，想你了!','success')
undefined
swal('你还好吗?','我不好，想你了!','warning')
undefined
swal('你还好吗?','我不好，想你了!','error')
undefined
swal('你还好吗?','我不好，想你了!','info')
undefined
# 我们在后面的课程中 还会涉及到该部分内容