随着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展开。