热门关键字:
jquery > jquery教程 > jquery教程 > 前端开发梦寐以求的资源

前端开发梦寐以求的资源

5046
作者:管理员
发布时间:2015/6/3 10:43:20
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=625

前端开发梦寐以求的资源

前端开发梦寐以求的资源包括了jquery,html5,css3,javascript,前端框架,pc端,移动端js库,框架,css框架,工具等资源,网友们的精心整理收集的结晶,看到列表太齐全了,实在忍不住分享出来给大家,废话就不多说了,直接进入正题。

原文出处:https://coding.net/u/f2e/p/Books/git/tree/master/%E7%A7%BB%E5%8A%A8Web

移动端资料

支付宝无线Web开发经验谈
移动前端系列——移动端页面坑与排坑技巧( 2014-12-08 )
移动web最佳实践(2013)
移动Web前端框架 ( 2014 )
移动端自适应方案-lib.flexible,淘宝手机版都是用这个框架
iOS 微信 音频 视频自动播放

学习资料/文章

node.js中文资料导航
了不起的Nodejs Nodejs的各种资源,英文
AngularJS ,一些关于 AngularJS 的博客,文章,视频,书籍等
HelloSea.js seajs教程
HTTP API 设计指南
JSON API:用 JSON 构建 API 的标准指南中文版
了不起的React React的各种资源,英文
一家伙(s5s5)学习css3动画的心得
让WEB前端的变优雅的东东,如:代码规范,代码组织,最佳实践之类
前端工具推荐

书籍资料

免费的计算机编程类中文书籍
免费编程书籍
码农周刊整理-推荐关注

其他工具

HTML5 与 CSS3 技术应用评估
各种奇妙的hack
几乎所有设备的屏幕尺寸与像素密度表
移动设备参数表
ios端移动设备参数速查
浏览器兼容表
移动设备查询器
移动设备适配库
移动设备适配库2
viewport与设备尺寸在线检测器
html5 移动端兼容性速查
在线转换字体 css3 选择器测试
兼容性速查表
浏览器的一些独特参数
各种各样的媒体查询收集
css3 动画在线制作器
css3 渐变在线制作器
移动端手势表 webkit独有的样式分析
HTML5 Cross Browser Polyfills
HTML5 POLYFILLS
iPhone 6 屏幕揭秘

前端组件库

搭建web app常用的样式/组件等收集列表(移动优先)

0. 前端自动化(Workflow)

前端构建工具
Yeoman - a set of tools for automating development workflow
gulp - The streaming build system
grunt - the JavaScript Task Runner
F.I.S - 前端集成解决方案

前端模块管理器
Bower - A package manager for the web
Browserify
Component
Duo
RequireJS
Sea.js
webpack

css预处理器 Less - Less is More , Than CSS
Sass - Syntactically Awesome Style Sheets
Stylus - Expressive, dynamic, robust CSS

1. 前端框架(Frameworks)

Bootstrap
Foundation
Amaze UI
Semantic UI
Pure CSS
topcoat
UIkit
Material UI
Framework7
mui
ionic framework
Fries
jQuery Mobile
H-ui 前端框架

2. JavaScript 框架汇总


JavaScript 框架
react
Angular
jQuery
Backbone.js
Ractive.js
KISSY
Zepto.js
ZeptoBuilder是Zepto的一个在线版本,从列表中选取你想包含的文件,就能得到你自定义的构建了
Vanilla JS
Avalon
Sprint.js - 一个高性能、小体积的 DOM 操作库 (Benjamin De Cock)
JSLite.js

轻量级JavaScript框架
Min.js - Super minimal selector and event library
skel.js - A lightweight responsive framework

JavaScript 工具库
underscore.js
Way.js - 双向数据绑定库
Keys.js - 应用快捷键
Mousetrap - 键盘快捷键操作
Vue.js - 数据驱动的组件化MVVM库

3. 前端游戏框架

cocos2d-html5
Egret Engine
LimeJS
EaselJS
three.js
AlloyStick
The-Best-JS-Game-Framework
CanvasEngine
Quintus

4. ui组件库

GMU - 基于zepto的ui组件库,适用于移动端
FrozenUI - 腾讯移动端组件库
NEC
NEJ
Pure CSS Components
magic-of-css
Primer - The CSS toolkit and guidelines that power GitHub
ZUI - 一个开源前端实践方案,帮助你快速构现代跨屏应用。
WeX5开源前端
B-JUI

5. 基础模版

浏览器统一(Cross Browser)
HTML5 BOILERPLATE
Modernizr
Normalize.css
cssFx - 为CSS3自动生成浏览器前缀
-prefix-free - Break free from CSS prefix hell

