1. jQuery: The Write Less, Do More, JavaScript Library

jQuery 是一个很新的 JavaScript 库，它的口号是“几行代码，能干大事”（Write Less, Do More），它是拥有最多插件和扩展的 JavaScript 库，以下是 jQuery 现状：

• 当前版本： 1.3.2
• 文件尺寸：压缩后最小19KB，未压缩为120K。
• 作者： John Resig
• 拥有19种语言的教程: 教程总计183种。
• 著名用户： 超过1000个
• 插件: 3493
• 易学
• 对设计师来说非常易学，使用 CSS 语法
• 拥有大量有趣的扩展
• 拥有非常出色的社区，可能是最大的
• 被数以百万的站点使用，包括诸如 Google, Dell, CBS, NBC, DIGG, Bank of America, Wordpress, Drupal, Mozilla 等著名站点。

2. MooTools – a compact javascript framework

MooTools 是一个使用 MIT 许可的开源项目，意味着你可以在任一场合使用或对它就行修改。

• 当前版本: 1.2.3
• 未压缩尺寸: 95 KB (客户端) ，22 KB (服务器端)
• 作者: Valerio Proietti
• 著名用户: w3c, cnet, bing, …
• 官方站上的插件数目: 4
• 拥有更好的面向对象结构
• 它的动画效果更平滑
• 语法及对象句柄更富逻辑

3. Prototype: Easy Ajax and DOM manipulation for dynamic web applications

被一些大型媒体公司和组织使用，Protorype 是一个很独特的 JavaScript 库，逐渐成为 Web 引用开发者的代码基础，随着最新的 1.6.1 版本的推出，Protorype 在性能，用户自定义事件以及同现代浏览器兼容方面越来越完善。

• 最新版本: 1.6.1
• 未压缩尺寸: 136 KB (大约5000行代码)
• 作者: Sam Stephenson
• 著名用户: NASA, CNN, NBC, …
• 插件数目: 150+
• 更适用于大型 Web 程序

4. Dojo Toolkit: great experiences for everyone

Dojo 的内核小巧，快，精深，可用来创建反应灵敏的 Web 程序，拥有很出色的 UI 工具，在可访问性，本地化方面也做得很好。

• 最新版本: 1.4 Beta
• 未压缩尺寸: 26 KB (约5000行代码)
• 开发组织: Dojo Foundation
• 著名用户: AOL, IBM, Sun, …
• 支持客户端数据存储
• 支持服务器端数据存储
• 异步通讯

5. script.aculo.us: easy-to-use, cross-browser user interface JavaScript libraries

script.aculo.us 是一个开源 JavaScript 库，适用于创建视觉效果和 UI 行为，最新版本拥有一些新功能，如创建加载进程，Windows Media 和 Real Media 播放器检查等。

• 最新版本: 1.8.3 (8 October, 2009)
• 未压缩尺寸: 197 KB (包含 Prototype 和 测试页)
• 作者: Thomas Fuchs
• 著名用户: Gucci, Feedburner, Ruby on Rails, …
• Documentation wiki & Usage （文档）
• script.aculo.us 是对 Prototype 的扩展，增加了视觉效果，UI 控制等功能。

6. ExtJS: Cross-Browser Rich Internet Application Framework

ExtJS 是一个很出色的跨浏览器 JavaScript 框架，可以用来创建富 Web 应用，支持所有现代浏览器。拥有大量插件和扩展。

• 最新版本: 3.0 (6th July, 2009)
• 压缩后尺寸: 197 KB (包含 Prototype 和测试页)
• 作者: Jack Slocum
• 著名用户: Gucci, Feedburner, Ruby on Rails, …
• Download | Samples & Demos | API Documentation
• 拥有很出色的部件和技术支持

7. UIZE: supporting widgets, AJAX, DOM, templates, and more

UIZE 的一些现状：

- 一个开源 JavaScript 框架
- 很容易更换 CSS 皮肤
- 大量内置饰件
- 令人目眩的效果和强大的功能

