day2
jQuery简化：
DOM、事件、ajax 以及还提供了一些JS没有的东西：
必须引入jquery.js文件
1、第一层：最麻烦的，但也是最无敌的
$.ajax({
"url":"xx.php",//连接服务器端的地址，【必写】
"type":"GET/POST",//请求的类型，默认值为get - 可选
"data":"key=value&...",//请求的消息 - 可选
"dataType":"HTML/JSON/XML/JSONP",//解析响应消息
// "jsonp":"callback",//通行令的名字
"success":(data)=>{//ajax请求成功，才会执行，并且返回得到的数据，【必写】
data;//服务器端返回的响应数据
},
"error":()=>{
//只有报错后才会执行 - 直接不写，不需要记忆
}
});
复制代码
2、第二层：第一层的基础上进行了再次简化：3个API - 不能做跨域
1、最垃圾：
$("xx").load("xx.php","key=value",data=>{
})
1、会将数据直接放到页面元素之中，document.write将页面元素给替换掉
2、无法设置请求类型，只能是默认的GET
3、无法帮我们脱衣服
2、$.get("xx.php","key=value",data=>{
},"JSON")
3、$.post("xx.php","key=value",data=>{
},"JSON")
复制代码
3、第三层：特殊功能 - 跨域（拿别人电脑上的数据）
浏览器具有保护策略 - 同源策略：要求协议、域名、端口号必须相同，只要有一个不同就会触发此保护机制
跨域jQuery使用到了一个叫jsonp技术
跨域语法：
前端：
$.getJSON("url?key=?","data",data=>{
//key=? - jQuery自动传入一个值，其实是一个函数，后端需要接住后在调用：通行令函数
})
后端：echo $_GET["key"]."(".JSON_encode($arr).")";
复制代码
目的：
1、简化版ajax
2、如何使用ajax去拿去别人电脑上的数据
4、滚动监听触发ajax
前端：
var count=0;
$(window).scroll(()=>{
var sh=$(window).scrollTop()+innerHeight;//获取当前滚动条滚动到底部的位置
var bh=$("body").height();//完整的页面的高度
if(sh==bh){
$.get("05server.php",`count=${count}`,data=>{
//拿到data你要干啥子
count+=2;
},"JSON")
}
})
复制代码
后端：
$sql="SELECT * FROM 表名 ORDER BY id DESC LIMIT 开始下标,个数;";
复制代码
day3
1、Bootstrap框架：
UI组件库：提供了HTML/CSS/JS - 类似于我们学过jQueryUI 不需要任何的记忆，只需要查看文档：v3.bootcss.com/
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发【响应式布局】、移动设备优先的 WEB 项目。
复制代码
2、Bootstrap由5部分组成：
1、入门 - 下载
2、全局css样式
3、组件
4、js插件
5、定制
复制代码
3、想要使用bootstrap一定要记得引入：
引入试例：
<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>
复制代码
4、全局css样式：分为了2个部分
1、提供了css reset - 如果你引入了bootstrap.css，不需要自己去重置样式
2、提供了大概1000+的class - class带有样式
3、提供了哪些有用的和没用的
1、按钮：
*有用的：1、btn btn-default;//白底黑字的按钮
2、btn-block;//块级按钮
没用的：五种颜色（btn-danger/warning/success/info/primary） 和 四种大小(lg/md/sm/xs)
2、图片：
*有用的：1、img-rounded; - border-radius: 6px;
2、img-circle; - border-radius: 50%;//这两个class不是只有图片能用
没用的：缩略图：img-thumbnail;
3、文本：
*有用的：文本对齐方式：text-right/center/justify
没用的：五种文字颜色（text-颜色），五种背景颜色（bg-颜色）
4、*表格 - 很屌，但是表格用得少
1、table - 长得像个表格
2、table-striped - 隔行变色
3、table-hover - 带有悬停效果
4、table-border - 带有边框
5、table-condensd - 紧缩型表格
6、table-responsive - 响应式表格，必须设置在table的父元素身上
5、*表单 - 直接梭，填空修改
6、栅格式布局 - 今天最重要的东西
复制代码
5、组件：
1、推荐：
1、导航条
2、巨幕 - banner
3、缩略图 - 图片文字上下，图文并茂 - 产品
4、媒体对象 - 左边或者右边放图片，另一边放文字 - 公司简介
5、面包屑导航/路径导航
2、没用：
1、字体图标
2、按钮组
3、分页条
4、标签
5、徽章
6、页头
7、警告框
8、进度条
9、well水井
复制代码
6、插件：梭
7、栅格式布局：使用步骤：10步
1、必须放上一个容器：
<div class="container/container-fluid"></div>
2、必须在此容器中放入行：
<div class="row"></div>
3、必须在此容器中放入列：
<div class="col-*-*"></div>
4、在不同的屏幕设置不同的列宽
col-lg/md/sm/xs-*
5、列宽：bootstrap将一行等分为了12份
col-屏幕-列宽（1-12）
6、更小的屏幕设置列宽可以管住更大屏幕
lg - 只能管lg屏幕
md - 只能管lg/md屏幕
sm - 只能管lg/md/sm屏幕
xs - 管所有
自己有，优先用自己的，自己没有优先用离自己近的
7、设置偏移：设置向左顶出几份
col-屏幕-offset-列宽
lg - 只能管lg屏幕
md - 只能管lg/md屏幕
sm - 只能管lg/md/sm屏幕
xs - 管所有
自己有，优先用自己的，自己没有优先用离自己近的
8、设置在某个屏幕隐藏：只管自己屏幕，不管别人
hidden-屏幕
9、不推荐：列中可以继续嵌套行，一行又会分为12份，如果列太小了，什么都放不下
10、栅格式布局是一个怪异盒模型：设置间距要用border
复制代码
始终不可少的步骤：
1、梭 2、改 3、数据渲染
*****响应式项目必不可少的东西：
1、meat viewport元标签 - 如果缺少，手机端看不到手机端应有的效果，只能看到离自己最近的那个端的效果
2、媒体查询必不可少
3、千万不要使用绝对单位，要使用相对单位：rem
4、响应式图片：max-width: 100%;
复制代码
***不是所有的网站都适合做成响应式网页：比如：电商类;
day4
静态样式语言：css，他作为一门语言并不称职，没有语言必须拥有基础概念：变量、运算、函数、分支、循环...等等语言所必备的基础概念都没有
导致大型项目中进行开发和维护都非常的麻烦
复制代码
动态样式语言：
【在css的基础之上】添加了语言必备的概念 - 会css基本就会了 目的：简化css开发
市场上常用的动态样式语言：
1、sass/scss - 会css基本就会了，学习其中一个另一个也就会了
2、less - 会css基本就会了，学习其中一个另一个也就会了
3、stylus - 不学，和css语法区别较大
复制代码
1、sass/scss编译：sass/scss=(编译)=>css
为什么：浏览器只认识css，不认识其他的动态样式语言，但是程序员书写动态样式语言又会减轻我们的负担，说白了
程序员写动态样式语言，但是要进行编译，页面上引入时引入的还是css
如何编译：
1、vscode的人员：安装插件easy sass;//自动编译，一旦保存xx.scss就会自动生成一个xx.css
2、HBuilder的人员：安装插件，//手动编译，对文件点击右键->编译
3、网上一大堆动态样式语言编译工具：koloa
复制代码
2、scss带来的新特性：
*特性1：变量：
语法：$变量名: 值;
特殊：
1、使用时：$不能省略
2、可以创建局部变量，选择器{$局部变量名: 值;}
3、不区分中划线和下划线，都可以
***特性2：嵌套：
举例：
.d1{
d1的样式
.d2{d2的样式
&:hover{hover样式}
}
>.d3{d3的样式}
}
编译后：
.d1{d1的样式}
.d1 .d2{d2的样式}
.d1 .d2:hover{hover样式}
.d1>.d3{d3的样式}
特殊：
1、层级选择器不写的话，默认使用后代选择器（空格）
2、&：类似于javascript中的this，&包含在那个大括号里面就代表是谁
特性3：导入：
@import：css也有，但是绝对不要再css使用，因为引入html后，js无法操作样式
但是scss可用
语法：@import "文件名"
为什么不推荐：因为自己的页面只需要自己的css，不需要别人的，一般只有开发框架的人才会使用此特性
*特性4：注释：提示自己或别人
不要使用单行注释
要使用多行注释才可以/****/
复制代码
*****特性5：混合器：类似于javascript中的函数：
1、创建混合器
@mixin 混合器名($形参:默认值,...){
width:$形参;
}
2、调用混合器
@include 混合器名();
特殊：1、没有传入实参，使用默认值
2、如果传入实参，则使用实参
何时：先写代码，碰到重复多了时，则封装为一个函数
*特殊6：运算：尤其是颜色值可以进行运算
//#000000 - #ffffff
//黑（暗） 白（亮）
//0最小 - f最大
//乘以个1.x，一定会让此数字变大不断的靠近白色
//乘以个0.x，一定会让此数字变小不断的靠近黑色
特性7：分支和循环，不要用都是垃圾
复制代码
2、Less：和Scss有两点不同：
1、变量：@变量名:值; 需要区分中划线和下划线...
2、混合器：
创建：
.混合器名(@形参:默认值,...){
width: @形参;
...
}
使用：
div{
.混合器名();
}
其余全部一样
复制代码
3、Bootstrap定制：
*1、直接写自己的覆盖它的 - 删除掉你覆盖的部分，不然会有一些无用的代码
2、在源代码6800行css中进行修改 - 找起来麻烦
3、作者们对推荐你：操作源代码 - 我不推荐，因为源代码找起来也恼火
复制代码
4、git/svn工具：代码托管平台 - 大家一起合作开发 git（9+）：分布式版本管理控制工具 优点：人人都是客户端，人人都是服务器端（云端）; 缺点：黑客大佬，可能会破解你的项目
svn（1-）：集中式版本管理控制工具
优点：所有的代码都保存在项目经理处（服务器端）
缺点：服务器端一旦电脑坏了，卵大爷
一般都是一些老公司或者要是项目保密强的公司
1、git：如何使用：
1、安装：
先安装：Git-2.18.0-64-bit.exe - 命令行方式
在安装：TortoiseGit-2.6.0.0-64bit - 小乌龟（提示功能）
重启电脑
2、分职位做操作：
1、项目经理：
1、打开gitee网站：注册/登录
2、创建项目仓库：选择开源/私有（仓库成员才能访问）
3、将仓库地址私发给对应的开发人员
4、监督项目流程、进度
2、开发人员：
1、对着电脑任意位置右键：git bash here
2、将项目仓库拉到本地：git clone 仓库地址; - 仅用于第一次使用（拉到所有的文件），记得关闭命令行
3、做你该做的项目开发
4、今天下班之前：传到云端：在项目中再次右键重新打开git bash here
1、git add . - 将新增的或者修改的文件添加到本地git（蓝色+号）
2、git commit -m"必须写日志" - 将新增的或者修改的文件提交到本地git服务器
3、推送到云端：git push origin master;
5、第二早上一来：先更新仓库：- 第二天来了可以更新看看后端有没有做好什么接口，我今天可以使用
git pull origin master;
6、特殊用法：分支：分工合作
1、查看分支：git branch - master主分支
2、创建分支：git branch 分支名;
3、切换分支：git checkout 分支名;//普通分支不能推送到云端，只能主分支推送
4、合并分支：git merge 分支名;
5、删除分支：git branch -d 分支名;
复制代码
day5
1、Node.js概述：
不是js，但是语法和javascript非常相似，他的竞争对手是PHP/JAVA/C++/PYTHON... - 历史上第一次一门语言可以通吃前后端 做的功能绝对不是特效，做的事和服务器端语言一致（和数据库进行交互）
目的：
1、使用代码搭建一个服务器（文件可以放在任何位置）
2、node.js如何操作数据库
3、全站一条龙
复制代码
2、Node.js安装：node-v12.1.0-x64.msi 一步到位
版本：16年初（0.12） 16年中（4.xx） 16年底（6.xx） - 更新速度非常快（但是其实并没有加什么新东西）
检查：打开cmd 输入：node -v; - 查看版本，如果有版本号说明安装成功
其实我们安装的这个node.js只是一个运行环境而已
复制代码
3、Node.js如何运行：
1、交互模式 - 临时测试
打开cmd输入：node，就可以开始敲你的"js"代码了
2、脚本/文件模式 - 正式开发中：
1、先创建xx.js，里面书写你自己的代码
2、打开cmd输入：node 文件绝对路径
3、编辑器有插件：
1、vscode：code runner
2、HBuilder：nodeclipse
插件想要成功，至少前两个方式要成功才可以
复制代码
4、Node.js知识点：
1、js 和 node 的区别：
相同点：都可以使用一切ecmascript的操作，包括一切API都可以使用，放心大胆的使用es6的语法（服务器端不存在浏览器，不会有老IE）
不同点：1、javascript：BOM DOM;
2、Node.js：虽然不能使用BOM DOM，但是他却又10万个以上的模块
2、模块：每一个.js文件，都可以称之为叫做一个模块
1、模块化开发：如果以一个网页来说，我们可以按照功能分为很多个模块：商家模块、产品模块、促销模块、用户模块...
分工合作：将每个模块就给对应的人完成，最后再由主模块进行引入
每一个模块都有一个操作，可以用于公开/暴露自己的成员
1、exports.属性名=值
2、module.exports={
属性名:值,
...
}
每一个模块都有一个操作，可以用于引入其他模块：
var obj=require("./文件名");//必须加上./
鄙视题：exports和module.exports有什么区别
都是用于暴露公开自己的成员的
但是：exports={} 这写法是错误的
node.js底层有一句话：exports=module.exports
其实真正做的公开功能的是module.exports
如果你使用了 exports={}，替换了module.exports，不在具有公开的功能
2、模块的分类：
1、官方模块 - 今日重点，大概几十个，重要的只有几个
2、第三方模块 - 多到数不清，提供了很多很多官方没有的东西，有一个网址npm
3、自定义模块
node.js最大的特点：
1、快、非常快 - 以前最快的是php，node.js速度是php的十六倍
2、为什么快：1、因为官方提供的东西很少，甚至连数据库操作都没有
2、使用google浏览器v8引擎
3、官方模块：不需要下载，在你安装node.js环境时已经带上了，但是某得模块可能需要引入，引入时不要加./
1、Global模块
不需要引入，直接可以使用：
提供：
1、三种定时器（Interval、Timeout、Immediate）
Immediate 底层：Timeout延时为0，立刻执行，但是毕竟异步操作，不会卡主后续代码
2、console对象
2、querystring模块：查询字符串
需要引入：var qs = require('querystring');
提供了解析url查询字符串部分的功能
var obj=qs.parse("查询字符串");
想要获取前端传来的每一部分：obj.键名;
垃圾：如果前端传来的是一个完整的网址，他就解析不了了
3、url模块： - 小重点
需要引入：var url = require('url');
提供了解析完整的url的功能
var objurl=url.parse("完整的网址",true);
//加上true，自动调用querystring模块的parse方法，进行查询字符串部分变为一个对象
真正重要的有两个点：
1、查询字符串：objurl.query.键名 - 拿到前端传来的数据
2、路由/请求地址：objurl.pathname - 下午会搭配上fs模块（文件系统）和http模块（服务器）实现代码搭建服务器和文件系统
4、Buffer模块：缓冲区，可以将数据（字符串、数字、图片、HTML...）变为一个16进制的数字 - node中的一个新的数据类型
不需要引入，直接可以使用：
我们绝对不会主动的使用buffer的任何操作，但是后面我们的一些API可能会导致我们得到的结果就是一个buffer，我们不认识，node.js的大部分API都是支持buffer操作
5、fs模块 - 大重点：文件系统：对文件增删改查
需要引入：var fs = require('fs');
*异步读取文件：fs.readFile("文件路径",(err,buf)=>{
buf->读取到的内容
})
异步写入文件：fs.writeFile("文件路径","新内容",(err)=>{ - 会替换原有的内容
console.log("写入完毕后续操作")
})
异步追加文件：fs.appendFile("文件路径","新内容",(err)=>{ - 会替换原有的内容
console.log("写入完毕后续操作")
})
异步能够最大的发挥node.js的特点（快）
注意：vscode的同学你们写文件相对路径有可能会失败：绝对路径node.js提供了一个全局变量：
__dirname+"/你的文件的相对路径"
6、http模块 - 超级重点：搭建服务器
固定步骤
需要引入：var http = require('http');
var app=http.createServer();//创建服务器应用
app.listen(80);//设置了此服务器应用的端口号为80
app.on("request",(req,res)=>{
req.url 此属性记得使用url模块的parse方法分别解析出路由和查询字符串
res.end();//响应方式，此方法一个请求只能有一个响应
})
***注意：node.js搭建服务器和文件系统，所有的连接（href和src）其实都是一个请求路由
