LivePipe

LivePipe UI 基于 Prototype Javascript 框架，包含了一整套经严格测试并高度可扩展的 UI 控件，拥有很好的文档，在不支持 JavaScript 的环境中，可以无缝降级使用。包括 Tab, 窗体，文本框，多选框，评分控件，进度条，滚动条，右键菜单等多种控件。

LivePipe 首页与下载
LivePipe 演示与示例

UKI

UKI 是一套简单的 JavaScript UI 工具集，用于快速创建桌面风格的 Web 应用。包含的控件从滑动条，到分栏视图，不一而足。熟悉 jQuery 的开发者会发现这个工具很容易上手，非常简洁，无需安装框架，不依赖 CSS 引用。

UKI 主页与下载
UKI 控件，演示，示例

MochaUI

MochaUI 是 MooTools Javascript 框架 与 ExplorerCanvas 的一个备受欢迎的扩展，可以用来快速创建 Web 应用，Web 桌面，网站，饰件，独立 Windows，Modal 对话框等等。

MochaUI 主页与下载
MochaUI 控件，演示，示例

中文编译来源：锐商企业CMS 网站内容管理系统 官方网站

Sigma Ajax UI Builder

SigmaVisual 是一套基于 Web 的，所见即所得的 AJAX UI 创建工具，包含超过40个不见，如 Tab，对话框，树形图，时间线等，基于 JavaScript 和 PHP。

Sigma Ajax UI Builder 主页和下载
Sigma Ajax UI Builder 控件，演示和示例

JxLib based MooTools

JxLib 是一个基于 MooTools 的 JavaScript UI 框架，包含多数 Web 程序都需要的基本空间，如按钮，Tab，菜单，树形结构，对话框等等。JxLib 还支持换肤功能。

JxLib 主页与下载
JxLib 控件，演示与示例

Dijit – The Dojo Toolkit

Dijit 基于 Dojo，也是学习 Dojo 扩展的一个好起点。可以用来创建非常漂亮的 Web 2.0 GUI。支持多语种，甚至支持不同语种的文字书写方向以及本地化数字，日期等等。

Dijit 主页，下载
Dijit 控件，演示，示例

jQuery TOOLS

jQuery Tools 是一个非常轻量（2.5kb）的常用 UI 库，支持以下 jQuery 对象，Tabs, 工具提示，滚动条，层，表单以及 Flash 嵌套。

jQuery TOOLS 主页与下载
jQuery TOOLS 控件，演示，示例

jQuery UI

jQuery UI 基于 jQuery，包含 3 个大类，饰件，一些内置的 UI 对象；效果，对各种网页对象施加动画效果（如爆炸效果）；鼠标交互，如拖放操作。

jQuery UI 首页与下载
jQuery UI 控件，演示与示例

Prototype UI

Prototype UI 基于 Prototype 与 Script.aculo.us，包括多个模块（旋转木马，Modal 窗口，阴影，右键菜单等），每个模块可以单独安装使用。

Prototype UI 主页与下载
Prototype UI 控件，演示与示例

Jitsu

Jitsu 功能包括 XML 标记，页面编译，动画引擎，Ajax 以及运行时检测等等，它的 Ajax 功能使消费级 Web 应用的创建变得非常简单，支持客户端数据绑定，还可以将页面编译成 JavaScript，Jitsu 在 Firefox 和 IE 中运行最佳。

Jitsu 主页与下载
Jitsu 控件，演示与示例

Qutensil

Qutensil 仍在开发中，但其路线图已经显示出某些引人注目的东西，基于 Prototype 与 Scriptaculous ，包含消息，调色板，滑动条，工具提示，可拖放窗口以及警告，确认，提示等窗口。

Qutensil 主页，下载
Qutensil 控件，演示，示例

Script.aculo.us

script.aculo.us 是一个备受欢迎的 UI 工具集，基于 Prototype 框架，提供了诸如视觉效果，UI 控件以及面向 DOM 的工具。

Script.aculo.us 首页与下载

Alloy UI

AlloyUI 是一套功能丰富的 UI 框架，基于 YUI 3，部分基于 YUI 2，包含一套丰富的（超过60）UI 部件，如图片库，对话框，树形结构，面板，自动完成，按钮，日历控件，工具条等。

Alloy UI 首页和下载
Alloy UI 控件，演示与示例

iUI: iPhone UI 框架

IUI 包含一套 JavaScript 库，CSS 式样表及图片，是一个轻量级 iPhone UI 库，包含 iPhone 风格导航菜单，设备方向，iPhone 风格切换等功能，可以为你的 Web 程序带来 iPhone 般的体验。

iUI 主页与下载

XUI

XUI 是一个用于移动 Web 应用的轻量，极简，高度模块化的框架。它之所以非常轻量的原因是，它只支持移动浏览器，所有跨浏览器支持的代码都被剥离。它面向一线移动 Web 浏览器，如 Webkit，Fennec 以及 Opera，并有意将来对移动 IE 和黑莓提供支持。

XUI 首页，下载

Yahoo! YUI Library

Yahoo! YUI Library 可谓所有 Web UI 之父，可靠，功能丰富，目前已经发展到第 3 版。它拥有一个很庞大的开发团队，推出了非常丰富的功能，就功能而言，无可匹敌。

YUI Library 主页与下载
YUI2 入门
YUI3 入门
YUI3 控件，演示与示例

本文国际来源：Specky Boy 15 Javascript Web UI Libraries, Frameworks and Toolkits

简略语句

JavaScript 可以使用简略语句快速创建对象和数组，比如下面的代码：

可以使用简略语句如下：

对象 car 就此创建，不过需要特别注意，结束花括号前一定不要加 ";" 否则在 IE 会遇到很大麻烦。

创建数组的传统方法是：

使用简略语句则：

另一个可以使用简略语句的地方是条件判断语句：

可以简略为：

