点击上方 前端瓶子君,关注公众号
回复算法,加入前端编程面试算法每日一题群
DataTables
官网:https://www.datatables.net/
DataTables是jQuery的JavaScript函数库,目的是强化表格操作(如搜索、排序),并自动加入组件引入表格中,使用非常灵活简便。
![](https://i-blog.csdnimg.cn/blog_migrate/ac9c95c135e5454dc7881494e2629276.gif)
LazyLoad
官网:Lazy Load
延伸:Vanilla JavaScript Lazy Load Plugin
Lazy Load帮助高度较长的网页进行延迟载入图片,尚未浏览到该部分时,不会载入视角外的图片,提高效率。
![](https://i-blog.csdnimg.cn/blog_migrate/e9b1e0b9596300e108d82b179ff1a35e.gif)
lightSlider
官网:JQuery lightSlider
Github:sachinchoolur/lightslider
JQuery lightSlider是一个轻量且响应式的跑马灯/幻灯片,附有缩图导览。另外还有相本功能、垂直跑马灯,应用层面广泛。
![](https://i-blog.csdnimg.cn/blog_migrate/6901eb6ebe1dc52e9d613ea3479461a9.gif)
alertify.js
官网:https://fabien-d.github.io/alertify.js/
Github:alertify.js
alertify.js是为了美化通知信息而生的JavaScript框架。
![](https://i-blog.csdnimg.cn/blog_migrate/9d3361734ce0892364174876be81700e.gif)
pickadate.js
-日期/时间选择器
官网:pickadate.js
![](https://i-blog.csdnimg.cn/blog_migrate/037b55fb59e5d6f4052316dafe050c42.gif)
chosen
官网:Chosen
Github:chosen
Chosen是一个jQuery的插件,目的是让又长又笨重的下拉式选单变得更友善。
![](https://i-blog.csdnimg.cn/blog_migrate/d113d4960a126e85349111f05cc6d2e3.gif)
typeahead.js
Github:typeahead.js
由Twitter推出,灵活扎实的建议列表函数库。
![](https://i-blog.csdnimg.cn/blog_migrate/b12e5053558431f011fc3424f2119273.gif)
textillate.js
官网:textillate.js
Github:jschr/textillate
textillate.js结合了很多很棒的函数库,简单应用CSS3动画特效。
![](https://i-blog.csdnimg.cn/blog_migrate/fc1e091c2a463f93e672b19431a0f36a.gif)
Chart.js
官网:Chart.js
对设计师或开发人员,浅显易懂的JavaScript图标应用。
![](https://i-blog.csdnimg.cn/blog_migrate/e4d8d6377437470d6aef0aa573977e60.jpeg)
highlight.js
官网:highlight.js
Github:highlight.js
针对Web程序所做的高亮显示上色。
![](https://i-blog.csdnimg.cn/blog_migrate/9db037f3b311ea602f299220d3d0fe1e.jpeg)
jquery-loading
官网:jquery-loading
起源于为了在读取或运行中,锁住特定对象,并同时保持让浏览者可以操作页面的其他部分。
![](https://i-blog.csdnimg.cn/blog_migrate/0f20157ec10f259ee03be36832fc015a.gif)
jquery-validation
官网:jQuery Validation
Github:jquery-validation
jQuery Validation插件让用户端检查表单变得更容易,并提供大量的定制化设定,无论导入新开发或是现有的项目都是很好的选择。
![](https://i-blog.csdnimg.cn/blog_migrate/fa072004ad3b8cdbcc7ab1596f2f8b5c.gif)
Moment.js
官网:Moment.js
轻量级专门解析、验证、操作、格式化日期的JavaScript函数库,Moment.js是为浏览器和Node.js而设计,所有组件都可以在这两个环境下运行。
Animate.css
官网:Animate.css
纯CSS,无需JavaScript,支持多浏览器的动画特效,即插即用。
![](https://i-blog.csdnimg.cn/blog_migrate/f5bc5958ccd052f4a261f7d60223ee82.gif)
Ace
官网:Ace
Ace是透过JavaScript所开发的线上程序语言编辑器插件,无论功能和性能都类似一般编辑器(Sublime、Vim和TextMate等),导入进任何网页或JavaScript应用程序都相当容易。值得一提的是Ace是由Cloud9 IDE的团队维护,并且是Mozilla Skywriter(Bespin)项目的延伸品,品质值得信赖。
![](https://i-blog.csdnimg.cn/blog_migrate/4169a2601e72775f92fc08ba912809c1.gif)
PDF.js.js
官网:PDF.js
PDF.js是一个由HTML构建的PDF阅读器,由Mozilla Labs所推广,目标是建立一个通用的PDF平台。
![](https://i-blog.csdnimg.cn/blog_migrate/a89a59f15d3b1a7e55eef0310844389d.gif)
reveal.js
-网页变简报
官网:REVEAL.JS
![](https://i-blog.csdnimg.cn/blog_migrate/51a17e29086d8a10a873d58b22473be9.gif)
Intro.js
-网站导航
官网:Intro.js
优化网站的导航功能,提供步骤指南给浏览者,强化网站的用户体验。
![](https://i-blog.csdnimg.cn/blog_migrate/8246c3f03f66f5a35803f011ad865f8b.gif)
Fine Uploader
-拖拽上传
官网:fine-uploader
Github:fine-uploader
导入拖拽上传档案,跨浏览器、原生JavaScript又加上免费开源,只要载入JavaScript就可以开始运行,不依赖其他程序。
![](https://i-blog.csdnimg.cn/blog_migrate/e4659292b94bd35748f98af0f3203f88.gif)
parallax.js
官网:parallax.js
Github:wagerfield/parallax
对任何设备,兼容性高的视差引擎。
![](https://i-blog.csdnimg.cn/blog_migrate/a6106aba386a97f3852bf5d6f74ab9e5.gif)
Hover.css
官网:Hover.css
Github:IanLunn/Hover
多项针对链接、按钮、Logo、SVG和图片的移入CSS3特效。
![](https://i-blog.csdnimg.cn/blog_migrate/db727a837a94d5ac0a9f1ab0e60b33f4.gif)
iscroll
Github:cubiq/iscroll
iScroll是一款高性能、文件小、无依赖且多平台的JavaScript拖拽滑动库。
![](https://i-blog.csdnimg.cn/blog_migrate/3eea2d40dc415f93d01529d7dcb73d71.gif)
Toolbar.js
官网:Toolbar.Js
Github:paulkinzett/toolbar
一个产生工具列的jQuery插件。
![](https://i-blog.csdnimg.cn/blog_migrate/a40149bb557ef6b607df3b9fe800f5bc.gif)
nanoScroller.js
Github:nanoScrollerJS
nanoScroller.js是一个用简单方法做出类似Mac OS X风格卷轴的jQuery插件,尽管目前没有在持续维护,但使用上相当简单且支持度高仍然是不错的选择。
![](https://i-blog.csdnimg.cn/blog_migrate/9a488d72e9555ef0ad63cdec6a4c796c.gif)
iCheck
官网:iCheck
Github:icheck
专为jQuery和Zepto做的高弹性定制化checkbox
和radio
按钮的插件。
![](https://i-blog.csdnimg.cn/blog_migrate/a0b1b0697a61d8188b9a43658e546e71.gif)
KUTE.js
官网:KUTE.js
Github:kute.js
一个成熟的原生的JavaScript动画引擎,提供给网站开发者、设计师、动画师相当多基本的功能,浅显易懂的操作方式,跨浏览器动画,拥有着高质量、灵活、专业且轻量(主要核心只需要17K)。
![](https://i-blog.csdnimg.cn/blog_migrate/a578c6558c2835a0216d3dca9bcbdff1.gif)
Timeline.js
官网:Timeline.js
jQuery时间轴插件,使用简单是它的优点。
![](https://i-blog.csdnimg.cn/blog_migrate/3729828ca32698093e1eb00038fd4bb6.gif)
Muuri.js
官网:Muuri
Muuri是一个JavaScript Layout引擎,让你可以构建多样化的Layout,并具有响应式、可排序、可过滤、拖拽移动或动画效果。
![](https://i-blog.csdnimg.cn/blog_migrate/aa6857b40acb0f81b3797da4a697f8de.gif)
Algolia Places
官网:Algolia Places
Algolia Places为您的网站提供一个快速、简单的方式,自动化产生地址建议列表的JavaScript函数库。
lightgallery.js
官网:lightgallery.js
Github:lightGallery
一个弹性高、组件化且响应式的灯箱jQuery插件。
![](https://i-blog.csdnimg.cn/blog_migrate/cc74d5ddf7ecef160944746a2120d16c.gif)
Tabslet
官网:Tabslet
Github:Tabslet
一个用于页签的jQuery插件,轻量级且操作容易。
![](https://i-blog.csdnimg.cn/blog_migrate/b4c90d8a65c8a23a76fb0996ad9587d1.gif)
Masonry.js
官网:Masonry
Masonry常用于瀑布流布局的插件。
![](https://i-blog.csdnimg.cn/blog_migrate/64f966770d857aef5a2a12b93a78b829.gif)
Slidebars
官网:Slidebars
Github:Slidebars
Slidebars是一个jQuery框架,提供网站或网站应用程序侧边栏选单。
three.js
官网:three.js
Github:three.js
易于使用且轻量级3D函数库,提供canvas
、SVG
、CSS3 3D
和WebGL
渲染器。
![](https://i-blog.csdnimg.cn/blog_migrate/9cd9c652c75b390440ac530467e9a397.gif)
Videos.js
-HTML5视频播放器
官网:Video.js: The Player Framework
Github:video.js
Video.js是随着HTML5的来袭所打造的媒体播放器,支持HTML5和Flash视频,支持PC和移动设备。这个项目从2010年开始,现在已经有超过40万的网站使用它。
![](https://i-blog.csdnimg.cn/blog_migrate/385e05eed7b87adbdf1592a8fd192721.gif)
Leaflet.js
官网:Leaflet
Github:Leaflet
Leaflet是一个对移动设备友善的互动地图并且开源的JavaScript函数库,总大小只有38KB,却有着大多数开发人员想要的需要。简单、专业、实用并且跨平台可以有效率地在PC和移动设备上,并且有大量的插件可以扩展,有着华丽却简单使用的API,很易学且阅读性高的源码。
![](https://i-blog.csdnimg.cn/blog_migrate/3d57d748ca38a243911333a8244bc953.gif)
Sortable
官网:SortableJS
Sortable可以对HTML对象做拖拽移动清单的JavaScript函数库,支持移动设备且不依赖jQuery等其他第三方,并兼容Bootstrap等CSS框架。
![](https://i-blog.csdnimg.cn/blog_migrate/1f7b8f17324bc87dad6488f42ade158a.gif)
clipboard.js
官网:clipboard.js
Github:clipboard.js
复制内容到剪切板的小工具,不依赖Flash,大小只要3KB。
howler.js
官网:howler.js
howler.js是针对当下网站的一个音频播放函数库,预设为Web Audio API和HTML5 Audio,可以透过JavaScript播放声音变得更简单,并且跨平台。
p5.js
-绘画插件
官网:p5.js
Github:processing/p5.js
p5.js是一个JavaScript函数库,有完整的绘画功能,并不局限在画布上,你可以把整个浏览器当做你的草稿,另外有插件可以让你更容易去做HTML5互动,加入文字栏、影片、视频或音频等功能。
![](https://i-blog.csdnimg.cn/blog_migrate/e50e8c35d3a2b73abb960567b83568f7.gif)
fullPage.js
-全页式导航
官网:fullPage.js
Github:fullPage.js
![](https://i-blog.csdnimg.cn/blog_migrate/8ee94287d93f511c02e8349c9126b826.gif)
store.js
Github:store.js
针对任何项目都可以做的跨浏览器的数据存取,全站都可以运行,浏览器支持度高,小项目不想导入大型框架的不错选择。
![](https://i-blog.csdnimg.cn/blog_migrate/f011cfe4451477d3440d73f37077a38f.gif)
fullcalendar
官网:JavaScript Calendar
Github:fullcalendar
设计一个满版且可拖拽事件的行程日历。Bootstrap的排版风格,可读入JSON格式数据,安装容易、支持响应式排版。
![](https://i-blog.csdnimg.cn/blog_migrate/c3a0512307044389af367954e00b33d0.gif)
Headroom.js
官网:Headroom.js
把网站空间发挥到极限,不需要导航列表是隐藏,需要时出现。搭配Animation.css可以让画面更活泼,另外也支持jQuery或Angular。
![](https://i-blog.csdnimg.cn/blog_migrate/2bf7ce9b0cde560aa380226ee4c9a860.gif)
ScrollToFixed
官网:ScrollToFixed
ScrollToFixed能够让网页的导航或表头等固定在顶部或底部,用户更方便的操作或查看信息。除了导航和表头,也可以固定其他内容,比如广告、返回顶部等。
![](https://i-blog.csdnimg.cn/blog_migrate/e1a5f288de5cef898d9ae287cf7b9fd3.gif)
Handlebars.js
官网:Handlebars.js
Github:handlebars.js
Handlebars主要是让你在做语义化模板时更有效率、且不容易受挫,并且兼容Mustache模板,大多数可以直接互换使用。
faker.js
Github:faker.js
faker.js可以在浏览器或Node.js产生大量的假数据。测试时期相当方便的东西,也可以透过Google Extension来运行。
TinyMCE
-HTML编辑器
官网:TinyMCE
Github:tinymce
TinyMCE是功能齐全且轻量级的HTML编辑器,但需要在IE11以上才可以运行。
![](https://i-blog.csdnimg.cn/blog_migrate/4188bd4b7d5c264f1cd4ee58a915abf6.gif)
List.js
-资料排序
官网:List.js
Github:list.js
List.js对表格、清单、各式各样的对象,增加搜索、排序、过滤和灵活性,无形地建立在HTML内,极简易也易于使用。即便周边不如DataTables,但不依赖jQuery及大小仅Datatables的1/4(压缩后17KB),以及对IE的高兼容性和不止对<table>
,对<ul>
、<ol>
或是其他HTML元素的支持,都是List.js
不容忽视的优势之一。
![](https://i-blog.csdnimg.cn/blog_migrate/5ac85e90a4de9c4fcb1e8b7b358f49ba.gif)
Swiper
官网:Swiper
Github:Swiper
Swiper是当下王铮的幻灯片/跑马灯插件,使用效能高,并可运用在移动设备上及混合式App上,不但在最新版本的IOS上运行良好,在Android、Windows Phone 8和PC设备上一样表现优秀。要注意的是,Swiper并不兼容所有平台设备,而是专注于当下主流平台设备的兼容性和效能上。同时Swiper也是Framework7和Ionic Framework的组件的一部分。
![](https://i-blog.csdnimg.cn/blog_migrate/787900f49118e2c8d33dbce4b10c3fe8.gif)
toastr
官网:Toastr
toastr是一个提示信息JavaScript函数库,必须载入jQuery,宗旨是利用简单的程序函数库来做定制化跟扩展。toastr提供一个范例页面toastr examples,方便自订效果跟产生源码,类似Customize and download · Bootstrap的效果,方便使用者加快流程,先前介绍的ALERTIFY JS整体层面比toastr好很多,无论原生JavaScript以及整体文件大小和功能延展性,但toastr简单使用的操作模式,如果有旧项目是在jQuery的环境下,要做一些定制化功能,或许就是不错的选择。
![](https://i-blog.csdnimg.cn/blog_migrate/c44fa8a80f9b66ae5f19ebd4c3cfc268.gif)
goodshare.js
-极简动画绘制
官网:Sketch.js
![](https://i-blog.csdnimg.cn/blog_migrate/6b39a19632a0f871626c92395209f604.gif)
Quill
官网:Quill
Github:Quill
Quill是当下高兼容性、强大、丰富且具有扩展性的文字编辑器。对于移动设备的支持度高。
![](https://i-blog.csdnimg.cn/blog_migrate/bf2b243a0a923ddc749dd93ce0b9c4b9.gif)
Shave
-截断文字
官网:Shave
Shave根据内容的最大高度将文字截断,是一个没有任何依赖性的JavaScript插件。并将多出的文字藏在span
后面,保留原文的完整性。CSS本身通过text-overflow
也有类似的功能(Truncate String with Ellipsis),但需要设定宽度,如果需要不能固定宽度的项目,Shave应该是一个不错的选择。
Tabulator
官网:Tabulator
Tabulator是相当容易操作的表格内容产生器,只需要花很少的时间就可以通过把数组或JSON格式的资料生成HTML界面的表格。并且支持响应式网页,以及运用其他插件做成对象产生资料图表。
![](https://i-blog.csdnimg.cn/blog_migrate/b02d7b8934da865f248af6d5f89fdf43.gif)
ScrollReveal
-动态显示内容
官网:ScrollReveal
![](https://i-blog.csdnimg.cn/blog_migrate/cd11a950824b26c51c219300ee0c95b3.gif)
datedropper
官网:datedropper
Github:datedropper
datedropper是微型但功能强大的jQuery时间选择器。内建风格相当活泼可爱,可增加网站的活力。
![](https://i-blog.csdnimg.cn/blog_migrate/16144ece4705936869c384efcd1852c3.gif)
Cleave.js
-表单栏位格式化工具
官网:Cleave.js
![](https://i-blog.csdnimg.cn/blog_migrate/89ff09d40bac4010db0bca20663f3c3c.gif)
Infinite Scroll
官网:Infinite Scroll
Infinite Scroll是jQuery一个用来实现无限滚动的插件。
![](https://i-blog.csdnimg.cn/blog_migrate/9588e9a01daa61fae3e41da1668daae1.gif)
关于本文
作者:寒青
来源:https://segmentfault.com/a/1190000019151460
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持