1

2

3

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

1

2

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

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

1

2

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

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

1

2

3

4

5

// 丑陋

$("div.data .gonzalez");

// 优化后

$(".data td.gonzalez");

1

2

3

4

$(".data table.attendees td.gonzalez");

// 好的方式：去掉了中间的冗余

$(".data td.gonzalez");

1

2

3

4

5

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

$(‘.class‘);

// 高品代码：因为只需在指定容器范围内进行查找

$(‘.class‘, ‘#class-container‘);

1

2

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

$(‘div.container‘).children(); // 棒

1

2

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

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

1

2

3

4

$(‘#outer #inner‘); // 脏

$(‘div#inner‘); // 乱

$(‘.outer-container #inner‘); // 差

$(‘#inner‘); // 干净利落，后台只需调用document.getElementById()

1

2

3

var $myList = $("#list-container > ul").detach();

//...一大堆对$myList的处理

$myList.appendTo("#list-container");

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

// 这样不好

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(‘‘));

1

2

3

4

5

6

7

// 无良的做法：jQuery后台要跑完三个函数后才会知道这个元素其实根本不存在

$("#nosuchthing").slideUp();

// 应该这样

var $mySelection = $("#nosuchthing");

if ($mySelection.length) {

$mySelection.slideUp();

}

1

2

3

4

5

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

// 这样

function myLinkClickHandler(){...}

$("#myLink").on("click", myLinkClickHandler);

1

2

3

4

5

6

7

$(function(){ ... }); // 糟糕的做法：无法利用此函数也无法为其写测试用例

// 好的做法

$(initPage); // 抑或 $(document).ready(initPage);

function initPage(){

// 这里你可以进行程序的初始化了

}

1

2

3

4

5

<script src="my-document-ready.js"></script>

<script>

// 初始化一些必要的全局变量

$(document).ready(initPage); // 抑或 $(initPage);

</script>

1

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

1

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

1

2

3

$("#myLink").on("click.mySpecialClick", myEventHandler); // 不错

// 之后，让我们优雅地解除绑定

$("#myLink").unbind("click.mySpecialClick");

1

2

3

4

5

6

7

8

9

10

11

// 不易阅读的代码...

$.ajax({

url: "something.php?param1=test1&param2=test2",

....

});

// 更易阅读...

$.ajax({

url: "something.php",

data: { param1: test1, param2: test2 }

});

1

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

1

2

3

4

5

6

$.ajax({ ... }).then(successHandler, failureHandler);

// 抑或

var jqxhr = $.ajax({ ... });

jqxhr.done(successHandler);

jqxhr.fail(failureHandler);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

1

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

1

2

3

4

5

$("#myLink")

.addClass("bold")

.on("click", myClickHandler)

.on("mouseover", myMouseOverHandler)

.show();

1

2

3

4

5

6

7

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // 糟糕：调用了三次attr

// 不错，只调用了一次attr

$myLink.attr({

href: "#",

title: "my link",

rel: "external"

});

1

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

1

2

3

4

.error {/* 不错 */

color: red;

font-weight: bold;

}

1

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

1

2

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

document.getElementById("myId");