jQuery、Bootstrap、sass、Node.js

楼上楼下
192 阅读10分钟

一：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=?","key=value",data=>{
		//key=? - jQuery自动传入一个值，其实是一个函数，后端需要接住后在调用：通行令函数
	  })

	  后端：
          echo $_GET["key"]."(".JSON_encode($arr).")";

4、滚动监听触发ajax

  前端：
			var count=0;
			$(window).scroll(()=>{
				var sh=$(window).scrollTop()+innerHeight;//获取当前滚动条滚动到底部的位置
				var bh=$("body").height();//完整的页面的高度
				if(sh==bh){
					$.get("server.php",`key=value`,data=>{
						//拿到data做的操作
					},"JSON")
				}
			})

   后端：
	$sql="SELECT * FROM 表名 ORDER BY id DESC LIMIT 开始下标,个数;";

二：Bootstrap

1、Bootstrap框架：

UI组件库：提供了HTML/CSS/JS - 类似于jQueryUI
不需要任何的记忆，只需要查看文档：https://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、meat viewport元标签 - 如果缺少，手机端看不到手机端应有的效果，只能看到离自己最近的那个端的效果
2、媒体查询必不可少
3、千万不要使用绝对单位，要使用相对单位：rem
4、响应式图片：max-width: 100%;

注意：

不是所有的网站都适合做成响应式网页：比如：电商类;

三：动态样式语言

静态样式语言：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：分支和循环

四：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 一步到位

检查：打开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、为什么快：a、因为官方提供的东西很少，甚至连数据库操作都没有 b、使用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();//响应方式，此方法一个请求只能有一个响应

				objurl.pathname.match(/html/); //match关键字查询
			})

		   ***注意：node.js搭建服务器和文件系统，所有的连接（href和src）其实都是一个请求路由
avatar
文章
阅读
粉丝