jQuery提示和技巧-CSDN博客

本文翻译自：jQuery Tips and Tricks

#2楼

Optimize performance of complex selectors 优化复杂选择器的性能

Query a subset of the DOM when using complex selectors drastically improves performance: 使用复杂选择器时，查询DOM的子集可以显着提高性能：

var subset = $("");

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

#3楼

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. 小技巧是jQuery.each（对象，回调）函数。 Everybody is probably using the jQuery.each(callback) function to iterate over the jQuery object itself because it is natural. 每个人都可能使用jQuery.each（回调）函数迭代jQuery对象本身，因为它很自然。 The jQuery.each(object, callback) utility function iterates over objects and arrays. jQuery.each（对象，回调）实用程序函数迭代对象和数组。 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. 问题在于，由于jQuery.each（对象，回调）中的循环体是一个函数 ，因此每次在循环中都会得到一个新的作用域 ，这在循环中创建闭包时特别方便。

In other words, a typical common mistake is to do something like: 换句话说，一个典型的常见错误是执行以下操作：

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

Now, when you invoke the functions in the functions array, you will get three times alert with the content undefined which is most likely not what you wanted. 现在，当您调用functions数组中的functions ，您将获得三次警报，内容undefined ，这很可能不是您想要的。 The problem is that there is just one variable i , and all three closures refer to it. 问题是只有一个变量i ，所有三个闭包都引用它。 When the loop finishes, the final value of i is 3, and someArrary[3] is undefined . 当循环结束时， i的最终值为3， someArrary[3] undefined 。 You could work around it by calling another function which would create the closure for you. 您可以通过调用另一个为您创建闭包的函数来解决它。 Or you use the jQuery utility which it will basically do it for you: 或者您使用jQuery实用程序，它基本上会为您执行此操作：

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

Now, when you invoke the functions you get three alerts with the content 1, 2 and 3 as expected. 现在，当您调用这些函数时，您将获得三个警报，其中包含内容1,2和3。

In general, it is nothing you could not do yourself, but it's nice to have. 一般来说，这是你自己无法做到的事情，但它很高兴。

#4楼

Update: 更新：

Just include this script on the site and you'll get a Firebug console that pops up for debugging in any browser. 只需在网站上包含此脚本，您就可以在任何浏览器中弹出一个Firebug控制台进行调试。 Not quite as full featured but it's still pretty helpful! 不完整的功能，但它仍然非常有用！ Remember to remove it when you are done. 记得在完成后将其删除。

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

Check out this link: 看看这个链接：

From CSS Tricks 来自CSS技巧

Update: I found something new; 更新：我找到了新的东西; its the the JQuery Hotbox. 它是JQuery Hotbox。

JQuery Hotbox JQuery Hotbox

Google hosts several JavaScript libraries on Google Code. Google在Google Code上托管了多个JavaScript库。 Loading it from there saves bandwidth and it loads quick cos it has already been cached. 从那里加载它可以节省带宽，并加载已经缓存的快速cos。

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

You can also use this to tell when an image is fully loaded. 您还可以使用它来判断图像何时完全加载。

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

The "console.info" of firebug, which you can use to dump messages and variables to the screen without having to use alert boxes. firebug的“console.info”，您可以使用它将消息和变量转储到屏幕而不必使用警告框。 "console.time" allows you to easily set up a timer to wrap a bunch of code and see how long it takes. “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');

#5楼

I'm really not a fan of the $(document).ready(fn) shortcut. 我真的不喜欢$(document).ready(fn)快捷方式。 Sure it cuts down on the code but it also cuts way down on the readability of the code. 当然它减少了代码，但它也减少了代码的可读性。 When you see $(document).ready(...) , you know what you're looking at. 当你看到$(document).ready(...) ，你知道你在看什么。 $(...) is used in far too many other ways to immediately make sense. $(...)用于太多其他方式立即有意义。

If you have multiple frameworks you can use jQuery.noConflict(); 如果你有多个框架，你可以使用jQuery.noConflict(); as you say, but you can also assign a different variable for it like this: 如你所说，但你也可以为它分配一个不同的变量：

var $j = jQuery.noConflict();

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

Very useful if you have several frameworks that can be boiled down to $x(...) -style calls. 如果您有几个可以归结为$x(...)式调用的框架，那将非常有用。

#6楼

Judicious use of third-party jQuery scripts, such as form field validation or url parsing. 明智地使用第三方jQuery脚本，例如表单字段验证或URL解析。 It's worth seeing what's about so you'll know when you next encounter a JavaScript requirement. 值得一看的是什么，以便您在下次遇到JavaScript要求时知道。