新的 jQuery API 浏览器

发布于 作者

jQuery 团队持续推出额外的工具和资源,使使用 jQuery 进行开发变得简单、高效和富有成效。jQuery 不断增长的工具列表中的最新补充是项目团队负责人 Jorn Zaefferer 的新的 jQuery API 浏览器。

jQuery API Browser
访问:http://jquery.bassistance.de/api-browser/

jQuery API 浏览器提供了一个直观的界面,可以快速查找 jQuery 的方法和属性的信息。功能包括

  • 选项卡导航
  • 分类树形视图
  • 在导航和主要内容上进行快速搜索
  • HTML 和 JavaScript 代码片段的高亮显示
  • 一个垂直分隔符,允许您调整导航/内容窗格的大小
  • 突出显示内容中选定的方法
  • 方法参数的样式工具提示

API 浏览器既可以在线使用,也可以下载用于本地使用。

jQuery 项目提供了一份全面且不断增长的资源列表,为开发人员提供文档、教程以及站点开发的插件/小部件。

jQuery
https://jquery.org.cn/

插件和 UI 小部件/控件
http://docs.jquery.com/Plugins

文档
http://docs.jquery.com/Main_Page
http://www.visualjquery.com/
http://jquery.bassistance.de/api-browser/

杂志
http://www.visualjquery.com/magazine/

邮件列表
https://jquery.org.cn/discuss/

项目博客
https://blog.jquery.org.cn/

学习资源
http://docs.jquery.com/Tutorials
http://www.learningjquery.com/
http://15daysofjquery.com/

关于
http://docs.jquery.com/Sites_Using_jQuery
http://docs.jquery.com/About/Contributors

别忘了在 Digg 上 分享这篇文章

jQuery 1.1.1

发布于 作者

1.1 的错误修复版本现已发布,供大家使用。在 1.1 发布后发现了很多奇怪的行为,需要尽快解决。如果您在使用 1.1 版本时遇到任何困难,请尝试此新版本,看看是否解决了您的问题。

强烈建议您升级。

如有任何问题或疑虑,请随时在 jQuery 邮件列表上讨论。如果您认为发现了一个错误,请 添加到错误跟踪器

下载

jQuery 中修复的每个错误都可以在主要的 错误修复列表中找到。与此版本相关的最重要的错误修复如下

  1. 设置 CSS 属性的数值失败,例如:.css(“opacity”,0.5)(也发生在 zIndex、fontWeight 上)
  2. 使用 jQuery 对象作为上下文调用 $(…, jqobj) 失败。
  3. 访问不存在的元素上的属性会导致错误,例如:$(“#foobar”).attr(“id”)
  4. 在没有回调函数的情况下调用 .load() 会导致错误。
  5. 您无法取消使用 .trigger() 或 .click()(例如)触发的事件。
  6. .add() 将单个 DOM 元素添加到 jQuery 对象时出现问题。
  7. 将未定义的值传递给 $.post() 会导致出现奇怪的错误。
  8. 在示例文档中访问子节点无法正常工作。
  9. jQuery.isFunction() 无法可靠地确定函数,以跨浏览器的方式。
  10. 在 IE 中触发 .click() 失败。
  11. 在大多数浏览器中,触发的点击处理程序执行了两次。
  12. 将换行符传递给 $(“…”) 会导致 Firefox 进入永无止境的循环。
  13. 在没有数据的情况下调用 $.post() 会导致错误。
  14. 在子选择器之后调用后代选择器会导致奇怪的结果,例如:$(“ul > li ul”)
  15. 如果未为该事件绑定事件处理程序,则触发的事件不会发生。

Interface 1.1 发布

发布于 作者

流行的、基于 jQuery 的、拖放、动画和 Widget 库 Interface 已经 发布了 1.1 版本,与 jQuery 1.1 的发布相吻合。

Interface Color Picker

关于此版本的一些注意事项

  • 全新的 animateClass、animateStyle 和 animateColor 处理程序。现在您可以从一个特定的类到另一个类进行动画,以及从一种颜色到另一种颜色。
  • 可拖放和可排序的速度得到了极大的提高。
  • 文档经过了彻底修改,现在非常全面。
  • 下载区域 经过了重新设计,并且完全是交互式的。
  • 有很多 演示 可以观看。他们更新了许多现有演示,并添加了一些热门的新演示,例如:颜色选择器图像裁剪器全景视图 和一个 文件夹树

总而言之,这是一个很棒的版本。如果您还没有机会查看 Interface,我建议您现在这样做。

jQuery 生日:1.1、新站点、新文档

发布于 作者

好消息,大家!今天是 jQuery 的 1 周年“生日”!(我一年前的今天在 BarCamp New York City 发布了它)为了庆祝,我们为您准备了一堆东西。

1) jQuery 1.1