JSON 数据格式

JSON 是 "JavaScript Object Notation" 的缩写，由 Douglas Crockford 设计，JSON 改变了 JavaScript 在缓存复杂数据格式方面的困境，如下例，假如你要描述一个乐队，可以这样写：

你可以在 JavaScript 中直接使用 JSON，甚至作为某些 API 的返回数据对象，以下代码调用著名书签网站 delicious.com 的一个 API，返回你在该网站的所有书签，并显示在你自己的网站：

JavaScript 本地函数 (Math, Array 和 String)

JavaScript 有很多内置函数，有效的使用，可以避免很多不必要的代码，比如，从一个数组中找出最大值，传统的方法是：

使用内置函数可以更容易实现：

另一个方法是使用 Math.max() 方法：

你可以用这个方法帮助探测浏览器

这解决了 IE 浏览器的一个问题，通过这种方法，你总是可以找到那个正确的值，因为浏览器不支持的那个值会返回 undefined。

还可以使用 JavaScript 内置的 split() 和 join() 函数处理 HTML 对象的 CSS 类名，如果 HTML 对象的类名是空格隔开的多个名字，你在为它追加或删除一个 CSS 类名的时候需要特别注意，如果该对象还没有类名属性，可以直接将新的类名赋予它，如果已经存在类名，新增的类名前必须有一个空格，用传统的 JavaScript 方法是这样实现的：

使用 split 和 join 方法则直观优雅得多：

事件代理

与其在 HTML 文档中设计一堆事件，不如直接设计一个事件代理，举例说明，假如你有一些链接，用户点击后不想打开链接，而是执行某个事件，HTML 代码如下：

传统的事件处理是遍历各个链接，加上各自的事件处理：

使用事件代理，可以直接处理，无需遍历：

匿名函数与 Module 模式

JavaScript 的一个问题是，任何变量，函数或是对象，除非是在某个函数内部定义，否则，就是全局的，意味着同一网页的别的代码可以访问并改写这个变量（ECMA 的 JavaScript 5 已经改变了这一状况 - 译者），使用匿名函数，你可以绕过这一问题。

比如，你有这样一段代码，很显然，变量 name, age, status 将成为全局变量

为了避免这一问题，你可以使用匿名函数：

如果这个函数不会被调用，可以更直接为：

如果要访问其中的对象或函数，可以：

这就是所谓 Module 模式或单例模式（Singleton），该模式为 Douglas Crockford 所推崇，并被大量应用在 Yahoo User Interface Library YUI。

假如你想在别的地方调用里面的方法，又不想在调用前使用 myApplication 这个对象名，可以在匿名函数中返回这些方法，甚至用简称返回：

代码配置

别人使用你编写的 JavaScript 代码的时候，难免会更改某些代码，但这会很困难，因为不是每个人都很容易读懂别人的代码，与其这样，不如创建一个代码配置对象，别人只需要在这个对象中更改某些配置即可实现代码的更改。这里有一篇 JavaScript 配置对象详解的文章，简单说：

• 在代码中创建一个叫做 configuration 的对象
• 里面保存所有可以更改的配置，如 CSS ID 和类名，按钮的标签文字，描述性文字，本地化语言设置
• 将该对象设置为全局对象，以便别人直接访问并改写

你应当在最后一步做这项工作，这里有一个文章，交付代码前的5件事值的参考。

同后台交互

JavaScript 是一门前台语言，你需要别的语言同后台交互，并返回数据，使用 AJAX，你可以让 JavaScript 直接使用同后台的交互，将复杂的数据处理交由后台处理。

JavaScript 框架

自己编写适应各种浏览器的代码是完全浪费时间，应当选择一个 JavaScript 框架，让这些复杂的事情交给框架处理。

更多资源

• Douglas Crockford on JavaScript
  JavaScript 深度视频教程
• The Opera Web Standards Curriculum
  JavaScript 详解

延伸阅读

• 有关 JavaScript 的 10 件让人费解的事情
• 新 API 寻求让 JavaScript 操作本地文件
• 让 JavaScript 拯救 HTML5 的离线存储
• 开源项目越来越青睐 JavaScript
• Javascript 是一个错误吗？
• Javascript 2 前途尘埃落定
• Google 排名中的 10 个最著名的 JavaScript 库
• ECMA 推出 JavaScript 5

本文国际来源：Smashing Magazine Seven JavaScript Things I Wish I Knew Much Earlier In My Career （原文作者：Christian Heilmann）

尽管JavaScript 的语法非常简单，但对于写程序而言仍然是困难重重，就是因为它的运行环境：基于Web浏览器。

以下您可以看到收集的8个实用的 JavaScript 测试及效验工具，它们都可以在不同环境下进行单元测试及校验测试您的脚本。

JSLint
JSLint是基于Web的验证JavaScript错误代码的工具。它拥有的功能及特定的设置来使用您的需求，自定义你的验证算法。

JsUnit
JsUnit是一款在客户端(在浏览时)的单元测试JavaScript框架。对JavaScript而言，JUnit就像是它的一个端口。当然它也可以在多 个浏览器、多个机器的不同操作系统中自动运行。它的发展始于2001年1月。

J3Unit
J3Unit是一个面向对象的JavaScript单元测试框架。J3Unit在网页浏览器中直接运行JavaScript的测试，也可以自动运行 JUnit 和 Jetty。J3Unit是建立在JUint和Script.aculo.us的基础之上来更好地实现自动运行JavaScript 单元测试。面向对象的JavaScript单元测试是由Script.aculo.us的Test.Unit.Runner对象编写的，基于 prototype JavaScript库。

Crosscheck
Crosscheck是一款开源的校验浏览器中的JavaScript测试框架。它可以帮助您在不同的浏览器中，诸如：Internet Explorer、Firefox等，而不需要一 一安装他们来确认您的代码是否正确。您唯一需要的是必须要有Java虚拟机环境。

