检查索引

jQuery有.index，但使用起来很痛苦，因为你需要元素列表，并传入你想要索引的元素:

var index = e.g $('#ul>li').index( liDomObject );

下面的方法就简单多了:

如果你想知道无序列表中集合(例如列表项)中元素的索引:

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

检查索引

jQuery有.index，但使用起来很痛苦，因为你需要元素列表，并传入你想要索引的元素:

var index = e.g $('#ul>li').index( liDomObject );

下面的方法就简单多了:

如果你想知道无序列表中集合(例如列表项)中元素的索引:

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

将jQuery对象保存在变量中以供重用

将jQuery对象保存为变量可以让您重用它，而不必通过DOM重新查找它。

(正如@Louis所建议的，我现在使用$表示变量保存jQuery对象。)

// Bad: searching the DOM multiple times for the same elements
$('div.foo').each...
$('div.foo').each...

// Better: saving that search for re-use
var $foos = $('div.foo');
$foos.each...
$foos.each...

举一个更复杂的例子，假设您在商店中有一个食品列表，您希望只显示符合用户标准的食品。您有一个带有复选框的表单，每个复选框包含一个标准。复选框有像有机和低脂肪这样的名称，产品有相应的类别- .organic，等等。

var $allFoods, $matchingFoods;
$allFoods = $('div.food');

现在可以继续使用jQuery对象了。每次点击一个复选框(选中或取消选中)，从食物的主列表开始，并根据选中的复选框进行筛选:

// Whenever a checkbox in the form is clicked (to check or uncheck)...
$someForm.find('input:checkbox').click(function(){

  // Start out assuming all foods should be showing
  // (in case a checkbox was just unchecked)
  var $matchingFoods = $allFoods;

  // Go through all the checked boxes and keep only the foods with
  // a matching class 
  this.closest('form').find("input:checked").each(function() {  
     $matchingFoods = $matchingFoods.filter("." + $(this).attr("name")); 
  });

  // Hide any foods that don't match the criteria
  $allFoods.not($matchingFoods).hide();
});

无耻的宣传……jQuery模板插件:使用渲染函数实现复杂的逻辑

The new jQuery template plug-in is awesome. That being said, the double-curly brace template-tags are not exactly my cup of tea. In a more complex template the tags obscure the templates markup, and implementing logic past simple if/else statements is a pain. After messing around with the plug-in for a few hours, my head began to hurt from trying to distinguish the markup in my template from the millions of double curly braces. So I popped an aspirin and began work on an alternative

使用.stop(true,true)当触发一个动画防止它重复动画。这对于翻转动画特别有用。

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

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