8、前端--阻止后续事件执行、事件冒泡、文档加载、事件委托、动画效果、前端框架bootstrap、布局容器、栅格系统、图标

阻止后续事件执行

$('#d1').click(function (e) {
            alert(123)
            // 1.阻止该标签后续事件的执行 方式1   推荐
            // return false
            // 2.阻止该标签后续事件的执行 方式2   了解
            // e.preventDefault()
        })

事件冒泡

# 子标签的事件完成后会向父标签提交信号，父标签如有相同类型事件则也会执行，然后再向父标签的父标签提交信号。

# 下面有三个事件，如果是div套p套span标签，那么当点击span时，会依次触发span、p、div标签绑定的点击事件
# 依次会弹出span、p、div

$('div').click(function (e) {
	alert('div')
})

$('p').click(function (e) {
	alert('p')
	// 阻止事件冒泡的方式1
	// return false
	// 阻止事件冒泡的方式2
	// e.stopPropagation()
})

$('span').click(function (e) {
	alert('span')
})

文档加载

// 原生js文档加载方式
	window.onload = function () {}
// jQuery文档加载方式01
	$(document).ready(function () {})
// jQuery文档加载方式02
	$(function(){})

事件委托

// 将body内部所有的点击事件委托给button按钮执行
$('body').on('click','button',function () {
    // 创建一个button标签
    var btnEle = document.createElement('button')
    // 设置内部文本
    btnEle.innerText = '点我'
    // 将button标签添加到body内部
    $('body').append(btnEle)
})

/*
将事件复制有两个方式：
	1、clone 后面参数加true
	2、事件委托
*/

动画效果

  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)  // 创建的i标签（+1效果）1秒后消失（变透明）
  })

前端框架bootstrap

Bootstrap框架
	2.X 3.X 4.X  # 推荐使用3.X版本

使用框架调整页面样式一般都是操作标签的class属性即可

bootstrap需要依赖于jQuery才能正常执行(动态效果)

引入方式
	本地引入(最完整的)
    	1.引入jQuery
    	2.引入bootstrap的css文件
    	3.引入bootstrap的js文件
    CDN引入
    	1.引入jQuery CDN
    	2.引入bootstrap css的 CDN
    	3.引入bootstrap js的 CDN

注意：第一次引入bootstrap框架最好从本地引入，防止写代码没有提示
	让pycharm记住bootstrap的关键字

布局容器

container		左右留白
container-fluid  左右不留白

栅格系统

row			行  # 一个row就是一行 一行是固定的12份
col-md-1	占1份 md: middle
col-sm-n	占n份 sm: small
col-xs-n	占n份 xs: extra small(特小)
col-lg-n	占n份 lg: large

图标

bootstrap自带的
	通过span标签的class属性值来选择不同图标
fontawesome
	专门提供图标的库  # 完美兼容bootstrap框架
	通过i标签的class属性值选择不同图标