• 压缩后的尺寸: 4.47 MB
• 作者: Chris van Rensburg

8. YUI Library: is proven, scalable, fast, and robust

YUI 是本列表中规模最宏大的 JavaScript 库，它拥有数不清的强大功能，插件以及扩展，当然要掌握它也需要很长时间。

• 最新版本: 3 (September 2009)
• 整个开发包尺寸: 5.7 MB (包括源代码，调试文件，示例等)
• 开发公司: Yahoo! Developer Network
• 著名用户: LinkedIn, Wikia, NewsVine, …

9. Archetype

Archetype 现状：

• 最新版本: 0.10.0 (September 2009)
• 尺寸: 2.14 MB
• 作者: Temsa & Swiip
• 用户: GifTeer, Meteo France, …

10. qooxdoo: the new era of web development

qooxdoo 是什么？是一个面向对象 JavaScript 库，包含跨平台开发工具链，顶级 GUI 工具以及高级客户端服务器通讯层，它是一个基于 LGPL/EPL 许可的开源项目：

• 最新版本: 0.8 (September 2009)
• 尺寸: 24 MB
• 核心开发者: 1&1 Internet AG
• Download | Samples & Demos | Documentation
• 完整的 GUI 工具包
• 支持对象间的拖放操作

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页打开新窗口的解决方案,拒绝屏蔽
• 相见恨晚的一些 JavaScript 技巧
• 用JS制作的网页版NES模拟器 IE8直接出局
• 用css+js控制图片大小的方法
• 有关 JavaScript 的 10 件让人费解的事情
• 新 API 寻求让 JavaScript 操作本地文件
• 并发下载javascript
• 常用JS验证函数总结

Feed enhanced by Better Feed from Ozh

HTML, XHTML, CSS2

CSS2 Cheat Sheet

不仅是一份完整的 CSS2 速查手册，还让你了解每个属性该怎么用。预览 | 下载 （PDF）

Gosquared CSS help sheets

设计和结构都很整齐，漂亮。下载（PDF）

addedbytes CSS2 Cheat Sheet

该速查手册只有一页纸，包含 CSS 2.1 全部选择器和属性，还包含一个盒子模型示例。下载（PDF | PNG）

Core css

将 CSS 的核心知识分成3部分，包含了 CSS 的方方面面。下载 （需免费注册）

CSS Shorthand Cheat Sheet

一些不容易记住的 CSS 元素。下载 （PDF）

CSS2 – Quick Reference Guide – PDF 下载（PDF）

XHTML 1.1 Cheat Sheet

XHTML 1.1 细则中涉及到的所有元素与属性。预览 | 下载

Gosquared html help sheets

设计漂亮，结构精良的 HTML 速查。下载（PDF）

HTML Cheat Sheet

一份 A4 纸大小的单页 HTML 速查表。下载 （PDF | PNG）

HTML5 Canvas Cheat Sheet

HTML5 Canvas 对象的速查手册，直接编译自 WHATWG specs 细则，只是更容易阅读一些。下载 （PDF | PNG）

HTML Character Entities Cheat Sheet

HTML 字符标识速查。下载 （ PDF | PNG）

HTML Character Entities Cheat Sheet

该表包含 HTML 4 字符标识，包括 ISO8859-1 (Latin-1) 中的字符。预览 | 下载

HTML Colors Cheat Sheet

该 HTML 颜色表包含 1050 种颜色，按色度区分，每个色度包含25中不同饱和度与亮度。还包含216种 Web 安全色。预览 | 下载（PDF）

RGB Hex Colour Chart

RGB 16进制颜色表。包含216种 Web 安全色。下载 （PNG | PDF）

Scripting 速查手册

JavaScript Cheat Sheet

包含 JavaScript 的 的方法与函数，正则表单时，以及 XMLHttpRequest 对象。下载（PNG | PDF）

JavaScript DOM Cheatsheet

JavaScript DOM 结构速查手册。下载（PDF）

