JQ事件
JQ如何绑定事件：
$("xx").事件名(callback)
原生JS中 window.onload 和 $(document).ready(callback) 有什么区别
1、window.onload：一个页面只能使用一次，执行效率也很低下：等待所有的资源（HTML、CSS、JS、图片、视频、音频...）加载完毕后才会执行，可以说是最后才执行的代码
2、$(document).ready(callback)：一个页面可以用多个：执行效率相对较高，只等待DOM树加载完毕就会执行
简写：1、$().ready(callback)
2、$(callback);//工厂函数的第四个功能
滚动监听事件
作用：
1、做出更好看更多的特效
2、滚动监听搭配上ajax（往下滚动都显示出更多的新内容）：效果更好
如何使用：
$(window).scroll(()=>{
//1、获取滚动条当前的位置：$(window).scrollTop();
//2、获取xx距离页面顶部有多远：$("xx").offset().top/left;
})
JQ动画：
1、预定义动画：3组9个
1、隐藏hide和显示show：
$("xx").api(time,callback);
特殊：
1、如果没有传入任何一个参数，不带有动画，瞬间显示和瞬间隐藏
2、如果带有事件参数，则具有动画，同时修改元素的宽度和高度和透明度
3、回调函数在动画执行完毕后才会执行 - 屌
$("xx").toggle(time,callback); === show+hide;程序员连判断都不用自己写了
2、滑动效果：隐藏slideUp和显示slideDown：
$("xx").api(time,callback);
特殊：
1、如果没有传入任何一个参数，其实也会带有动画，只不过速度很快
2、如果带有事件参数，则具有动画，同时修改元素的高度
3、回调函数在动画执行完毕后才会执行 - 屌
$("xx").slideToggle(time,callback); === slideUp+slideDown;程序员连判断都不用自己写了
3、淡入淡出：隐藏fadeOut和显示fadeIn：
$("xx").api(time,callback);
特殊：
1、如果没有传入任何一个参数，其实也会带有动画，只不过速度很快
2、如果带有事件参数，则具有动画，同时修改元素的高度
3、回调函数在动画执行完毕后才会执行 - 屌
$("xx").fadeToggle(time,callback); === fadeOut+fadeIn;程序员连判断都不用自己写了
4、自定义动画：
1、并发动画：所有动画一起执行
$("xx").animate({
"css":"新值",
...
},time,callback)
2、排队动画：做完一个在做下一个
$("xx").animate({
"css":"新值"
},time,callback).animate({
"css":"新值"
},time,callback).animate({
"css":"新值"
},time,callback).animate({
"css":"新值"
},time,callback).animate({
"css":"新值"
},time,callback).animate({
"css":"新值"
},time,callback)
特殊：1、animate方法不支持颜色相关和transform转换相关的操作
解决：1、不用animate，用css代替，但是就会损失掉动画执行完毕的回调函数
2、jQueryUI会对animate方法进行增强操作
2、只要是动画就有可能会排队，有的情况要记得停止动画
$("xx").stop().animate()
1、jQueryUI
基于Jquery的开源网页用户界面代码库 - 提供了HTML、CSS、JS的一个组件/插件：跟组件差不多，但是具有JS功能
如何使用jQueryUI：固定步骤
1、下载jQueryUI
2、在页面中引入 - JS顺序千万不能乱：因为jQueryUI是基于jquery的
<link rel="stylesheet" href="jquery-ui-1.13.0.custom/jquery-ui.css">
<script src="jquery-ui-1.13.0.custom/external/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-ui-1.13.0.custom/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
3、挑选出需要的/喜欢的插件，直接放到项目中
4、根据UI提供给你的设计图，修改样式 - 修改不成功，只有一个可能：权重不够！
5、利用ajax去获取数据库中的数据，进行页面的数据渲染
6、千万别忘了在最后调用jQueryUI提供的xx方法实现效果
jQuery封装的ajax
一定要先引入jquery.js：简化DOM、事件、ajax，带来了一些JS没有提供过的新东西 一切的框架：目的都是为了简化DOM开发
第一层：最麻烦，最无敌
$.ajax({//配置信息，其实是ES6提供的一个新语法，叫做解构赋值
url:"xx.php",//必写 - 要连接的服务器的路径
type:"GET/POST",//不是必写 - 默认值：GET
data:"key=value&...",//不是必写 - 看服务器端需不需要接受前端传到后端的消息
dataType:"HTML/XML/JSON",////不是必写 - 默认值为HTML，说白了json字符串
success:data=>{ //必写，成功后才会执行的回调函数，并且会自动帮你得到服务器端响应的消息
data->xhr.responseText
}
})
第二层：再次简化：3个API，缺点：不能做跨域操作
1、$("xx").load("url","data",callback); - 垃圾
缺点：
1、数据会直接放在xx元素上，不能把数据给用户看
2、无法设置get或者post请求类型
3、无法给传回来的数据解开包装
2、$.get("url","data",callback,"JSON");
3、$.post("url","data",callback,"JSON");
第三层：特殊功能：跨域：你可以去拿别人电脑上的数据库和服务器，合作开发
同源策略：浏览器的保护机制，访问时服务器要求【协议、域名、端口号】相同的情况才可以，只要有一个不同则会触发此保护机制
跨域：跨过同源策略，能够访问别人的电脑上的东西：
技术：
1、JSONP
2、CORS - 后端
3、反向代理
前端：jQuery封装的第三层ajax自带JSONP技术，跨域技术，帮助跨域
$.getJSON("url?自定义键名=?","data",callback);
注意：
1、只能是GET请求
2、不需要脱衣服
3、?是固定写法，jQuery中JSONP会自动将?进行赋值，赋值为一个通行令函数
后端（PHP）：
echo $_GET["自定义键名"]."(".JSON_encode(数据库整理出来的JSON数据).")";
沟通：
1、通行令的名字叫什么
2、你的ip完整的地址要给我：打开cmd：ipconfig - ipv4
3、前端还应该说些什么
git工具（9+） 对应 svn工具（1-）
git工具：分布式版本管理控制工具：分布式：人人都是客户端，人人都是服务器端（云端）
目的：就算我们在家里/多方合作开发
固定使用：
0、注册gitee
1、先安装：Git-2.18.0-64-bit - 命令行方式
2、再安装：TortoiseGit-2.6.0.0-64bit.msi - 小乌龟（简化操作，并且带来了一些提示标志），一定要重启电脑
注意：小乌龟要输入gitee的用户名和邮箱
3、项目经理/组长：
打开网站：gitee码云：https://gitee.com/?from=osc-index
登录
创建项目仓库
把仓库地址发给对应的开发人员 https://gitee.com/daiyue0221/h52202.git
4、开发人员
1、拿着项目经理给你的仓库地址，把仓库拉取到本地：任意位置右键git bash here：
git clone 仓库地址
2、关闭掉git bash here，在项目仓库文件夹中再次打开git bash here
3、开始进行项目开发/工作
4、在下班之前，要提交到云端gitee：
git add . - 文件提交到了本地
git commit -m"必须写日志" - 文件提交到了git服务器
git push origin master - 推送到云端
5、第二天上班之前，更新一下
git pull origin master - 更新
面试题：git的仓库地址：https://gitee.com/用户名/仓库名
Bootstrap
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。类似于jQueryUI，提供了HTML/CSS/JS，程序员只要复制+修改
用于开发【响应式布局】、移动设备优先的 WEB 项目。
目的：简化响应式开发
重点：大部分都是直接复制，重点：1、栅格式布局 2、动态样式语言sass和less，静态样式语言css不是人写的
2、如果想要做出响应式布局必不可少的东西，即使有了bootstrap：
1、不用绝对单位（px,cm,mm），使用相对单位（rem+vw）
2、媒体查询@media
3、响应式图片，而不要直接给图片设置宽度为100%，导致图片失帧
4、元标签：<meta name="viewport">
但是不是所有的网站都适合做成响应式网页：比如电商
3、固定使用：
0、打开官方文档：
1、下载：
2、引入：
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
3、去挑选你喜欢的东西，复制
4、根据设计图进行样式的修改
5、根据数据渲染页面
4、bootstrap提供了三方面：提供了大概1000+个class，只需要看文档，而且还提供了css reset
1、css全局样式
2、组件
3、javascript插件
5、*****bootstrap栅格式布局方式 - 简化响应式布局开发
固定步骤：10步
1、必须放入一个父容器：<div class="container/container-fluid"></div>
2、再其中放入行：<div class="row"></div>
3、再其中放入列：<div class="col-*-*"></div>
4、第一个*：屏幕：bootstrap把屏幕分为了4种：col-lg(>=1200)/md(>=992)/sm(>=768)/xs(<=767)
5、第二个*：占的列宽，要占几份，bootstrap把一行等分为了12份
6、正是因为class支持写多个，可以设置某个div在不同屏幕，占比不同
7、更小的屏幕可以管住更大的屏幕，但是最大的屏幕只能管住自己，但是自己有一定有用自己的
col-lg-* 只能管LG屏幕
col-md-* 只能管LG/MD屏幕
col-sm-* 只能管LG/MD/SM屏幕
col-xs-* 管所有屏幕
8、可以设置某列在某个屏幕下隐藏：
hidden-屏幕 只管当前屏幕
9、列可以设置偏移量：理解为向左顶出几份位置
col-lg-offset-* 只能管LG屏幕
col-md-offset-* 只能管LG/MD屏幕
col-sm-offset-* 只能管LG/MD/SM屏幕
col-xs-offset-* 管所有屏幕
10、栅格式布局是一个怪异盒模型：设置间距，绝对不能使用margin，使用边框设置间距
标准盒模型：内容+内边距+边框+外边距
怪异盒模型：内容+外边距
扩展：$sql="SELECT 字段名,... FROM 表名 ORDER BY id DESC LIMIT 开始位置,截取的个数;";
scss、less
静态样式语言：css，作为一门语言，并不称职，不具备语言的一些基础概念（变量、运算、循环、分支、函数...）
所以，导致我们在开发和维护大型项目的时候极不方便
根本就不是人写的：
1、是动态样式语言【编译】出来的
2、写起来太麻烦
1、动态样式语言：scss、less：在css的基础上，添加了新特性，目的：简化css开发
常见动态样式语言：
1、sass->*scss
2、less
3、stylus - 和css的语法差别太大
scss和less，你只要会css，基本就会了
2、编译：浏览器只认识css，不认识其他的动态样式语言，动态样式语言=(编译)=>自动生成一个css，HTML真正引入的是css
如何编译：
1、vscode - 安装一个插件，easy sass，编写你的sass/scss只要一保存，就会自动生成一个css
2、HBuilder - 安装一个插件
3、网上还有很多很多的编译工具
3、学习：scss的新特性：
1、*变量：
创建：$变量名:值;
特殊：1、使用时：$不能省略
2、不区分中划线和下划线
3、依然具有类似于我们js的作用域：全局变量和局部变量，如果你的某个变量出现在某个选择器中，则为一个局部变量
2、*****嵌套：选择器可以进行嵌套
语法：
.d1{
...
.d2{
...
.d4{
...
}
}
+.d3{
...
}
&:hover{...}
}
编译：
.d1{...}
.d1 .d2{...}
.d1+.d3{...}
.d1 .d2 .d4{...}
.d1:hover{...}
特殊：
1、层级选择器：由自己来决定，如果省略不写，默认是后代选择器（空格）
2、&类似于javascript中this，&在那个大括号里面，就是指的谁 .nav>.container+ul~li>a:hover
3、*引入/导入：
@import "文件名";
把多个scss汇总为一个css
4、注释：多行注释：/*注释内容*/
5、*****混合器：类似于javascript中函数：
1、创建混合器
@mixin 混合器名($形参名:默认值,...){
css属性名:$形参名,
...
}
2、调用混合器
@include 混合器名($形参名:实参);
特殊：
1、使用时，关键字别掉了
2、传参的顺序无所谓，并且不传实参，使用默认值
3、碰到重复的代码了，在提取出来封装成一个混合器
6、继承：垃圾
7、运算：尤其是颜色值运算，越往0靠近数字越小，就会越暗淡，数字越靠近f越大，就会越明亮
8、也支持分支和循环，但是不推荐，scss目的：简化css
学完scss就意外着学完了less，几乎完全相同：
1、变量：@变量名:值;
2、混合器，不用任何关键字
没了，其余都一模一样
扩展
git（9+）：分布式版本管理控制工具：人人都是客户端，人人都是服务器端（云端） - 有可能被黑客攻击、破解
svn（1-）：集中式版本管理控制工具：小乌龟操作：一个公司里，只有一台电脑是服务器端，其余人都是客户端（局域网使用），缺点：服务器坏了
哪些公司：老公司，老项目，保密性要求极强的公司
使用步骤：
0、如果你是项目经理：安装svn服务器端：VisualSVN-Server-4.3.2-x64.msi
1、为每一个参与此项目的员工创建一个账号
2、创建项目仓库
3、把账号和仓库地址发你
4、统筹全局（监督、任务进度）
1、开发者：安装小乌龟：TortoiseSVN-1.14.1.29085-x64-svn-1.14.1.msi
1、任意位置右键svn checkout拉出/检出仓库
2、开发
3、下班之前，提交：右键svn commit，选中你修改的/创建的提交，记得写日志
4、第二天，更新：右键svn update