响应式
Responsive - 响应式布局
Enquire.js - Awesome Media Queries in JavaScript
Free Wall - 创建桌面,移动和平板的动态网格布局

6. 排版

yue.css
typo.css
chinese-copywriting-guidelines - 中文文案排版指南

7. 网格系统

grid
Flexbox Grid
MasonJS - creating a perfect grid

8. HTML5 API 应用

History.js - gracefully supports the HTML5 History/State APIs
jquery-pjax - pushState+ajax
jquery-address - Deep Linking
Notify.js(Web Notifications API)

9. UA 识别

detector

10. 表单处理

10.1 表单验证(Form Validator)/表单提示
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
10.2 < select > 相关
Chosen
Select2
bootstrap-select
10.3 单选框/复选框相关
iCheck - 增强复选框和单选按钮
10.4 上传组件
jQuery File Upload Plugin
百度 Web Uploader
Uploadify
Plupload
Fine Uploader
arale-upload - 轻量级 iframe and html5 file uploader
Dropzone.js - drag'n'drop library拖拽上传
flow.js
localResizeIMG3 - 前端本地客户端压缩图片,兼容IOS,Android,PC
FileAPI - 是文件上传(单个/多个)、拖放支持、图像裁剪、大小调整、应用过滤器和获取文件信息 -Resumable.JS 通过HTML5API提供了稳定可恢复的多文件上传功能。
10.5 日期选择

Both Date and Time picker widget based on twitter bootstrap
GMU 日历组件
Mobiscroll
Pikaday - 日期选择器
TimelineJS - 时间轴
10.6 取色

Colorpicker plugin for Twitter Bootstrap
10.7 标签插件(Tag)
TaggingJS – 可以灵活定制的 jQuery 标签系统插件
selectize.js
10.8 自动完成插件
At.js - 一个Twitter/微博样式的@自动完成插件
jquery-textcomplete - 智能搜索提示框/自动补全
typeahead.js - a fast and fully-featured autocomplete library
Awesomplete - 零依赖的简单自动完成插件 - github
10.9 样式修正

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

11. 图表绘制/图形库(Graphics)

Highcharts
Chart.js - 基于HTML5的JavaScript图表
百度 ECharts
Chartist.js
D3.js - A JavaScript visualization library for HTML and SVG.
intro-to-d3 - a D3.js tutorial
Bonsai - 一个功能强大的JavaScript图形库
Epoch - 漂亮、平稳流畅和高性能可视化的图表库

12. 日期格式化


Moment.js - 日期处理
Smart Time Ago - 显示相对时间
FormatJS – 让你的 Web 应用程序国际化 ####13. 页面交互
13.1 Slider
slick - the last carousel you'll ever need
Swipe - the most accurate touch slider
Swiper - 移动端/pc端滑动组件比较强大 - github
iscroll - 简约模拟滑动层
iSlider - 移动端滑动组件
OwlCarousel - create beautiful responsive carousel slider
jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件
Glide.js - 轻量级滑块组件
13.2 瀑布流
Masonry
Isotope - Filter & sort magical layouts
13.3 懒加载/加载监听/预加载
layzr.js - git关注蛮高的 - github
imagesLoaded
Echo.js
lazySizes
jquery_lazyload
BttrLazyLoading
lazyload.js
waitForImages - 图片加载监听库
PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能
bindWithDelay - jQuery Plugin For Delayed Event Execution
TypeWatch - 停止输入时调用
13.4 图片轮播(幻灯片)/图片展示
SuperSlide - 国产的幻灯片,功能集成比较多,我个人推荐
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 - 全景视图
PhotoSwipe - 移动开发必备的 iOS 风格相册 - github
13.5 图片剪裁/图片处理
Jcrop - Image Cropping Plugin for jQuery
croppic - an image cropping jquery plugin
jQuery.eraser - 图像擦除插件
DD_belatedPNG.js - 让IE6支持透明PNG图片
FocusPoint.js 实现图片的响应式裁剪
Picturefill - 一个响应式图片 JS 插件 (Scott Jehl)
jQuery picZoomer - 图片区域放大
watermark.js 为图片添加水印
13.6 进度条/加载动画(Loading)

