语法

公鸡酸是“准备事件”的简称 鸡酮酸的断行性和链性 嵌套过滤器由Nathan Long 缓存一个集合并通过roosteronacid在同一行上执行命令 包含选择器roosteronacid 定义元素创建时的属性 访问jQuery函数就像访问roosteronacid数组一样 noConflict函数- Oli释放$变量 通过nickf隔离noConflict模式下的$变量 无冲突模式由鸡酮酸

数据存储

数据函数-通过TenebrousX将数据绑定到元素 HTML5数据属性支持,在类固醇!由roosteronacid Filip dupanovic设计的jQuery元数据插件

优化

用鸡酮酸优化复合选择剂的性能 lupefiasco的上下文参数 Nathan Long的保存和重用搜索 创建HTML元素并保持引用,检查元素是否存在,编写自己的选择器

杂项

Check the index of an element in a collection by redsquare Live event handlers by TM Replace anonymous functions with named functions by ken Microsoft AJAX framework and jQuery bridge by Slace jQuery tutorials by egyamado Remove elements from a collection and preserve chainability by roosteronacid Declare $this at the beginning of anonymous functions by Ben FireBug lite, Hotbox plug-in, tell when an image has been loaded and Google CDN by Colour Blend Judicious use of third-party jQuery scripts by harriyott The each function by Jan Zich Form Extensions plug-in by Chris S Asynchronous each function by OneNerd The jQuery template plug-in: implementing complex logic using render-functions by roosteronacid


当前回答

创建一个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");
});

其他回答

异步each()函数

如果你有非常复杂的文档,在迭代过程中运行jquery each()函数会锁住浏览器,并且/或Internet Explorer弹出“是否要继续运行此脚本”消息,这个解决方案将会挽救你的一天。

jQuery.forEach = function (in_array, in_pause_ms, in_callback)
{
    if (!in_array.length) return; // make sure array was sent

    var i = 0; // starting index

    bgEach(); // call the function

    function bgEach()
    {
        if (in_callback.call(in_array[i], i, in_array[i]) !== false)
        {
            i++; // move to next item

            if (i < in_array.length) setTimeout(bgEach, in_pause_ms);
        }
    }

    return in_array; // returns array
};


jQuery.fn.forEach = function (in_callback, in_optional_pause_ms)
{
    if (!in_optional_pause_ms) in_optional_pause_ms = 10; // default

    return jQuery.forEach(this, in_optional_pause_ms, in_callback); // run it
};

你可以使用它的第一种方式就像each():

$('your_selector').forEach( function() {} );

可选的第二个参数让你指定迭代之间的速度/延迟,这对动画可能很有用(下面的例子将在迭代之间等待1秒):

$('your_selector').forEach( function() {}, 1000 );

记住,因为这是异步工作的,你不能依赖于迭代在下一行代码之前完成,例如:

$('your_selector').forEach( function() {}, 500 );
// next lines of code will run before above code is complete

我为一个内部项目写了这篇文章,虽然我确信它可以改进,但它满足了我们的需要,所以希望你们中的一些人会觉得它有用。谢谢- - -

像访问数组一样访问jQuery函数

添加/删除基于布尔值的类…

function changeState(b)
{
    $("selector")[b ? "addClass" : "removeClass"]("name of the class");
}

是…的简短版本。

function changeState(b)
{
    if (b)
    {
        $("selector").addClass("name of the class");
    }
    else
    {
        $("selector").removeClass("name of the class");
    }
}

这个用例并不多。尽管如此;我认为这很整洁:)

更新

为了防止您不是注释阅读类型,ThiefMaster指出toggleClass接受一个布尔值,该值决定是否应该添加或删除一个类。因此,就我上面的示例代码而言,这将是最好的方法……

$('selector').toggleClass('name_of_the_class', true/false);

在方法调用(如.append())中使用自动执行的匿名函数来遍历某些内容。例如:

$("<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();
}()));

我使用这种方法来迭代那些不适合跳出我的链接来构建的大而不舒服的东西。

实时事件处理程序

为任何匹配选择器的元素设置一个事件处理程序,即使它在初始页面加载后被添加到DOM:

$('button.someClass').live('click', someFunction);

这允许您通过ajax加载内容,或通过javascript添加内容,并自动为这些元素正确设置事件处理程序。

同样地,要停止实时事件处理:

$('button.someClass').die('click', someFunction);

与常规事件相比,这些实时事件处理程序有一些限制,但它们在大多数情况下工作得很好。

要了解更多信息,请参阅jQuery文档。

更新:live()和die()在jQuery 1.7中已弃用。参见http://api.jquery.com/on/和http://api.jquery.com/off/了解类似的替换功能。

UPDATE2: live()早在jQuery 1.7之前就已经弃用了。对于1.7之前的jQuery 1.4.2+版本,请使用delegate()和undelegate()。live()示例($('button.someClass')。live('click', someFunction);)可以像这样使用delegate()重写:$(document).delegate('button.someClass', 'click', someFunction);

无用的模式

jQuery.noConflict();

运行此函数将$变量的控制权交还给第一个实现它的库。这有助于确保jQuery不会与其他库的$ object冲突。 通过使用这个函数,你将只能通过jQuery变量访问jQuery。例如,你过去做$("div p"),你现在必须做jQuery("div p")"。