英文原文: 50 jQuery Snippets That Will Help You Become A Better JavaScript Developer，翻譯：woiweb

 

PS：原文作者 Addy Osmani 是Google Chrome 團(tuán)隊(duì)成員。

 

本文會(huì)給你們展示50個(gè)jquery代碼片段，這些代碼能夠給你的javascript項(xiàng)目提供幫助。其中的一些代碼段是從jQuery.4.2才開(kāi)始支持的做法，另一些則是真正有用的函數(shù)或方法，它們能夠幫助你又快又好地把事情完成。這些都是我盡量記住的有著最佳性能的代碼段，因此如果你發(fā)現(xiàn)你任何可以做得更好的地方的話，歡迎把你的版本粘貼在評(píng)論中！我希望你在這一文章中能找到有幫助的東西。

 

0. 如何創(chuàng)建嵌套的過(guò)濾器：

//允許你減少集合中的匹配元素的過(guò)濾器，

//只剩下那些與給定的選擇器匹配的部分。在這種情況下，

//查詢刪除了任何沒(méi)（:not）有（:has）

//包含class為“selected”（.selected）的子節(jié)點(diǎn)。

.filter(":not(:has(.selected))")

50個(gè)jQuery代碼段幫你成為更出色的JS開(kāi)發(fā)者

. 如何重用元素搜索

 

var allItems = $("div.item");

var keepList = $("div#container div.item");

//現(xiàn)在你可以繼續(xù)使用這些jQuery對(duì)象來(lái)工作了。例如，

//基于復(fù)選框裁剪“keep list”，復(fù)選框的名稱(chēng)

//符合

< DIV >class names:

$(formToLookAt + " input:checked").each(function() {

    keepList = keepList.filter("." + $(this).attr("name"));

});

< /DIV>

2. 任何使用has()來(lái)檢查某個(gè)元素是否包含某個(gè)類(lèi)或是元素：

//jQuery .4.*包含了對(duì)這一has方法的支持。該方法找出

//某個(gè)元素是否包含了其他另一個(gè)元素類(lèi)或是其他任何的

//你正在查找并要在其之上進(jìn)行操作的東東。

$("input").has(".email").addClass("email_icon");

3. 如何使用jQuery來(lái)切換樣式表

 

 

2

//找出你希望切換的媒體類(lèi)型（media-type），然后把href設(shè)置成新的樣式表。

$('link[media='screen']').attr('href', 'Alternative.css');

4. 如何限制選擇范圍（基于優(yōu)化目的）：

//盡可能使用標(biāo)簽名來(lái)作為類(lèi)名的前綴，

//這樣jQuery就不需要花費(fèi)更多的時(shí)間來(lái)搜索

//你想要的元素。還要記住的一點(diǎn)是，

//針對(duì)于你的頁(yè)面上的元素的操作越具體化，

//就越能降低執(zhí)行和搜索的時(shí)間。

var in_stock = $('#shopping_cart_items input.is_in_stock');

<ul id="shopping_cart_items">

<li><input type="radio" value="Item-X" name="item" class="is_in_stock" /> Item X</li>

<li><input type="radio" value="Item-Y" name="item" class="3-5_days" /> Item Y</li>

<li><input type="radio" value="Item-Z" name="item" class="unknown" /> Item Z</li>

</ul>

5. 如何正確地使用ToggleClass：

//切換（toggle）類(lèi)允許你根據(jù)某個(gè)類(lèi)的

//是否存在來(lái)添加或是刪除該類(lèi)。

//這種情況下有些開(kāi)發(fā)者使用：

a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');

//toggleClass允許你使用下面的語(yǔ)句來(lái)很容易地做到這一點(diǎn)

a.toggleClass('blueButton');

6. 如何設(shè)置IE特有的功能：

 

 

2

3

if ($.browser.msie) {

// Internet Explorer就是個(gè)虐待狂

}

7. 如何使用jQuery來(lái)代替一個(gè)元素：

 

 

$('#thatdiv').replaceWith('fnuh');

8. 如何驗(yàn)證某個(gè)元素是否為空：

 

 

2

3

if ($('#keks').html() == null) {

//什么都沒(méi)有找到;

}

9. 如何從一個(gè)未排序的集合中找出某個(gè)元素的索引號(hào)

 

 

2

3

$("ul > li").click(function () {

    var index = $(this).prevAll().length;

});

0. 如何把函數(shù)綁定到事件上：

 

 

2

3

$('#foo').bind('click', function() {

    alert('User clicked on "foo."');

});

. 如何追加或是添加html到元素中：

 

 

$('#lal').append('sometext');

2. 在創(chuàng)建元素時(shí)，如何使用對(duì)象字面量（literal）來(lái)定義屬性

 

 

var e = $("", { href: "#", class: "a-class another-class", title: "..." });

3. 如何使用多個(gè)屬性來(lái)進(jìn)行過(guò)濾

 

 

2

3

//在使用許多相類(lèi)似的有著不同類(lèi)型的input元素時(shí)，

//這種基于精確度的方法很有用

var elements = $('#someid input[type=sometype][value=somevalue]').get();

4. 如何使用jQuery來(lái)預(yù)加載圖像：

 

 

2

3

4

5

6

7

jQuery.preloadImages = function() {

    for(var i = 0; i < arguments.length; i++) {

        $("<img />").attr('src', arguments[i]);

    }

};

//用法

$.preloadImages('image.gif', '/path/to/image2.png', 'some/image3.jpg');

5. 如何為任何與選擇器相匹配的元素設(shè)置事件處理程序：

 

 

2

3

4

5

6

7

8

9

0

 

2

3

4

$('button.someClass').live('click', someFunction);

//注意，在jQuery .4.2中，delegate和undelegate選項(xiàng)

//被引入代替live，因?yàn)樗鼈兲峁┝烁玫纳舷挛闹С?/div>