# 前端大杂烩

# 学习资源

# 基础学习

• 学习CSS布局
• Mozilla 开发者网络
• 菜鸟教程
• w3school
• WEB开发基础 — 优设网
• 百度前端技术学院

# 刷题

• LeetCode-力扣
• FreeCodeCamp - 编程闯关 , github上star最多的项目
• ScriptOJ - 国人开发的前端题库
• 牛客网
• codewars

# 知识&规范

• W3Help
• NEC(CSS规范)

# HTML相关

• HEAD - 最全的 head 列表，真心佩服这种偏执的整理能力

# CSS相关

# JavaScript相关

# 移动端相关

# 移动端优化

• FastClick - 处理移动端 click 事件 300 毫秒延迟
• tappy
• jquery-fast-click

# 移动端框架

# Git,SVN,Github相关

• git - 简明指南 - 助你入门 git 的简明指南，木有高深内容 😉
• Git 速查 - 分类清晰的速查表
• learnGitBranching - Git图形化练习
• Pro Git - Pro Git 第二版, 在线书籍
• git-scm
• 廖雪峰-Git教程
• git-for-windows
• GitHub 添加 SSH keys
• gogithub
• git常规命令练习
• git的资料整理
• 我所记录的git命令（非常实用）
• 企业开发git工作流模式探索部分休整
• GitHub 漫游指南
• GitHub秘籍
• 使用git和github进行协同开发流程
• 动画方式练习git

# Data数据处理

# http请求

• Axios 中文说明
• axios 中文文档翻译
• fly - 跨平台的http请求库
• fetch - A window.fetch JavaScript polyfill
• then-request
• reqwest - browser asynchronous http requests
• ajax - Standalone AJAX library
• browser-request
• superagent
• minAjax.js

# 本地存储

• LocalForage - 改进的离线存储
• cross-storage - Cross domain local storage
• localForage
• pouchdb
• basil.js
• Neurosync - JavaScript 本地离线 ORM 库

# 模板引擎

• mustache.js
• Handlebars.js
• artTemplate
• baiduTemplate
• JSRender
• EJS - JavaScript Templates
• Juicer - A Light Javascript Templete Engine.
• Tempo
• json2html
• Hogan.js - JavaScript templating from Twitter.
• Dust.js - Linkedin维护的项目

# icon - 字体图标

• Font Awesome
• Glyphter: The SVG Font Machine
• Perfect Icons
• iconizr
• Cikonss - 纯CSS实现的响应式Icon
• Simple Icons

# image图片相关

# 图片轮播(幻灯片)/图片展示

• FlexSlider
• unslider - 小而美的轮播库
• prettyPhoto
• FlickerPlate - A cool jQuery plugin that lets you flick through content.
• Holder.js - Client-side image placeholders.
• RowGrid.js - 在径直的行里放置图片
• ImageLightbox.js - 灯箱效果
• JQuery Panorama Viewer - 全景视图
• Intense Images - 全屏查看图片
• Picturefill - 一个响应式图片 JS 插件
• zoom.js - 一个 jQuery 图片放大插件
• watermarkjs - 一个在浏览器中添加图片水印的 JS 库
• responsive-images.js

图片压缩

# 图片裁剪/图片处理

• Jcrop - Image Cropping Plugin for jQuery
• croppic - an image cropping jquery plugin
• smartcrop.js - 智能图片裁剪库
• jQuery.eraser - 图像擦除插件
• DD_belatedPNG.js - 让IE6支持透明PNG图片
• FocusPoint.js 实现图片的响应式裁剪
• imgareaselect
• CSSgram - CSS 实现的 Instagram 滤镜库
• antimoderate - 图片模糊库

# 图片加载(懒加载/预加载/加载监听)

• imagesLoaded
• Echo.js
• lazySizes
• jquery_lazyload
• BttrLazyLoading
• lazyload.js
• layzr.js - 一个小巧快速的图片懒加载库
• waitForImages - 图片加载监听库
• PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能
• bindWithDelay - jQuery Plugin For Delayed Event Execution
• TypeWatch - 停止输入时调用

# 二维码

# 页面交互

# 按钮

• Buttons - A CSS button library
• ButtonComponentMorph
• ProgressButtonStyles
• CreativeButtons
• CSS3 buttons
• jquery.onoff - Interactive, accessible toggle switches for the web.