YUI Test
YUI测试是一款基于浏览器，提供解决方案的测试框架。使用YUI，您可以方便地添加单元测试，寻求JavaScript解决方案。它是由 Yahoo! UI Library开发的一个JavaScriptMVC测试插件，能够让你模范大部分DOM动作，比如写，拖拽，比如模范AJAX响应，并且能够使用断言 (assertions)。它能够象函数一样运行，并且能够在不同的console窗口进行集成测试。虽然它不是在任何 xUnit 框架基础上开发而来，但YUI Test仍然有很多nUnit 和 JUnit的所具有的特性。（ While not a direct port from any specific xUnit framework, YUI Test does derive some characteristics from nUnit and JUnit. 这段翻译得不好，但相信大致意思是对的）。

Regular Expression Tool
Regular Expression Tool（正则表达式工具）是一款在线工具，用来测试您的正则表达式代码是否正确。当您想快速测试各种文本例子的正则表达式时非常得心应手。

JSLitmus
JSLitmus是款轻量级的工具，用来测试JavaScript执行性能情况，采用直观的API。

JavaScript Regular Expression Tester
这块便利的应用程序是在浏览器中使用JavaScript来测试JavaScript正则表达式的。操作界面跟其他正则表达式测试工具无异，不同的 是，它测试的是JavaScript正则表达式在JavaScript中的性能情况。

注：

web.config中要指定允许调用web服务。

必须为Post方式来调用。