jQuery 1.3 Cheat Sheet

jQuery 1.3 速查表。预览 | 下载（PDF）

jQuery Cheat Sheet 1.2 jQuery 1.2 速查手册 下载（PDF）

mootools 1.2 cheat sheet

另一个 JavaScript 库 MooTools 1.2 速查手册。下载（PDF）

prototype 1.5.0 JavaScript 库 Prototype 1.5 速查手册。下载 （PDF）

Prototype 1.6.0.2 Cheat Sheet

JavaScript 库 Prototype 1.6.0.2 速查手册。下载（PDF）

Addison-Wesley’s JavaScript Reference Card

JavaScript 参考手册。下载（PDF）

jQuery selectors

对 jQuery 开发者来说，该速查手册不可或缺，详细列举了 jQuery 所有选择器。下载 （徐免费注册）

服务器端编程

PHP Cheat Sheet (V2)

单页 PHP 参考手册，包含日期格式，正则表达式以及常用函数。下载 （PDF | PNG）

visibone

该站包含2页基本PHP速查手册，以及8页高级速查手册。非免费。

Php 4 Reference Card PHP4 参考速查手册。下载（PDF）

PHP Cheat Sheet

PHP 比较操作速查手册。下载

Core C# and .NET Quick Reference C# 与 .NET 速查参考手册。下载（PDF）

ASP.net ASP.NET 速查参考手册。下载

MS ASP 古老的 ASP 与 VB Script 速查手册。下载（PNG | PDF）

msnet formatting strings 微软 .NET 字符串格式化速查。下载（PDF）

SQL (Structured Query Language) in one page SQL 语言速查。直接访问

MySQL Cheat Sheet MySQL 速查。下载（PNG | PDF）

XML (eXtensible Markup Language) in one page XML 单页速查手册。直接访问

XML Syntax Quick Reference XML 语法参考。下载（PDF）

SEO 速查手册

The Web Developer’s SEO Cheat Sheet

出自 SEO MOZ 的 SEO 速查手册，包括重要的 SEO HTML 标签，搜索引擎索引的限制，Title 标签语法建议等。下载（PDF）

© 我想网 Akon 所有 , 2009. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 为什么在网页设计中清洁代码如此重要？
• 用 PHP 读取和编写 XML DOM
• 更好遵循DIV+CSS设计 网站重构中实现SEO
• MySQL 搜索中的大小写敏感性
• 14个验证HTML，css及RSS Feeds的免费工具
• 用jQuery和CSS构建下拉菜单
• 几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比
• 八种布局方案改善你的设计
• 使用参数化查询防止SQL注入漏洞
• 一个基于JQuery 和CSS3的滑动菜单

Feed enhanced by Better Feed from Ozh

什么是 AJAX 库 API？

AJAX 库 API 是一种内容分布网络，可加载最受欢迎的开源 JavaScript 库的架构。通过使用 Google AJAX API 加载程序的 google.load() 方法，您的应用程序能够迅速从全球任何位置访问不断增长的、最受欢迎的 JavaScript 开源库列表，包括：

• jQuery
• jQuery UI
• Prototype
• script.aculo.us
• MooTools
• Dojo
• SWFObject
• Yahoo! User Interface Library (YUI)

Google 就每个库的利益直接与关键相关人员配合，并在最新稳定版本发布时接受这些版本。一旦我们托管给定库的版本，我们承诺无限期地托管该版本。

AJAX 库 API 在使用库集合的同时消除了用 JavaScript 开发混搭的不便之处。我们消除了托管库的不便之处、正确地设置缓存标头、与最新错误修正日期保持一致等。

<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery
  google.load("jquery", "1");

  // on page load complete, fire off a jQuery json-p query
  // against Google web search
  google.setOnLoadCallback(function() {
    $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&v=1.0&callback=?",

      // on search completion, process the results
      function (data) {
        if (data.responseData.results &&
            data.responseData.results.length > 0) {
          var results = data.responseData.results;

          for (var i=0; i < results.length; i++) {
            // Display each result however you wish
            alert(results[i].titleNoFormatting);
          }
        }

      });
    });