这是一个很棒的版本——大量的错误修复、巨大的速度提升 以及 对杰出的 API 的重大简化。强烈建议您升级以获得此版本的所有好处。

立即下载

升级指南

请在从 1.0.4 升级到 1.1 之前阅读这些指南——进行了一些 API 更改,这些指南详细介绍了如何处理它们以及如何使用新的 jQuery 1.0 兼容性插件 在 1.1 中保留 1.0 样式的功能。

新功能

  • 根据 我们的统计jQuery 1.1 的选择器比 jQuery 1.0.4 的选择器快 10 倍到 20 倍。这应该会在您的 jQuery 应用程序中提供明显的差异。
  • div#iddiv .classtd:nth-child(1)div > div 这样的常见选择器都明显更快。这是一个完全不同的世界。 尝试一下 您会看到。
  • 现在您可以将函数作为属性或 CSS 属性的值传递。该函数将被执行,并且其返回值将设置为该属性的值。例如
    // 1.0 Code
    $("a").each(function(){
        $(this).attr("href", "/item/" + this.id);
    }).show();
    
    // 1.1 Code
    $("a").attr("href", function(){ return "/item/" + this.id; }).show();
  • 现在您可以从自身内部解绑事件处理程序。这允许您拥有仅绑定特定次数执行的事件处理程序,例如
    $("button").click(function(e){
        // Unbind the event handler if a specific form is hidden
        if ( $("#submitForm").is(":hidden") ) {
            $(this).unbind( e );
        }
    });
  • 轻松绑定仅发生一次的事件(这取代了旧的 .oneclick() 功能)
    // Show a thank you message for a form submission, but only once
    $("form").one("submit",function(){
        $("#thankyou").show();
    });
  • 现在您可以设置元素文本值(这与 .html() 不同,在 .text() 中,所有 HTML 都显示为文本)。
    $("pre").text("<b>Hello</b>, how are you?");
    
    // Result:
    <pre>&lt;b&gt;Hello&lt;/b&gt;, how are you?</pre>
  • 现在您可以构建自己的过滤器,使用自定义函数。(这在 1.0 中,但没有很好地记录。)
    // Find all divs whose parent isn't hidden
    $("div").filter(function(){
      return $(this).parent(":hidden").length > 0;
    });
  • 现在您可以将逗号分隔的 selector 列表传递给以下过滤器函数
    filter、find、not、siblings、parents、children、next、prev。这允许您做一些非常酷的事情

    // Find all radio buttons, or checkboxes, in a form
    $("form input").filter(":radio, :checkbox");
    
    // Find the next element that's a span, or a div
    $(this).next("span, div");

2) 刷新网站设计

jQuery Site Screenshot
jQuery 网站的设计终于得到了急需的改进。这是由出色的 jQuery 设计团队 设计的,并由 Nate Cavanaugh 实现的。设计团队有一个完整的重新设计/重组计划,但我们希望有一些东西可以帮助我们从当前的设计过渡到完整的改造。希望您喜欢它——并务必感谢 Nate、Bradley 或 Skye 的出色工作!

3) 改进的文档

我们最近一直在努力将 jQuery 文档、教程和 API 整合到一个中心位置。这项工作的结果是新的
http://docs.jquery.com/
所有 jQuery 文档都可以在这个中心位置找到——使您更容易找到所需内容并更快地完成工作。我们希望您喜欢这种新的结构,请告诉我们您有什么建议可以改进它。

4) 一个秘密…

我们一直对此保密,但我们终于准备好公开了……正在编写 jQuery 书! 一家兴奋的出版社站了出来,作者们已经完成了四分之一的工作。还有一些细节正在进行中,一旦接近完成,我们将告诉大家。但现在看起来我们将在晚春/初夏发布第一本 jQuery 书

Blank Book

我希望您喜欢所有这些——很多人和精力都投入到使这个版本变得伟大。请务必感谢 jQuery 团队 中的每个人,他们投入了大量时间和精力使这个版本变得非常好。