WEB服务返回的为XML串，所以客户端要转换为JSON再处理。

        [WebMethod]

        public static string AjaxServiceTest(string str)

        {

            return string.Format("Hello,{0}", str);

        } 

    [System.Web.Script.Services.ScriptService]

    public class TestWebService : System.Web.Services.WebService

    {

        [WebMethod]

        public string HelloWorld(string s)

        {

            return "Hello World" + s ;

        }

    } 

        function WebServiceMethod() {

            $.ajax({

                type: "POST",

                contentType: "application/json;utf-8",

                url: "TestWebService.asmx/HelloWorld",

                data: "{s:""" + $("#inputName").val() + """}", //传webservice方法的参数，s是方法的参数，必须一致                                         

                success: function(data) {

                    //将返回字符串转换为json对象

                    var json = null;

                    try {

                        json = eval('(' + data + ')');

                    } catch (e) {

                        alert("返回字符串不是json格式!");

                        return;

                    }

                    alert(json.d);

                }

            });

        }

        function PageAjaxServiceTest() {

            $.ajax({

                type: "POST",

                contentType: "application/json;utf-8",

                url: "PageService.aspx/AjaxServiceTest",

                data: "{str:""" + $("#inputName").val() + """}", //传到.cs静态方法的参数，str是方法的参数，必须一致                                    

                success: function(data) {

                    //将返回字符串转换为json对象

                    var json = null;

                    try {

                        json = eval('(' + data + ')');

                    } catch (e) {

                        alert("返回字符串不是json格式!");

                        return;

                    }

                    alert(json.d);

                }

            });

        }

    </script>

    <div>

    <input id="inputName" type="text" value="" />

    <a href="#" onclick="WebServiceMethod();">调用web服务</a><br /><br />

    <a href="#" onclick="PageAjaxServiceTest();">调用页面静态方法</a><br /><br />

    </div> 

注：

        $.post("PagingService.asmx/GetLoginHtml", { s: "fda" },

         function(data) {

             $("#ajaxlogin").html(data);

             alert(data);

         }, "html");

注：jQuery都可替换为$

浏览器
jQuery.browser()：浏览器内核标识。依据 navigator.userAgent 判断。

可用值: safari opera msie mozilla

在 Microsoft's Internet Explorer 浏览器中返回 true。

代码:$.browser.msie

仅在 Safari 中提示 "this is safari!" 。

代码:

if ($.browser.safari) {

   alert("this is safari!");

}

jQuery.browser.version()：浏览器渲染引擎版本号

典型结果:

Internet Explorer: 6.0, 7.0

Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3

Opera: 9.20

Safari/Webkit: 312.8, 418.9

if ( $.browser.msie )

 alert( $.browser.version );

jQuery.boxModel()：当前页面中浏览器是否使用标准盒模型渲染页面

在 Internet Explorer 怪癖模式（QuirksMode）中返回 False。

代码:$.boxModel

数组和对象操作
jQuery.each(obj,callback)：通用例遍方法，可用于例遍对象和数组。

代码:例遍数组，同时使用元素索引和内容。

$.each( [0,1,2], function(i, n){

 alert( "Item #" + i + ": " + n );

});

代码:例遍对象，同时使用成员名称和变量内容。

$.each( { name: "John", lang: "JS" }, function(i, n){

 alert( "Name: " + i + ", Value: " + n );

});

jQuery.extend(target,obj1,objN)：用一个或多个其他对象来扩展一个对象，返回被扩展的对象

代码:合并 settings 和 options，修改并返回 settings。

var settings = { validate: false, limit: 5, name: "foo" };

var options = { validate: true, name: "bar" };

jQuery.extend(settings, options);

结果:settings == { validate: true, limit: 5, name: "bar" }

代码:合并 defaults 和 options, 不修改 defaults。

var empty = {}

var defaults = { validate: false, limit: 5, name: "foo" };

var options = { validate: true, name: "bar" };

var settings = jQuery.extend(empty, defaults, options);

结果:

settings == { validate: true, limit: 5, name: "bar" }

empty == { validate: true, limit: 5, name: "bar" }

jQuery.grep(array,callback,invert)：使用过滤函数过滤数组元素

代码:过滤数组中小于 0 的元素。

$.grep( [0,1,2], function(n,i){

 return n > 0;

});

结果:[1, 2]

代码:排除数组中大于 0 的元素，使用第三个参数进行排除。

$.grep( [0,1,2], function(n,i){

 return n > 0;

}, true);

结果:[0]

jQuery.makeArray(obj)：将类数组对象转换为数组对象

<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>

代码:过滤数组中小于 0 的元素。

var arr = jQuery.makeArray(document.getElementsByTagName("div"));

arr.reverse(); // 使用数组翻转函数

结果:

Fourth

Third

Second

First

jQuery.map(array,callback)：将一个数组中的元素转换到另一个数组中

代码:将原数组中每个元素加 4 转换为一个新数组。

$.map( [0,1,2], function(n){

 return n + 4;

});

结果:[4, 5, 6]

代码:原数组中大于 0 的元素加 1 ，否则删除。

$.map( [0,1,2], function(n){

 return n > 0 ? n + 1 : null;

});

结果:[2, 3]

代码:原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组。

$.map( [0,1,2], function(n){

 return [ n, n + 1 ];

});

结果:[0, 1, 1, 2, 2, 3]

jQuery.unique(array)：删除数组中重复元素

代码:删除重复 div 标签。

$.unique(document.getElementsByTagName("div"));

结果:<div>, <div>, ...

测试操作
jQuery.isFunction(obj)：测试对象是否为函数

代码:检测是否为函数

    function stub() {}

     var objs = [

            function () {},

            { x:15, y:20 },

            null,

            stub,

            "function"

          ];

        jQuery.each(objs, function (i) {

        var isFunc = jQuery.isFunction(objs[i]);

        $("span:eq( " + i + ")").text(isFunc);

      }); 

结果: true,false,false,true,false 

字符串操作
jQuery.trim(str)：去掉字符串起始和结尾的空格

$.trim(" hello, how are you? "); 结果:"hello, how are you?"

基本
show()：显示隐藏的匹配元素

<p style="display: none">Hello</p>

代码:$("p").show()

show(speed,callback)：显示所有匹配的元素，并在显示完成后可选地触发一个回调函数

<p style="display: none">Hello</p>

代码:$("p").show("slow");

代码://用迅速的动画将隐藏的段落显示出来，历时200毫秒。

$("p").show("fast",function(){

   $(this).text("Animation Done!");

 });

代码://将隐藏的段落用将近4秒的时间显示出来

$("p").show(4000,function(){

   $(this).text("Animation Done...");

 });

hide()：隐藏显示的元素

$("p").hide()

hide(speed,callback)：和show(speed,callback)相反～

toggle()：切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

<p>Hello</p><p style="display: none">Hello Again</p>

代码:$("p").toggle()

结果:<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>

滑动
slideDown(speed,callback)：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

代码:用600毫秒缓慢的将段落滑下

$("p").slideDown("slow");

代码:用200毫秒快速将段落滑下，之后弹出一个对话框

$("p").slideDown("fast",function(){

   alert("Animation Done.");

 });

slideUp(speed,callback)：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数

代码:用600毫秒缓慢的将段落滑上

$("p").slideUp("slow");

代码:用200毫秒快速将段落滑上，之后弹出一个对话框

$("p").slideUp("fast",function(){

   alert("Animation Done.");

 });

slideToggle(speed,callback)：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数

代码:$("p").slideToggle("slow");

代码:用200毫秒快速将段落滑上或滑下，之后弹出一个对话框

$("p").slideToggle("fast",function(){

   alert("Animation Done.");

 });

淡入淡出
fadeIn(speed,callback)：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数

代码:用600毫秒缓慢的将段落淡入

$("p").fadeIn("slow");

代码:用200毫秒快速将段落淡入，之后弹出一个对话框

$("p").fadeIn("fast",function(){

   alert("Animation Done.");

 });

fadeOut(speed,callback)：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数

代码:用600毫秒缓慢的将段落淡出

$("p").fadeOut("slow");

代码:用200毫秒快速将段落淡出，之后弹出一个对话框

$("p").fadeOut("fast",function(){

   alert("Animation Done.");

 });

fadetTo(speed,opacity,callback)：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数

代码:用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度

$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66);

代码:用200毫秒快速将段落的透明度调整到0.25，大约1/4的可见度，之后弹出一个对话框

$("p").fadeTo("fast", 0.25, function(){

   alert("Animation Done.");

 });

自定义
animate(params[,duration[,easing[,callback]]])

说明：用于创建自定义动画的函数

params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合

duration (String,Number) : (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

callback (Function) : (可选) 在动画完成时执行的函数

<button id="go"> Run</button>

<div id="block">Hello!</div>

代码:// 在一个动画中同时应用三种类型的效果

$("#go").click(function(){

 $("#block").animate({

    width: "90%",

    height: "100%",

    fontSize: "10em",

    borderWidth: 10

 }, 1000 );

});

<button id="left">«</button> <button id="right">»</button>

<div class="block"></div>

代码:让指定元素左右移动

$("#right").click(function(){

 $(".block").animate({left: '+50px'}, "slow");

});

$("#left").click(function(){

 $(".block").animate({left: '-50px'}, "slow");

});

代码:在600毫秒内切换段落的高度和透明度

$("p").animate({

   height: 'toggle', opacity: 'toggle'

 }, "slow");

代码:用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）

$("p").animate({

   left: 50, opacity: 'show'

 }, 500);

代码:一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数，这个参数才起作用。

$("p").animate({

   opacity: 'show'

 }, "slow", "easein");

animate(params,options)

params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合

options (Options) : 一组包含动画选项的值的集合。

选项

duration (String,Number) : (默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing (String) : (默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

complete (Function) : 在动画完成时执行的函数

step (Callback) : Template:APICallback

queue (Boolean) : (默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)

示例

第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体，一旦字体改变完毕后，边框的动画才开始。

第二个按钮按了之后就是一个传统的链式动画，即等前一个动画完成后，后一个动画才会开始.

<button id="go1">» Animate Block1</button>

<button id="go2">» Animate Block2</button>

<div id="block1">Block1</div><div id="block2">Block2</div>

代码:

$("#go1").click(function(){

 $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )

     .animate( { fontSize: '10em' } , 1000 )

     .animate( { borderWidth: 5 }, 1000);

});

$("#go2").click(function(){

 $("#block2").animate( { width: "90%"}, 1000 )

     .animate( { fontSize: '10em' } , 1000 )

     .animate( { borderWidth: 5 }, 1000);

});

代码:用600毫秒切换段落的高度和透明度

$("p").animate({

   height: 'toggle', opacity: 'toggle'

 }, { duration: "slow" });

代码:用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）

$("p").animate({

   left: 50, opacity: 'show'

 }, { duration: 500 });

代码:一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数，这个参数才起作用。

$("p").animate({

   opacity: 'show'

 }, { duration: "slow", easing: "easein" });

stop()：停止所有在指定元素上正在运行的动画

<button id="go">Go</button> <button id="stop">STOP!</button>

<div class="block"></div>

<button id="go">Go</button> <button id="stop">STOP!</button>

<div class="block"></div>

代码:点击Go之后开始动画,点Stop之后会在当前位置停下来

// Start animation

$("#go").click(function(){

 $(".block").animate({left: '+200px'}, 5000);

});

// Stop animation when button is clicked

$("#stop").click(function(){

 $(".block").stop();

});

queue()：返回指向第一个匹配元素的队列(将是一个函数数组)

 <style>

 div { margin:3px; width:40px; height:40px;

        position:absolute; left:0px; top:30px;

        background:green; display:none; }

 div.newcolor { background:blue; }

 span { color:red; }

 </style>

 <button id="show">Show Length of Queue</button><span></span><div></div>

代码:显示队列长度

$("#show").click(function () {

      var n = $("div").queue("fx");

      $("span").text("Queue length is: " + n.length);

});

function runIt() {

      $("div").show("slow");

      $("div").animate({left:'+=200'},2000);

      $("div").slideToggle(1000);

      $("div").slideToggle("fast");

      $("div").animate({left:'-=200'},1500);

      $("div").hide("slow");

      $("div").show(1200);

      $("div").slideUp("normal", runIt);

}

runIt();

queue(callback)：在匹配的元素的动画队列中添加一个函数

queue(queue)：将匹配元素的动画队列用新的一个队列来代替(函数数组).

dequeue()：从动画队列中移除一个队列函数

Ajax请求
jQuery.ajax(options)

说明：通过 HTTP 请求加载远程数据。

$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。

注意： 如果你指定了dataType选项，请确保服务器返回正确的MIME信息，(如xml返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。

$.ajax()只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。

1.2 中可以跨域加载JSON数据，使用时需将数据类型设置为JSONP。使用JSON 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换?为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。

选项

async(Boolean):(默认: true)所有请求均为异步请求。如要发送同步请求，设置为false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

beforeSend(Function):发送请求前可修改XMLHttpRequest对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。

cache(Boolean):(默认: true) 设置为fals 将不会从浏览器缓存中加载请求信息。

complete(Function): 请求完成后回调函数(请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。

contentType(String): (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。

data(Object,String): 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

dataType(String) : 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含 script 元素。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

error(Function) : (默认:自动判断 (xml 或 html)) 请求失败时调用时间。参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。

global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的Ajax事件。

ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

processData (Boolean) : (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

success (Function) : 请求成功后回调函数。参数：服务器返回数据，数据格式。

timeout (Number) : 设置请求超时时间（毫秒）。此设置将覆盖全局设置。

type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

url (String) : (默认: 当前页地址) 发送请求的地址。

加载并执行一个 JS 文件。

$.ajax({

 type: "GET",

 url: "test.js",

 dataType: "script"

});

保存数据到服务器，成功时显示信息。

$.ajax({

   type: "POST",

   url: "some.php",

   data: "name=John&location=Boston",

   success: function(msg){

     alert( "Data Saved: " + msg );

   }

});

装入一个 HTML 网页最新版本。

$.ajax({

 url: "test.html",

 cache: false,

 success: function(html){

    $("#results").append(html);

 }

});

同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。

 var html = $.ajax({

 url: "some.php",

 async: false

 }).responseText;

发送 XML 数据至服务器。设置 processData 选项为 false，防止自动转换数据格式。

 var xmlDocument = [create xml document];

 $.ajax({

   url: "page.php",

   processData: false,

   data: xmlDocument,

   success: handleResponse

 });

load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中，默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的 key/value 数据。如果有[data]参数，就会自动转换为POST方式。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

示例代码：

$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html",

         function (responseText, textStatus, XMLHttpRequest){

         this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]

         //alert(responseText);//请求返回的内容

         //alert(textStatus);//请求状态：success，error

         //alert(XMLHttpRequest);//XMLHttpRequest对象

});

注：不知道为什么URL写绝对路径在FF下会出错。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。

<b>jQuery Links:</b><ul id="links"></ul>

代码:$("#links").load("/Main_Page #p-Getting-Started li");

代码:加载 feeds.html 文件内容。

$("#feeds").load("feeds.html");

代码:以 POST 形式发送附加参数并在成功时显示信息。

 $("#feeds").load("feeds.php", {limit: 25}, function(){

   alert("The last 25 entries in the feed have been loaded");

 });

jQuery.get(url,[data],[callback])：通过远程 HTTP GET 请求载入信息

示例代码：

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){

         //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.

         this; // 在这里this指向的是Ajax请求的选项配置信息

         alert(data);

         //alert(textStatus);//请求状态：success，error等等。当然这里捕捉不到error，因为error的时候根本不会运行该回调函数

         //alert(this);

});

请求 test.php 网页，忽略返回值。 $.get("test.php");

$.get("test.php", { name: "John", time: "2pm" } );

显示 test.php 返回值(HTML 或 XML，取决于返回值)。

$.get("test.php", function(data){

 alert("Data Loaded: " + data);

});

显示 test.cgi 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数。

$.get("test.cgi", { name: "John", time: "2pm" },

 function(data){

    alert("Data Loaded: " + data);

 });

jQuery.getJSON(url,data,callback)：通过 HTTP GET 请求载入 JSON 数据

从 Flickr JSONP API 载入 4 张最新的关于猫的图片。

<div id="images"></div>

代码:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",

function(data){

 $.each(data.items, function(i,item){

    $("<img/>").attr("src",

item.media.m).appendTo("#images");

    if ( i == 3 ) return false;

 });

});

从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据。

$.getJSON("test.js", function(json){

 alert("JSON Data: " + json.users[3].name);

});

从 test.js 载入 JSON 数据，附加参数，显示 JSON 数据中一个 name 字段数据。

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){

 alert("JSON Data: " + json.users[3].name);

});

jQuery.getScript(url,callback)：通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

载入 jQuery 官方颜色动画插件 成功后绑定颜色变化动画。

<button id="go">» Run</button>

<div class="block"></div>

代码:

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",

function(){

 $("#go").click(function(){

    $(".block").animate( { backgroundColor: 'pink' }, 1000)

      .animate( { backgroundColor: 'blue' }, 1000);

 });

});

加载并执行 test.js。 $.getScript("test.js");

加载并执行 test.js ，成功后显示信息。

$.getScript("test.js", function(){

 alert("Script loaded and executed.");

});

jQuery.post(url,data,callback,type)：通过远程 HTTP POST 请求载入信息

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

示例代码：

Ajax.aspx：

Response.ContentType = "application/json";

Response.Write("{result: '" + Request["Name"] + ",你好！(这消息来自服务器)'}");

代码：

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },

         function (data, textStatus){

              // data 可以是 xmlDoc, jsonObj, html, text, 等等.

              //this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this

              alert(data.result);

         }, "json");

Ajax事件
ajaxComplete(callback)：AJAX 请求完成时执行函数。

$("#msg").ajaxComplete(function(request, settings){

   $(this).append("<li>Request Complete.</li>");

 });

ajaxError(callback)：AJAX 请求发生错误时执行函数

 $("#msg").ajaxError(function(request, settings){

   $(this).append("<li>Error requesting page " + settings.url +

"</li>");

 });

ajaxSend(callback)：AJAX 请求发送前执行函数

 $("#msg").ajaxSend(function(evt, request, settings){

   $(this).append("<li>Starting request at " + settings.url +

"</li>");

 });

ajaxStart(callback)：AJAX 请求开始时执行函数

 $("#loading").ajaxStart(function(){

   $(this).show();

 });

ajaxStop(callback)：AJAX 请求结束时执行函数

 $("#loading").ajaxStop(function(){

   $(this).hide();

 });

ajaxSuccess(callback)：AJAX 请求成功时执行函数

 $("#msg").ajaxSuccess(function(evt, request, settings){

   $(this).append("<li>Successful Request!</li>");

 });

其它
jQuery.ajaxSetup(options)：设置全局 AJAX 默认选项

$.ajaxSetup({

 url: "/xmlhttp/",

 global: false,

 type: "POST"

});

$.ajax({ data: myData });

serialize()：序列表表格内容为字符串。

$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

serializeArray()：序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据

var fields = $("select, :radio").serializeArray();

jQuery.each( fields, function(i, field){

 $("#results").append(field.value + " ");

});

页面载入
ready(fn)：当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){

 // Your code here...

});

或者直接：当然jQuery可以为$

jQuery(function() {

 // Your code using failsafe $ alias here...

});

事件处理
bind(type,data,fn)：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数

当每个段落被点击的时候，弹出其文本。

$("p").bind("click", function(){

 alert( $(this).text() );

});

可以在事件处理之前传递一些附加的数据。

function handler(event) {

 alert(event.data.foo);

}

$("p").bind("click", {foo: "bar"}, handler)

通过返回false来取消默认的行为并阻止事件起泡。

$("form").bind("submit", function() { return false; })

通过使用 preventDefault() 方法只取消默认的行为。

$("form").bind("submit", function(event){

 event.preventDefault();

});

通过使用 stopPropagation() 方法只阻止一个事件起泡。

$("form").bind("submit", function(event){

 event.stopPropagation();

});

one(type,data,fn)：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数

当所有段落被第一次点击的时候，显示所有其文本。

$("p").one("click", function(){

 alert( $(this).text() );

});

trigger(type,data)：在每一个匹配的元素上触发某类事件

提交第一个表单

$("form:first").trigger("submit")

给一个事件传递参数

$("p").click( function (event, a, b) {

 // 一个普通的点击事件时，a和b是undefined类型

 // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"

} ).trigger("click", ["foo", "bar"]);

下面的代码可以显示一个"Hello World"

$("p").bind("myEvent", function (event, message1, message2) {

 alert(message1 + ' ' + message2);

});

$("p").trigger("myEvent", ["Hello","World!"]);

triggerHandler(type,data)：这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作

例：如果你对一个focus事件执行了 .triggerHandler()，浏览器默认动作将不会被触发，只会触发你绑定的动作。

<button id="old">.trigger("focus")</button>

<button id="new">.triggerHandler("focus")</button><br/><br/>

<input type="text" value="To Be Focused"/>

代码:

$("#old").click(function(){

 $("input").trigger("focus");

});

$("#new").click(function(){

 $("input").triggerHandler("focus");

});

$("input").focus(function(){   $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });

unbind(type,data)：bind()的反向操作，从每一个匹配的元素中删除绑定的事件

把所有段落的所有事件取消绑定

$("p").unbind()

将段落的click事件取消绑定

$("p").unbind( "click" )

删除特定函数的绑定，将函数作为第二个参数传入

var foo = function () {

 // code to handle some kind of event

};

$("p").bind("click", foo);

$("p").unbind("click", foo);

交互处理
hover(over,out)：一个模仿悬停事件的方法（修正了使用mouseout事件的一个常见错误）。

over (Function) : 鼠标移到元素上要触发的函数

out (Function) : 鼠标移出元素要触发的函数

鼠标悬停的表格加上特定的类

$("td").hover(

 function () {

    $(this).addClass("hover");

 },

 function () {

    $(this).removeClass("hover");

 }

);

toggle(fn,fn)：每次点击时切换要调用的函数

fn (Function) : 第奇数次点击时要执行的函数。

fn (Function) : 第偶数次点击时要执行的函数。

对表格的切换一个类

$("td").toggle(

 function () {

    $(this).addClass("selected");

 },

 function () {

    $(this).removeClass("selected");

 }

);

ALL事件
blur()/blur(fn)
说明：触发每一个匹配元素的blur事件/或者绑定一个事件处理函数

使用：$("p").blur(); /$("p").blur( function () { alert("Hello World!"); } );

change()/change(fn)

click()/click(fn)

dblclick()/dblclick(fn)

error()/error(fn)

focus()/focus(fn)

keydown()/keydown(fn)

keypress()/keypress(fn)

keyup()/keyup(fn)

load(fn)

mousedown(fn)

mousemove(fn)

mouserout(name)/blur(fn)

mouseover(fn)

mouseup(fn)

rasize(fn) 当文档窗口改变大小时触发

$(document).resize(function(){

 alert("Stop it!");

});

scroll(fn) 当滚动条发生变化时触发

$(document).scroll( function() { /* ...do something... */ } );

select()/select(fn)

submit()/submit(fn)

$("form").submit( function () {

 return false;

} );

upload(fn)

页面卸载的时候弹出一个警告框: $(document).unload( function () { alert("Bye now!"); } );

 这篇简单，查看以前的文档时发现还有background,color等API，但是在1.2以后的版本中已经找不到这些了。还是直接用css()好....

CSS
css(name)：访问第一个匹配元素的样式属性

例：$("p").css("color");

css(properties)：把一个“名/值对”对象设置为所有匹配元素的样式属性。

例：$("p").css({ color: "#ff0011", background: "blue" });

如果属性名包含 "-"的话，必须使用引号: $("p").css({ "margin-left": "10px", "background-color": "blue" });

css(name,value)：在所有匹配的元素中，设置一个样式属性的值，数字将自动转化为像素值。

例：$("p").css("color","red");

位置
offset()：获取匹配元素在当前视口的相对偏移，返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效

<p>Hello</p><p>2nd Paragraph</p>

代码:

var p = $("p:last");

var offset = p.offset();

p.html( "left: " + offset.left + ", top: " + offset.top );

结果:<p>Hello</p><p>left: 0, top: 35</p>

宽高
height()：取得第一个匹配元素当前计算的高度值（px）。可以用来获取window 和 document 的高

代码:$("p").height();

代码:$(document).height(); //获取文档的高

height(val)：为每个匹配的元素设置CSS高度(hidth)属性的值。如果没有明确指定单位（如：em或%），使用px

代码:$("p").height(20);

width()：取得第一个匹配元素当前计算的宽度值（px）。可以用来获取window 和 document 的高

width(val)：为每个匹配的元素设置CSS宽度(width)属性的值。

注：其中jQuery()可替换为快捷方式$()，如果$被其它对象占用，可使用jQuery.noConflict()函数取消快捷方式。

核心函数

$(expr,[context])/jQuery(expression,[context])
该函数可以通过css选择器，Xpath或html代码来匹配目标元素，所有的jQuery操作都以此为基础
expression (String)用来查找的字符串,context(Element, jQuery)(可选)作为待查找的DOM元素集、文档或 jQuery 对象。
例子
<p>one</p>
<div><p>two</p></div>
<p>three</p> 
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能：

function jq(){  
    alert($("div>p").html());  
}

当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容

function jq(){
    $("<div><p>Hello</p></div>").appendTo("body");
}

当点击id为test的元素时，向body中添加“<div><p>Hello</p></div>”

context

在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。 $("input:radio", document.forms[0]);

在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素。$("div", xml.responseXML);

$(elem)
限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象
 elem：通过jQuery对象压缩的DOM元素
例子
<p>one</p>

<div><p>two</p></div>

<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：

function jq(){
    alert($(document).find("div>p").html());
}

当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容

function jq(){
   $(document.body).background("black");
}

运行：当点击id为test的元素时，背景色变成黑色

$(elems)
限制jQuery作用于一组特定的DOM元素
 elem：一组通过jQuery对象压缩的DOM元素
例子
<form id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="提交">
</form>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：

function jq(){ 
   $(form1.elements).hide(); 
}

当点击id为test的元素时，隐藏form1表单中的所有元素。

$(fn)/jQuery(callback)
$(document).ready()的简写，当文档全部载入时执行函数。可以有多个$(fn)当文档载入时，同时执行所有函数！
fn(Function):当文档载入时执行的函数！
例子

$(function() {

    alert($(document.body).html());

});

当文档载入时背景变成黑色，相当于onLoad。

$(obj)
复制一个jQuery对象
obj (jQuery): 要复制的jQuery对象
例子
<p>one</p>
<div><p>two</p></div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：

function jq(){
    var f = $("div"); 
    alert($(f).find("p").html()) 
}

当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容。

$("<input>").attr("type", "checkbox");// 在IE中无效:微软规定 <input>元素的type只能写一次

$("<input type='checkbox'>");// 在IE中有效:

对象访问

each(callback)
以每一个匹配的元素作为上下文来执行一个函数。每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整形）。返回 'false' 将停止循环(就像在普通的循环中使用'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

对于每个匹配的元素所要执行的函数

例子

<img/><img/>

jQuery代码

$("img").each(function(i){

   this.src = "test" + i + ".jpg";

 });

结果:<img src="test0.jpg" /><img src="test1.jpg" /> 

可以使用 $(this) 函数得到 jQuery对象。

jQuery 代码:

$("img").each(function(){

 $(this).toggleClass("example");

});

可以使用 'return' 来提前跳出 each() 循环。

<button>Change colors</button>

<span></span><div></div><div></div><div></div> <div></div><div id="stop">Stop here</div><div></div><div></div><div></div>

jQuery代码

$("button").click(function () {

     $("div").each(function (index, domEle) {

      // domEle == this

      $(domEle).css("backgroundColor", "yellow"); 

      if ($(this).is("#stop")) {

          $("span").text("Stopped at div index #" + index);

          return false;

      }

     });

});

eq(pos)
减少匹配对象到一个单独得dom元素
pos (Number): 期望限制的索引，从0开始
例子
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：

function jq(){
    alert($("p").eq(1).html())
}

当点击id为test的元素时，alert对话框显示：So is this，即第二个<p>标签的内容

get()/get(num)
获取匹配元素，get(num)返回匹配元素中的某一个元素
get(Number): 期望限制的索引，从0开始
例子
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：

function jq(){
    alert($("p").get(1).innerHTML);
}

当点击id为test的元素时，alert对话框显示：So is this，即第二个<p>标签的内容

注意get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$("p").eq(1)对象的内容用jQuery方法html()，而取$("p").get(1)的内容用innerHTML

index(obj)
返回对象索引,如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1。
obj(Object)要查找的对象
例子
<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：

function jq(){
    alert($("div").index(document.getElementById('test1')));
    alert($("div").index(document.getElementById('test2')));
}

当点击id为test的元素时，两次弹出alert对话框分别显示0，1

size()/Length
jQuery对象中元素的个数,与jQuery对象的'length' 属性一致。

例子
<img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：

function jq(){
    alert($("img").length);
}

当点击id为test的元素时，弹出alert对话框显示2，表示找到两个匹配对象 

多库共存

jQuery.noConflict()

运行这个函数将变量$的控制权让渡给第一个实现它的那个库。

这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$("div p")的地方，就必须换成jQuery("div p")。

示例

jQuery.noConflict();

jQuery("div p").hide();// 使用 jQuery

$("content").style.display = 'none'; // 使用其他库的 $()

恢复使用别名$，然后创建并执行一个函数，在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中，原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。

jQuery.noConflict();

(function($) {

 $(function() {

    //使用 $ 作为 jQuery 别名的代码

 });

})(jQuery);

// 其他用 $ 作为别名的库的代码

创建一个新的别名用以在接下来的库中使用jQuery对象。

var j = jQuery.noConflict();

j("div p").hide();// 基于 jQuery 的代码

$("content").style.display = 'none'; // 基于其他库的 $() 代码

jQuery.noConflict(extreme)

将$和jQuery的控制权都交还给原来的库。用之前请考虑清楚!

这是相对于简单的 noConflict 方法更极端的版本，因为这将完全重新定义jQuery。这通常用于一种极端的情况，比如你想要将jQuery嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。

extreme (Boolean):传入true来允许彻底将jQuery变量还原

完全将jQuery移到一个新的命名空间。

var dom = {};

dom.query = jQuery.noConflict(true);

结果:

dom.query("div p").hide();// 新 jQuery 的代码

$("content").style.display = 'none';// 另一个库 $() 的代码

jQuery("div > p").hide(); // 另一个版本 jQuery 的代码

从网上找了些资料和电子书。这个系列是我看过jQuery1.2API中文文档后的笔记。希望对大家有帮助～

jQuery

jQuery库为共同的web脚本提供了一种通用的抽象层，并且它几乎在44种脚本环境都是有用的。它以插件的形式持续地通过开发加入新的功能。这核心的特性，满足以下的需求:

获取页面的部分内容，不使用JavaScript库，必须写很多行代码来遍历DOM树，并定位一个HTML文档的指定部分。jQuery提供了一个强大而有效的选择机制来返回被检查或者被操作的文档。

修改页面的外观，CSS提供了一个形响文档渲染的张大方法，当web浏览器不支持同样的标准时，它却是不尽人意的。jQuery能弥补这个差距，提供了跨所有浏览器的同样的标准的支持。另外，即使页面被渲染后，jQUery仍可改变文档一部分中的类或者独立的样式属性。

修改页面的内容，不仅限外观的改变，jQuery还可以用很少的按键就可修改文档的内容本身。文本可改变，图像可插入或替换，列表可重新排序或者整个HTML结构可被重写和扩展。

在页面中响应用户的交互，当它们发生时，如果我们不能控制，即使足蛟周密蛟强大的行为也是没有用的.jQUery库提供了一个优雅的方法来截取多种事件，例如用户单击链接，我

们不需要将事件句柄混杂到HTML代码中。同时，事件句柄API删除浏览器不一致性，往往会让web开发者感到很烦恼。

给页面加上动画，为了有效地执行交互行为，设计师必须提供可视的反馈给用户，jQuery库提供了一组效果来推进它，效果如揭色，济空来，也可定制一套新的T具。

无刷新返回服务器端的信息，这个代码模式己经以^synchronous JavaScript and XML(AJAX)著称了，;仁协助web开发者制作可响应的功能丰富的网站。

简化共同的JavaScript任务，除了jQuery指定的文档的所有特性外，这个库还提供了改进基本的JavaScript结构，如秩代和数组操作。

下载：http://www.cnblogs.com/lyj/archive/2008/11/08/1329713.html

在VS08中添加智能提示：http://www.cnblogs.com/lyj/archive/2008/11/08/1329713.html

引入：<script type="text/javascript" src="js/jquery-1.2.6.js"></script>　或使用　<ScriptManager>引入