jQuery 提示和技巧答案

【问题标题】：jQuery Tips and TricksjQuery 提示和技巧
【发布时间】：2010-09-16 00:10:21
【问题描述】：

语法

Shorthand for the ready-event by roosteronacid
Line breaks and chainability by roosteronacid
Nesting filters by Nathan Long
Cache a collection and execute commands on the same line by roosteronacid
Contains selector by roosteronacid
Defining properties at element creation by roosteronacid
Access jQuery functions as you would an array by roosteronacid
The noConflict function - Freeing up the $ variable by Oli
Isolate the $ variable in noConflict mode by nickf
No-conflict mode by roosteronacid

数据存储

The data function - bind data to elements by TenebrousX
HTML5 data attributes support, on steroids! by roosteronacid
The jQuery metadata plug-in Filip Dupanović

优化

Optimize performance of complex selectors by roosteronacid
The context parameter 来自 lupefiasco
Save and reuse searches by Nathan Long
Creating an HTML Element and keeping a reference, Checking if an element exists, Writing your own selectors by Andreas Grech

杂项

Check the index of an element in a collection红方
Live event handlers 来自 TM
Replace anonymous functions with named functions由肯
Microsoft AJAX framework and jQuery bridge by Slace
jQuery tutorials 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 颜色混合
Judicious use of third-party jQuery scripts 哈里约特
The each function by Jan Zich
Form Extensions plug-in 克里斯·S
Asynchronous each function 来自 OneNerd
The jQuery template plug-in: implementing complex logic using render-functions by roosteronacid

【问题讨论】：

标签： javascript jquery

【解决方案1】：

实时事件处理程序

为匹配选择器的 any 元素设置事件处理程序，即使它在初始页面加载后被添加到 DOM：

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

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

同样，停止实时事件处理：

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

与常规事件相比，这些实时事件处理程序有一些限制，但它们适用于大多数情况。

有关更多信息，请参阅jQuery Documentation。

更新：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()。 可以使用 delegate() 重写 live() 示例 ($('button.someClass').live('click', someFunction);)，如下所示：$(document).delegate('button.someClass', 'click', someFunction);。

【讨论】：

是的，我喜欢新的现场表演。请注意，它仅适用于从 jQuery 1.3 开始。
+1..你救了我很多心痛..我只是碰巧读了你的条目，而我正在休息 - 解决我的事件为什么没有触发的问题。谢谢
对于本文的任何其他后来者，您可能还想看看delegate()：api.jquery.com/delegate 类似于live，但更高效。
只要记住 .live 会向上冒泡，这样绑定的 live 事件就可以被触发。如果沿途有事情取消了该事件，则实时事件将不会触发。
live() 和 die() 自 11 月 3 日 jQuery 1.7 发布以来已被弃用。替换为 on()、api.jquery.com/on 和 off()、api.jquery.com/off

【解决方案2】：

将 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和lowfat等名称，产品有相应的类-.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();
});

【讨论】：

我的命名约定是前面有一个$。例如var $allItems = ...
@Lavinski - 我认为这个想法是 $ 表示这是一个 jQuery 对象，这样可以更容易地在视觉上与其他变量区分开来。
@Louis - 我已经采用了你的约定，并将相应地更新我的答案。 :)

【解决方案3】：

这个发给Kobi。

考虑下面的sn-p代码：

// hide all elements which contains the text "abc"
$("p").each(function ()
{
    var that = $(this);

    if (that.text().indexOf("abc") > -1) that.hide();
});

这是一个速记...它的速度大约是原来的两倍：

$("p.value:contains('abc')").hide();

【讨论】：

【解决方案4】：

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

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

但无需创建单独的命名函数。

【讨论】：

【解决方案5】：

Syntactic shorthand-sugar-thing--缓存一个对象集合并在一行上执行命令：

代替：

var jQueryCollection = $("");

jQueryCollection.command().command();

我愿意：

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

一个有点“真实”的用例可能是这样的：

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

【讨论】：

最好将 $(this) 引用放在局部变量中，因为您会在这里受到轻微的性能影响，因为它需要更长的时间......
在这种情况下（没有双关语）我只使用一次“this”。无需缓存。
一个小提示。虽然在这种情况下可能无关紧要，但对 DOM 进行额外更改总是一个坏主意。例如，您悬停的元素已经具有“悬停”类。您将删除此类并重新添加它。你可以通过$(this).siblings().removeClass("hover") 解决这个问题。我知道这听起来像是一件小事，但每次更改 DOM 时，可能会触发另一个浏览器重绘。其他可能性包括附加到 DOMAttrModified 的事件或更改元素高度的类，这可能会触发其他“调整大小”事件侦听器。
如果您想使用缓存并最小化 DOM 更改，您可以这样做。 cache.not(this).removeClass("hover")
@gradbot：我不明白你的最后两个 cmets。你能扩展吗？

