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、无法设置要求类型，只能是默认的GET3、无法帮我们脱衣服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 开始下标,个数;";
学习永久不要学去世代码，要学的思想思路： 不断的学习的精神，自己办理问题的能力
二.Bootstrap框架 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一定要记得引入：
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、必须放上一个容器：
2、必须在此容器中放入行：3、必须在此容器中放入列：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%;
不是所有的网站都适宜做成相应式网页：比如：电商类;
动态样式措辞 - css不是人写的 静态样式措辞：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、利用时：变量名: 值; 分外： 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 here2、将项目仓库拉到本地：git clone 仓库地址; - 仅用于第一次利用（拉到所有的文件），记得关闭命令行3、做你该做的项目开拓4、今天下班之前：传到云端：在项目中再次右键重新打开git bash here1、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 分支名;复制代码复制代码
三.node.js 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 runner2、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("./文件名");//必须加上./小练习： 1、代老湿是主模块：- 这个人是最轻松 2、蒲靖帮我公开两个方法，一个打算圆的周长，一个打算圆的面积 3、何长江帮我公开两个方法，一个打算矩形的周长，一个打算矩形的面积 4、张黎帮我公开两个方法，一个打算数组求和，一个打算数组的均匀值鄙视题：exports和module.exports有什么差异都是用于暴露公开自己的成员的但是：exports={} 这写法是缺点的node.js底层有一句话：exports=module.exports实在真正做的公开功能的是module.exports如果你利用了 exports={}，更换了module.exports，不在具有公开的功能2、模块的分类：1、官方模块 - 今日重点，大概几十个，主要的只有几个 2、第三方模块 - 多到数不清，供应了很多很多官方没有的东西，有一个网址npm3、自定义模块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+"/你的文件的相对路径"小练习：通过利用fs模块将public/css/style.css复制一份名为style.backup.css的文件 6、http模块 - 超级重点：搭建做事器固定步骤须要引入：var http = require('http');var app=http.createServer();//创建做事器运用app.listen(80);//设置了此做事器运用的端口号为80app.on("request",(req,res)=>{req.url 此属性记得利用url模块的parse方法分别解析出路由和查询字符串res.end();//相应办法，此方法一个要求只能有一个相应}) 把稳：node.js搭建做事器和文件系统，所有的连接（href和src）实在都是一个要求路由复制代码
原文链接：https://juejin.cn/post/7051402910705385480
如果你觉的本文对你有帮助，麻烦转发关注支持一下
