前端工程师框架
常用框架
jQuery
jQuery 基础认识
jQuery 的特点
轻量、开源、免费、易于学习
兼容性处理
强大的选择器
链式操作
编辑的 DOM 操作
可靠的事件处理机制
封装了简单易用的 Ajax 操作
丰富的插件
版本兼容性
1.x
- 兼容 IE678 低版本浏览器，官网不在更新
2.x
- 兼容 IE9 以上 浏览器，官网不在更新
3.x
- 官网主要维护更新版本
兼容性引入
- html
<!--chrome firefox safari opera ie9+ --> <!--[if gt ie 8]> --> <!-- <![endif]--> <!--ie8以及以下--> <!--[if lte ie 8]> <![endif]-->
jQuery 的使用
jQuery 的 ready 事件
ready 表示页面中的 DOM 加载完毕后 触发
$(document).ready(function(){ ... })
简写 $(function(){ .... })
原生 JS 的 load 事件
- load 事件在页面所有的一切加载完毕后触发
- window.onload =function(){ ... }
文档
jQuery 代码基础
jQuery 的 顶级(全局)对象
$
相当于原生 JavaScript 的 window 对象
等价于 jQuery
- jQuery(function(){})
$(function(){})
相等
$(document).ready(function(){ ... })
jQuery(document).ready(function(){ ... })
怎么区分 $ 符号的功能
$ 的参数如果是 dom 对象，把该对象转为 jQuery dom
$ 的参数如果是 字符串，作为 jQuery 的选择器
$ 的参数如果是 字符串，并且以<开头，则是创建一个新元素
jQuery 的 DOM 对象
本质
使用 jQuery 选择器获取的对象，不是原生的 DOM 对象， 称之为 jQuery dom 对象
jQuery dom 对象 本质上是由原生 dom 对象组成的集合
操作语法
$box.css("color")
- 参数只写属性名，返回值是属性值
$box.css("background","green")
- 修改简单元素样式
$box.css("background":"green","fonst-size":"20px")
- 修改多个样式
$box.css( width:400, height:400, backgroud:'red'; )
添加多个样式
属性要添加 ‘’引号
原生 JS DOM 和 jQuery DOM 相互转换
原生的 DOM 转换为 jQuery DOM
- $(函数)
- $(box).css("border","2px solid red");
- $(函数)
jQuery DOM 转换为 原生的 DOM
取元素下标：$box[0]
- $(box[0]).style.border = "2px solid red";
.get(0)
- $(box.get(0)).style.border = "2px solid red";
jQuery 选择器
1.基本选择器
ID 选择器
- $("#box")
class 类选择器
- $(".item")
标签名选择器
- $("li")
组合选择器
- $("li.item")
全局选择器
- $("*")
多个选择器
- $("li,p")
2.层级选择器
后代元素
- $("#box li")
子元素
- $("#box>li")
紧邻的兄弟元素
- $("#box+li")
后面所有的兄弟元素
- $("#box~li")
3.筛选选择器
:first
获取第一个元素
$('li:first')
:last
获取最后一个元素
$('li:last')
:eq(index)
- $('li:eq(2)')
- 获取到的 li 元素中，选择索引号为 2 的元素 索引号 index 从 0 开始
- $('li:eq(2)')
:even
- $('li:even')
- 获取到的 li 元素中，选择索引号为偶数的元素
- $('li:even')
:odd
- $('li:odd')
- 获取到的 li 元素中，选择索引号为奇数的元素
- $('li:odd')
:lt(index)
- <
:gt(index)
- >
:not(selector)
:lang()1.9+
:root1.9+
:header
- 所有的标题标签
:focus
- 获取焦点元素
:target1.9+
- 锚点指向元素
:animated
- 正在执行动画元素
4.内容选择器
:contains(text)
- 包含指定的文本
:has(selector)
- 包含满足条件的后代元素
:empty
- 没有内容，也没有子元素
:parent
- 要么有内容，要么有子元素
5.可见性选择器
:hidden
- 不可见的元素
:visible
- 可见的元素
6.属性选择器
[attribute]
- 直接写属性名
[attribute=value]
- 指定属性名的值
[attribute!=value]
- 属性名不等于某个值
[attribute^=value]
- 属性名以某个值开始
[attribute$=value]
- 属性名以某个值结束
[attribute*=value]
- 属性包含某个值
- js
[attrSel1][attrSel2][attrSelN];- 多个属性 选择器
7.子元素选择器
:first-child
- 选择一个是所有兄弟元素里面的第一个元素
:last-child
- 选择一个是所有兄弟元素里面的第最后一个元素
:nth-child(1)
- 子主题 1
:nth-last-child()
:only-child
- 没有兄弟元素的元素
:first-of-type
- 选择所有兄弟元素里面的相同标签的第一个
:last-of-type()
:nth-of-type(1)
- 选择所有兄弟元素里面同标签的第一个
:nth-last-of-type()
- 子主题 1
:only-of-type
8.表单选择器
:input
- 所有的表单控件
input 的 type 值
:text
:password
:radio
:checkbox
:file
:reset
:image
:submit
:button
9.表单对象选择器
:enabled
:disabled
:checked
:selected
10.混淆选择器
- $.escapeSelector(selector) 3.0+
- className 或者 IDname 是有特殊符号
- $.escapeSelector(selector) 3.0+
jQuery 属性与样式操作
属性操作
attr(name|properties|key,value|fn)
1.设置属性
- $(this).attr('index')
2.自定义设置元素的属性值
- $(this).attr('index',4)
参数
name
- 名字
properties
- 性质
key,value
- 值
fn
- 函数
removeAttr(name)
- 删除属性
prop(name|properties|key,value|fn)
获取在匹配的元素集中的第一个元素的属性值
参数
name
- 名字
properties
- 性质
key,value
- 值
fn
- 函数
removeProp(name)
- 用来删除由.prop()方法设置的属性集
data()
data()方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构 ，一旦页面刷新，之前存放的数据都将被删除
获取属性
.data('属性','值')
- js
$(span).data("uname", "andy"); // 获取属性 console.log($("span").data("uname")); // andy // 也可以获取其他属性 console.log($("div").data("index")); // 返回数字
CSS 类操作
addClass(class|fn)
为每个匹配的元素添加指定的类名。
$('div').addClass('current')
removeClass([class|fn])
从所有匹配的元素中删除全部或者指定的类。
$('div').removeClass('current')
toggleClass(class|fn[,sw])
如果存在（不存在）就删除（添加）一个类。
$('div').toggleClass('current')
hasClass()
- 判断是否有某个 class 值
- 返回 true 或 false
- 判断是否有某个 class 值
HTML 代码/文本/值 获取 设置
html([val|fn])
- 取得第一个匹配元素的 html 代码内容。类似 innerHTML 这个函数不能用于 XML 文档。但可以用于 XHTML 文档。
text([val|fn])
- 取得所有匹配元素的内容。类似 innerText
val([val|fn|arr])
- 获得匹配元素的当前值。
样式操作
1.CSS 操作
- css(attr,[value])
- 或者设置 css 属性，参数可以使用对象
- css(attr,[value])
2.位置操作
offset([obj])
- 元素在页面中的坐标，返回对象(属性 left top)
position()
- 元素在第一个定位的祖先元素内的坐标，只读
3.尺寸操作
width() / height()
- 元素内容的尺寸
innerWidth() / innerHeight()
- 内容尺寸+padding
outerWidth() / outerHeight()
- 实际盒子的尺寸
jQuery 筛选方法
过滤
eq(index|-index)
first()
last()
hasClass(class)
filter(expr|obj|ele|fn)
is(expr|obj|ele|fn)
map(callback)
has(expr|ele)
not(expr|ele|fn)
slice(start,[end])
查找
parent([expr])
- 获取一个祖先元素
parents([expr])
- 获取所有的祖先元素（满足条件）
- js
parentsUntil([e|e][,f])- 获取祖先元素集合 写参数就是指定过滤排除掉这个元素参数
offsetParent()
- 返回第一个定位的祖先元素
- js
nextUntil([e|e][,f])- 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
- js
prevUntil([e|e][,f])- 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
closest(e|o|e)1.7*
- 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
查找父级
- $('li').parent();
查找最近子级
- $('ul').children('li');
查找后代
- $('ul').find('li');
查找兄弟节点
- $('.first').siblings('li');
查找当前元素之后的 所有兄弟元素
- $('.first').nextAll();
紧邻在后面的兄弟元素
- next([expr])
查找当前元素之前的 所有兄弟元素
- $('.last').prevAll();
紧邻在前面的兄弟元素
- prev([expr])
检查当前元素是否为某个特定元素
返回布尔值
$('div').hacClass('protected');
获取指定索引号元素
$('li').eq(2);
相当于:eq(2)
串联
add("li")1.9*
- 把元素加入当前集合中
addBack()1.9+
- 把调用该方法的元素 加入当前集合中
contents()
- 返回所有子节点的集合
end()
- 返回最后一次 破坏性操作（过滤，查找操作）
andSelf()1.8-
jQuery DOM 对象方法
遍历：each()
- js
$("#myList li").each(function (index, ele) { // ele.innerHTML +="你好啊"; $(ele).append("你好啊"); });
返回新集合：map()
- $("#myList li").map(function(index,ele){ return $(ele).html(); })
集合中元素的数量：length
index() 返回该元素在父元素的索引位置
get([index]) 返回集合指定索引的 dom 对象，不写参数 还可以把 jQuery dom 集合转为存数组
is() 判断 jQuery dom 是否满足条件，返回布尔值
jQuery DOM 操作
1.创建元素
2.内部插入
append()
- 追加到后面
appendTo()
- 追加到指定元素前面
prepend()
- 追加到前面
prependTo()
- 追加到指定元素后面
3.外部插入
after("")
- 元素后面添加元素
insertAfter("指定元素")
- 指定元素后面添加元素
befor()
- 元素前面添加元素
insertBefor("指定元素")
- 指定元素前面添加元素
消息滚动案例
- 子主题 1
4.包裹
.wrap("li")
- 每个元素都包裹一个元素
.wrapAll("li")
- 全部元素统一包裹一个元素
.wrapInner("#box")
- 在 box 元素里面添加一个包裹他子元素的元素
.unwrap("a")
- 去掉包裹父元素
5.替换
.replaceWith(新建标签标签或者元素)
- 替换元素
.replaceAll(元素)
- 替换元素到指定标签元素里
6.删除
.empty()
- 清空一个元素里的所有内容
.remove()
- 删除元素
.detach()
删除元素（可恢复删除的元素）
恢复
- 使用：.append(元素)
7.克隆
- .clone().appendTo("body")
- 克隆追加到 body 元素里
- .clone().appendTo("body")
选项卡案例
单击事件
//头部 $(this)addClass("current").removeClass("current");
//内容 $("li").removaClass("current").eq($(this).index()).addClass("current");
jQuery 事件
1.事件绑定
鼠标悬浮和鼠标离开. 把事件名作为方法
- $("#btn").mouseover(function(){ $(this).css("background-color","#999"); }).mouseout(function(){ $(this).css("background-color","#f5f5f5"); })
单击事件：.on(event,fn)
.on("cclick",function(){ })
//使用 on 同时绑定多个事件 $("#btn").on({ "mouseover":function(){ $("#btn").css("background-color","red"); }, "mouseout":function(){ $("#btn").css("background-color","teansparent"); }, "click":function(){ alert("OK"); }, })
//把事件 仅仅绑定一次 $("#btn").one("dbclick",function(){ })
把事件名作为方法
2.解除事件绑定
$("#btn").off();
- 解除全部事件
$("#btn").off("mouseout");
- 解除指定事件
3.事件委派
- on(event,selectoer,fn)
- $("#myList").on("click","li",function(){ $(this).toggleClass("current"); })
- on(event,selectoer,fn)
4.控制事件触发
$("#btn").trlgger("事件")
外面可以包裹一个点击事件
返回的是 jQuery dom 可以连贯操作
无法触发元素自带的事件
会触发集合中所有元素的事件
$("#btn").trlggerHandle("事件")
- triggerHandle 值触发集合中第一个元素的事件
5.事件列表
除了原生 js 的事件
新增事件
ready
- 页面中的 DOM 加载完毕
focusin()
- 获取焦点，绑定给输入框的父元素
focusout()
- 失去焦点，绑定给输入框的父元素
mouseenter()
类似于 mouseover：鼠标悬停在元素上
mouseenter 与 mouseover 的区别
mouseleave()
类似于 mouseout：鼠标离开在元素
mouseleave 与 mouseout 的区别
hover()
- mouseenter()和 mouseleave()的集合
6.事件对象
pageX
- 鼠标箭头 X 坐标
pageY
- 鼠标箭头 Y 坐标
target
- 当前触发事件的元素
which
- 键盘按键的 ascii 码
type
- 事件类型(事件名称)
event.preventDefault();
- 阻止默认操作
event.stopPropagation();
- 阻止事件冒泡
return false;
- 既可以阻止事件冒泡，又可以阻止默认操作
案例
鼠标拖拽元素案例
1.鼠标按下事件
1.按下的元素透明度
2.鼠标在元素上的位置
3.鼠标移动事件
获取鼠标位置
改变元素位置
4.连贯操作
js.mouseup(function(){ // 4.1透明度恢复 // 解除绑定mousemove事件 $(this).off("mouseover") })
键盘控制元素移动案例
1.绑定键盘事件
- js
//计算页面的宽高 var pWidth = $(window).width(); var pHeight = $(window).height(); //绑定键盘事件 $(document).keydown(function(event){ //获取目前的位置 var left = $("#box").offset().left; var top = $("#box").offset().top; //判断按键 switch(event.which){ case 65 //向左移动 $("#box").offset({ left: Math.max(left-10,0) }); break; case 68 //向右移动 $("#box").offset({ left: Math.min(left+10, pWidth-40) }); break; case 87 // 向上移动 $("#box").offset({ top: Math.max(top-10,0) }); break; case 83 // 向下移动 $("#box").offset({ top: Math.min(top+10, pHeight-40) }); break; } }) w:87 上 a:65 左 s:83 下 d:68 右
图片放大镜案例
0.计算小图的位置
1.鼠标悬停事件
1.显示大图并设置改变大图位置
- 子主题 1
2.放大镜元素 显示并跟随鼠标移动
计算放大镜元素
放大镜元素跟随鼠标移动
3.绑定 鼠标移动位置
1.鼠标在小图的位置
2.控制大图 显示部分内容
$("#bigBox").scrollLeft(mLeft *3)..scrollTop(mTop *3)
小图和大图的倍数对应
2.鼠标离开事件
- 大图隐藏
jQuery 动画效果
([s],[e],[fn])参数
[] 中括号可以都省略
[s]速度
("slow")
("normal")
("fast")
毫秒数值
- 1000
[e]切换效果
默认是"swing"
可用参数"linear"
[fn]动画完成执行的函数
- function(){}
基本效果
基本相关的 css 属性变化：透明度变化， 元素大小相关样式，外边距
隐藏：
hide([s,[e],[fn]])hide()
- 无动画
hide("fast")
- 快速的隐藏
hide("normal")
hide("slow")
- 缓慢的隐藏
hide(3000)
hide(3000,function(){ alert("Animation Done."); })
显示：
show([s,[e],[fn]])show()
- 无动画
show("fast")
- 快速的隐藏
show("normal")
show("slow")
- 缓慢的隐藏
show(3000)
show(3000,function(){ $(this).text("Animation Done!"); })
隐藏和显示切换切换：toggle([s],[e],[fn])
$('td).toggle();
$("p").toggle("slow");
$("p").toggle("fast",function(){ alert("Animation Done."); });
$('#foo').toggle(showOrHide);
- //相当于 if (showOrHide) { $('#foo').show(); } else { $('#foo').hide(); }
滑动效果
垂直向上或向上的运动
slideDown([s],[e],[fn])
- 下滑动
slideUp([s,[e],[fn]])- 上滑动
slideToggle([s],[e],[fn])
显示和隐藏切换
配合.hover()使用
- 鼠标经过事件
上述两个合并的动画
淡入淡出效果
透明度的变化/渐变
e 透明度参数
- 0.1 ~ 1
fadeIn([s],[e],[fn])
- 淡入效果
fadeOut([s],[e],[fn])
- 淡出效果
fadeToggle([s, [e], [fn]]);淡入淡出切换效果
fadeTo([[s], o, [e], [fn]]);仅仅改变透明度效果
- 自定义
自定义动画：
animate(p,[s],[e],[fn])1.8\*- p 参数
- 1.包含作为动画属性和终值的样式属性和及其值的集合
- 2.或 CSS 样式
- $("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
- ```js
// 在一个动画中同时应用三种类型的效果
$("#go").click(function () {
$("#block").animate(
{ width: "90%", height: "100%", fontSize: "10em", borderWidth: 10 },
1000
);
});
```
-
使动画停止：stop([c],[j])1.7*
使动画延迟执行：delay(d,[q])
使动画完成：finish([queue])1.9+
动画设置
执行一个禁用的动画：jQuery.fx.off
//关闭页面中所有的动画 jQuery.fx.off = true;
jQuery.fx.off = true; $("input").click(function(){ $("div").toggle("slow"); });
设置动画的显示帧速：jQuery.fx.interval 3.0-
- jQuery.fx.interval = 100;
动画的队列
所有的动画操作会加入到队列中，依次执行
.stop()停止动画
- $(this).children('ul').stop().slideToggle();
其他操作不会加入滑动队列
.stop()写在动画或者效果的前面，相当于停止结束上一次的动画
jQuery 动画和 CSS3 动画
兼容性，css3 的动画和过渡需要 IE9+，jQuery 可以使用 1.*版本的
CSS3 的动画或者过渡必须给元素具体的 CSS 属性值
案例
消息滚动动画案例
轮播图案例
手风琴
jQuery Ajax
1.快速请求方法
$.get("url",function(data){ })
$.post("url",function(data){ })
2.ajax 方法
- $.ajax({url:"",type:"get 或者 post",data:{name:"JIM",message:"哈哈哈"},async:true,success:function(data){alert(data);}})
3.表单方法
- $("#myForm").serialize()
- 把表单中有 name 属性的表单控件的值，拼接成字符串
- $("#myForm").serialize()
4.处理 json 数据
地址联动案例
- 子主题 1
jQuery 工具方法
数组和对象操作方法
$.each(object,[callback])
- 遍历数组或者类数组对象
$.grep(array,fn,[invert])
- 过滤数组
$.map(arr|obj,callback)
- 从数组中取出信息，返回新的数组
$.makeArray(obj)
- 把类数组对象转为纯数组
$.inArray(val,arr,[from])
- 判断某个元素在数组中的位置，不存在，返回-1
$.merge(first,second)
- 合并数组
$.toArray()
- 返回一个新的纯数组
$.extend([d],tgt,obj1,[objN])
$.sub()1.9-
$.when(deferreds)
$.unique(array)3.0-
$.uniqueSort(array)3.0+
$.parseJSON(json)3.0-
$.parseXML(data)
函数操作
$.proxy(function,context)
- 改函数内的 this 指向
$.noop
测试操作类型判断
$.type(obj)
- 判断类型
$.isFunction(obj)3.3-
- 判断是否是函数的方法
$.isEmptyObject(obj)
- 判断是否是空的对象
$.isPlainObject(obj)
- 判断是否是纯的对象(构造函数是 Object)
$.isWindow(obj)3.3-
- 判断是否是 Windows 对象
$.isNumeric(value)1.7+
- 判断是否是数字(NaN 为 false)
$.contains(c,c)
$.isArray(obj)3.2-
字符串操作
$.trim(str)
- 去掉字符串起始和结尾的空格
$.param(obj,[traditional])
- 把对象序列化成字符串
插件编写
$.error(message)
- 接受一个字符串，并且直接抛出一个包含这个字符串的异常
$.fn.jquery
- 判断 jQuery 版本号的字符串
代码案例
1.菜单收缩展开效果
绑定单击事件
//点击展开收缩 $(this).toggleClass("open");
//判断 ul 是隐藏还是显示 $(this).next("ul").slideToggle();
//连写简化效果 $(this).toggleClass("open").next("ul").slideToggle();
2.手风琴菜单
绑定单击事件
- js
$(document).ready(function(){ // 绑定单击事件 $(".nav-list h3").click(function(){ $(this).addClass("open").siblings("h3").removeClass.("open").end().next("ul").slideDown().siblings("ul").slideUp(); }) })
3.手风琴菜单 2(关闭其他)
- js
$(document).ready(function(){ // 绑定单击事件 $(".nav-list h3").click(function(){ $(this).toggleClass("open").siblings("h3").removeClass.("open").end().next("ul").slideTaggle().siblings("ul").slideUp(); }) })
基于 jQuery 的插件
Backbone
是一个轻量级的 MVC JavaScript 库
基于 underscore.js
- 子主题 1
Bootstrap
页面结构
nav
- 导航部分
div.container
- 主体部分
footer
- 页尾
样式
网格类
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
容器
.container (固定宽度)
.container-fluid (全屏宽度)
文字排版
颜色
柔和的文本。
重要的文本。
执行成功的文本。
代表一些提示信息的文本。
警告文本。
危险操作文本。
副标题。
深灰色文字。
浅灰色文本（白色背景上看不清楚）。
白色文本（白色背景上看不清楚）。
按钮
数据可视化库
数据可视化
数据可视化的主要目的：借助图形化手段，清晰有效的传达与沟通信息
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理
使用场景
通用报表
移动端图表
大屏可视化
图编辑&图分析
地理可视化
图解
前端画图基础
canvas
- canvas 是 HTML5 新增的专门用来绘制图形的元素， canvas 元素是一块无色透明的区域， 开发者需要通过 js 脚本在元素中绘图；
svg
- html 元素
Echarts.js
百度 Echarts 开源图表官网
使用步骤
1.下载并引入 ECharts
下载
- js
<!-- 引入 echarts 文件 -->
2.准备一个具备大小的 DOM 容器
- 生成的图表装在这个容器内
3.初始化 echarts 实例对象
- 实例化 echarts 对象
4.指定配置项和数据(option)
- 根据具体需求修改配置选型
5.将配置项设置给 echarts 实例对象
- 让 echarts 对象根据修改好的配置生效
示例语法
- js
<!-- 引入 echarts 文件 --> <!-- 为echarts准备一个具备大小(宽高)的dom --> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
配置和组件
特性
拖拽重计算
1.拖拽整合数据
2.剔除畸形数据
数据视图
满足用户对数据的需求
视图改变，修改数据
动态类型切换
- 不同类型的图表展现
值域漫游
- 地图图表聚焦到你所关心的数值上
数据区域缩放
- 聚焦到你所关心的数据上
多图联动
- 更友好的关联数据分析
百搭的时间轴
- 时间维度的扩展
大规模散点
- 展现大数据的魅力
力导向布局
- 复杂关系网络的呈现
动态数据添加
- 实时展现数据变化
多维度图例开关
- 切换你所关心的数据系列
多维度堆积
- 展现更具有内涵的图表
商业 BI
- 一些应用广泛的商务图表
混搭：全部图表可混合搭配
- 用最佳的租户方式展现你的独特数据
特效
组件
颜色主题（Theme）
var chart = echarts.init(dom, 'light'); 或者 var chart = echarts.init(dom, 'dark');
- js
// 假设主题名称是 "vintage" $.getJSON('xxx/xxx/vintage.json', function (themeJSON) { echarts.registerTheme('vintage', JSON.parse(themeJSON)) var chart = echarts.init(dom, 'vintage'); }); 如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可： // HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"） var chart = echarts.init(dom, 'vintage'); // ...
调色盘
调色盘，可以在 option 中设置。它给定了一组颜色，图形、 系列会自动从其中选择颜色。 可以设置全局的调色盘， 也可以设置系列自己专属的调色盘。
- js
option = { // 全局调色盘。 color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'], series: [{ type: 'bar', // 此系列自己的调色盘。 color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'], ... }, { type: 'pie', // 此系列自己的调色盘。 color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'], ... }] }
高亮的样式：emphasis
- js
option = { series: { type: "scatter", // 普通样式。 itemStyle: { // 点的颜色。 color: "red", }, label: { show: true, // 标签的文字。 formatter: "This is a normal label.", }, // 高亮样式。 emphasis: { itemStyle: { // 高亮时点的颜色。 color: "blue", }, label: { show: true, // 高亮时标签的文字。 formatter: "This is a emphasis label.", }, }, }, };
组件参数详解
更详细配置访问官网文档：https://www.echartsjs.com/zh/option.html#title
title:标题组件
title:{...}
标题文字
子标题
标题位置
边框颜色
边框宽度
tooltip:提示框组件
tootip{...}
提示框组件可以设置在多种地方：
触发
配置
如何显示
触屏设置
坐标
时效
触发条件
动画
时间
效果
...
legend:图例组件
- legend: {...}
toolbox:工具栏组件
toolbox: {...}
组件 ID
是否显示
整个组件的宽度、大小
- 默认自适应
布局朝向
- 上下左右
图标
工具栏图标大小
工具栏图标间隔
鼠标经过时图标标题
工具配置项
feature: {...}
最基本的属性
- show:true/false
自定义工具
只能以 my 开头
- js
myTool1:{ show: true, title: '自定义扩展方法', icon: 'image://http://echarts.baidu.com/images/favicon.png', onclick: function (){ alert('myToolHandler2') } }
保存图片
- saveasimage:{}
还原
- restore:{}
数据视图
- dataview:{}
缩放视图
- datazoom:{}
动态类型切换
magictype:{type['','']}
type 里面填写类型
类型
- 所有属性 { show , type , title , icon , iconStyle , emphasis , option , seriesIndex }
选框组件的控制按钮
- brush:{...}
工具图标样式
iconstyle:{...}
颜色
边框
边框颜色
边框宽度
边框类型
阴影大小
阴影颜色
阴影偏移
水平
垂直
图形的透明度
tooltip
- 提示组件
grid:直角坐标系内绘图网格
xAxis:直角坐标系 grid 中的 X 轴
- xAxis:{...}
yAxis:直角坐标系 grid 中的 Y 轴
- yAxis:{...}
polar:极坐标系组件
polar:{...}
可以用于散点图和折线图
每个极坐标系拥有一个角度轴和一个半径轴
series:系列列表组件
series:{[...]}
图表类型
line
...
ID
名称
坐标系
链接
动画
状态
指针样式
图形数据信息标签
lable:{...}
是否显示：show:true/false
X,Y 轴
绝对像素值和相对百分比
- // 绝对的像素值 position: [10, 10], // 相对的百分比 position: ['50%', '50%']
上下左右、内部的
标签旋转
- rotate
标签偏移
- offset
标签内容格式器
- formatter
自定义富文本样式
- rich{...}
- 文字字体/大小/颜色/粗细/对齐方式/行高/背景色/ 边框样式：颜色/宽度/圆角/内边距/阴影/宽度
- rich{...}
折线拐点标志
itemStyle:{...}
颜色 color:{...}
type:''
linear
线性渐变
js// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], global: false // 缺省为 false }
radial
径向渐变
- js
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变 color: { type: 'radial', x: 0.5, y: 0.5, r: 0.5, colorStops: [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], global: false // 缺省为 false } // 纹理填充 color: { image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串 repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat' }
支持回调函数
描边样式
阴影样式
线条样式
linestyle:{...}
颜色
线宽
类型
阴影
透明
图形的高亮样式
- emphasis:{...}
标记线和点
- mark
color:调色盘颜色列表
数据存放组件
- data:{...}
Highcharts.js
AntV
D3.js
There.js
webapp 框架
MUI
官方网址
头部：带图标和标题
- html
<header class="mui-bar mui-bar-nav"> <h1 class="mui-title">工作 </header>
主体
导航
- html
<nav class="mui-bar mui-bar-tab">发现 9 消息 我的 设置</nav>
3D 场景
WebGL
Three.js
ES 语言风格
TypeScript
CoffeeScript
JS 插件
parallel.js: 前后端通用的一个并行库
zepto: 用于现代浏览器的兼容 jQuery 的库
totoro: 稳定的跨浏览器测试工具
TheaterJS: 一个用于模拟人输入状态的 JS 库
stellar.js: 前端用于实现异步滚动效果的库，现已不再维护
skrollr: 另一款实现一步滚动的开源库，使用人数众多，可实现各种狂拽酷炫掉渣天的前端效果，看真相
Framework7: 前端框架，是开发人员可以基于 web 技术构建 IOS7 程序
regulex: 用于生成 正则表达式 的可视化流程图
markdown-it: 新型 Markdown 解析器，快速，支持插件
multiline: 用于 Javascript 中的多行文本，类似于 Ruby 的 HERE Doc
screenfull.js: 全屏插件，支持各大浏览器
lunr.js: 类似于 Solr, 但是用于浏览器上的全文搜索引擎，可以为 JSON 创建索引，离线也可以使用
jquery.hotkeys: jQuery 插件，用于绑定热键
breach_core: Javascript 编写的 Browser (浏览器)
octocard: 用于生成 Github 信息卡片的库
github-cards: 用于生成 Github 信息卡片的库
money.js: 轻量级货币转换库，web 和 node 皆可用
accounting.js: 轻量级的数字、货币转换库
javascript-algorithms: Javascript 实现的各种算法集合
lazy.js: 类似于 underscore, 但是会延迟执行，某些场景下，性能会有很大的提升
seajs: 前端模块加载器，解决模块化、依赖等问题
jQuery-One-Page-Nav: 单页应用中一个用于处理导航栏的库
js.js: Javascript 实现的 javascript JIT
jquery-ui: jQuery 团队开发的 UI 相关的前端库，功能强大
todomvc: 分别基于 AngularJS/EmberJS/Backbone 等实现的 TODO List, 帮助开发者选择前端 MVC 库
localForage: Mozilla 出品，用于离线存储，基于 IndexedDB, WebSQL 或者 localStorage, 提供一致的接口
EventEmitter: 浏览器版的 EventEmitter
jquery.serializeJSON: jQuery 插件，用于将 form 表单序列化成 JSON 数据
knockout: 前端 MVVM 框架，用于开发富前端应用
mermaid: 可以根据文本生成流程图，类似于 Markdown 的语法
js-sequence-diagrams: 另一款可以根据文本生成流程图的库，类似于 Markdown 的语法
flow: 一个用来检测 Javascript 语法错误的库， Facebook 出品
zoomooz: jQuery 插件，用来处理浏览器缩放
fancyBox: 一个用于放大缩小图片、Web 内容或者多媒体元素的库，优雅大方
mithril.js: 轻量型前端 MVC 框架，部分使用场景下性能优于 Angular.js 和 React
backbone: 强大的前端 MVC 库，鼻祖级前端库，最初为了配合 Rails 来模块化前端应用，兼容性良好 (兼容到 IE6)，插件丰富，性能良好
jquery.smartbanner: smartbanner 是从 IOS6 开始支持的一个新特性, 这个插件提供了对早期 IOS4/5 和 Android 的支持
jquery.scrollTo: 在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素， 支持回退等
jScrollPane: 自定义的滚动条，让所有浏览器都显示一样的滚动条
onepage-scroll: 提供类似于 iPhone6 展示页类似的效果，适用于单页应用，兼容到 IE8
scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等)，性能很好
ScrollMagic: 神奇的滚动交互效果插件，可以在滚动的过程中设置各种各样的动态效果
infinite-scroll: 滚动加载，滚动到最下到自动加载， Paul Irish 大神之作
animatable: 仅仅依靠 border-width 和 background-position 实现的各种动态效果，看真相
Fluidbox: 页面上内嵌图片的放大缩小效果，类似于 Medium 中的效果
jquery-validation: jQuery 的一个插件，用于校验 Form 表单
BigVideo.js: jQuery 的一个插件, 用于实现大背景(视频、图片)效果
emscripten: 一款基于 LLVM, 可以将 C/C++ 转换成 Javascript 的工具，使得 Javascript 可以近乎 Native 的速度
qrcode-generator: 各种语言的二维码生成工具
device.js: 一个可以检测设备类型的工具，可以让我们根据不同的设备来为其定制响应的 Javascript 和 CSS
jquery-qrcode: jQuery 插件，用来生成二维码
Wookmark-jQuery: jQuery 的一个插件，可以用来实现瀑布流的效果
isotope: 可以用来过滤、排列布局，实现美观的动态布局切换效果，Demo
lazysizes: 功能强大的图片延迟加载工具，可以首先加载一个低质量的图片，然后再加载高质量的图片
progressbar.js: 简洁美观的进度条，扁平化
pigshell: 一个由 Javascript 实现的 Shell, 将互联网当做一个大的文件系统, 通过 cd/ls/cat…..等命令, 可以访问 Facebook/Twitter/Google Drive 等网络服务
spectrum: Js 实现的颜色选择器 (Colorpicker)
jQuery.countdown: jQuery 倒计时插件
summernote: WYSIWYG 富文本编辑器
awesomplete: 非常轻型的一个自动补全 JS 库, 没有任何依赖, 配置简单, 美观
switchery: IOS 7 上 Switch 的 JS 实现, 支持 IE8 及以上浏览器
trix: Basecamp 公司出品的富文本编辑器，简洁小巧
sensor.js: 在智能移动设备浏览器上，通过 HTML5 的 api 使用移动设备的功能。定位、运动、倾斜等
hyhyhy: 用于创建 基于 HTML5 的 演示文稿
swipebox: jQuery 插件，用于处理移动端的触摸事件
FileAPI: 前端用户处理文件（拖放、多文件上传等）
Sortable: 现代浏览器上用于实现元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依赖 jQuery
Swiper: 用于实现浏览器上的滑动切换效果，支持硬件加速
matter-js: 2D 物理效果引擎，碰撞、弹跳等
jQTouch: 用于辅助创建手机端的 Web 应用，支持主题、Zepto.js 等
snabbt.js: 一个利用 Javascript 和 CSS transform 的 animation 库
c3: 基于 D3 的图表库
echarts: 企业级图表库，百度开发
parallax.js: 一个用于响应智能手机 orientation 的库
jQuery-Animate-Enhanced: jQuery 动画库的一个增强，用于现代浏览器
wysihtml: 富文本编辑器，适用于现代浏览器
slip: 一个通过滑动或者拖拽来操控列表的库
evil-icons: 一个矢量图库，提供 Ruby/Node 等支持
PhotoSwipe: JS 的一个图片展示库
focusable: 是页面上一个元素高亮的库，有图有真相
firefox.html: Firefox 在浏览器端的实现 —— HTML 版的 Firefox
jquery-mobile: jQuery 团队开发的用于辅助手机端 web app 开发的库，基于 HTML5
mobile-angular-ui: 基于 angularjs 和 bootstarp 的 web app 开发框架
interact.js: 一个适用于现代浏览器的，用于处理 手势、拖放、缩放等的库
rebound-js: 实现部分物理效果，Facebook 出品
basket.js: 基于 LocalStorage 的资源加载器，可以用来缓存 script 和 css, 手机端使用速度快于浏览器直接缓存
iscroll: 高性能的滚动(scroll)处理库，功能强大，支持各种事件，不依赖任何的库，且插件丰富, 大众点评的手机端列表滚动就是用这个库处理的
metrics-graphics: 基于 D3 的图表库，简洁、高效，Mozilla 出品
accessible-html5-video-player: Paypal 出品的 Video 播放器
loading: 几种 Loading 效果，基于 SVG
flippant.js: 一款能够漂亮的网页元素翻转效果库，代码许久不更新，不过作为源码学习还是不错的
move.js: 基于 CSS3 的前端动画框架
scrollReveal.js: 使元素以非常酷帅的方式进入画布 (Viewpoint)，看 Demo
Modernizr: 一个用来检测 HTML5 和 CSS3 支持情况的库
foundation: 另一款前端模版框架，类似于 Bootstrap
Flat-UI: Bootstrap 的一款主题，简洁美观
iCheck: 一款漂亮的 Checkbox 插件
Swipe: 非常轻量级的一个图片滑动切换效果库, 性能良好, 尤其是对手机的支持, 压缩后的大小约 5kb
slick: 功能异常强大的一个图片滑动切换效果库
SocialButtons: 漂亮的社交按钮
sweetalert: 一个非常美观的用于替换浏览器默认 alert 的库
web-animations-js: Javascript 实现的 Web Animation API
vivus: 可以动态描绘 SVG 的 JS 库, 支持多种动画
plyr: 轻量, 小巧, 美观的 HTML5 视频播放器
timesheet.js: 基于 HTML5 & CSS3 时间表
slideout: 一个非常美观的侧滑菜单
移动端插件
Touch.js
- 移动端触摸事件库
swiper.js
应用
H5 微信场景
子主题 2
移动端触摸滑动插件
animation.js
- css3 动画库
iScroll.js
- 移动端区域滚动插件
three.js
canvas.js
前端自动化、Sass 样式预处理语言
gulp
webpack
- 模块化打包
sass
node
ES6
常用框架
移动端开发框架
网页 WebApp
React
官网
作用
MVC 的 view 层框架
轻量、高效
入门前
ES6
node
框架
Ant Design（蚂蚁金服）
- 工具：create-react-app
Amaze UI Touch
Material
Vue.js
官网
特点
构建用户界面的渐进式框架
自底向上增量开发工具
价值
- 开发移动端混合项目
技术栈
Vue2
Vue-router
Vuex
Webpack
ES6/7
Sass
Axios
框架
element（饿了么）
iview
vuetify
AngularJS
中文网
官网
特点
CRUD(增删改查)基于 MVC 系统开发
效率高，节省人力物力
框架
Angular Material
NG-ZORRO
混合 HybridApp
桥接 BridgeApp
React Native
Weex
Xamarin（C#）
RubyMoton（Ruby）
Titanium（JS）
渐进 ProgressiveApp
PWA
MinProgram
Taro
Nanachi
Chameleon
自绘 OwndrawApp
Flutter（Dart）
CrossApp（C++）
Corona（Lua）
Kivy（Python）
Mui&H5+
官网
特点
- 轻量、只涉及 UI 只为移动端 App 而生、界面风格原生化
ionic Framework
官网
入门理解：上到下
angular
cordova
gulp
sass
node
bower
git
ionic Framework
特点
- 手机 UI 库
微信
微信小程序
WEUI:官方组件设计
开发
开发工具
框架
组件
API 接口
运营
推广
维护
微信公众号开发
nodejs 全栈开发
多端开发框架
游戏引擎
- 白鹭
uni-app
网络 API
发起请求
- js
uni.request({ url: "https://www.example.com/request", data: { text: "uni.request" }, header: { "custom-header": "hello", // 自定义请求头信息 }, success: (res) => { console.log(res.data); this.text = "request success"; }, });
微信小程序 封装异步请求
为什么封装
原生的微信小程序不支持 promise
uniapp 的请求不能够方便的添加请求中效果
uniapp 的请求返回值是个数组，不够方便
utils 工具类目录下
微信小程序异步请求的封装 request.js 代码例子
js// es6 promise 微信小程序的 api 的铺垫 export default (params)=>{ // 加载中 uni.showLoading({ title:"加载中" }) return new Promise((resolve,reject)=>{ wx.request({ ...params, success(res){ resolve(res.data); }, fail(err){ reject(err); }, complete(){ uni.hideLoading(); } }) }) }导入
main.js
import request from "./utils/request";
Vue.prototype.request=request;
- 挂载
页面调用
导入
- export default { components: { } }
onLoad(){ this.request({ url:'' }).then(res=>{ console.log(res) }) }
- resolve()调用了 then()里面的 res=>{console.log(res)}
如果时间返回的是时间戳格式 可以使用第三方法库处理
Moment.js
- 中文网
- momentjs.cn
- 中文网
项目目录下命令行安装
使用页面引入
- import moment from "moment";