JQuery 插件(懒加载、color、jQuery UI、ECharts)

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