【解决方案6】：

“结束于”元素选择器非常适合 ASP.NET Web 表单开发，因为您无需担心前面的 ctl00 愚蠢：

$("[id$='txtFirstName']");

如 cmets 中所述，如果不小心使用，此选择器（与任何抽象层一样）可能会很慢。更喜欢将选择器的范围限定为某些包含元素，例如，

$(".container [id$='txtFirstName']");

减少需要遍历的元素数量。

jQuery documentation

【讨论】：

您可能应该注意/警告这种类型的选择器非常慢。除非您在子集或缓存集合上进行选择，否则此选择器将遍历 DOM 中的所有元素并在 ID 属性上运行正则表达式以确定匹配。
Stephen 当它真的很糟糕的时候，你可以使用这个，它会搜索整个 id $("input[id*=txtFirstName]"); //* search "all" 大多数时候我使用 ClientID $('#');

【解决方案7】：

异步 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

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

【讨论】：

【解决方案8】：

像访问数组一样访问 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 accepts a boolean value，它决定了是否应该添加或删除一个类。所以就我上面的示例代码而言，这将是最好的方法......

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

【讨论】：

这很简洁，有一些有趣的用途，但它根本不是 jQuery 特有的……这只是你可以在任何 JavaScript 对象上做的事情。
谢谢 :) ... 这是基本的 JavaScript；是的。但我认为 jQuery 是 JavaScript。我并不是说这是特定于 jQuery 的。
在这种特殊情况下，您确实想使用$('selector').toggleClass('name_of_the_class', b);。

【解决方案9】：

HTML5 数据属性支持，在类固醇上！

data function 之前已经提到过。有了它，您可以将数据与 DOM 元素关联起来。

最近 jQuery 团队增加了对HTML5 custom data-* attributes 的支持。好像这还不够；他们用类固醇强行输入数据函数，这意味着您可以直接在您的标记中以 JSON 的形式存储复杂的对象。

HTML：

<p data-xyz = '{"str": "hi there", "int": 2, "obj": { "arr": [1, 2, 3] } }' />

JavaScript：

var data = $("p").data("xyz");

data.str // "hi there"
typeof data.str // "string"

data.int + 2 // 4
typeof data.int // "number"

data.obj.arr.join(" + ") + " = 6" // "1 + 2 + 3 = 6"
typeof data.obj.arr // "object" ... Gobbles! Errrghh!

【讨论】：

【解决方案10】：

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

考虑以下几点：

<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 对象中删除元素。在这种情况下：所有不包含文本“One”或“Two”的 li 元素都将被删除。

【讨论】：

只使用“each”并在开关内移动边距变化不是更简单吗？
更新了我的答案。如果我说清楚了，请告诉我（呃）
这真的会移除 li 元素吗？它似乎通过过滤的元素列表发出警报。
过滤器函数从 jQuery 对象内的集合中删除元素。它不会影响 DOM。
在你的过滤函数中，你可以简单地写：return !!$(this).text().match(/One|Two/); ;)

【解决方案11】：

我真的不喜欢 $(document).ready(fn) 快捷方式。当然它减少了代码，但它也减少了代码的可读性。当您看到$(document).ready(...) 时，您就知道自己在看什么。 $(...) 用于太多其他方式，无法立即理解。

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

var $j = jQuery.noConflict();

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

如果您有多个可以归结为$x(...) 风格调用的框架，这将非常有用。

【讨论】：

@Oli：关于文档就绪速记；你有一定道理。但无论如何：这是一个提示/技巧。我在所有代码中使用的一个纯粹是因为我认为它“看起来”更好。个人喜好问题，我猜:)
每天我都在浏览毫无意义的 XML/XLS/XLST、用太多抽象层编写的站点、永远不会超过最简陋服务器的站点上的复杂故障转移系统……而且仍然人们抱怨 $() 和 $() 之间的区别。让我想哭:)
当我看到 $(function(){...}) 时，我知道发生了什么。更平常的事情应该更短。这就是我们将经常调用的代码片段转换为函数的原因。

【解决方案12】：

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

【讨论】：

编写自己的选择器非常流畅
另外，如果有任何帮助，您实际上可以做 $("
") 并实现与 $("
") 相同的事情
我喜欢新的选择器部分，不知道。
由于我还不能编辑社区维基：将分配和存在检查与if ((var someDiv = $("#someDiv")).length) { /* do stuff with someDiv... */ }结合起来
@Ben：我在 JavaScript 中避免使用此类惯用语的原因是因为我不想让 someDiv 被限定在 if 语句中的错觉，因为它不是； JavaScript 只支持函数作用域

【解决方案13】：

在诸如.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();
}()));