我明天会发表一篇“Query 现状”文章,谈谈 jQuery 在过去一年中取得的成就,以及宣传团队将发表几篇关于使用新的 jQuery 1.1 可以做什么的博客文章。

感谢大家让 jQuery 的第一年如此精彩。

jQuery 壁纸

发布于 作者

大家好,您可能不认识我,但我叫 Nate,是一名设计师/程序员。

我一直在帮助查找错误,以及进行网站设计等工作,虽然我不在团队名单上,但我是在名单写完后才开始帮忙的。

总之,为了帮助推广 jQuery,我创建了一些简约的壁纸来装饰您的桌面。

您可以在这里下载文件

jQuery MNML v1。 (压缩包中的分辨率:640×480 到 1600×1200)
jQuery MNML v2。 (压缩包中的分辨率:640×480 到 1600×1200)
jQuery MNML v3。 (压缩包中的分辨率:640×480 到 1600×1200)

jQuery MNML v1
jQuery MNML v1.

jQuery MNML v2
jQuery MNML v2.

jQuery MNML v3
jQuery MNML v3.

尽情享受吧!

选择器速度

发布于 作者

注意:Jack 已经修复了这篇文章中几乎所有提到的问题——做得太棒了!


我们一直没有谈论 jQuery 1.1 版本选择器的速度,直到我们的发布更接近准备就绪——然而,似乎这个过程已经被加速了。既然已经泄露了,那么让我们来看看 jQuery 的选择器速度。

简而言之:在 jQuery 1.1 中,我们非常努力地让选择器变得非常快。事实上,根据我们所有的测试,我们比任何其他选择器库都更快。在开发 1.1 版本时,Dean Edwards 的 cssQuery 远远超过了任何其他选择器库。它非常全面,而且速度很快。

今天,Jack Slocum 发布了他的新 DOMQuery 选择器库。简而言之:标准被提高了。他的库非常非常快。可能是目前最快的。

然而,在对他的库和我们的库进行比较时,出现了一些错误,我们想澄清一下。(Jack 和 jQuery 都存在错误。)(作为参考,这是我用来进行测试的 比较套件。)

jQuery 完全支持所有属性选择器。
例如,[@foo],[@foo=bar] 等。显著的区别是,在这种情况下,jQuery 使用 XPath 样式的语法。由于 Jack 的测试没有考虑到这一点,因此似乎我们未能通过所有属性选择器测试。

我们的“elem:empty” 运行良好。
您可以看到 Jack 的测试中,所有选择器(除了 DOMQuery)都失败了 :empty——这更多的是因为他将结果与 DOMQuery 进行比较,而 DOMQuery 得到了错误的结果。规范指出,如果元素不包含任何子元素或文本节点,则该元素为空。这似乎没有在这方面得到考虑。

[foo!=bar],:first,:last 不属于任何规范。
……但它们却在测试套件中。顺便说一下,jQuery 确实实现了 :first 和 :last——但没有实现 [foo!=bar](这似乎只存在于 cssQuery 中?)。总而言之,在您没有为此设计的场景下与他人进行比较,这非常奇怪。

span:not(span.hl-code) 会匹配什么?
这是一个奇怪的灰色地带,我还没有看到有人讨论过,规范也没有帮助澄清。结果集应该是所有不具有 hl-code 类的 span——还是什么都没有,因为您已经过滤掉了所有的 span?例如

// Finds nothing in both
span:not(span)
=> []

// Finds spans that don't have a class of 'foo', in both
span:not(.foo)
=> [ <span>, <span>, ... ]

// jQuery's interpretation of the combination:
$("span:not(span.foo)")
=> []

// DOMQuery's interpretation of the combination:
Ext.select("span:not(span.foo")
=> [ <span>, <span>, ... ]

我们完全承认,我们可能在这方面大错特错——但我很想听听其他人的看法,以及他们对规范的理解。

DOMQuery 不考虑重复项。
目前,执行 Ext.select(“div div”) 返回的元素比执行 Ext.select(“div”) 返回的元素更多——而执行 Ext.select(“div div div”) 返回的元素又多于执行 Ext.select(“div”) 返回的元素。事实上,在 JavaScript 选择器库中,考虑重复项是一个巨大的问题——目前,只有 jQuery 能够正确处理。

这方面的一个重要问题是,考虑重复项在计算上可能非常昂贵——因此,DOMQuery 不考虑重复项会给人一种速度提升的印象。例如