</script>

© 我想网 Akon 所有 , 2009. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 简单的Ajax实例
• 几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比
• 使用框架建立富联网应用
• XmlHttpRequest的串行异步
• WordPress插件API手册
• jQuery与Extjs的Ajax的跨域访问
• Ajax跨域访问解决方案
• AJAX是如何工作的: AJAX的10个实践运用
• Ajax之XMLHTTP学习理解
• Ajax之XMLHTTP学习理解

Feed enhanced by Better Feed from Ozh

原图如下：

缩放功能的代码及效果如下：

1. l_oPhoto = new Photo( ) ;
2. l_oPhoto.resize ( { width:200 } ) ;
3. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

翻转功能的代码及效果如下：

1. l_oPhoto = new Photo( ) ;
2. l_oPhoto.resize ( { width:200 } ) ;
3. l_oPhoto.flipV ( ) ; // Flip vertical, use flipH to flip horizontal
4. document.body .appendChild ( l_oImage.fetch ( ) ) ;

旋转功能的代码及效果如下：

1. l_oPhoto = new Photo( ) ;
2. l_oPhoto.resize ( { width:200 } ) ;
3. l_oPhoto.flipV ( ) ;
4. l_oPhoto.rotate ( 3 ) ; // rotate 3 degrees
5. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

模糊化功能的代码及效果如下：

1. l_oPhoto = new Photo( ) ;
2. l_oPhoto.resize ( { width:200 } ) ;
3. l_oPhoto.flipV ( ) ;
4. l_oPhoto.rotate ( 3 ) ;
5. l_oPhoto.dropShadow ( ) ;
6. l_oPhoto.makeSketchy ( ) ;
7. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

灰色调功能的代码及效果如下：

1. l_oPhoto = new Photo( ) ;
2. l_oPhoto.resize ( { width:200 } ) ;
3. l_oPhoto.flipV ( ) ;
4. l_oPhoto.rotate ( 3 ) ;
5. l_oPhoto.dropShadow ( ) ;
6. l_oPhoto.toGreyScale ( ) ;
7. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

添加文字功能的代码及效果如下：

1. l_oPhoto = new Photo( ) ;
2. l_oPhoto.resize ( { width:200 } ) ;
3. l_oPhoto.rotate ( 3 ) ;
4. l_oPhoto.dropShadow ( ) ;
5. l_oPhoto.addCaption ( ‘Get ajaxorized!’ , ‘1942.ttf’ ) ;
6. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

添加图形对象功能的代码及效果如下：

1. l_oPhoto = new Photo( ) ;
2. l_oPhoto.resize ( { width:200 } ) ;
3. l_oPhoto.rotate ( 3 ) ;
4. l_oPhoto.dropShadow ( ) ;
5. l_oPhoto.addCaption ( ‘Cheers, Chuck’ , ‘1942.ttf’ ) ;
6. l_oPhoto.addChuckNorris ( ) ; // every library should have this function imo
7. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

另外，Phototype支持链式方法调用。如下：

2. l_oPhoto = new Photo( ) .load ( “test.jpg” ) .dropShadow ( ) .flipH ( ) .makeSketchy ( ) ;
3. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

© 我想网 Akon 所有 , 2009. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 无相关日志

Feed enhanced by Better Feed from Ozh

Element对象的方法：

visible: function(element)：判断element是否可见, 参数element可以是元素本身或元素id(下面的方面的参数基本上都是这样的)

toggle: function(element)：反转element的可见性

hide: function(element)：隐藏元素

show: function(element)：显示元素

remove: function(element)：移除元素

update: function(element, html) ：使用html更新element的内容，html中的script会执行(下同)

replace: function(element, html)：将element替换为html

inspect: function(element)：element的字符串表示

Element对象的方法：

visible: function(element)：判断element是否可见, 参数element可以是元素本身或元素id(下面的方面的参数基本上都是这样的)

