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

实时事件处理程序

为任何匹配选择器的元素设置一个事件处理程序，即使它在初始页面加载后被添加到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);

更新:

只要在站点上包含这个脚本，您就会得到一个Firebug控制台，可以在任何浏览器中进行调试。虽然功能不全，但还是很有用的!吃完之后记得把它拿掉。

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

看看这个链接:

来自CSS技巧

更新: 我发现了一些新的东西;它是JQuery Hotbox。

JQuery轴承箱

谷歌在谷歌Code上托管了几个JavaScript库。从那里加载它可以节省带宽，而且加载速度很快，因为它已经被缓存了。

<script src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">  

    // Load jQuery  
    google.load("jquery", "1.2.6");  

    google.setOnLoadCallback(function() {  
        // Your code goes here.  
    });  

</script>

Or

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

你也可以用它来判断图像何时完全加载。

$('#myImage').attr('src', 'image.jpg').load(function() {  
    alert('Image Loaded');  
});

firebug的"console.info"，您可以使用它将消息和变量转储到屏幕上，而不必使用警告框。”控制台。Time”允许你轻松地设置一个计时器来包装一堆代码，并查看它需要多长时间。

console.time('create list');

for (i = 0; i < 1000; i++) {
    var myList = $('.myList');
    myList.append('This is list item ' + i);
}

console.timeEnd('create list');

我真的不喜欢$(document).ready(fn)快捷方式。当然，这减少了代码，但也降低了代码的可读性。当你看到$(document).ready(…)时，你知道你在看什么。$(…)被用于太多其他的方式，以至于没有立即的意义。

如果你有多个框架，你可以使用jQuery.noConflict();如你所说，但你也可以为它分配一个不同的变量，像这样:

var $j = jQuery.noConflict();

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

如果你有几个框架可以归结为$x(…)风格的调用，这是非常有用的。

绑定到事件并立即执行事件处理程序:

$('selector').bind('change now', function () { // bind to two events: 'change' and 'now'
    // update other portions of the UI
}).trigger('now'); // 'now' is a custom event

这就像

function update() {
    // update other portions of the UI
}
$('selector').change(update);
update();

但是不需要创建单独的命名函数。

尽可能使用过滤方法而不是伪选择器，这样jQuery就可以使用querySelectorAll(这比sizzle快得多)。考虑这个选择器:

$('.class:first')

同样的选择可以使用:

$('.class').eq(0)

哪个必须更快，因为初始选择'.class'是QSA兼容