# Slider - 滑块

• slick - the last carousel you'll ever need
• Swipe - the most accurate touch slider
• Swiper - Most modern mobile touch slider
• iscroll - Smooth scrolling for the web
• iSlider - 移动端滑动组件
• OwlCarousel - create beautiful responsive carousel slider
• jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件
• Glide.js - 轻量级滑块组件
• PhotoSwipe
• TouchSlide) - 触屏滑动特效(焦点图,Tab切换

# Masonry - 瀑布流

• Masonry
• Isotope - Filter & sort magical layouts

# Loading - 进度条/加载动画/占位图

• NProgress.js
• progress.js
• Pace - Automatic page load progress bar
• jquery-ajax-progress
• nanobar - Very lightweight progress bars.
• waitMe - 很漂亮的loading效果
• spin.js
• sonic.js
• fakeLoader.js
• loaders.css - 一个为性能优化的实现加载动画效果的 CSS 框架
• css-loaders

# Scroll - 滚动

# 滚动条(Scrollbar)

• jScrollPane
• jquery.scrollbar
• perfect-scrollbar
• nanoScrollerJS
• tinyscrollbar

# 滚动侦测

• jquery-scrollspy(1)
• jquery-scrollspy(2)
• Waypoints
• ScrollMagic - 像进度条一样使用滚动条

# 滚动加载更多/下拉刷新

• jScroll
• web-pull-to-refresh
• pulltorefresh
• RubberBand.js - add pull-to-refresh functionality to any page.

# 平滑滚动插件(Smooth Scroll)

• jquery-smooth-scroll
• jquery.scrollTo - 平滑滚动到页面指定位置
• smooth-scroll
• scrollUp
• elevator.js - 一个模拟电梯运行“返回顶部”的 JS 插件

# 全屏滚动/全屏切换/分屏滚动

• pagePiling.js - 全屏滚动效果
• fullPage.js
• onepage-scroll
• zepto.fullpage - 专注于移动端的fullPage.js
• screenfull.js - 切换全屏模式
• multiscroll.js - 分屏滚动效果

# 视差滚动/转场效果

• parallax.js
• jparallax
• skrollr
• Animsition - 页面切换时的过渡效果

# 滚动固定元素

• sticky - jQuery Plugin for Sticky Objects
• jquery.pin - 固定页面元素
• stickUp
• Slinky.js - 堆叠头部创建滑动导航列表

# 弹出层

# Dialog - 对话框

• Notify.js(Web Notifications API) - 在桌面弹出消息
• alertify.js
• AlertifyJS
• SweetAlert
• Messenger - 非常酷的弹框组件
• PNotify
• Notify.js - A simple, versatile notification library
• Remodal - 模态窗口插件
• action.js - 极简的tip和Modal弹窗效果

# Tooltip - 提示

• hint.css - 一款非常小巧的提示框效果
• qTip2 - Pretty powerful tooltips
• tooltip - CSS Tooltips
• tooltipster - A jQuery tooltip plugin
• grumble.js - 气泡形状的提示（Tooltip）控件
• Ouibounce - 离站提示控件
• intro.js - 一个创建引导式网站介绍功能的 JS 库
• data-tip.css - 纯 CSS 实现的工具提示

# Popover - 弹出框

• fancyBox - Fancy jQuery lightbox
• jquery-lightbox - The popular lightbox script, ported to jQuery
• Colorbox - a jQuery lightbox
• artDialog - 经典的网页对话框组件
• DialogEffects
• jQuery blockUI - Page or element overlay
• layer - web弹出窗/层

# 拖拽

• Draggabilly - 专注于拖拽功能的 JS 库
• dragula - 一个让拖放操作变简单的 JS 库
• GridList - 可拖拉的响应式列表库

# 隐藏/展示元素

• Headroom.js - 在不需要页头时将其隐藏
• Readmore.js - 内容显示与隐藏插件
• oriDomi - 像纸一样折叠Dom元素

# 分页 - Pagination

# Animate - 动画

• animate.css - A cross-browser library of CSS animations.
• Transit - CSS transitions and transformations for jQuery
• WOW - 在滚动过程中展示CSS动画效果(默认触发animate.css动画)
• AniJS - A Library to Raise your Web Design without Coding
• Move.js - 简化CSS3动画的JS库
• ScrollMe – 在网页中加入各种滚动动画效果
• Effeckt.css - A Performant Transitions and Animations Library
• NEC动画库
• csshake - CSS classes to move your DOM
• magic - CSS3 Animations with special effects
• Hover.css - 很多鼠标Hover态的效果
• SpinKit
• Velocity.js - 加速JavaScript动画
• lenticular.js - 响应倾斜或鼠标事件创建图片动画
• jQuery Interactive 3D - Create a 3D interactive object using images
• AnimateScroll - A Simple jQuery Plugin for Animating Scroll
• Blast.js - 把动画和样式注入到文本中
• Bounce.js - 一个用于制作漂亮 CSS3 关键帧动画的 JS 库
• Sticker.js - create a Sticker Effect
• scrollReveal.js - 元素进入可视区域自动触发设置好的动画
• stroll.js - CSS3 list scroll effects
• jQuery Easing - 动画效果扩展
• animations - CSS3 ANIMATION CHEAT SHEET
• iconate.js：将 icons 增加动画效果的 JS 库

# 文本处理

• ZeroClipboard - 文本复制插件
• clipboard.js
• Bigfoot - 点击文章中的脚注弹窗显示
• Annotator - 文本注解插件，可以包括注释、标签、用户等
• Succinct - 用作截断多行文本,后面添加省略号
• Flowtype.js - 自动调整字体大小和行号
• flat-shadow
• FitText - A jQuery plugin for inflating web type
• shine.js - 实现漂亮阴影
• Type Rendering Mix - 文本渲染引擎
• jquery-expander - 阅读更多
• Typed.js - 输入模拟插件

# 文档/表格/PDF

• Backgrid.js - 强大的表格组件
• handsontable - 在线可编辑excel表格
• jQuery Bootgrid - 用于ajax生成动态表格
• DataTables - Table plug-in for jQuery
• PDF.js - 一个 JavaScript 编写的 PDF 阅读器
• jsPDF - Generate PDF files in JavaScript
• Recline.js - 灵活操作和展示数据
• Dynatable - 交互式表格插件
• fattable - 创建无限滚动无限行列数的表格

# 音频/视频/播放器

• jPlayer - HTML5 Audio & Video for jQuery
• video.js - HTML5 & Flash video player
• Accessible HTML5 Video Player - PayPal 开源的 HTML5 视频播放器
• Clappr - 开源的Web视频播放器
• Plyr - A simple HTML5 media player
• FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
• BigVideo.js - The jQuery Plugin for Big Background Video
• BigScreen - A simple library for using the JavaScript Full Screen API
• Vide - 视频背景
• winamp2-js
• Buzz - A Javascript HTML5 Audio library
• MediaElement.js

# 表单相关 - form

# 表单验证

• Validator
• Parsley
• jquery.form.js - jQuery Form Plugin
• Validform
• validator.js
• jquery-validation - jQuery Validation Plugin
• formvalidator.js
• Fort.js – 表单填写进度提示
• mailcheck - 用于检测email地址的域名
• Floatlable.js - 输入时显示placeholder文本
• jQuery Label Better
• validator.js

# 选择器 - select

• Chosen
• Select2
• bootstrap-select

# 单选/复选

• iCheck - 增强复选框和单选按钮
• Switchery - iOS 7 style switches for your checkboxes

# 日期时间选择器 - DateTimePicker

PC

• 经典my97

• 强大的独立日期选择器

• fullcalendar

• fullcalendar日历控件知识点集合

• 中文api

• 农历日历

• 超酷的仿百度带节日日历老黄历控件

• 日期格式化

• 大牛日历控件

• 我群某管理作品

• input按位替换-官网

• input按位替换-github

• bootstrap-daterangepicker

• 国外30个插件集合

• JavaScript datepicker

• Datepair.js

• 一个风格多样的日历

• 弹出层式的全日历

• jquery双日历

• Both Date and Time picker widget based on twitter bootstrap

• GMU 日历组件

• Mobiscroll

• Pikaday - 日期选择器

• PriceCalendar - 酒店价格日历

  • API文档
  • DEMO

移动

• 大气实用jQuery手机移动端日历日期选择插件
• jQuery Mobile 移动开发中的日期插件Mobiscroll

Date library

• Datejs
• sugarjs

# 级联选择器 - Cascader

• jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

# 输入框

# 自动完成

• At.js - 一个Twitter/微博样式的@自动完成插件
• jquery-textcomplete - 智能搜索提示框/自动补全
• typeahead.js - a fast and fully-featured autocomplete library

# 样式修复

• autosize - 使文本框自动适应所输入的内容

# 上传 - Upload

• 百度上传组件

• 上传

• flash 头像上传

• 图片上传预览

• 图片裁剪

• 图片裁剪-shearphoto

• jQuery图片处理

• jQuery File Upload Plugin

• 百度 Web Uploader

• uploadify

• Plupload

• Fine Uploader

• arale-upload - 轻量级 iframe and html5 file uploader

• Dropzone.js - 文件上传库(可获取文件mime, 文件大小等; 针对图片可生成缩略图,获取图片宽度,高度)

• flow.js

• localResizeIMG - 前端本地客户端压缩图片，兼容IOS，Android，PC

• simple-uploader

# 图表绘制/图形库(Graphics)

• Highcharts
• Chart.js - Simple HTML5 Charts using Canvas
• 百度 ECharts
• Chartist.js
• D3.js - A JavaScript visualization library for HTML and SVG.
  • intro-to-d3 - a D3.js tutorial
• Bonsai - 一个功能强大的JavaScript图形库
• epoch - 数据图表可视化
• Vis.js
• Coutour.js
• zrender - 一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！

# 富文本编辑器 - Editor

• 百度 ueditor
• 经典的ckeditor
• 经典的kindeditor
• wysiwyg
• 一个有情怀的编辑器。Bach's Editor
• tower用的编辑器
• summernote 编辑器
• html5编辑器
• XEditor
• wangEditor

# 颜色(CSS Colors)/SVG/Canvas

• CSS Colours
• SVGeneration
• SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器
• Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素
• Seen.js - 渲染3D场景为SVG或者HTML Canvas

# 社会化 分享功能

• 百度分享 pc端
• JiaThis pc端
• 社会化分享组件 移动端
• ShareSDK 轻松实现社会化功能 移动端
• 友盟分享 移动端

# 实用工具/其他插件

• jquery-cookie
• InstantClick - 预加载用户可能会点击的一些链接
• Async.js - 异步操作
• html2canvas - 实现纯JS网页截图
• jquery.qrcode.js - 生成二维码的 jQuery 插件
• qrcodejs - JS生成QRCode的库
• nakedpassword - 用脱衣女帮助检测密码强度
• KityMinder - 脑图编辑工具
• MixitUp - 动画过滤和排序
• JQuery Tip Cards - 创建卡片交互的cards布局
• Fallback.js - JavaScript library for dynamically loading CSS and JS files.
• swfobject
• prettyprint.js - An in-browser JavaScript variable dumper
• Shepherd - 为应用创建用户指南
• RulersGuide.js - 类似PhotoShop标尺的js库
• Gremlins.js - Monkey 测试库
• RoughDraft.js - 简单快速的创建交互式的 HTML 模型的原型工具
• favico.js - 动态改变浏览器标签栏中的网站图标

# 谷歌浏览器插件

• Postman - REST Client
• Fiddler - Fiddler for Chrome Extension
• WEB前端助手(FeHelper)
• Web Developer
• Chrome Logger
• ColorZilla
• ColorPick Eyedropper
• Code Cola
• 1px
• AlloyDesigner - 前端重构开发辅助工具
• Fontface Ninja
• PageSpeed Insights (by Google)
• HTTP Status
• Redirect Path
• Responsive Web Design Tester
• Window Resizer
• CSSViewer
• IE Tab
• Clear Cache
• JSONView
• Image Downloader
• Pretty Beautiful Javascript - 可以自动格式化混淆的js文件
• JavaScript Errors Notifier
• CSS Diff - 在线比对页面上两个元素的CSS样式差异
• WhatFont- 识别网页所使用的字体

# 静态文档

• hexo
• jekyII
• vuepress
• docsify
• gitbook

# 常用CDN

• 新浪CDN
• 百度静态资源公共库
• 360网站卫士常用前端公共库CDN服务
• Bootstrap中文网开源项目免费 CDN 服务
• 开放静态文件 CDN - 七牛
• CDN加速 - jq22
• jQuery CDN
• Google jQuery CDN
• 微软CDN

# canvas

• canvas 教程

# Node.js

# 面试相关