jQuery几乎无处不在，您可以在当今可用的著名网站上找到它，包括社交网站，微型博客等。jQuery确实很酷，而且非常有用，但是有时最好看看它的不同之处或另一面。 或对此进行改进。

改进jQuery将使您的网站加载速度更快，并执行类似的操作以帮助您的网站脱颖而出。 这可能包括jQuery脚本或通过Google代码或类似的代码。 就像我说的，最好是改进或编辑将由您的网站使用的jQuery插件或语法，以使其更加突出。

我在这里列出的十个技巧可以改善您的jQuery。

1.“就绪”事件的快捷方式

您是否讨厌输入？ 

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

好吧，您可以为此做一个捷径，试试这个： 

$(function (){
		// your code
	});

2.元素检查器

在操作元素之前，请确保检查该元素是否确实存在于页面上。 使用以下简单但不明显的代码： 

if ($('#myDiv).length) {
		// your code
	}

3.使用其他框架时正确重命名jQuery对象

使用noconflict（）jQuery函数来控制$的返回值，并允许您自己设置自己的变量名。 

var $j = jQuery.noConflict();
	$j('#myDiv').hide();

4.压缩您的jQuery脚本

一个大项目可能也意味着很多jQuery插件的使用。 但是请注意，这可能会减慢您的页面速度，因此您应该使用Dean Edwards的Packer压缩所有jQuery。 这是一个基于网络的JavaScript压缩程序。

5.最小化DOM操作

诸如.prepend（）.append（）.wrap（）和.after（）之类的DOM插入操作确实会使速度变慢。 您可以更快地编写代码； 您需要做的就是通过使用串联构建列表，然后，仅需使用函数即可将它们添加到无序的列表中，例如.html（）会更快。

例： 

var myList = $('#myList');

	for (i=0; i<1000; i++){
		myList.append('This is list item ' + i);
	}
	That example is relatively slow, but if you build the list item as a string and use the html method to do the insertion. You might want to try the following instead:
	Example:
	var myList = $('.myList');
	var myListItems = '';

	for (i = 0; i This is list item ' + i + '';
	}

	myList.html(myListItems);

那将使页面加载更快！

6.为选择器提供上下文

通常，如果使用$（'。myDiv'）这样的选择器，则肯定会遍历DOM，这取决于页面是否昂贵。
执行选择将使jQuery使用第二个参数。
jQuery（表达式，上下文）
通过将上下文放入单个选择器中，您将为该选择器提供一个以其开头的元素，因此它不必遍历整个DOM。

之前： 

var selectedItem = $('#listItem' + i);

后： 




var selectedItem = $('#listItem' + i, $('.myList'));

那应该加快速度！

7.正确使用动画

动画是jQuery的核心力量。 它真的很酷，并提供非常醒目的效果。
jQuery的.animate（）方法非常易于使用且功能强大。 如果您在内部查看代码，那么这些方法将被简化并使用.animate（）函数。

例： 

slideDown: function(speed,callback){
		return this.animate({height: "show"}, speed, callback);
	},

	fadeIn: function(speed, callback){
		return this.animate({opacity: "show"}, speed, callback);
	}

animate（）函数仅更改元素的CSS属性，例如高度，宽度，颜色，不透明度，背景颜色等。

例： 

$('#myList li').mouseover(function() {
		$(this).animate({"height": 100}, "slow");
	});

与jQuery其他功能不同，动画会自动排队。 如果要在第一个动画完成时执行另一个动画，则只需调用animate方法两次。
例： 

$('#myBox').mouseover(function() {
		$(this).animate({ "width": 200 }, "slow");
		$(this).animate({"height": 200}, "slow");
	});

如果要多个动画，请按照以下方式进行操作： 

$('#myBox').mouseover(function() {
		$(this).animate({ "width": 200, "height": 200 }, "slow");
	});

8.做自己的选择器

jQuery有许多内置的选择器，可以通过ID，标签，属性等选择元素。 但是，如果需要基于jQuery没有选择器的其他元素来选择元素，该怎么办。
可能您应该从一开始就将类添加到元素，并使用它们来选择它们。 但这超出了jQuery易于扩展以添加新选择器的目的。

例： 

$.extend($.expr[':'], {
		over100pixels: function(a) {
			return $(a).height() > 100;
		}
	});
$('.box:over100pixels').click(function() {
		alert('The element you clicked is over 100 pixels high');
	});

在第一个代码块中创建自定义选择器，该代码查找任何高度超过100像素的元素。

9.加快内容加载以获得SEO的好处

如果您认为如果整理HTML代码，则可以使页面加载更快。 没错，搜索蜘蛛过于懒惰，无法在页面其余部分加载后使用AJAX请求加载整个代码。 用户可以立即开始浏览，并且蜘蛛程序只会看到您希望它们索引的内容。

例： 

$('#forms').load('content/headerForms.html', function() {
		// Code here runs once the content has loaded
		// Put all your event handlers etc. here.
	});