错误修复,AJAX 即将到来!

发布日期 作者

这里还没有提到,但jQuery IRC 频道 非常活跃 - 至少我们中的一些人一直在那里。我们一直在忙着追踪错误,我也一直在忙着修复它们,以下是对过去几天修复内容的快速概述

  • hide()/show() 操作现在在所有浏览器中都能一致地工作,即使是奇怪的用例也是如此。
  • 已经处理了许多 Prototype 1.3 + jQuery 和 Prototype 1.4 + jQuery 错误,现在使用 Prototype 和任何其他模块都不应该有任何问题。
  • .toggle() 方法无法正确恢复 display: inline 的问题。
  • document.ready() 现在可以多次调用 - 所有函数都添加到队列中。
  • 奇怪的浏览器特定属性会自动更正(例如 for=htmlFor,class=className 和 float=cssFloat)。

本周末有什么值得期待的吗?很多。AJAX 模块已处于 Alpha 测试阶段,准备投入使用,同时还有一些新的效果(fadeIn/fadeOut)、新的选择器方法(.ancestor()、.siblings() 等)以及许多帮助器方法(.text()、.value()、.visible() 等)。如果你想看到某个特定内容,请随时给我发邮件访问邮件列表.

图像交叉淡入淡出

发布日期 作者

今天要讲的 DHTML 技巧是一个图像交叉淡入淡出 的平滑示例。整个页面的 Javascript 代码一开始就相当短,但仍有一些改进的空间。如果你要查看原始源文件,除了变量声明和 so_xfade 方法之外,几乎所有内容都可以简化为以下代码片段,使用jQuery

$(document).ready(function(){
  $("head").append("<link href='xfade2.css' \
    rel='stylesheet' type='text/css'>");
  img = $("#imageContainer img").set("xOpacity",0).get();
  $("#imageContainer img:first").set("xOpacity",0.99).show();
  setTimeout(so_xfade,1000);
});

目前,在jQuery 中似乎没有更优雅的方法来实现这一点,但我不能抱怨,考虑到与使用 DOM 方法相比,代码的可理解性高了多少。

Greybox 重新制作

发布日期 作者

今天又出现了一个流行的 DOM/CSS/Javascript 项目:Greybox。它非常类似于流行的lightbox,但用于在当前页面之上显示网站。

我将此视为另一个绝佳的机会来展示使用jQuery 创建出色代码是多么容易。我分两阶段修改了 greybox。

  1. 第一步是使 greybox 能够以非侵入式的方式工作(他们将 Javascript 嵌入到页面中使其工作)并修复损坏的返回按钮(访问网站后你必须两次点击返回按钮)。
  2. 下一步是彻底改造库本身,并消除对 Amir 的个人 Javascript 库的需要 - 使其能够完全使用 jQuery 运行。最终的代码只有大约 1.2kb(与原始的 12kb 相比)。

一个演示和下载如果你们有兴趣查看 jQuery 在实际应用中的更多示例,可以访问这里。尽情享受!

基于宽度的布局

发布日期 作者

今天另一篇 CSS/Javascript 文章正在流传,名为:基于宽度的布局。其前提是页面会根据浏览器宽度自动调整大小。文章中包含 38 行 Javascript 代码(我在这里很慷慨),用于完成这项工作。我将为你们省去代码分解的步骤,直接展示下面改进后的代码。

$(window).resize(setWidth);
$(document).ready(setWidth);

function setWidth() {
  var de = document.documentElement;
  var w = (window.innerWidth || (de && de.clientWidth)
    || document.body.clientWidth) < 990 ?"alt":"main";
  $("#wrapper").addClass( w + "wrapper" );
}

此新代码的实时演示可以在这里找到这里。具有讽刺意味的是,他们使用了我编写但没有署名的一段代码

我绝对最喜欢的上述代码部分是其中的短路操作。该部分的原始代码来自这篇 evolt 文章。我不知道是怎么回事,但每当我看到包含多个赋值的 IF 语句时,我就感到毛骨悚然。因此,以下内容

if (window.innerWidth)
{
	theWidth = window.innerWidth
}
else if (document.documentElement 
  && document.documentElement.clientWidth)
{
	theWidth = document.documentElement.clientWidth
}
else if (document.body)
{
	theWidth = document.body.clientWidth
}

将更改为

var de = document.documentElement;
var w = window.innerWidth || (de && de.clientWidth)
  || document.body.clientWidth;

如果你想知道为什么它能正常工作,请尝试运行以下语句

alert(1||0); // You get 1
alert(0||2); // You get 2
alert(0||(2&&1)); // You get 1
alert(0||(3&&4)||2); // You get 4

你会对那段(以前)非常冗长的代码中实际发生的事情有更好的了解。

迷你教程

发布日期 作者

我一直都在浏览我的推荐日志和 Technorati,看看谁在谈论 jQuery。今天我偶然发现了一个人写了关于如何使用 jQuery 的简短教程。这个教程本身还很新(例如,没有直接从文档中借鉴任何东西) - 所以如果你想查看更多示例代码,除了当前教程 之外,这里也是另一个参考来源。

轻松输入 CSS 规则

发布日期 作者

前几天我偶然发现 DOM Scripting 博客上的一篇文章,发现了一个展示 jQuery 简洁性的绝佳机会,请看

旧的 DOM 方法

function appendInputTypeClasses() {
  if ( !document.getElementsByTagName ) return;
  var inputs = document.getElementsByTagName('input');
  var inputLen = inputs.length;
  for ( i=0; i < inputLen; i++ ) {
    if ( inputs[i].getAttribute('type') ) {
      inputs[i].className += ' '+
        inputs[i].getAttribute('type');
    }
  }
}

新的 jQuery 方法

$("input").each(function(){
   $(this).addClass(this.type);
});

我甚至在考虑实现一种规避 each() 函数的新方法,请看

$("input").addClass("{type}");

说到 Javascript 代码,你真的无法比这更简洁了。在接下来的几天里,我将发布/改进一些其他“旧”DOM 脚本示例。

更多文档

发布日期 作者

我刚刚完成了更多文档的编写工作,以帮助所有正在学习如何使用 jQuery 的人。我要感谢 Bruno 帮助我理清了所有 Prototype/jQuery 奇怪之处,还要感谢 Derek 检查选择器差异。

  • jQuery 基础模块。我写了关于 $() 函数的工作原理,并将所有单个函数类型的文档分解到单独的页面中。
  • jQuery 选择器。jQuery 最重要的部分之一是它能够快速选择不同的 HTML 元素。此页面展示了它的工作原理以及 CSS 和 XPath 如何很好地协同工作。
  • 在 jQuery 中使用 CSS。此页面详细介绍了 CSS 1-3 规范之间的异同及其在 jQuery 中的实现方式。
  • 在 jQuery 中使用 XPath。对在 CSS 之上支持的基本 XPath 方面进行了说明。
  • 自定义选择器。引入了一些自定义选择器,它们在 CSS 或 XPath 中并不容易获得。
  • 使用 Prototype 和 jQuery。最后,详细介绍了 jQuery 与 Prototype 一起使用时的工作原理,需要注意的事项以及需要注意的地方。

我接下来在 jQuery 上的重大举措是优化部分代码,提高速度和清晰度(感谢 Tim!),编写几个新的插件,并创建一个新的插件库供开发者使用。所有这些都将在未来几天/几周内发布。