NProgress.js
progress.js
Pace - Automatic page load progress bar
jquery-ajax-progress
waitMe - 很漂亮的loading效果
spin.js
sonic.js
13.7 侧滑插件(offcancas)
pushy - a responsive off-canvas navigation menu
Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单
13.8 菜单(Menu)
SuperFish - 基于jQuery的级联下拉菜单
Responsive Nav - 响应式导航
13.9 滚动侦测(ScrollSpy)
jquery-scrollspy(1)
jquery-scrollspy(2)
Waypoints
ScrollMagic - 像进度条一样使用滚动条
onScreen - 滚动加载,滚动固定
13.10 滚动加载更多/下拉刷新(Pull to Refresh)

jScroll
web-pull-to-refresh
pulltorefresh
RubberBand.js - add pull-to-refresh functionality to any page.
infinity.js/∞ .js 无限下拉加载
13.11 平滑滚动插件(Smooth Scroll)
jquery-smooth-scroll
jquery.scrollTo - 平滑滚动到页面指定位置
smooth-scroll
scrollUp
Elevator.js 一个模拟电梯运行“返回顶部”的 JS 插件 (Tim Holman)
13.12 全屏滚动/全屏切换

pagePiling.js - 全屏滚动效果
fullPage.js
onepage-scroll
zepto.fullpage - 专注于移动端的fullPage.js
screenfull.js - 切换全屏模式
Space.js – HTML 驱动的页面 3D 滚动效果 - github
13.13 分屏滚动

multiscroll.js - 分屏滚动效果
13.14 转场效果
Animsition - 页面切换时的过渡效果
13.15 固定元素(Sticky)
Sticky-Kit 比较出名,功能强大,个人推荐
Sticky Navbar -可定点
Waypoints
sticky - jQuery Plugin for Sticky Objects
jquery.pin - 固定页面元素
stickUp
Slinky.js - 堆叠头部创建滑动导航列表
Headroom.js
ScrollMagic
Sticky Float
Sticky Mojo
Zebra Pin
HC-Sticky
13.16 触控事件

Hammer.js
jquery.event.move.js
13.17 拖拽组件
Draggabilly - 专注于拖拽功能的 JS 库
13.18 隐藏或展示页面元素
Headroom.js - 在不需要页头时将其隐藏
Readmore.js - 内容显示与隐藏插件
oriDomi - 像指一样折叠Dom元素
13.19 滚动条(Scrollbar)
jScrollPane
jquery.scrollbar
perfect-scrollbar
nanoScrollerJS
tinyscrollbar
13.20 视差滚动(Parallax Scrolling)
MidnightJS 效果很赞
parallax.js
jparallax
StickyStack.js -github
jquery.superscrollorama.js 很酷的动画效果

14. 代码高亮插件/代码编辑器


google-code-prettify
highlight.js
Rainbow
ACE
CodeMirror
Crayon Syntax Highlighter
prism - Lightweight, robust, elegant syntax highlighting.

15. UI Icon 组件

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

16. 动画(Animate)

js动画库
snabbt.js - 简约的JavaScript动画库
Transit - CSS transitions and transformations for jQuery
Move.js - 简化CSS3动画的JS库 - github
Animo.js - 堆栈动画,创建跨浏览器的模糊效果【效果不错,依赖jq】 - github
Velocity.js - 加速JavaScript动画
Morf.js 提供了一组 JavaScript 方法用于加速 CSS3的各种转换效果,支持的方法都在上图中,无需编写 CSS3 代码。 - github
lenticular.js - 响应倾斜或鼠标事件创建图片动画
jQuery Interactive 3D - 使用图片创建一个3D模型
AnimateScroll - 动画滚动,应该是定点导航动画
jq 元素抖动库
Tween JS JavaScript 补间动画库 canvas
Rekapi 关键帧动画库
favico.js v0.3.4 控制游览器标签小图标 - github
dom-animator -注释动画

css动画库
xless - 又一个css动画库 github
CSShake - css抖动库 - github
animate.css - css3动画库
all animation - 同上,有sass版本 - github
magic - CSS3动画特效 - gihub
ScrollMe – 在网页中加入各种滚动动画效果
Loaders.css - css加载动画 - github
css-loaders - 同上
Hover.css - github
Effeckt.css - 手机动画库
NEC动画库
uilang - a minimal, ui-focused programming language for web designers
csshake 带有sass版本
AniJS - 一个基于声明式语法的CSS动画库
SpinKit ??
JX.Animate - 腾讯css3动画库 - github

17. 本地存储

cross-storage - Cross domain local storage
localForage
pouchdb
basil.js

18. 模板引擎

mustache.js
Handlebars.js
artTemplate
baiduTemplate
JSRender
EJS - JavaScript Templates
Juicer - A Light Javascript Templete Engine.
Tempo
json2html

19. 通知组件/弹框组件/模态窗口

