前端进阶

一. 索引

　　1.　　jQuery

　　　　　   <1>　　简介

　　　　　　　　　　　　jQuery是JavaScript程序库

　　　　　　　　　　　　引入： 

　　　　　　　　　　　　　　<script src="js/jquery-3.4.1.min.js"></script>

　　　　　　　　　　　    基本语法：

　　　　　　　　　　　　　　<script>
    　　　　　　　　　　　　　　　　$(selector).action();
　　　　　　　　　　　　　　</script>　　　　　　

　　　　　<2>　　选择器

　　　　　　　　　　　　基本选择器
　　　　　　　　　　　　　　标签选择器　　-　　如 $("h2" ) 
　　　　　　　　　　　　　　类选择器　　-　　$(" .className")
　　　　　　　　　　　　　　ID选择器　　-　　$(" #idName")
　　　　　　　　　　　　　　并集选择器　　-　　$("div,p,.className" )
　　　　　　　　　　　　　　交集选择器　　-　　$("h2.className")
　　　　　　　　　　　　　　全局选择器

　　　　　　　　　　　　层次选择器
　　　　　　　　　　　　　　后代选择器　　-　　如$("#menu span" )
　　　　　　　　　　　　　　子选择器　　-　　$(" #menu>span" )
　　　　　　　　　　　　　　相邻元素选择器　　-　　$(" h2+dl " )
　　　　　　　　　　　　　　同辈元素选择器　　-　　$(" h2~dl " )
　　　　　　　　　
　　　　　　　　　　　　属性选择器
　　　　　　　　　　　　　　${"[attribute]"}

　　　　　　　　　　　　　　${"[attribute = value] "}
　　　　　　　　　　　　　　... 

　　　　　　　　　　　　过滤选择器
　　　　　　　　　　　　　　:first
　　　　　　　　　　　　　　:last
　　　　　　　　　　　　　　... 

　　　　　<3>　　事件

　　　　　　　　　　　鼠标事件
　　　　　　　　　　　　　click() - 单击鼠标时
　　　　　　　　　　　　　mouseover() - 鼠标移过时
　　　　　　　　　　　　　mouseout() - 鼠标移出时

　　　　　　　　　　　键盘事件
　　　　　　　　　　　　　keydown() - 按下键盘时
　　　　　　　　　　　　　keyup() - 释放按键时

　　　　　　　　　　　表单事件
　　　　　　　　　　　　　focus() - 获得焦点
　　　　　　　　　　　　　blur() - 失去焦点

　　　　　　　　　　　鼠标悬停复合事件
　　　　　　　　　　　　　hover() - 相当于mouseover与mouseout事件的组合

　　　　　　　　　　　连续点击复合事件
　　　　　　　　　　　　　toggle() - 鼠标的连续单击事件

　　　　　　　　　　　事件的动态绑定 （绑定 一个/多个 事件）

　　　　　<4>　　元素的隐藏和显示

　　　　　　　　　　　改变元素的宽和高（带动画效果）
　　　　　　　　　　　　　显示 - show("slow" / "fast" / 毫秒数)
　　　　　　　　　　　　　隐藏 - hide("slow" / "fast" / 毫秒数)
　　　　　　　　　　　　　显示的隐藏，隐藏的显示 - toggle("slow" / "fast" / 毫秒数)

　　　　　　　　　　　改变元素的高（拉伸效果）
　　　　　　　　　　　　　显示 - slideDown("slow" / "fast" / 毫秒数)
　　　　　　　　　　　　　隐藏 - slideUp(speed)
　　　　　　　　　　　　　slideDown+slideUp - slideToggle( speed )

　　　　　　　　　　　不改变元素的大小（淡入淡出效果）　

　　　　　　　　　　　　　显示 - fadeIn( speed )
　　　　　　　　　　　　　隐藏 - fadeOut( speed ) 
　　　　　　　　　　　　　fadeIn+fadeOut - fadeToggle( speed )

　　　　　　　　　　　　　fadeTo( speed , 透明度 )  - 渐变为给定的不透明度（值介于 0 与 1 之间）

　　　　　　　　　　　链
　　　　　　　　　　　　　同一个元素上，运行多个jQuery方法，如：

　　　　　　　　　　　　　$("div").css("backgroundcolor","pink").css("color","green").slideUp(1000).slideDown(1000);

　　　　　<5>　　DOM和CSS的操作

　　　　　　　　　　　属性函数 
　　　　　　　　　　　　　attr()　　获得/修改元素的属性值
　　　　　　　　　　　　　val()　　 获得/修改表单元素中的value值
　　　　　　　　　　　　　html()　　获得/修改元素中的内容（标签+文本）
　　　　　　　　　　　　　text()　　获得元素中的文本

