前端进阶 - 学习笔记
一. 索引
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的一种编写标准
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> 模态框组件
二. 练习题
根据如图需求，实现用户的CRUD：
（1）当页面加载完成功后显示用户列表；
（2）用户新增；
（3）选中"序号"才能用户编辑或者删除；
（4）可以根据用户工号和名称查询（不考虑模糊查询、使用完整的工号和名称）
