超细教程：手把手教你如何用jquery简化ajax

大家好，欢迎来到IT知识分享网。

一.jquery简化ajax

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 开始下标,个数;”;

学习永远不要学死代码，要学的思想思路： 不断的学习的精神，自己解决问题的能力

二.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 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 分支名; 复制代码 复制代码

三.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 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("./文件名");//必须加上./ 小练习： 1、代老湿是主模块：- 这个人是最轻松 2、蒲靖帮我公开两个方法，一个计算圆的周长，一个计算圆的面积 3、何长江帮我公开两个方法，一个计算矩形的周长，一个计算矩形的面积 4、张黎帮我公开两个方法，一个计算数组求和，一个计算数组的平均值 鄙视题：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+"/你的文件的相对路径" 小练习：通过使用fs模块将public/css/style.css复制一份名为style.backup.css的文件 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）其实都是一个请求路由 复制代码

原文链接：https://juejin.cn/post/0

如果你觉的本文对你有帮助，麻烦转发关注支持一下