今日内容概要

• jQuery结束
• 前端框架Bootstrap
• 手动搭建一个图书馆管理系统页面

今日内容详细

阻止后续事件执行

<script>
    $('#d2').click(function(e)){
    	$('#d1').text('你好世界！')
    	// 阻止标签后续事件的执行  方式一
    	// return false
    	// 阻止标签后续事件的执行  方式二
    	// e.preventDefaule()
    }
</script>

阻止事件冒泡

<script>
	$('#d1').click(funciton(){
		alter('div')
	})
	$('#d2').click(function(){
		alert('p')
	})
	$('#d3').click(function(d){
		alert('span')
		// 阻止事件冒泡方式一
		// return false
		// 阻止事件冒泡的方式二
		// e.stipPropagation()
	})
</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)
$('#d1').show(5000)
$('#d1').slideUp(5000)
$('#d1').slideDown(5000)
$('#d1').fadeOut(5000)
$('#d1').fadeIn(5000)
$('#d1').fadeTo(5000,0.4)

补充

# each()
# 第一种方式
$('div')
$('div').each(function(index){console.log(index)})
$('div').each(function(index,obj){console.log(index,obj)})

# 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})

# data()
"""
能够让标签帮我们存储数据  并且用户肉眼看不见
"""

$('div').data('info','男人至死是少年！')

$('div').first().data('indo')
$('div').last().data('info')
$('div').first().removeData('info')

前端框架Bootstrap

在使用Bootstrap的时候所有的页面样式都只需要通过class来调节

布局容器

<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">  获取所要的份数

栅格参数

.col-xs- #手机   .col-sm- #平板  .col-md- #电脑  .col-lg- #大屏
# 针对不同的显示器 bootstrap会自动选择对应的参数
# 如果想要兼容所有的显示器  全部加上即可


# 在一行如何移动位置
<div class="col-md-8 c1 col-md-offset-2"></div>

表格

<table class="table table-hover table-striped table-bordered">

<tr class="success">
	<td>1</td>
	<td>lxx</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-erro(input的父标签加)
<p class="has-error">
	username:
    <input type="text" class="form-control">
</p>

按钮

<a href="https://www.baidu.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%的宽度，而且按钮也变为了块级

图表

<h2 class="text-center">登录页面<span class="glyphicon glyphicon-user"></span>
</h2>
	<style>
		span{
			color:greenyeelow;
		}
    </style>
    

导航条

<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">&laquo;</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-babel="Next">
            <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>