我用它来遍历那些很大并且不适合打破我的链来构建的东西。

【讨论】：

【解决方案14】：

访问 iFrame 元素 iframe 并不是大多数问题的最佳解决方案，但是当您确实需要使用 iframe 时，知道如何使用 Javascript 访问其中的元素非常方便。 jQuery 的 contents() 方法使这变得轻而易举，使我们能够像这样在一行中加载 iframe 的 DOM：

$(function(){
    var iFrameDOM = $("iframe#someID").contents();
    //Now you can use <strong>find()</strong> to access any element in the iframe:

    iFrameDOM.find(".message").slideUp();
    //Slides up all elements classed 'message' in the iframe
});

source

【讨论】：

【解决方案15】：

在更基础和更高级的说明中，您可以尝试通过编写自己的小框架来模拟 jQuery 的基本选择器机制（它比听起来简单）。它不仅会无休止地改进你的 Javascript，它还会帮助你理解为什么 jQuery 的 $("#elementId") 比 $(".elementClass") 快很多倍，并且也比 $("element#elementId ")（从表面上看可能违反直觉）。

这也将迫使您学习面向对象的 Javascript，这将帮助您以更加模块化的方式组织代码，从而避免繁重的 jQuery 脚本块可能出现的意大利面条式代码性质。

【讨论】：

【解决方案16】：

我喜欢在匿名函数的开头声明一个$this 变量，所以我知道我可以引用一个jQueried this。

像这样：

$('a').each(function() {
    var $this = $(this);

    // Other code
});

【讨论】：

ROA: 是的，那就是酸 :) 你也可以使用 arguments.callee 来启用匿名函数来引用自己
Joe - 请注意，被调用者将使用 ECMAScript 5 和严格模式。见：ejohn.org/blog/ecmascript-5-strict-mode-json-and-more
@Joe 你可以给它起个名字，小心IE's quirks。
与标准变量相比，在变量名的开头使用 $ 来表示 jQuery 对象变量的好例子。通过将其添加到缓存 jQuery 对象的任何变量的开头，您可以通过查看它立即知道您可以对变量执行 jQuery 函数。使代码立即更具可读性。

【解决方案17】：

为首屏元素添加选择器

作为一个 jQuery 选择器插件

 $.extend($.expr[':'], {
 "aboveFold": function(a, i, m) {
   var container = m[3],
   var fold;
  if (typeof container === "undefined") {
     fold = $(window).height() + $(window).scrollTop();
  } else {
     if ($(container).length == 0 || $(container).offset().top == null) return false;
     fold = $(container).offset().top + $(container).height();
  }
  return fold >= $(a).offset().top;
 } 
});

用法：

$("p:aboveFold").css({color:"red"});

感谢scottymac

【讨论】：

【解决方案18】：

无耻的外挂...The jQuery template plug-in: implementing complex logic using render-functions

新的jQuery模板插件是惊人的。话虽如此，双花括号模板标签是不完全是我的那杯茶。在一个更复杂的模板标签掩盖了模板标记和实现超越简单 if/else 语句的逻辑很痛苦。

在弄乱了插件之后几个小时后，我的头开始疼从试图区分标记在我的模板中来自数百万双花括号。

于是我吃了一片阿司匹林开始工作另一种选择

【讨论】：

看看 JSRender。我认为双花括号似乎正在成为 JavaScript 模板中模板的一种标准。

【解决方案19】：

尽可能在伪选择器上使用过滤方法，以便 jQuery 可以使用 querySelectorAll（这比嘶嘶声要快得多）。考虑这个选择器：

$('.class:first')

同样的选择可以使用：

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

这必须更快，因为 '.class' 的初始选择与 QSA 兼容

【讨论】：

@Nyuszika7H 我认为你没有抓住重点。关键是 QSA 无法优化大多数伪选择器，因此 $('.class:eq(0)') 会比 $('.class').eq(0) 慢。

【解决方案20】：

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

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

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

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

【讨论】：

注意：$(document.forms[0]).find('input:radio') 做同样的事情。如果您查看 jQuery 源代码，您会看到：如果您将第二个参数传递给 $，它实际上会调用 .find()。
那...$('form:first input:radio')?
Paul Irish 在paulirish.com/2009/perf（从幻灯片 17 开始）中指出，从可读性的角度来看，这样做是“倒退”的。正如@Nyuszika7H 指出的那样，它在内部使用 .find() ，与将上下文放在初始选择器中相比， $(document.forms[0]).find('input:radio') 非常容易阅读。

【解决方案21】：

在创建元素时定义属性

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

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

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

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

这是link to the documentation。