toggle: function(element)：反转element的可见性

hide: function(element)：隐藏元素

show: function(element)：显示元素

remove: function(element)：移除元素

update: function(element, html) ：使用html更新element的内容，html中的script会执行(下同)

replace: function(element, html)：将element替换为html

inspect: function(element)：element的字符串表示

up(element, expression, index)：利用Selector.findElement方法找到element元素的祖先节点中符合表达式expression的所有元素组成的数 组索引为index的元素，也可以忽略expression(默认为*，表示匹配所有元素)和index(默认为0)，直接这样调用 up(element, index)或up(element)

down(element, expression, index)：跟up一样，只是返回的是子孙节点

previous(element, expression, index)：返回前面的兄弟节点

next(element, expression, index)：返回后面的兄弟节点

getElementsBySelector(element,args)：Selector.findChildElements(element, args)的封装，args表示可以传递多个参数，每个参数是一个css selector表达式，返回element的子孙节点中符合任何一个css selector表达式的元素组成的数组

getElementsByClassName(element, className)：返回element中的子孙节点中符合clsssName的元素

hasClassName: function(element, className) ：判断element是否含有className

addClassName: function(element, className) ：给element添加一个class

removeClassName: function(element, className) ：移除元素中的一个class

observe()：调用Event对象(Prototype中的，将在后面介绍)的observe方法为元素注册事件handle

stopObserving() ：移除注册的事件handle

cleanWhitespace: function(element)：移除元素中空白的文本子节点

empty: function(element)：判断元素是否为空

childOf: function(element, ancestor) ：判断element是否为ancestor的子孙节点

scrollTo: function(element) ：滚动条移动到元素所在的地方

getStyle: function(element, style) ：得到元素某个css样式的值，例如$(element).getStyle(“float”)

setStyle: function(element, style) ：设置元素的css样式，style十一个对象，例如element.setStyle({left: “40px”, “background-color”:”#666″})

getDimensions: function(element) ：得到元素的尺寸，即使元素是隐藏的也可以正确的返回，返回 return {width: originalWidth, height: originalHeight}这样的关联数组

makePositioned: function(element) ：当元素的position css属性为static或不存在使，将次属性更改为relative

undoPositioned: function(element) ：跟makePositioned相反的操作

makeClipping: function(element) ：把元素变成clipping(切片)，也就是设置元素的overflow属性为hidden

undoClipping: function(element)：反转上面的方法对元素所做的修改

hasAttribute(element)：判断元素是否有某个属性

Insertion.Before：将内容插入到元素的前面，内容在元素外面

Insertion.Top：将内容插入到元素的顶部，内容在元素里面

Insertion.Bottom：将内容插入到元素的底部，内容在元素里面

Insertion.After：将内容插入到元素后面，内容在元素外面

以上的这些方法经常会使用到的，不过里面有很多方法我也没有使用过，有些是在网上搜集的，有的是在书上找到的，里面有很多在最近制作google日历时用到了，在js创建表格，div什么虽然具有挑战，比起其他使用起来麻烦多了，但是很有逻辑性的。
希望上面能给JavaScript的学习使用的同仁带来方便，这里可是实现Ajax的关键因素。

提供给大家参考学习，这是经常用到的。

• prototype.rar (26.7 KB)
• 描述: 想使用 prototype 框架下的方法的请看这里的代码，并且要包含到你索引用的模板视图里面

© 我想网 Akon 所有 , 2009. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• JavaScript DOM特性/方法
• javaScript DOM特性/方法
• JavaScript DOM方法与属性摘要
• 40+ Web前端开发必备的备忘单[上]
• 页面输出时一些常用的小技巧
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页打开新窗口的解决方案,拒绝屏蔽
• 相见恨晚的一些 JavaScript 技巧
• 用JS制作的网页版NES模拟器 IE8直接出局
• 用css+js控制图片大小的方法

Feed enhanced by Better Feed from Ozh