<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>window.jQuery || document.write(‘<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>‘)</script>

var $products = $("div.products"); // 慢
var $products = $(".products"); // 快

var $products = $("div.products"); // 慢
var $products = $(".products"); // 快

// 丑陋
$("div.data .gonzalez");

// 优化后
$(".data td.gonzalez");

$(".data table.attendees td.gonzalez");
 
// 好的方式：去掉了中间的冗余
$(".data td.gonzalez");

// 劣质的代码：因为需要遍历整个DOM来找到.class
$(‘.class‘);

// 高品代码：因为只需在指定容器范围内进行查找
$(‘.class‘, ‘#class-container‘);

$(‘div.container > *‘); // 差
$(‘div.container‘).children(); // 棒

$(‘div.someclass :radio‘); // 差
$(‘div.someclass input:radio‘); // 棒

$(‘#outer #inner‘); // 脏
$(‘div#inner‘); // 乱
$(‘.outer-container #inner‘); // 差
$(‘#inner‘); // 干净利落，后台只需调用document.getElementById()

var $myList = $("#list-container > ul").detach();
//...一大堆对$myList的处理
$myList.appendTo("#list-container");

// 这样不好
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
    $myList.append("<li>"+i+"</li>");
}
 
// 这样好
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
    list += "<li>"+i+"</li>";
}
$myList.html(list);
 
// 但这样更好
var array = []; 
for(var i = 0; i < 10000; i++){
    array[i] = "<li>"+i+"</li>"; 
}
$myList.html(array.join(‘‘));

// 无良的做法：jQuery后台要跑完三个函数后才会知道这个元素其实根本不存在
$("#nosuchthing").slideUp();
// 应该这样
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

$("#myLink").on("click", function(){...}); // 表这样
 
// 这样
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);

$(function(){ ... }); // 糟糕的做法：无法利用此函数也无法为其写测试用例
 
// 好的做法
$(initPage); // 抑或 $(document).ready(initPage);
function initPage(){
    // 这里你可以进行程序的初始化了
}

<script src="my-document-ready.js"></script>
<script>
	// 初始化一些必要的全局变量
	$(document).ready(initPage); // 抑或 $(initPage);
</script>

<a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!--不好 -->

$("#myLink").on("click", myEventHandler); // GOOD

$("#myLink").on("click.mySpecialClick", myEventHandler); // 不错
// 之后，让我们优雅地解除绑定
$("#myLink").unbind("click.mySpecialClick");

// 不易阅读的代码...
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});
 
// 更易阅读...
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

$("#parent-container").on("click", "a", delegatedClickHandlerForAjax);

$.ajax({ ... }).then(successHandler, failureHandler);
 
// 抑或
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

var jqxhr = $.ajax({
    url: url,
    type: "GET", // 默认为GET,你可以根据需要更改
    cache: true, // 默认为true,但对于script,jsonp类型为false,可以自行设置
    data: {}, // 将请求参数放这里.
    dataType: "json", // 指定想要的数据类型
    jsonp: "callback", // 指定回调处理JSONP类型的请求
    statusCode: { // 如果你想处理各状态的错误的话
        404: handler404,
        500: handler500
    }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

$("#myDiv").addClass("error").show();

$("#myLink")
    .addClass("bold")
    .on("click", myClickHandler)
    .on("mouseover", myMouseOverHandler)
    .show();

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // 糟糕：调用了三次attr
// 不错，只调用了一次attr
$myLink.attr({
    href: "#",
    title: "my link",
    rel: "external"
});

$("#mydiv").css({‘color‘:red, ‘font-weight‘:‘bold‘}); // 不好

.error {/* 不错 */
    color: red;
    font-weight: bold;
}

$("#mydiv").addClass("error"); 

$("#myId"); // 多少还是会逊色于...
document.getElementById("myId");