为开发者准备的 10 个新鲜的框架

一个框架就是一个软件应用，它可以帮助开发者进行快速设计和开发动态站点。每个月都会有那么几个开发者发布一些五花八门的框架，来使得开发工作更加轻松和高效。 本文中，我们收集了10个新的框架， 其中一些比其它的更为复杂，提供了更多的配置选项，组件，和接口选项。不管怎样，他们使得你可以在站点上创建出更棒的东西。希望你可以找到最适合你的需求的那一款，好好享受吧 !! 1. Famo.us Famo.us是个免费并且开源的JavaScript平台，用来构建手机应用和桌面体验。Famo.us与众不同的一点是它的JavaScript渲染引擎和3D物理引擎，赋予开发者力量和工具来创建本地高质量应用和动画，而且只需要用到JavaScript即可。 2. Concise Concise 的构建目标是使你可以拥有很多开箱即用的选项。它被重新构建之后，变的移动友好化，拥有了一个简单的网格系统，漂亮的字体，以及其它一些花边小应用。 不管怎样，它仍然没构建的十分精简，只有刚刚超过2,000行的CSS和几百行的JavaScript代码。Concise被特意构建成可定制化的, 可修补的和高端复杂的框架。 3. Ampersand.js Ampersand.js是一个高度模块化，松耦合，无架构（non-frameworky）的框架，用以构建高端JavaScript应用。它是一个定义良好的过程，把一系列故意设计的很小的模块组合起来。每一个东西都是一个CommonJS组件。没有AMD和UMD，默认情况下也没有捆绑任何类型的插件。CommonJS的清晰、简单和灵活性主导了一切。清楚的依赖关系，没有任何不必要的封装和缩减，没有任何不规矩的东西。只在package.json里清楚的声明了项目依赖。 4. OnSenUI Onsen UI是一个为PhoneGap/Cordova混合App提供的前端开发框架。它致力于创建易用的移动应用。同时，配合Monaca，可以很简单地开发后端特性和添加设备支持。OnSen UI自身使用Angular.js和Topcoat开发，由于其架构特性，可以便捷的使用Angular.js的特性。 5. Archteype Archteype是一个Compass/Sass框架，用于创建可配置的、可组合的UI模式和UI组件。Archteype有良好的文档以及自然的语法。 6. Headstart Headstart非常易用，分分钟就可以进行自动前端设定并运行起来。它使用一个文件夹结构来维护你需要依赖的所有东西，甚至包括对各种东西的优化，比如SVG图像和暗示。 7. Kickoff Kickoff 是一个用来构建可扩展响应式站点的轻量级前端框架。它是用Sass和Grunt构建的，使用MIT许可协议进行发布。 8. Tuktuk Tuktuk 是一个轻量级面向对象CSS框架，用来轻松的构建响应式可扩展站点。它包括十二列布局，还有表单，按钮，表格，字体等等很多。 9. Base Base是用SASS/LESS开发的一个强大的CSS预处理器，它可以帮助你创建简洁的、组织结构良好的CSS，便于长时间的轻松维护。Base支持所有主流的浏览器和注入IE7之类的遗留浏览器。 10. Scribe Scribe是一个富文本编辑器框架，由Guardian创建并开源出来。它对浏览器之间的不一致性进行了打包处理并且包含了合理的默认值。 from:http://www.oschina.net/translate/10-fresh-frameworks-for-developers

值得收藏的十二条Jquery随身笔记

