如果说 jquery 有一点坏的话，那就是它的入门水平低得惊人，以至于它往往会吸引那些对 javascript 没有一点了解的人。现在，一方面，这太棒了。然而，另一方面，它也会导致一些，坦率地说，令人厌恶的糟糕代码（其中一些是我自己编写的！）。
不过没关系；糟糕得可怕的代码甚至会让你的祖母喘不过气来，这是一种成人仪式。关键是要翻过山，这就是我们今天教程中要讨论的内容。
1。 方法返回 jquery 对象请务必记住，大多数方法都会返回 jquery 对象。这非常有用，并且允许我们经常使用的链接功能。
$somediv .attr('class', 'someclass') .hide() .html('new stuff');
知道 jquery 对象总是被返回，我们有时可以使用它来删除多余的代码。例如，考虑以下代码：
var somediv = $('#somediv');somediv.hide();
我们之所以“缓存” somediv 元素的位置，是为了将我们必须遍历该元素的 dom 的次数限制为一次。
上面的代码完全没问题；但是，您可以轻松地将两条线合并为一条线，同时获得相同的结果。
var somediv = $('#somediv').hide();
这样，我们仍然隐藏 somediv 元素，但正如我们所知，该方法也返回 jquery 对象——然后通过 somediv 变量引用该对象。
2。 查找选择器只要你的选择器不是糟糕得离谱，jquery 就会尽可能地优化它们，而且你通常不需要太担心它们。不过，话虽如此，您可以进行一些改进，从而稍微提高脚本的性能。
一种这样的解决方案是在可能的情况下使用 find() 方法。如果没有必要的话，关键是不要强迫 jquery 使用它的 sizzle 引擎。当然，有时这是不可能的——但这没关系；但是，如果您不需要额外的开销，就不要寻找它。
// fine in modern browsers, though sizzle does begin running$('#somediv p.someclass').hide();// better for all browsers, and sizzle never inits.$('#somediv').find('p.someclass').hide();
最新的现代浏览器支持 queryselectorall，它允许您传递类似 css 的选择器，而不需要 jquery。 jquery 本身也会检查此函数。
但是，较旧的浏览器（即 ie6/ie7）不提供支持，这是可以理解的。这意味着这些更复杂的选择器会触发 jquery 的完整 sizzle 引擎，该引擎虽然很出色，但确实会带来更多的开销。
sizzle 是一大堆我可能永远无法理解的精彩代码。然而，在一句话中，它首先将您的选择器变成一个由选择器的每个组件组成的“数组”。
// rough idea of how it works ['#somediv, 'p'];
然后，从右到左，开始使用正则表达式破译每个项目。这也意味着选择器的最右侧部分应尽可能具体 - 例如，id 或标记名称。
底线，如果可能的话：
保持选择器简单 利用 find() 方法。这样，我们就可以继续使用浏览器的原生功能，而不是使用 sizzle。 使用 sizzle 时，尽可能优化选择器的最右侧部分。 上下文？ 还可以向选择器添加上下文，例如：
$('.someelements', '#somecontainer').hide();
此代码指示 jquery 在 jquery 中使用 someelements 类（它们是 somecontainer 的子级）包装所有元素的集合。使用上下文是限制 dom 遍历的一种有用方法，但在幕后，jquery 使用 find 方法来代替。
$('#somecontainer') .find('.someelements') .hide();
证明// handle: $(expr, context)// (which is just equivalent to: $(context).find(expr)} else { return jquery( context ).find( selector );}
3。 不要滥用$(this) 在不了解各种 dom 属性和功能的情况下，很容易不必要地滥用 jquery 对象。例如：
$('#someanchor').click(function() { // bleh alert( $(this).attr('id') );});
如果我们对 jquery 对象的唯一需要是访问锚标记的 id 属性，那么这是浪费的。最好坚持使用“原始”javascript。
$('#someanchor').click(function() { alert( this.id );});
请注意，应该始终通过 jquery 访问三个属性：“src”、“href”和“style”。这些属性需要在旧版本的 ie 中使用 getattribute。
证明// jquery sourcevar rspecialurl = /href|src|style/;// ... var special = rspecialurl.test( name );// ...var attr = !jquery.support.hrefnormalized && notxml && special ? // some attributes require a special call on ie elem.getattribute( name, 2 ) : elem.getattribute( name );
多个 jquery 对象 更糟糕的是重复查询 dom 和创建多个 jquery 对象的过程。
$('#elem').hide(); $('#elem').html('bla'); $('#elem').otherstuff();
希望您已经意识到这段代码的效率有多低。如果没有，也没关系；我们都在学习。答案是要么实现链接，要么“缓存” #elem 的位置。
// this works better $('#elem') .hide() .html('bla') .otherstuff(); // or this, if you prefer for some reason. var elem = $('#elem'); elem.hide(); elem.html('bla'); elem.otherstuff();
4。 jquery的简写ready方法使用 jquery 监听文档何时准备好进行操作是非常简单的。
$(document).ready(function() { // let's get up in heeya});
不过，您很可能遇到过不同的、更令人困惑的包装函数。
$(function() { // let's get up in heeya});
尽管后者的可读性稍差，但上面的两个片段是相同的。不相信我？只需检查 jquery 源代码即可。
// handle: $(function)// shortcut for document readyif ( jquery.isfunction( selector ) ) { return rootjquery.ready( selector );}
rootjquery 只是对根 jquery(document) 的引用。当您将选择器传递给 jquery 函数时，它将确定您传递的选择器类型：字符串、标记、id、函数等。如果传递了函数，jquery 将调用其 ready() 方法，并将您的匿名函数作为选择器传递。
5。 保证代码安全如果开发用于分发的代码，补偿任何可能的名称冲突始终很重要。如果在您的脚本之后导入的某些脚本也具有 $ 函数，会发生什么情况？坏东西！
答案是要么调用 jquery 的 noconflict()，要么将代码存储在自调用匿名函数中，然后将 jquery 传递给它。
方法一：无冲突 var j = jquery.noconflict();// now, instead of $, we use j. j('#somediv').hide();// the line below will reference some other library's $ function.$('somediv').style.display = 'none';
请小心使用此方法，并在分发代码时尽量不要使用它。这真的会让脚本的用户感到困惑！ :)
方法二：传递jquery(function($) { // within this function, $ will always refer to jquery})(jquery);
底部的最后一个括号自动调用该函数 - function(){}()。然而，当我们调用该函数时，我们还传递了 jquery，然后用 $ 表示。
方法3：通过ready方法传递$ jquery(document).ready(function($) { // $ refers to jquery});// $ is either undefined, or refers to some other library's function.
6。 要聪明请记住 - jquery 只是 javascript。不要假设它有能力弥补你的错误编码。 :)
这意味着，正如我们必须优化 javascript for 语句等内容一样，jquery 的 each 方法也是如此。我们为什么不呢？它只是一个辅助方法，然后在幕后创建 for 语句。
// jquery's each method source each: function( object, callback, args ) { var name, i = 0, length = object.length, isobj = length === undefined || jquery.isfunction(object); if ( args ) { if ( isobj ) { for ( name in object ) { if ( callback.apply( object[ name ], args ) === false ) { break; } } } else { for ( ; i < length; ) { if ( callback.apply( object[ i++ ], args ) === false ) { break; } } } // a special, fast, case for the most common use of each } else { if ( isobj ) { for ( name in object ) { if ( callback.call( object[ name ], name, object[ name ] ) === false ) { break; } } } else { for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ) {} } } return object; }
太糟糕了 somedivs.each(function() { $('#anotherdiv')[0].innerhtml += $(this).text();});
每次迭代搜索 anotherdiv 获取innerhtml 属性两次 创建一个新的 jquery 对象，全部用于访问元素的文本。 更好var somedivs = $('#container').find('.somedivs'), contents = [];somedivs.each(function() { contents.push( this.innerhtml );});$('#anotherdiv').html( contents.join('') );
这样，在 each (for) 方法中，我们执行的唯一任务就是向数组添加一个新键...而不是查询 dom，两次获取元素的 innerhtml 属性，等等
这篇技巧总体上更多地基于 javascript，而不是特定于 jquery。 重点是要记住 jquery 并不能弥补糟糕的编码。
文档片段 当我们这样做时，针对此类情况的另一种选择是使用文档片段。
var someuls = $('#container').find('.someuls'), frag = document.createdocumentfragment(), li; someuls.each(function() { li = document.createelement('li'); li.appendchild( document.createtextnode(this.innerhtml) ); frag.appendchild(li);});$('#anotherul')[0].appendchild( frag );
这里的关键是，有多种方法可以完成这样的简单任务，并且每种方法在浏览器之间都有自己的性能优势。您越坚持使用 jquery 并学习 javascript，您可能还会发现您更频繁地引用 javascript 的本机属性和方法。如果是这样，那就太棒了！
jquery 提供了令人惊叹的抽象级别，您应该利用它，但这并不意味着您被迫使用它的方法。例如，在上面的片段示例中，我们使用 jquery 的 each 方法。如果您更喜欢使用 for 或 while 语句，那也没关系！
尽管如此，请记住 jquery 团队已经对该库进行了大量优化。关于 jquery 的 each() 与本机 for 语句的争论是愚蠢而琐碎的。如果您在项目中使用 jquery，请使用它们的帮助器方法来节省时间。这就是他们存在的目的！ :)
7。 ajax 方法如果您现在才开始深入研究 jquery，它为我们提供的各种 ajax 方法可能会让人感到有点畏惧；尽管他们不需要。事实上，它们中的大多数只是简单的辅助方法，直接路由到 $.ajax。
获取 getjson 帖子 ajax 作为示例，让我们回顾一下 getjson，它允许我们获取 json。
$.getjson('path/to/json', function(results) { // callback // results contains the returned data object});

在幕后，该方法首先调用 $.get。
getjson: function( url, data, callback ) { return jquery.get(url, data, callback, json);}
$.get 然后编译传递的数据，并再次调用“master”（某种意义上的）$.ajax 方法。
get: function( url, data, callback, type ) { // shift arguments if data argument was omited if ( jquery.isfunction( data ) ) { type = type || callback; callback = data; data = null; } return jquery.ajax({ type: get, url: url, data: data, success: callback, datatype: type });}
最后，$.ajax 执行了大量工作，使我们能够在所有浏览器上成功发出异步请求！
这意味着您也可以直接使用 $.ajax 方法来处理您的所有 ajax 请求。其他方法只是辅助方法，无论如何最终都会执行此操作。所以，如果你愿意的话，就可以去掉中间人。无论如何，这都不是一个重要的问题。
只是花花公子 $.getjson('path/to/json', function(results) { // callback // results contains the returned data object});

微观上更高效 $.ajax({ type: 'get', url : 'path/to/json', data : yourdata, datatype : 'json', success : function( results ) { console.log('success'); })});
8。 访问本机属性和方法现在您已经学习了一些 javascript，并且已经了解，例如，在锚标记上，您可以直接访问属性值：
var anchor = document.getelementbyid('someanchor'); //anchor.id// anchor.href// anchor.title// .etc
唯一的问题是，当您使用 jquery 引用 dom 元素时，这似乎不起作用，对吗？当然不是。
不起作用 // fails var id = $('#someanchor').id;
因此，如果您需要访问 href 属性（或任何其他本机属性或方法），您有多种选择。
// option 1 - use jqueryvar id = $('#someanchor').attr('id');// option 2 - access the dom elementvar id = $('#someanchor')[0].id;// option 3 - use jquery's get methodvar id = $('#someanchor').get(0).id;// option 3b - don't pass an index to getanchorsarray = $('.someanchors').get();var thirdid = anchorsarray[2].id;
get 方法特别有用，因为它可以将 jquery 集合转换为数组。
9。 使用 php 检测 ajax 请求 当然，对于我们的绝大多数项目，我们不能仅仅依赖 javascript 来完成诸如验证或 ajax 请求之类的事情。当 javascript 关闭时会发生什么？正是出于这个原因，一种常见的技术是检测 ajax 请求是否是使用您选择的服务器端语言发出的。
jquery 通过在 $.ajax 方法中设置标头，使这变得异常简单。
// set header so the called script knows that it's an xmlhttprequest// only send the header if it's not a remote xhrif ( !remote ) { xhr.setrequestheader(x-requested-with, xmlhttprequest);}
设置此标头后，我们现在可以使用 php（或任何其他语言）检查此标头，并进行相应操作。为此，我们检查 $_server['http_x_requested_with'] 的值。
包装器function isxhr() { return $_server['http_x_requested_with'] === 'xmlhttprequest';}
10。 jquery 和 $ 有没有想过为什么/如何可以互换使用 jquery 和 $ ？要找到答案，请查看 jquery 源代码，然后滚动到最底部。在那里，您会看到：
window.jquery = window.$ = jquery;
当然，整个 jquery 脚本都包含在一个自执行函数中，这允许脚本尽可能地限制全局变量的数量。但这也意味着 jquery 对象在包装匿名函数之外不可用。
为了解决这个问题，jquery 被暴露给全局 window 对象，并且在此过程中，还会创建一个别名 - $ -。
11。 有条件地加载 jquery html5 boilerplate 提供了一个漂亮的单行代码，如果由于某种奇怪的原因您选择的 cdn 出现故障，它将加载 jquery 的本地副本。
<!-- grab google cdn jquery. fall back to local if necessary --><script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script><script>!window.jquery && document.write('<script src=js/jquery-1.4.2.min.js><\/script>')</script>
“表述”上面的代码：如果 window.jquery 未定义，则从 cdn 下载脚本时一定出现问题。在这种情况下，请继续到 && 运算符的右侧，并插入链接到本地​​版本 jquery 的脚本。
12。 jquery 过滤器
高级会员：下载此视频（必须登录）
订阅我们的 youtube 页面以观看所有视频教程！
<script> $('p:first').data('info', 'value'); // populates $'s data object to have something to work with $.extend( jquery.expr[:], { block: function(elem) { return $(elem).css(display) === block; }, hasdata : function(elem) { return !$.isemptyobject( $(elem).data() ); } } ); $(p:hasdata).text(has data); // grabs paras that have data attached $(p:block).text(are block level); // grabs only paragraphs that have a display of block</script>
注意：jquery.expr[':'] 只是 jquery.expr.filters 的别名。
13。 单一悬停功能从 jquery 1.4 开始，我们现在只能将单个函数传递给 hover 方法。以前，in 和 out 方法都是必需的。
之前$('#someelement').hover(function() { // mouseover}, function() { // mouseout});
现在$('#someelement').hover(function() { // the toggle() method can be used here, if applicable});
请注意，这不是旧协议与新协议的比较。很多时候，您仍然需要将两个函数传递给 hover，这是完全可以接受的。但是，如果您只需要切换某些元素（或类似的元素），则传递单个匿名函数将节省一些字符左右！
14。 传递属性对象从 jquery 1.4 开始，我们现在可以传递一个对象作为 jquery 函数的第二个参数。当我们需要向 dom 中插入新元素时，这非常有用。例如：
之前$('<a />') .attr({ id : 'someid', classname : 'someclass', href : 'somepath.html' });
之后$('</a>', { id : 'someid', classname : 'someclass', href : 'somepath.html'});
这不仅可以节省一些字符，而且还可以使代码更加简洁。除了元素属性之外，我们甚至可以传递 jquery 特定的属性和事件，例如 click 或 text。
感谢您的阅读！以上就是提高您技能的 14 个 jquery 技巧、提醒和最佳实践的详细内容。