　　　　　　　　　　　样式函数
　　　　　　　　　　　　    css()　　获得/设置属性的值
　　　　　　　　　　　　　 width()　　获得/设置元素的宽度
　　　　　　　　　　　　　 height()　　获得/设置元素的高度

　　　　　　　　　　　类样式函数
　　　　　　　　　　　　　addClass()　　　　为元素添加类样式
　　　　　　　　　　　　　removeClass()　　将元素的类样式移除
　　　　　　　　　　　　　toggleClass()　　样式的切换（有->无，无->有）

　　　　　　　　　　　节点操作
　　　　　　　　　　　　　创建节点　-　$()用于获取或创建节点
　　　　　　　　　　　　　插入节点
　　　　　　　　　　　　　替换节点
　　　　　　　　　　　　　复制节点
　　　　　　　　　　　　　删除节点

　　　　　　　　　　　　

　　　　　<6>　　节点的遍历
　　　　　　　　　　　　　 （向上遍历）祖先元素
　　　　　　　　　　　　　   同辈元素
　　　　　　　　　　　　　　后代元素
　　　　　　　　　　　　　　元素的过滤　　　　　　　　　　　　　　

　　　　　　<7>　　案例 - 手风琴特效 & 购物车结算

　　2.　　ES6

　　　　　　<1>　　简介

　　　　　　　　　　　　ES6 是 JavaScript的一种编写标准

　　　　　　<2>　　搭建前端环境 - Node 环境 & NPM环境

　　　　　　　　　　　　Node.js 是运行在服务端的 JavaScript

　　　　　　　　　　　　NPM全称Node Package Manager，是Node.js包管理工具

　　　　　　<3>　　ES6基本语法

　　　　　　　　　　　　1.　　let声明变量

　　　　　　　　　　　　2.　　const声明变量

　　　　　　　　　　　　3.　　解构赋值

　　　　　　　　　　　　　　　　　　将集合型数据进行拆分，把里面的值逐一遍历获取

　　　　　　　　　　　　　　　　　　数组/对象解构

　　　　　　　　　　　　4.　　模板字符串

　　　　　　　　　　　　　　　　　　相当于加强版的字符串

　　　　　　　　　　　　5.　　声明对象简写

　　　　　　　　　　　　6.　　定义方法简写

　　　　　　　　　　　　7.　　对象拓展运算符

　　　　　　　　　　　　　　　　　　拓展运算符 {...} 将参数对象中所有可以遍历的属性拿出来，然后拷贝给新对象

　　　　　　　　　　　　8.　　函数的默认参数

　　　　　　　　　　　　9.　　函数的不定参数

　　　　　　　　　　　　　　　　　　function f(...arg) {函数体}

　　　　　　　　　　　　10.　　箭头函数

　　　　　　　　　　　　　　　　　　更简洁的函数书写方式：参数 => {函数体}

　　　　　　　　　　　　11.　　Promise

　　　　　　　　　　　　　　　　　　用来解决回调函数的嵌套噩梦

　　　　　　　　　　　　12.　　模板化

　　　　　　　　　　　　　　　　　　用来import/export js文件

　　　　　　　　　　　　13.　　babel

　　　　　　　　　　　　　　　　　　babel是一个将ES6代码转为ES5代码的转码器

 

　　3.　　Bootstrap

　　　　　　<1>　　简介

　　　　　　　　　　　　Bootstrap是目前最受欢迎的响应式前端框架

　　　　　　　　　　　　下载和使用

　　　　　　<2>　　表格

　　　　　　　　　　　　表格标签

　　　　　　　　　　　　表格样式

　　　　　　　　　　　　响应式表格　　

　　　　　　　　　　　　　　小于768px，出现边框　　　　　

　　　　　　　　　　　　　　　　<table class="table table-responsive">

　　　　　　<3>　　表单

　　　　　　　　　　　　布局　　-　　默认/内联布局

　　　　　　　　　　　　控件　　-　　输入框/文本框/复选框/单选框...

　　　　　　<4>　　按钮 & 图片

　　　　　　<5>　　下拉菜单组件 & 分页组件　　

　　　　　　<6>　　栅格系统

　　　　　　　　　　　　当浏览器大小发生变化的时候，我们可以控制每行的元素占用几个格子，从而达到响应式的效果

　　　　　　<7>　　缩略图组件

　　　　　　<8>　　模态框组件

　　　　　　<9>　　案例 - 首页轮播大图 & 响应式导航条

　　

二. 练习题

　　根据如图需求，实现用户的CRUD：

　　　　（1）当页面加载完成功后显示用户列表；

　　　　（2）用户新增；

　　　　（3）选中"序号"才能用户编辑或者删除；

　　　　（4）可以根据用户工号和名称查询（不考虑模糊查询、使用完整的工号和名称）