// DOMQuery
Ext.select("div").elements.length
=> 246
Ext.select("div div").elements.length
=> 624
Ext.select("div div div").elements.length
=> 523

// jQuery
jQuery("div").length
=> 246
jQuery("div div").length
=> 243
jQuery("div div div").length
=> 239

DOMQuery 不支持多个过滤器:elem.foo[foo=bar] 或 elem.foo.bar
在实现这一点之前,与其他任何库进行比较都毫无意义。构建一个完全能够处理像这样方面(参见:cssQuery、jQuery)的库,需要付出巨大的代价。(无论是代码大小还是速度代价。)

DOMQuery 的 #id 选择器不检查上下文
如果您尝试执行如下查询

Ext.select("div #badid").elements
=> [div#badid]

您会得到一个 id 为“badid”的元素——即使该元素实际上不在 div 内部。由于 DOMQuery 代码中没有进行有效性检查,因此速度非常快——但结果是错误的。

我应该提到,直到 1.1,jQuery 在这方面也是错误的,所以这是一个很容易被忽视的问题。

根元素去哪儿了?
您会发现,在 DOMQuery 中搜索“html”和“*”时,缺少一个显而易见的东西:HTML 元素。从所有查询中排除根 DOM 元素似乎有点奇怪;特别是考虑到这完全有效:“html > body *”。

……为了公平起见——这里有一个关于我们的 :-)

我们的 :nth-child(even/odd) 有缺陷。
目前它似乎只选择一个元素(!?)。我创建了一个 工单,它应该在周日发布的 1.1 版本中得到解决。

总而言之,很高兴看到 DOMQuery 取得的速度飞跃。选择器速度是一个真正值得竞争的领域;每次有新的速度提升,每个人都会受益(用户、开发人员——每个人)。

事实上,查看他的代码,我已经有一些关于如何提高 jQuery 速度的想法了!

所以,感谢 Jack,感谢您让我们保持警惕——我们期待着您的库得到改进,每个人都受益。

jQuery 1.1b

发布于 作者

我们已经准备好发布大型 1.1 版本了,本周日——但为了让您度过这段时间,这里又有一组错误修复供您测试。jQuery 开发团队一直在努力修复本周收到的所有支持请求,并且我们已经成功修复了所有问题。

如果您能花时间用您的代码测试新的 1.1b,并且发现任何错误,请提交到错误跟踪器,我们将不胜感激。

然而,这不仅仅是错误修复;我们还为您准备了一些新东西:jQuery 1.0 兼容性插件。正如承诺的那样,此插件提供了 1.0.4 版本中存在的所有方法和选择器。因此,从理论上讲,您应该能够插入 jQuery 1.1 和新的兼容性插件,一切都应该无缝工作。

以下是如何在 jQuery 1.1 中使用兼容性插件

<html>
<head>
  <script src="jquery-1.1.js"></script>
  <script src="jquery.compat-1.0.js"></script>
  <script>
    $(document).ready(function(){
        // Your old 1.0-centric code
    });
  </script>
</head>
<body></body>
</html>

因此,虽然完全有可能在可预见的未来继续使用兼容性插件,但强烈建议您遵循升级计划之前提到的。

所以,再次强调:请帮助我们测试这个 beta 版本!您提供的帮助越多,最终的 1.1 版本就越好。感谢您的所有帮助!

下载

更新:我忘记提几件事了(凌晨 4 点发布版本就是这样)

  • .filter([“.foo”, “.bar”]) 现在是 .filter(“.foo, .bar”):一个更简单的解决方案——并且兼容性插件中已经修复了。
  • 我们决定保留 .height() 和 .width()。它们回来了,因为它们非常有用。
  • 文档已更新到 1.1b(所以对于那些仍然看到 .filter([…]) 或没有看到 .height() 和 .width() 的人——现在已经修复了。)

jQuery 1.1a

发布于 作者

正如之前宣布的,今天我们为您带来 jQuery 1.1 的 alpha 版本。我们非常感谢您能帮助我们测试这个 alpha 版本,以便我们本周末发布一个稳定的版本——正好赶上 jQuery 的一周年纪念日!(1 月 14 日)

这将是一个很棒的版本。事实上,这个版本非常好,我们将花整整一周的时间告诉您新内容以及如何最好地使用它。推广团队已经准备好很多东西来帮助您了解和使用 jQuery 的这个新版本。

