2022.5.09
jQuery封装了三个部分：DOM操作、事件、ajax
1、jQuery事件：
绑定事件：$("xx").bind("事件名",callback);
简化写法：$("xx").事件名(callback);
已经学过的事件：load/click/mouseover(冒泡)|mouseenter（无冒泡）/mouseout(冒泡)|mouseleave（无冒泡）/mousemove/focus/blur/input/change/submit/readystatechange/contextmenu/dblclick/键盘事件/resize
未学习的事件：scroll - 滚动事件
1、面试/鄙视题：原生JS中 window.onload 和 jQuery中的$(document).ready(callback)有什么区别?
原生JS中 window.onload：等待所有资源（HTML、CSS、js、图片、视音频）全部加载完毕后，才会执行 - 最后才会执行的，而且一个页面只能用一次
jQuery中的$(document).ready(callback)：等待DOM加载完毕就执行，比上面那个效率高一些，而且一个页面可以使用多次此事件
简化写法：
1、$().ready(callback);
2、$(callback)
我们都不会用到，因为我们的代码始终放在最下面，但是必须要学，因为我们以后可能会用别人的代码：
2、滚动事件：
$(window/document).scroll(()=>{
1、获取当前滚动条的位置：$(window).scrollTop();
2、获取某个元素距离页面顶部/左边的位置：$("xx").offset().top/left;
})
2、jQuery动画
1、预定义动画：3组
1、隐藏和显示：
隐藏：$("xx").hide(time,callback);
显示：$("xx").show(time,callback);
- 不传入任何参数的情况，没有任何动画效果的，瞬间显示隐藏
- 只要一旦加入时间参数，则具有动画 - 同时修改宽度高度透明度
- callback动画执行完毕就会立刻执行我们的回调函数
切换：$("xx").toggle = hide+show; - 简化了我们程序员自己去判断
2、滑动效果：
隐藏：$("xx").slideUp(time,callback)
显示：$("xx").slideDown(time,callback);
- 不传入任何参数的情况，也具有任何动画效果的，只不过速度很快
- 只要一旦加入时间参数，则具有动画 - 同时修改高度
- callback动画执行完毕就会立刻执行我们的回调函数
切换：$("xx").slideToggle = slideUp+slideDown; - 简化了我们程序员自己去判断
3、淡入淡出：
隐藏：$("xx").fadeOut(time,callback)
显示：$("xx").fadeIn(time,callback);
- 不传入任何参数的情况，也具有任何动画效果的，只不过速度很快
- 只要一旦加入时间参数，则具有动画 - 同时修改透明度
- callback动画执行完毕就会立刻执行我们的回调函数
切换：$("xx").fadeToggle = fadeOut+fadeIn; - 简化了我们程序员自己去判断
2、自定义动画：
1、并发动画：所有操作一起执行
$("xx").animate({
"css属性名":"css属性值",
...
},time,callback)
不支持：1、不支持颜色的操作 - 明天学的jQueryUI，可以增强此方法
2、不支持转换操作：transform：旋转，缩放，位移都不支持 - jQueryUI也支持不了
解决：建议使用css();自己搭配上一个transition过渡
2、排队动画：一个动画做完在做另一个
$("xx").animate({
"css属性名":"css属性值",
},time,callback).animate({
"css属性名":"css属性值",
},time,callback).animate({
"css属性名":"css属性值",
},time,callback).animate({
"css属性名":"css属性值",
},time,callback).animate({
"css属性名":"css属性值",
},time,callback)
强调：其实只要是动画就会排队，记得需要的时候停止动画
stop();
扩展：1、获取下标：index()
2、if(!$("xx").is(":animated")){//xx必须是没有jQuery动画的时候才能执行
}
if(!$("xx").is(":hidden")){//xx必须是没有隐藏的时候才能执行
}
2022.5.10
1、JQ目前学到的：封装了DOM、事件、动画（JS没有的）、Ajax
2、jQueryUI：提供了HTML、CSS、JS的一个组件/插件库，我们一般来说直接使用（梭） - 基于Jquery
如何使用一个插件库：
1、下载jQueryUI这一套提供的css和js - 你不需要了
2、引用该引入的文件
<link rel="stylesheet" type="text/css" 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、在整个插件库中，挑选出你喜欢的插件使用
个人推荐的：
1、选项卡/标签页
2、菜单/menus
3、手风琴/折叠面板
4、模糊查询/自动完成
5、特效：其实是增强了我们的toggle("特效名称",time,callback)方法
6、增强了animate函数，今天支持颜色了，转换依然不支持
7、交互自己试着玩
并不是所以的都好，甚至有效果没有提供
4、根据设计图修改样式 - 如果修改失败了：1、写错了 2、优先级不够
5、*使用ajax去拿出后端的数据
6、*根据数据渲染此插件 - 记得最后调用插件函数
3、日期选择器：
1、wdatepick.js文件：不好看，有点老，皮肤少
1、先引入
2、$("input").focus(function(){
WdatePicker({
el: this,//设置显示日期选择器的元素在哪里
isShowToday: false,
isShowClear: false,
isShowOK: false,//以上三个都是开关，分别对应着今天、清空、确定按钮，
如果这三个按钮都关闭了，快速选择按钮也会没有
lang:'zh-tw',//设置语言
skin:'blueFresh',//皮肤
dateFmt:'yyyy年MM月dd日 HH:mm:ss',//格式化日期
maxDate:'%y-%M-{%d+7}',//设置最大时间为当前的7天过后
minDate:'%y-%M-%d',//设置最大时间为当前的7天过后
isShowWeek:true,//显示是今年的第几周
isShowOthers:false,//仅仅显示当前月份的天数
readOnly: true,//用户只能选择不能输入
});
})
2、更推荐：layDate.js文件：原本这一块是属于layUi.js，比较常用，独立出来了，2021年12月下架了：开源项目，赚不到钱
1、引入
2、查看离线文档
4、jQuery插件库：一切的插件，应有尽有，需要登录账号，一天只能白嫖2个
jQuery之家：几乎等效于jQuery插件库，纯白嫖
2022.5.11
jQuery简化DOM、事件、动画、Ajax
一共将ajax封装了三层：
1、$.ajax({ - 最复杂，最无敌，也能做跨域
url: "xx.php",//服务器文件的路径
type: "GET/POST",//请求类型，默认为GET
data: "key=value&...",//发送到后端的请求消息
dataType: "HTML/XML/JSON/JSONP",//响应数据的类型，默认为HTML，显示字符串
jsonp: "通行令名称",
success: data=>{
//ajax成功才会执行的代码，data会自动接住以前xhr.responseText;
},
});
2、第二层封装变得更加的简单：3种
1、$("xx").load("url","data",callback);
url-服务器文件的路径
data-发送到后端的请求消息
callback-成功的回调函数
缺点：1、数据会显示在页面上
2、只能是GET请求，不能设置为POST
3、没有帮助我们脱衣服
2、$.get("url","data",callback,"JSON");
3、$.post("url","data",callback,"JSON");
3、第三层特殊功能
浏览器有一个保护机制：同源策略，要求协议、域名、端口号必须相同才可以访问
只要有一个不同就会触发到此保护机制，不允许访问了
跨域：跨过保护机制，jQuery运用到了一个跨域技术JSONP
前端语法：
$.getJSON("url?通行令=?","data",callback);
特殊：1、只能是get请求
2、自带脱衣服功能
3、随便=? 问号是什么，jQuery用到的JSONP技术带上一个通行令函数
后端语法：
echo $_GET["通行令"]."(".JSON_encode($arr).")";
拿到你们电脑上的数据：
1、打开cmd：拿到你的ip地址发出来
2、把完整的php的路径给我 http://192.168.20.xxx/books/server.php
3、要告诉我，我需要说什么话，发什么请求消息：比如 talk=getBooks&vip=1
4、打开apache和mysql
5、告诉我，你的随便写的是什么
2、GIT：分布式版本管理控制工具：
分布式：人人都是客户端，人人都是服务器端（云端）
作用：项目管理：在家里协同开发
固定使用步骤：
1、先去gitee网站注册一个账号
2、安装一个Git-2.18.0-64-bit.exe（控制台）
3、在安装TortoiseGit-2.6.0.0-64bit.msi（小乌龟：带来小图标，帮助你观察现在文件是什么状态）
在安装时有一处会提示你，要你输入你的gitee的账号和邮箱
4、重启电脑
5、项目经理
1、在gitee上创建项目仓库
2、把仓库地址发送给对应的开发人员：https://gitee.com/daiyue0221/h52201.git
6、开发人员：
1、任意位置右键点击git bash here
2、克隆/把项目仓库拉下来：git clone 仓库地址; - 完整的全部拉一边（适合用于第一次）
3、关闭控制台，重在文件夹中再次打开git bash here
4、开发你的项目
5、下班前把你的今天的内容提交回云端
1、git add 文件名; - 蓝色的+号：添加到了git本地
2、git commit -m"日志必须写" - 绿色的勾号：提交到git本地服务器
3、git push origin master - 推到云端
6、第二天早上来了，要更新/下载一下：
git pull origin master - 拉更新的新内容（适合用于后续更新）
面试题：背出你的git仓库的链接地址：https://gitee.com/账号/仓库名称
20225.12
1、Bootstrap：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单 提供了HTML/CSS/JS，类似于我们之前学习jQueryUI，比他更加的强大，好用，好看，而且主要支持响应式网页开发 - 以前CSS3的媒体查询
2、只要是做响应式开发：必不可少的东西
1、不用绝对单位px，使用相对单位rem em vw %
2、必须写上meta元标签，viewport
3、图片一定要使用响应式图片：max-width:100%
4、就算有了bootstrap也离不开的媒体查询
3、不是所有的网站都适合做成响应式网页 - 比如：电商
4、如何使用：
1、下载：
2、整个模板
3、挑选你喜欢的插件，然后梭 - 几乎bootstrap中的东西都带有响应式效果
4、根据你的设计图，修改样式
5、数据渲染
5、使用bootstrap栅格式布局，写网页布局效果：
固定步骤：
1、父元素：<div class="container/container-fluid"></div>
2、放入行：<div class="row"></div>
3、放入列：<div class="col-*-*"></div>
4、第一个*代表设置屏幕：<div class="col-lg/md/sm/xs-*"></div>
5、第二个*代表的是此列占几份：bootstrap把一行等分为了12分<div class="col-lg/md/sm/xs-1~12"></div>
6、class的特性，一个元素可以设置多个class，我可以设置一个列，在不同屏幕的占比
7、更小的屏幕可以管住更大的屏幕，但是自己有一定用自己的
col-lg-* - 只能管LG屏幕
col-md-* - 只能管LG/MD屏幕
col-sm-* - 只能管LG/MD/SM屏幕
col-xs-* - 能管所有屏幕
8、设置偏移量：向左顶出多少距离
col-屏幕-offset-列宽
col-lg-offset-* - 只能管LG屏幕
col-md-offset-* - 只能管LG/MD屏幕
col-sm-offset-* - 只能管LG/MD/SM屏幕
col-xs-offset-* - 能管所有屏幕
9、设置某列在某个屏幕下隐藏
hidden-屏幕 只管自己当前屏幕
10、如何为栅格式布局设置间距：
栅格式布局是怪异盒模型：border设置间距：content+margin
标准盒模型：content+padding+border+margin
2022.5.14
3、浏览器只认识css：但是css开发维护又麻烦，程序员一定书写的是scss/less，需要编译，变为css
如何编译：
1、vscode：下载插件：easy sass - 一点保存就会自动生成css
2、HBuilder：下载插件 - 右键编译
4、scss的新特性：
1、*变量：
创建：$变量名:值;
特殊：
1、如果此变量放在某个选择器中属于局部变量，放在顶部才是全局变量
2、scss不区分中划线和下划线
3、使用时$不能省略
2、*嵌套：层级写法的简化版
编译前：
.d1{
...
.d2{
....
}
>.d3{
...
}
&:hover{...}
}
编译后：
.d1{...}
.d1 .d2{...}
.d1>.d3{...}
.d1:hover{...}
特殊：&类似js中的this，&在哪个大括号里面，指向就是哪个选择器
3、导入：切忌css千万不要写@import这个关键字，因为js访问不到引入的样式
但是scss可以，scss编译后，不会有@import这个关键字，而是把css进行了汇总
如何：@import "文件名";
4、注释：只能写多行注释，css不支持单行注释写法
/*注释的内容*/
5、*****混合器：类似于JS中的函数
1、创建混合器
@mixin 混合器名($形参1:默认值,$形参2:默认值,...){
width: $形参1;
height: $形参2;
background: $形参3;
}
2、调用混合器
不传参数用默认值：@include 混合器名();
按顺序传实参：@include 混合器名($实参1,$实参2,...);
不按顺序传入实参：@include 混合器名($形参1:$实参1,$形参2:$实参2,...);
6、分支和循环：但是不推荐使用，scss是为了简化css，不要复杂化
7、运算：主要是颜色可以运算：万一遇到了土老板，调亮调暗
2、less 也会了：
特性几乎和scss一样
1、变量：
@变量名:值;
会区分中划线和下划线
2、嵌套、导入、注释：一模一样
3、混合器：
//创建混合器，并且设置形参和默认值
.whb(@w:0px,@h:0px,@b:transparent){
width: @w;
height: @h;
background: @b;
}
div{
//调用了混合器，并且传入了实参，如果没有实参则会使用默认值，顺序依然可以随意
.whb(100px,100px,red);
}
4、其余没有不同
3、git（9+）：
分布式版本管理控制工具：分布式：人人都是客户端人人都是服务器端（云端），就算电脑坏了也无所谓
svn（1-）：集中式版本管理控制工具：只有一台服务器，坏了就麻烦了 - 更简单
很少的公司会使用：
1、老公司老项目
2、要求保密性强的公司
项目经理：
1、安装svn服务器端：VisualSVN-Server-4.3.2-x64.msi
2、创建此项目的开发人员的账号和密码
3、创建项目仓库
4、将仓库地址和账号密码发给对应的开发人员
开发人员：
1、安装svn客户端：重启电脑TortoiseSVN-1.14.1.29085-x64-svn-1.14.1.msi
2、任何位置右键svn checkout检出仓库
3、做开发
4、下班之前：右键svn commit 写日志提交
5、第二天早上来了更新：右键svn update