1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。 如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。 以下几种写法都是正确的： $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。 有如下两种方法： $("div").eq(2).html(); //调用jquery对象的方法 $("div").get(2).innerHTML; //调用dom的方法属性 4、同一函数实现set和get Jquery中的很多方法都是如此，主要包括如下几个： $("#msg").html(); //返回id为msg的元素节点的html内容。 $("#msg").html("<b>new content</b>"); //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示b加粗的new content $("#msg").text(); //返回id为msg的元素节点的文本内容。 $("#msg").text("<b>new content</b>"); //将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b> $("#msg").height(); //返回id为msg的元素的高度 $("#msg").height("300"); //将id为msg的元素的css高度设为300 $("#msg").width(); //返回id为msg的元素的css宽度 $("#msg").width("300"); //将id为msg的元素的宽度设为300 $("input").val("); //返回表单输入框的value值 $("input").val("test"); //将表单输入框的value值设为test $("#msg").click(); //触发id为msg的元素的单击事件 $("#msg").click(fn); //为id为msg的元素单击事件添加函数 同样blur,focus,select,submit事件都可以有着两种调用方法 5、集合处理功能 对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。 包括两种形式： $("p").each(function(i){this.style.color=['#f00′,’#0f0′,’#00f'][ i ]}) //为索引分别为0，1，2的p元素分别设定不同的字体颜色。 $("tr").each(function(i){this.style.backgroundColor=['#ccc',’#fff'][i%2]}) //实现表格的隔行换色效果 $("p").click(function(){alert($(this).html())}) //为每个p元素增加了click事件，单击某个p元素则弹出其内容 6、扩展我们需要的功能 $.extend({min: function(a, b){return a < b?a:b; }, max: function(a, b){return a > b?a:b; } }); //为jquery扩展了min,max两个方法使用扩展的方法（通过“$.方法名”调用）： alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20)); 7、支持方法的连写 所谓连写，即可以对一个jquery对象连续调用各种不同的方法。 例如： $("p").click(function(){alert($(this).html())}) […]

javascript eval和JSON之间的联系

如果您想详细了解eval和JSON请参考以下链接： eval  ：https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Functions/Eval JSON：http://www.json.org/ eval函数的工作原理 eval函数会评估一个给定的含有JavaScript代码的字符串，并且试图去执行包含在字符串里的表达式或者一系列的合法的JavaScript语句。eval函数将把最后一个表达式或者语句所包含的值或引用作为返回值。 举例说明 eval评估JavaScript表达式

eval评估JavaScript语句

JSON的格式 JSON的格式是由大括号和由冒号（：）构成的名值对所组成的。注意JSON格式与对象字面量 (object literals) 的区别：JSON的名字部分严格用引号+名字来表示。 举例说明 对象的字面量

JSON对象

eval和JSON 由于Ajax的兴起，JSON这种轻量级的数据格式作为客户端与服务器之间的传输格式逐渐地流行起来，进而出现的问题是如何将服务器端构建好的JSON数据转化为可用的JavaScript对象。利用eval函数无疑是一种简单而直接的方法。在转化的时候需要将JSON字符串的外面包装一层圆括号：

为什么要加括号？ 加上圆括号的目的是迫使eval函数在评估JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：

JSON格式的名字部分为什么要加引号？ 因为eval函数会将{foo:”bar”}解释成合法的JavaScript语句，而非表达式。但是人们往往想要的是让eval将这段代码解释成一个对象。所以JSON格式会强制你去在名字的外侧加上引号再结合圆括号，这样eval就不会错误的将JSON解释成代码块。 举例说明 eval错误解析语义

eval正确解析JSON

结论 理解eval的工作原理和json的严格的限定格式，合理结合eval和json应用于JavaScript的数据传递和对象转换。 following this format:

  from:http://www.jb51.net/article/21688.htm

JS数组的操作

用 js有很久了，但都没有深究过js的数组形式。偶尔用用也就是简单的string.split(char)。这段时间做的一个项目，用到数组的地方很多，自以为js高手的自己居然无从下手，一下狠心，我学！呵呵。学了之后才知道，js数组的功能强大很，远比VB,C#强多了,大家慢慢看吧

百度音乐播放内核 MuPlayer