以下是 jQuery 1.1 的快速概览

  • 它的选择器比 jQuery 1.0.4 中的选择器快 10-20 倍。
  • 文档已完全翻新
  • API 的复杂性降低了 47%
  • 它修复了大量的错误。
  • 它包含许多很棒的新功能。
  • ……而且它仍然是您所期望的 19KB。

在接下来的几天里我们会提供完整的详细信息,但目前来看,这将是一个很棒的版本。

下载

API 变更

注意: 我们将在 jQuery 1.1 的完整版本发布时,一同发布一个向后兼容插件,该版本预计本周末发布。

重要的是要注意,API 发生了许多变化。有些是新增,有些是重新组织。如果您想帮助我们测试这个 alpha 版本,请记住这些变化。

:nth-child() 现在从 1 开始计数,而不是 0。我们 CSS 3 选择器的实现从 0 而不是 1 开始编号。这是一个错误修复,但可能会影响您的代码。

// 1.0.x: Get the first column from a table
$("td:nth-child(0)")

// 1.1: Get the first column from a table
$("td:nth-child(1)")

在这个版本中,以下方法已被重命名/重新组织,以下是如何继续使用它们,就像您期望的那样

旧方法 (1.0.x) 新方法 (1.1)
.ancestors() .parents()
.width() .css(“width”)
.height() .css(“height”)
.top() .css(“top”)
.left() .css(“left”)
.position() .css(“position”)
.float() .css(“float”)
.overflow() .css(“overflow”)
.color() .css(“color”)
.background() .css(“background”)
.id() .attr(“id”)
.title() .attr(“title”)
.name() .attr(“name”)
.href() .attr(“href”)
.src() .attr(“src”)
.rel() .attr(“rel”)
.oneblur(fn) .one(“blur”,fn)
.onefocus(fn) .one(“focus”,fn)
.oneload(fn) .one(“load”,fn)
.oneresize(fn) .one(“resize”,fn)
.onescroll(fn) .one(“scroll”,fn)
.oneunload(fn) .one(“unload”,fn)
.oneclick(fn) .one(“click”,fn)
.onedblclick(fn) .one(“dblclick”,fn)
.onemousedown(fn) .one(“mousedown”,fn)
.onemouseup(fn) .one(“mouseup”,fn)
.onemousemove(fn) .one(“mousemove”,fn)
.onemouseover(fn) .one(“mouseover”,fn)
.onemouseout(fn) .one(“mouseout”,fn)
.onechange(fn) .one(“change”,fn)
.onereset(fn) .one(“reset”,fn)
.oneselect(fn) .one(“select”,fn)
.onesubmit(fn) .one(“submit”,fn)
.onekeydown(fn) .one(“keydown”,fn)
.onekeypress(fn) .one(“keypress”,fn)
.onekeyup(fn) .one(“keyup”,fn)
.oneerror(fn) .one(“error”,fn)
.unblur(fn) .unbind(“blur”,fn)
.unfocus(fn) .unbind(“focus”,fn)
.unload(fn) .unbind(“load”,fn)
.unresize(fn) .unbind(“resize”,fn)
.unscroll(fn) .unbind(“scroll”,fn)
.ununload(fn) .unbind(“unload”,fn)
.unclick(fn) .unbind(“click”,fn)
.undblclick(fn) .unbind(“dblclick”,fn)
.unmousedown(fn) .unbind(“mousedown”,fn)
.unmouseup(fn) .unbind(“mouseup”,fn)
.unmousemove(fn) .unbind(“mousemove”,fn)
.unmouseover(fn) .unbind(“mouseover”,fn)
.unmouseout(fn) .unbind(“mouseout”,fn)
.unchange(fn) .unbind(“change”,fn)
.unreset(fn) .unbind(“reset”,fn)
.unselect(fn) .unbind(“select”,fn)
.unsubmit(fn) .unbind(“submit”,fn)
.unkeydown(fn) .unbind(“keydown”,fn)
.unkeypress(fn) .unbind(“keypress”,fn)
.unkeyup(fn) .unbind(“keyup”,fn)
.unerror(fn) .unbind(“error”,fn)

我知道这是一个很长的列表——但您会惊讶于有多少人没有使用这些功能。通过删除所有这些方法,我们已经将 jQuery API 的大小减少了 47%。我们将会提供更多关于 API 变更的详细信息,但目前,此列表应该可以帮助您解决代码中的任何主要差异。

如果您有任何问题,请随时在此处评论,我们会尽快解答。