以下是一些非常有用的jQuery提示和所有jQuery的开发技巧。我分享这些，因为我认为他们将是非常有用的给你。声明：我没有写下面的代码，但已经从Internet收集各种来源。
1。优化性能复杂的选择
查询DOM中的一个子集，使用复杂的选择时，大幅提高了性能：
2。设置上下文和提高性能
jQuery核心功能上，指定上下文参数。指定context参数，允许从DOM中更深的分支，而不是从DOM根，jQuery来启动。鉴于一个足够大的DOM，指定上下文参数转化为性能提升。
var subset = $("");
$("input[value^='']", subset);
2。设置上下文和提高性能
jQuery核心功能上，指定上下文参数。指定context参数，允许从DOM中更深的分支，而不是从DOM根，jQuery来启动。鉴于一个足够大的DOM，指定上下文参数转化为性能提升。
$("input:radio", document.forms[0]);
3。现场事件处理程序
3。现场事件处理程序
设置任何一个选择的元素相匹配的事件处理程序，即使它被添加后的初始页面加载到DOM：
$('button.someClass').live('click', someFunction);
$('button.someClass').live('click', someFunction);
这允许你通过Ajax加载内容，或通过JavaScript添加事件处理程序的成立为这些元素正确自动。
同样，要停止现场事件处理：
4。检查索引
jQuery有索引，但它是一种痛苦，使用你所需要的元素的列表，并通过元素你想要的指标
var index = e.g $('#ul>li').index( liDomObject );
以下是比较容易：
var index = e.g $('#ul>li').index( liDomObject );
以下是比较容易：
$("ul > li").click(function ()
{
var index = $(this).prevAll().length;
});
如果你想知道在一个集合元素的索引，例如在一个无序列表的列表项：
5。使用jQuery的数据的方法
jQuery的数据（）方法是有用的，不为人所熟知。它可以让你无需修改DOM绑定数据到DOM元素。
$("ul > li").click(function ()
{
var index = $(this).prevAll().length;
});
6。 删除一个元素的淡出效果基本show效果
结合多个jQuery效果，动画和删除DOM元素。
$("#myButton").click(function() {
$("#myDiv").fadeTo("slow", 0.01, function(){ //fade
$(this).slideUp("slow", function() { //slide up
$(this).remove(); //then remove from the DOM
});
});
});
7。检查是否存在一个元素
if ($( "#someDiv" ).length) { //hooray!!! it exists... } 使用下面的代码片段来检查一个元素是否存在与否。
8。添加到DOM中动态创建的元素
使用下面的代码片段来动态创建一个DIV，并添加到DOM。
var newDiv = $( '<div></div>' ); newDiv.attr("id","myNewDiv").appendTo("body");
9。换行符和chainability的
而不是做：
$( "a" ).hide().addClass().fadeIn().hide();
像这样可以增加可读性：
$( "a" ) .hide() .addClass() .fadeIn() .hide();
10。创建自定义选择
$.extend($.expr[ ':' ], { over100pixels: function (a) { return $(a).height() > 100; } }); $( '.box:over100pixels' ).click( function () { alert( 'The element you clicked is over 100 pixels high' ); });
11。克隆在jQuery对象
使用clone（）方法。jQuery的方法克隆任何JavaScript中的DOM对象。
// Clone the DIV var cloned = $( '#somediv' ).clone();
jQuery的clone（）方法不克隆一个JavaScript对象。克隆JavaScript对象，使用下面的代码。
// Shallow copy var newObject = jQuery.extend({}, oldObject); // Deep copy var newObject = jQuery.extend( true , {}, oldObject);
12。测试，如果事情是隐藏使用jQuery
我们使用。隐藏（）。在jQuery的show（）方法来改变元素的知名度。使用以下代码来检查一个元素是否是可见或不可见。
if ($(element).is( ":visible" ) == "true" ) { //The element is Visible }
13。另一种方式的文件准备就绪
//Instead of $(document).ready( function () { //document ready }); //Use $( function (){ //document ready });
14。选择一个元素。（期），在它的ID
在选择使用反斜杠来选择的元素，在它的ID期间。
$( "#Address\\.Street" ).text( "Enter this field" );
15。计数的直接子元素
如果你要计算所有的div＃foo的元素存在于
<div id="foo">
<div id="bar"></div>
<div id="baz">
<div id="biz">
</div>
<span><span>
</div>
//jQuery code to count child elements
$("#foo > div").size()
16。做一个“闪存”的元素
16。做一个“闪存”的元素
jQuery.fn.flash = function ( color, duration ) { var current = this .css( 'color' ); this .animate( { color: 'rgb(' + color + ')' }, duration / 2 ); this .animate( { color: current }, duration / 2 ); } //Then use the above function as: $( '#importantElement' ).flash( '255,0,0' , 1000 );
17。中心元素在屏幕上
jQuery.fn.center = function () { this .css( "position" , "absolute" ); this .css( "top" , ( $(window).height() - this .height() ) / 2+$(window).scrollTop() + "px" ); this .css( "left" , ( $(window).width() - this .width() ) / 2+$(window).scrollLeft() + "px" ); return this ; } //Use the above function as: $(element).center();
18。获取父div使用最接近
如果你想找到的包装纸DIV元素（不论该DIV的ID），然后你会想这个jQuery选择：
$( "#searchBox" ).closest( "div" );
19。禁用右键单击上下文菜单
还有许多JavaScript片段禁用右键
单击上下文菜单，但jQuery让事情容易多了：
$(document).ready( function (){ $(document).bind( "contextmenu" , function (e){ return false ; }); });
20。获取鼠标光标的X和Y轴
这个脚本会显示X和Y值 - 鼠标指针的坐标。
$().mousemove( function (e){ //display the x and y axis values inside the P element $( 'p' ).html( "X Axis : " + e.pageX + " | Y Axis " + e.pageY); });