JQuery 插件(懒加载、color、jQuery UI、ECharts)
-
jquery插件的认识
-
jquery不可能包含所有的功能,我们可以通过插件扩展jquery的功能,只需要同jQuery一同引入,引入方式相同。
-
jquery.color.js
-
jquery中的animate动画本身不支持变色,但是jquery.color.js弥补了这一缺陷,同jQuery一块引入使用。使用后自定义动画就可以设置颜色。
-
jquery.lazyload.js 图片懒加载
-
懒加载原理:
-
浏览器会自动对页面中的img标签的src属性发送请求并下载图片。通过动态改变img的src属性实现。它可以延迟加载长页面中的图片在浏览器可视区域外,图片不会被载入,直到用户将页面滚动到它们所在的位置。
-
<img alt="" width="640" height="480" data-original="img/test.jpg" />
-
$(function() {
-
$("img").lazyload();
-
});
-
jquery.ui.js
-
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。
-
常用的的小部件
-
$( "#date" ).datepicker(); 操作日期选择器
-
$( "#draggable" ).draggable(); 拖动
-
还有放置、对话框、进度条、切换、排序等
-
ECharts
-
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。
-
ECharts特性:丰富的可视化类型(各种图表图形)、多种数据格式无需转换直接使用、据的前端展现、移动端优化、多渲染方案,跨平台使用、动态数据、绚丽的特效
-
引入:可通过下载引入Script标签引入或者CDN线上地址
-
配置语法:(具体方法:”https://www.runoob.com/echarts/echarts-setup.html“)
-
创建 HTML 页面
-
为 ECharts 准备一个具备高宽的 DOM 容器
-
设置配置信息