MuPlayer 是一款跨平台、轻量级的音频播放解决方案，是百度@音乐前端团队开发维护的浏览端音频播放内核，它基于HTML5 Audio及Flash音频技术，已在百度音乐多个线上产品线中应用，具备很强的灵活性和稳定性。 MuPlayer主要特性 多端通用（覆盖PC & WebApp），提供统一的API调用方式 Audio与Flash内核的平滑切换（支持IE 6在内的所有常见浏览器） 提供了完善的文档、灵活简洁的API设计 针对WebApp端的优化打包，节省加载资源 已经在百度多条产品线上实际应用，稳定可靠 示例演示：Demo，提供了MuPlayer的基本调用Demo，可供参考及测试； API文档：MuPlayer API 关注我们(@音乐前端)，了解更多开源项目^^ from:http://www.oschina.net/p/muplayer

jQuery验证控件jquery.validate.js使用说明+中文API

官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载自：http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html   一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script>   二、默认校验规则 (1)required:true                必输字段 (2)remote:"check.php"      使用ajax方法调用check.php验证输入值 (3)email:true                    必须输入正确格式的电子邮件 (4)url:true                        必须输入正确格式的网址 (5)date:true                      必须输入正确格式的日期 日期校验ie6出错，慎用 (6)dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 (7)number:true                 必须输入合法的数字(负数，小数) (8)digits:true                    必须输入整数 (9)creditcard:                   必须输入合法的信用卡号 (10)equalTo:"#field"          输入值必须和#field相同 (11)accept:                       输入拥有合法后缀名的字符串（上传文件的后缀） (12)maxlength:5               输入长度最多是5的字符串(汉字算一个字符) (13)minlength:10              输入长度最小是10的字符串(汉字算一个字符) (14)rangelength:[5,10]      输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) (15)range:[5,10]               输入值必须介于 5 和 10 之间 (16)max:5                        输入值不能大于5 (17)min:10                       输入值不能小于10   三、默认的提示 messages: { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please […]

15 款优化表单的 jQuery 插件

网页上的表单提供给用户的一种交互的方式，用户输入数据，提交到服务器，等待后续的处理。这些表单在我们浏览的网页中随处可见，也容易被我们忽略。 比如，“联系我们”页面会提供一个表单给用户填写他们的信息和想提的建议或者问题，但是开发者往往只关注网站的设计和用户交互的内容，并不会注意到用户进 行交互的方式——表单。 以下整理的这个列表就是为 Web 开发者准备的，包括了 15 款优化表单的 jQuery 插件。希望大家能从中找到适合自己的 jQuery 插件，优化网页表单，更好的与用户进行交互。看完要记得和大家分享你的感想哦：） 一个精选的 AJAX Contact 表单 Demo || Tutorial 这个插件提供一个简单可靠的反馈表单。 创建一个霓虹灯闪烁效果的表单 Demo || Tutorial 不需要使用 Flash 就可以创建一个霓虹灯效果的表单。 高级 JavaScript 表单分类器 – TinyTable V3 Demo || Tutorial 第三代 TinyTable 表单分类脚本添加了搜索，列平均值和合计，记录号，查看所有函数视图和重置功能。大小接近 6 KB，非常轻量级。 完整经济业务表单 Demo || Tutorial Recurly.js 是完整经济业务表单非常安全，兼容 PCI，支持完全自定义的 CSS。 使用纯 CSS 创建表单，使用 jQuery 优化 Demo || Tutorial 在这个教程中，我们使用纯 CSS 来创建一个表单，使用 jQuery 插件来给表单元素加上皮肤，比如文本框，下拉列表，选项框。 Jq Transform Plug in Demo || Tutorial 这个插件是个 jQuery 样式插件，允许为表单元素加上皮肤。 PrettyCheckboxes Demo || Tutorial 这个脚本提供给想要在各种浏览器中保持一致外观的单选按钮的用户，使用这个脚本就可以保证常规输入的可用性。 使用 JavaScript 创建一个进度条 Demo || Tutorial 使用 jQuery 构建进度条到各种 UI 部件库和交互帮手，用户可以查看表单的完成程度。 jQuery 信用卡验证插件: Smart Validate Demo || Tutorial Smart Validate 是 jQuery 信用卡验证插件，使得信用卡验证变成一个简单的任务。它能保证用户输入有效的信用卡号。 Autotab: jQuery 自动 Tab 和过滤插件 Demo || Tutorial […]