作者档案：John Resig

未分类

AJAX 新 FX 等等！

发布于 作者

新的 AJAX 插件 已经准备好了——如果你运行的是最新代码，它已经整合进去了。除此之外，还有几个新的 效果 可以享受：fadeIn、fadeOut 和 center。我还修复了一些错误，也已包含在这次发布中。

  • 使用 $(…,Context) 参数，在非 HTML 文档中出现的问题已得到解决。
  • 现在可以将 jQuery 对象作为上下文传入：$(“title”,$(“head”));
  • IE 中属性无法正确解析的问题已得到修复。
  • 另一个关于切换内联元素的问题已得到修复。

下一个版本将专注于添加更多辅助方法，以便更轻松地导航文档（并减少对神秘的 XPath 序列的依赖），以及避免持续使用 .get(0) 的方法。如果你想讨论 jQuery 的开发，请加入我们的 邮件列表 或者 irc 频道。

未分类

错误修复，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 Redux

发布于 作者

另一个流行的 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 脚本示例，将在接下来的几天发布/改进。