JQuery1.1发布了

随着ajax的流行，出现了许多优秀的JS框架，JQuery就是其中之一。今天JQuery终于发布了1.1版，有一些重要的更新，而且今天也是JQuery的生日。jQuery Birthday: 1.1

上次写了一篇小教程，不过数据丢了。准备把原来的整理一下。

这段代码实现的效果是在站点归档中“其它信息”展开效果，代码如下：

$(function(){
    var collapsibles = $("dl.collapsible");
    $(collapsibles).each(function(i){
        var collapsible = collapsibles[i];
       
        $("dt.collapsibleHeader", collapsible).click(function(){
            var container = $(this).parent();
            if (!$(container).is(".collapsible")) {
                return false;
            }
           
            if ($(container).is(".collapsedInlineCollapsible")) {
                $(container).addClass("expandedInlineCollapsible").removeClass("collapsedInlineCollapsible");
            } else {
                $(container).addClass("collapsedInlineCollapsible").removeClass("expandedInlineCollapsible");
            }
        });
    })

    if ($(collapsible).is(".collapsedOnLoad")) {
        $(collapsible).addClass("collapsedInlineCollapsible").removeClass("collapsedOnLoad");
    } else {
        $(collapsible).addClass("expandedInlineCollapsible");
    }
});

这段代码需要在页面加载完毕后执行，所以我们使用$(function(){})来达到这个效果，还一种等价的写法$(document).ready(function(){})。

$("dl.collapsible")，这是JQuery中最常用的方法，用于查找指定的元素，而且支持CSS和XPath的语法。这样所有的dl.collapsible被匹配。（如果你对CSS的语法不了解的放，可以先看看教程）

接着使用each进行遍历，再看下面这段：

$("dt.collapsibleHeader", collapsible).click(function(){
            var container = $(this).parent();
            if (!$(container).is(".collapsible")) {
                return false;
            }
           
            if ($(container).is(".collapsedInlineCollapsible")) {
                $(container).addClass("expandedInlineCollapsible").removeClass("collapsedInlineCollapsible");
            } else {
                $(container).addClass("collapsedInlineCollapsible").removeClass("expandedInlineCollapsible");
            }
        });

 $("dt.collapsibleHeader", collapsible)，第二个参数是指定上下文，并在指定的上下文中查找。后面的click(function(){})是注册单击事件并绑定一个函数。is用来判断是否包含指定表达式；addClass和removeClass分别是添加和移除class。最后一段：

if ($(collapsible).is(".collapsedOnLoad")) {
        $(collapsible).addClass("collapsedInlineCollapsible").removeClass("collapsedOnLoad");
    } else {
        $(collapsible).addClass("expandedInlineCollapsible");
    }

当JS被禁用时所有的dl展开。