layer.js - 国产,也是集成很多功能,个人推荐
AnimatedModal.js - CSS3 全屏模态窗口,支持 Firefox、Chrome、Safari、Opera 和 IE 10+
alertify.js
AlertifyJS
SweetAlert
Messenger - 非常酷的弹框组件
PNotify
Notify.js - A simple, versatile notification library
Remodal - 模态窗口插件

20. 提示控件(Tooltips)

qTip2 - Pretty powerful tooltips
tooltip - CSS Tooltips
tooltipster - A jQuery tooltip plugin
grumble.js - 气泡形状的提示(Tooltip)控件
Ouibounce - 离站提示控件

21. 对话框/遮罩层/弹出层(lightbox)

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

22. 文档/表格/PDF

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

23. 目录树插件

zTree_v3 - jQuery Tree Plugin
jstree - jQuery Tree Plugin
fancytree - Tree plugin for jQuery

24. Ajax模块

fetch - A window.fetch JavaScript polyfill
reqwest - browser asynchronous http requests
minAjax.js

25. 音频/视频

jWebAudio
jPlayer - HTML5 Audio & Video for jQuery
video.js - HTML5 & Flash video player
Accessible HTML5 Video Player - PayPal 开源的 HTML5 视频播放器
Clappr - 开源的Web视频播放器
Plyr - 简单,灵活的 HTML5 媒体播放器
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

26. 按钮

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

27. 富文本编辑器/Markdown编辑器/Markdown解析器

Simditor - 简单快速的富文本编辑器
BachEditor - 一个有情怀的编辑器
Squire – 简洁的 HTML5 富文本编辑器
TinyMCE
bootstrap-markdown
marked - markdown解析器
Markdown Plus
Editor.md - 开源在线Markdown编辑器

28. 内容提取(Readability)

Readability
json.human.js - Json Formatting for Human Beings

29. 颜色(CSS Colors)/SVG

CSS Colours
SVGeneration
SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器
Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素

30. 选项卡(Tabs)

Easy Responsive Tabs to Accordion
Responsive-Tabs
ion.tabs - jQuery tabs plugin
jQuery-EasyTabs

31. 文本处理

ZeroClipboard - 文本复制插件
Bigfoot - 点击文章中的脚注弹窗显示
Annotator - 文本注解插件,可以包括注释、标签、用户等
Succinct - 用作截断多行文本,后面添加省略号
Flowtype.js - 自动调整字体大小和行号
flat-shadow
FitText - A jQuery plugin for inflating web type
Squishy 是一个jQuery插件,它能自动调整文字,准确地对其各容器
slabText 一个jQuery插件,用于创建大的,大胆的和敏感的头条新闻。
Textillate 做CSS3文字动画。
Bacon 是一个jQuery插件,它允许您环绕贝塞尔曲线文字或线条,它可以让您的文字沿贝塞尔曲线排列。
Circletype.js 是一个很小的( 2.7kb )的jQuery插件,可以让你的字体在一个圆圈内显示。
jQSlickWrap 是一个jQuery插件,让您可以轻松而准确地环绕浮动图像里的内容文字。
TypeButter 使您能为您的字体设置透明度和字间距。

32. 布局(Layout)

分隔面板(Split Panel)
split-pane ####33. 实用工具/其他插件

jquery-cookie
FastClick - 处理移动端 click 事件 300 毫秒延迟
Async.js - 异步操作
html2canvas - 实现纯JS网页截图
jquery.qrcode.js - 生成二维码的 jQuery 插件
nakedpassword - 用脱衣女帮助检测密码强度
KityMinder - 脑图编辑工具
MixitUp - 动画过滤和排序
JQuery Tip Cards - 创建卡片交互的cards布局
Fallback.js - JavaScript library for dynamically loading CSS and JS files.
swfobject

34. sass 库

SpaceBase – 基于 Sass 的响应式 CSS 框架 - github

35. 未知分类

Rainyday.js - 实现雨滴效果
Reveal.JS - 替代PPT,演示文稿。
Gif.JS 是一个能运行在你的浏览器中的JavaScript GIF编码器。
Sir Trevor是一个会完全重绘网页内容的工具:直观的编辑网页内容而不用假定任何关于它是如何重绘的事。
BookBlock 翻书特效 - github

前端参考集

frontend-guidelines - Some HTML, CSS and JS best practices.
Codrops - Useful resources
Front-end Code Standards & Best Practices
frontend-dev-bookmarks
Airbnb 的 JavaScript 编码规范
Clusterize.js 可以优化你的大型数据表格的性能



如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery html5 css3 javascript 前端框架 pc端 移动端js库 框架 css框架 工具
友荐云推荐