【讨论】：

【解决方案22】：

说到提示和技巧以及一些教程。我发现Jeffery Way 的这些系列教程（“绝对初学者的 jQuery”视频系列） 非常有用。

它针对那些不熟悉 jQuery 的开发人员。他展示了如何使用 jQuery 创建许多很酷的东西，例如动画、创建和删除元素等等......

我从中学到了很多。他展示了使用 jQuery 是多么容易。现在我喜欢它，我可以阅读和理解任何 jQuery 脚本，即使它很复杂。

这是一个我喜欢“调整文本大小”的例子

1- jQuery...

<script language="javascript" type="text/javascript">
    $(function() {
        $('a').click(function() {
            var originalSize = $('p').css('font-size'); // get the font size 
            var number = parseFloat(originalSize, 10); // that method will chop off any integer from the specified variable "originalSize"
            var unitOfMeasure = originalSize.slice(-2);// store the unit of measure, Pixle or Inch

            $('p').css('font-size', number / 1.2 + unitOfMeasure);
            if(this.id == 'larger'){$('p').css('font-size', number * 1.2 + unitOfMeasure);}// figure out which element is triggered
         });        
     });
</script>

2- CSS 样式...

<style type="text/css" >
body{ margin-left:300px;text-align:center; width:700px; background-color:#666666;}
.box {width:500px; text-align:justify; padding:5px; font-family:verdana; font-size:11px; color:#0033FF; background-color:#FFFFCC;}
</style>

2- HTML...

<div class="box">
    <a href="#" id="larger">Larger</a> | 
    <a href="#" id="Smaller">Smaller</a>
    <p>
    In today’s video tutorial, I’ll show you how to resize text every time an associated anchor tag is clicked. We’ll be examining the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods. 
    </p>
</div>

【讨论】：

【解决方案23】：

在名称中增加行索引

如果您的输入元素名称包含像'0_row' 这样的行索引，这是增加克隆输入元素的行索引的一种巧妙方法：

$(this).attr('name', $(this).attr('name').replace(/^\d+/, function(n){ return ++n; }));

克隆元素的名称现在将是 '1_row'

【讨论】：

【解决方案24】：

哦，别忘了jQuery metadata！ data() 函数很棒，但它必须通过 jQuery 调用来填充。

而不是破坏 W3C 与自定义元素属性的合规性，例如：

<input 
  name="email" 
  validation="required" 
  validate="email" 
  minLength="7" 
  maxLength="30"/>

改用元数据：

<input 
  name="email" 
  class="validation {validate: email, minLength: 2, maxLength: 50}" />

<script>
    jQuery('*[class=validation]').each(function () {
        var metadata = $(this).metadata();
        // etc.
    });
</script>

【讨论】：

html5 数据属性使这不再是一个问题；正在讨论将 html5 数据属性与 jquery 的 data() 函数内联：forum.jquery.com/topic/…
@Oskar - 是的，这已在 jQuery 1.4.3 中实现——data-* 属性可通过调用 .data() 自动获得

【解决方案25】：

在触发动画时使用 .stop(true,true) 可防止其重复动画。这对于翻转动画特别有用。

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

【讨论】：

【解决方案26】：

更改输入元素的类型

我在尝试更改已附加到 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");

【讨论】：

【解决方案27】：

换行和可链接性

当在集合上链接多个调用时...

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

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

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

【讨论】：

在这种情况下，第一个更具可读性，但是，在某些情况下，换行符会增加可读性。

【解决方案28】：

就绪事件的简写

显式冗长的方式：

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

速记：

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

【讨论】：

【解决方案29】：

无冲突模式

jQuery.noConflict();

“运行这个函数将$变量的控制权交还给第一个实现它的库。这有助于确保jQuery不会与其他库的$对象冲突。

通过使用此函数，您将只能使用jQuery 变量访问 jQuery。例如，你以前做$("div p")，现在必须做jQuery("div p")"。

【讨论】：

【解决方案30】：

更新：

只需在网站上包含此脚本，您就会得到一个 Firebug 控制台，该控制台会弹出，以便在任何浏览器中进行调试。功能不是很全，但还是很有帮助的！完成后记得将其删除。

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

查看此链接：

From CSS Tricks

更新：我发现了一些新东西；它是 JQuery Hotbox。

JQuery Hotbox

Google 在 Google 代码上托管了多个 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>

或者

<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”，您可以使用它来将消息和变量转储到屏幕上，而无需使用警告框。 “console.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');

【讨论】：

伊朗的 ppl 看不到加载了 google api 的网页。事实上，谷歌已经限制伊朗人访问谷歌代码。所以 -1
我刚刚发现你可以在任何浏览器中使用 firebug。太棒了。