jQuery技巧和窍门

触发动画时使用.stop（true，true），以防止其重复动画。这对于过渡动画特别有用。

$("#someElement").hover(function(){
    $("div.desc", this).stop(true,true).fadeIn();
},function(){
    $("div.desc", this).fadeOut();
});

在方法调用中使用自执行匿名函数，例如.append()进行迭代。IE浏览器：

$("<ul>").append((function ()
{
    var data = ["0", "1", "2", "3", "4", "5", "6"],
        output = $("<div>"),
        x = -1,
        y = data.length;

    while (++x < y) output.append("<li>" + info[x] + "</li>");

    return output.children();
}()));

我用它来遍历那些庞大而又不舒服的事情，以至于中断了我的构建工作。

明智地使用第三方jQuery脚本，例如表单字段验证或url解析。值得一看的内容，以便下次遇到JavaScript要求时就知道。

从集合中删除元素并保持可链接性

考虑以下：

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

$("li").filter(function()
{
    var text = $(this).text();

    // return true: keep current element in the collection
    if (text === "One" || text === "Two") return true;

    // return false: remove current element from the collection
    return false;
}).each(function ()
{
    // this will alert: "One" and "Two"       
    alert($(this).text());
});

该filter()函数从jQuery对象中删除元素。在这种情况下：将删除所有不包含文本“一个”或“两个”的锂元素。

换行和可链接性

将多个调用链接到集合时...

$("a").hide().addClass().fadeIn().hide();

您可以使用换行符提高可读性。像这样：

$("a")
.hide()
.addClass()
.fadeIn()
.hide();

更改输入元素的类型

当我尝试更改已经附加到DOM的输入元素的类型时，我遇到了这个问题。您必须克隆现有元素，将其插入旧元素之前，然后删除旧元素。否则它将无法正常工作：

var oldButton = jQuery("#Submit");
var newButton = oldButton.clone();

newButton.attr("type", "button");
newButton.attr("id", "newSubmit");
newButton.insertBefore(oldButton);
oldButton.remove();
newButton.attr("id", "Submit");

It seems that most of the interesting and important tips have been already mentioned, so this one is just a little addition.

The little tip is the jQuery.each(object, callback) function. Everybody is probably using the jQuery.each(callback) function to iterate over the jQuery object itself because it is natural. The jQuery.each(object, callback) utility function iterates over objects and arrays. For a long time, I somehow did not see what it could be for apart from a different syntax (I don’t mind writing all fashioned loops), and I’m a bit ashamed that I realized its main strength only recently.

The thing is that since the body of the loop in jQuery.each(object, callback) is a function, you get a new scope every time in the loop which is especially convenient when you create closures in the loop.

换句话说，一个典型的常见错误是执行以下操作：

var functions = [];
var someArray = [1, 2, 3];
for (var i = 0; i < someArray.length; i++) {
    functions.push(function() { alert(someArray[i]) });
}

现在，当您调用functions数组中的函数时，您将收到三次警报，提示中的内容undefined很可能不是您想要的。问题在于，只有一个变量i，并且所有三个闭包均引用该变量。循环结束时，的最终值为i3，并且someArrary[3]为undefined。您可以通过调用另一个为您创建闭包的函数来解决该问题。或者，您使用jQuery实用程序，它将基本上为您完成此操作：

var functions = [];
var someArray = [1, 2, 3];
$.each(someArray, function(item) {
    functions.push(function() { alert(item) });
});

现在，当您调用函数时，您将收到三个警报，其内容分别为预期的1、2和3。

通常，您无法做任何事，但是拥有它真是太好了。

语法简写的东西-缓存对象集合并在一行上执行命令：

代替：

var jQueryCollection = $("");

jQueryCollection.command().command();

我做：

var jQueryCollection = $("").command().command();

某种“真实的”用例可能与以下内容类似：

var cache = $("#container div.usehovereffect").mouseover(function ()
{
    cache.removeClass("hover").filter(this).addClass("hover");
});

优化复杂选择器的性能

使用复杂的选择器大大提高性能时，查询DOM的子集：

var subset = $("");

$("input[value^='']", subset);

准备活动的简写

显式和冗长的方式：

$(document).ready(function ()
{
    // ...
});

速记：

$(function ()
{
    // ...
});

在元素创建时定义属性

在jQuery 1.4中，可以在创建元素时使用对象文字来定义属性：

var e = $("<a />", { href: "#", class: "a-class another-class", title: "..." });

...您甚至可以添加样式：

$("<a />", {
    ...
    css: {
        color: "#FF0000",
        display: "block"
    }
});

这是文档的链接。

在核心jQuery函数上，除了选择器参数外，还要指定上下文参数。指定context参数可以使jQuery从DOM中更深的分支开始，而不是从DOM根开始。在给定足够大的DOM的情况下，指定上下文参数应该可以转化为性能提升。

示例：在文档的第一个表单中查找radio类型的所有输入。

$("input:radio", document.forms[0]);

参考：http : //docs.jquery.com/Core/jQuery#expressioncontext

用命名函数替换匿名函数。这确实取代了jQuery上下文，但是由于它依赖于回调函数，因此在使用jQuery时似乎发挥了更多作用。我对内联匿名函数的问题是，它们更难调试（更容易查看具有不同名称的函数的调用栈，而不是6个级别的“匿名”），以及在同一个匿名函数中存在多个匿名函数的事实。 jQuery链可能难以阅读和/或维护。另外，匿名函数通常不被重用。另一方面，声明命名函数鼓励我编写更可能被重用的代码。

插图；代替：

$('div').toggle(
    function(){
        // do something
    },
    function(){
        // do something else
    }
);

我更喜欢：

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

嵌套过滤器

您可以嵌套过滤器（如nickf所示）。

.filter(":not(:has(.selected))")

jQuery的data()方法很有用，但并不为人所知。它允许您将数据绑定到DOM元素，而无需修改DOM。

我真的不喜欢$(document).ready(fn)捷径。当然，它减少了代码的编写，但同时也减少了代码的可读性。当您看到时$(document).ready(...)，便知道您在看什么。$(...)太多其他方式用于立即有意义。

如果您有多个框架，则可以按需使用jQuery.noConflict();，但也可以像这样为它分配一个不同的变量：

var $j = jQuery.noConflict();

$j("#myDiv").hide();

如果您有几个可以归结为$x(...)-style调用的框架，则非常有用。

创建HTML元素并保留引用

var newDiv = $("<div />");

newDiv.attr("id", "myNewDiv").appendTo("body");

/* Now whenever I want to append the new div I created, 
   I can just reference it from the "newDiv" variable */

检查元素是否存在

if ($("#someDiv").length)
{
    // It exists...
}

编写自己的选择器

$.extend($.expr[":"], {
    over100pixels: function (e)
    {
        return $(e).height() > 100;
    }
});

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});