整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 第一种实现 一、JSP或HTML(主体结构) 在body中添加 <p id="back-to-top...{ background: #979797 url(/img/back_to_top.png) no-repeat center center; } 图片自己网上找资源 三、<em>jQuery</em>...document).ready(function() { //首先将#back-to-top隐藏 $("#back-to-top").hide(); //当滚动条的位置处于距顶部...0 }, 500); return false; }); }); }); 第二种实现...opacity: .6; filter: Alpha(opacity = 60); } (function() { var $backToTopTxt = "返回顶部
一、需求分析 当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差。...现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮,点击它可以使页面返回顶部,用户再也不用滚动滚轮了。下面本站的返回顶部的效果,分享给大家: ?...pointer; display: none; } #Back-to-the-top .layui-icon { font-size: 50px; color: #333; } Jquery...代码: // 返回顶部 window.onscroll = function() { scrollTop = document.documentElement.scrollTop || window.pageYOffset
7.jQuery 代码托管地址:https://github.com/jquery/jquery jQuery是继Prototype之后又一优秀JavaScript框架。...11.SeaJS 官方文档:http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html SeaJS是一个遵循CMD规范的JavaScript...模块加载框架,可以实现JavaScript的模块化开发及加载机制。...许多组件实现了对数据源的支持 20.YUI 地址:http://yuilibrary.com YUI作为开源前端框架的鼻祖,在框架上的功力非常之深。...Kissy 框架模仿 jQuery 编写了自己的内核 Kissy Core,用于对 DOM 的解析,Ajax 处理等。同时,有着丰富的控件,并实现了一些动画效果和特效。
JS基本特效: 常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。...JS高级特征: 正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、 JQuery:基础使用 悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用...AJAX下篇: JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。...框架封装高级和补充: JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。...面向模块编程: AMD设计规范、CMD设计规范、RequireJS,LoadJS、淘宝的SeaJS。
JS基本特效:常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。...JS高级特征:正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、 JQuery:基础使用悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用...AJAX下篇:JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、jQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。...框架封装高级和补充:jquery框架雏形、可扩展性、模块化、封装属于传智自己的框架。...面向模块编程:AMD设计规范、CMD设计规范、RequireJS,LoadJS、淘宝的SeaJS。
lazy.js: 类似于 underscore, 但是会延迟执行,某些场景下,性能会有很大的提升 seajs: 前端模块加载器,解决模块化、依赖等问题 jQuery-One-Page-Nav: 单页应用中一个用于处理导航栏的库...MVC 库,鼻祖级前端库,最初为了配合 Rails 来模块化前端应用,兼容性良好 (兼容到 IE6),插件丰富,性能良好 jquery.smartbanner: smartbanner 是从 IOS6...: jQuery 插件,用来生成二维码 Wookmark-jQuery: jQuery 的一个插件,可以用来实现瀑布流的效果 isotope: 可以用来过滤、排列布局,实现美观的动态布局切换效果,Demo...的主流前端响应式框架 mui 最接近原生APP体验的高性能前端框架 http://dev.dcloud.net.cn/mui/ AntDesign 和react配合的UI框架https://ant.design...seajs文档http://seajs.org/docs/ SeaJS从入门到原理 http://www.tuicool.com/articles/FfEJv2u Browserify 官网http:
有哪些应用 1、CMD规范 CMD 即Common Module Definition通用模块定义,CMD规范是国内发展出来的,就像AMD有个requireJS,CMD有个浏览器的实现SeaJS,SeaJS...// 定义模块 myModule.js define(function(require, exports, module) { var $ = require('jquery.js') $('div')...除非定义为global对象的属性 模块输出: 模块只有一个出口,module.exports对象,我们需要把模块希望输出的内容放入该对象 加载模块: 加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的.../myModel.js'); nameModule.printName(); 4、代码实战 实现功能如下: 首屏大图为全屏轮播 有回到顶部功能 图片区使用瀑布流布局(图片高度不一),下部有加载更多按钮...image.png 使用AMD规范实现模块加载,使用RequireJS打包 代码 效果展示
由于规范的多样性,模块化的实现也是各有各的不同。...nodejs遵从的就是commonJS规范,它有着一些形式上的约定: require为函数,该函数接受一个字符串作为模块标示符 require函数返回值为该模块API require函数出错,则抛出异常...这也就是Module/Wrappings规范,而seajs基本实现了该规范。...剖析 阅读seajs官网的入门demo,首先在主页面引入seajs文件,并设置入口 // seajs 的简单配置 seajs.config({ base: "...../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" } }) // 加载入口模块 seajs.use
随便举几个例子 JavaScript:jquery 、angular、seajs、vue …… Java:spring、struts、 hibernate、 junit …… C#:asp.net、...hibernate 第二个条件满足,它Java中用来实现数据库操纵和对象关系映射的一系列类, 而且可以复用。 那它是用来开发某一类特定的软件的吗?是hibernate应用程序 ?...因此,个人认为hibernate不能算是一个框架, 它只是一组方便解决问题的类。 jQuery 它是一组可复用的类库吗?...JavaScript特效? 用JavaScript自己就可以了。 jquery程序?jquery特效? 好像没有这个说法呀! 那jquery倒底是不是框架呢?...网上普遍认为是, 但我却是持否定的态度的,至少我找不到在哪一个层面可将之视为框架理由。给我的感觉,jquery就是用来增加开发效率的一组用JavaScript编写的功能而以, 并不是框架。
SeaJS 通过插件,可以实现 Fiddler 中自动映射的功能,还可以实现自动 combo 等功能,非常方便便捷。RequireJS 无这方面的支持。 6. 两者的插件机制有差异。...SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。 ?...与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。...SeaJS可以与jQuery这类框架完美集成。...有时候我们写一个简单的单页并不想为它单独写一个js文件,选择在直接把js代码写在页面上,seajs通过seajs.use()实现了这个。
运算符与优先级 流程控制-if..else 流程控制-switch…case 流程控制-while、do..while、for循环 break、continue语法 函数定义与调用 全局变量与局部变量 函数传参与返回值...的基本操作 定时器使用 this指向与修改指向 数组、字符串等方法操作 时间对象与正则对象 掌握常见BOM操作 常见事件与事件细节 JSON与AJAX JSONP跨域操作 前端cookie的使用 实战:JS配合...HTML与CSS完成电商项目 jquery框架 jquery框架介绍及优势介绍 jquery核心思想 jquery常见方法 jquery动画操作 jqueryAJAX操作 jquery工具方法 利用jquery...对象中实现继承方式 设计模式及实际运用 JavaScript高级 JS算法与排序算法 promise异步处理 运动与tween算法 闭包与模块化 JS组件开发 打造小型jquery框架 JS性能优化...ES6新增功能 前端工程化 gulp基本使用 less、sass、babel等预编译框架 理解模块概念,AMD与CMD规范 前端模块框架seaJS、requireJS webpack基本使用 多人协作
基础教程 前端工程师必备的PS技能——切图篇 结合个人经历总结的前端入门方法 效果类 弹出层 焦点图轮播特效 工具类 css sprite 雪碧图制作 版本控制入门 – 搬进 Github Grunt-beginner...Seajs seajs seajs 中文手册 13. Less,sass sass sass教程-sass中国 Sass 中文文档 less 14....经典排序 常见排序算法-js版本 JavaScript 算法与数据结构 精华集 面试常考算法题精讲 移动端 fastclick no-click-delay JSON 模拟生成JSON数据 返回跨域...Other MUI-最接近原生APP体验的高性能前端框架 Amaze UI | 中国首个开源 HTML5 跨屏前端框架 淘宝 HTML5 前端框架 KISSY - 阿里前端JavaScript库 网易...Gulp安装及配合组件构建前端开发一体化 Gulp 入门指南 Gulp 入门指南 - nimojs Gulp入门教程 Gulp in Action Gulp开发教程(翻译) 前端构建工具gulpjs的使用介绍及技巧
技术选型:jquery(或原生js等)+ 响应式 + 前端模块加载器(seajs或RequireJS等)+ css预处理器(sass 或less等)。...jquery较好的兼容性配合响应式可相对代价较小地实现跨终端。...技术选型:zepto(或xui等移动端轻量级框架)+ 响应式 + 前端模块加载器 + css预处理器 + 终端适配。...zepto作为jquery的移动端版本,依然延续其自身优势,大幅优化了移动端API且摒弃了兼容”非现代浏览器”的冗余代码,成为移动端轻 便可用的js框架代表,对于习惯了jquery的同学来说简直是不二之选...640 //target-densitydpi=device-dpi 标示使用设备本身物理屏幕的像素,不会发生默认缩放 miniual-ui ios的safari为meta表天新增的属性,在网页加载是隐藏顶部的地址栏和底部的导航栏
EMCAScript规范 javascript语言实现,ES6规范(使用babel编译器将es6转换为es5,webpack只支持部分es6): import "jquery"; /.../返回function export function doStuff() {} module "localModule" {} es5: var o = require('s.js'); export...default只有一个,export可以有多个 commonjs规范 nodejs语言实现 require("module"); require("...../file.js"); //require返回对象 object exports.doStuff = function() {}; module.exports = someValue; 浏览器不兼容...global AMD(异步加载模块,npm中requirejs模块) require同步==》异步require([module], callback); //由require.js和curl.js实现
很多人学完HTML、CSS、JavaScript、bootstrap以及jQuery的时候觉得前端不过如此嘛,切切页面写写特效,so easy。然而毕竟是too young。 ?...而那些说不管外面技术如何革新我自坚守jQuery阵营的,终究会被淘汰。 Ajax交互现在应用广泛。...,然后还有equireJS(AMD)/seaJS(CMD)/webpack(commomjs)等等一系列乱七八糟的,让你疲于奔命。...前端之路漫漫,框架多如毛,其实也并不都需要学。只要掌握了前端最核心的JS,那就可以非常气定神闲了。只要你JS基础够牢固,最后再有些后台思维,那无论什么框架学起来都很快。...框架最核心的应该是其架构与设计,当你明白实现的原理,给你时间,你也能照老虎画只猫出来。 ? JavaScript是一个全面的、简单的、面向结果的web开发语言之一。
/blog/2012/10/asynchronous_module_definition.html 阮一峰博客 实际上,这三种第三方框架,目前已经很少用了,seajs最近一次更新是在2014年了。...: SeaJS SeaJS路径配置 //seajs所在的路径为默认根目录 seajs.config({ //配置根目录 base: “...../sea-modules/”, //别名 alias : { “jquery”: “jquery/jquery/1.10.1/jquery.js(路径)” //方便调用...node.js的模块系统,就是参照CommonJS规范实现的。...了解SeaJS,以及Seajs与requirejs之间的区别?
function() { $('#hello').toggle('slow'); }; }); seajs.config({ alias: { 'jquery': 'http...://modules.seajs.org/jquery/1.7.2/jquery.js' } }); seajs.use(['..../hello', 'jquery'], function(hello, $) { $('#beautiful-sea').click(hello.sayHello); }); 原理:顶部引入sea.js...从零自己编写一个React框架 我这篇文章附带了源码,从零自己实现了一个React框架 前端需要了解的常见的算法和数据结构 常见的数据结构:栈,队列,树,图,数组,单链表,双链表,图等......框架的实现原理,是为了让我们学习这种设计思想,在平时业务代码书写时候,考虑时间复杂度和空间度的同时也要考虑框架底层实现。
SeaJS ---- seajs seajs 中文手册 25. Less & Sass ---- sass sass教程-sass中国 Sass 中文文档 less 26....Ext, EasyUI, J-UI 及其它各种UI方案 ---- extjs ext4英文api ext4中文api jquery easyui 未压缩源代码 J-UI MUI-最接近原生APP体验的高性能前端框架...Gulp安装及配合组件构建前端开发一体化 Gulp 入门指南 Gulp 入门指南 - nimojs Gulp in Action Gulp开发教程(翻译) 前端构建工具gulpjs的使用介绍及技巧 42...效果类 ---- 弹出层 焦点图轮播特效 HTML5 有哪些让你惊艳的 demo? 78....优秀JavaScript项目 ---- Angular和Webpack种子文件 Fis3面向前端的工程构建系统 Fis3 DEMO 前端JQuery系列:源码剖析 avalon框架 Microsoft
领取专属 10元无门槛券
手把手带您无忧上云