為指定元素添加 CSS 類：

通過(guò)添加 CSS 類改變?cè)氐耐庥^和感覺，非常干凈的方法，而不是添加內(nèi)聯(lián)樣式。使用 jQuery，這很容易做到：

$('#myelement').addClass('myclass');

從指定元素移除 CSS 類：

你可能覺得添加 CSS 類的操作已經(jīng)灰常牛，但我們還需要知道如何移除不需要的 CSS 類。下面的代碼能做到這一點(diǎn)：

$('#myelement').removeClass('myclass');

檢測(cè)指定元素是否具有某個(gè) CSS 類：

如果應(yīng)用程序或網(wǎng)站經(jīng)常涉及對(duì)指定元素添加或移除 CSS 類，它將變得非常有用，能夠檢測(cè)元素是否具有某個(gè) CSS 類。

$(id).hasClass(class)

使用 jQuery 切換 CSS：

正如我們所看到的，使用 jQuery 添加或移除元素的 CSS 樣式非常簡(jiǎn)單方便。但是如果你要完全移除整個(gè) CSS 文件，并附加新樣式文件呢（例如常見的頁(yè)面顏色切換等效果）？事實(shí)上這相當(dāng)簡(jiǎn)單，如下面的例子所示：

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

來(lái)源：http://addyosmani.com/blog/50-jquery-snippets-for-developers/

向某個(gè)元素追加 HTML 代碼：

當(dāng)你需要向某個(gè)元素追加一些 HTML 內(nèi)容時(shí)，append() 方法省時(shí)省力：

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

檢測(cè)某個(gè)元素是否存在：

當(dāng)使用 JavaScript 進(jìn)行工作時(shí)，我們經(jīng)常需要檢查某個(gè)元素是否存在。使用 jQuery 和 length 長(zhǎng)度屬性，它是非常簡(jiǎn)單的事：如果長(zhǎng)度為 0，頁(yè)面沒有該元素，反之則頁(yè)面中有使用該元素。

if ($('img').length) {  log('We found img elements on the page using "img"');} else {  log('No img elements found');}

來(lái)源：http://jqueryfordesigners.com/element-exists/

獲取指定元素的父級(jí)元素：

使用 DOM 你可能需要知道某個(gè)元素的直接父級(jí)元素。closest() 方法將讓你知道：

var id = $("button").closest("div").attr("id");

來(lái)源：http://stackoverflow.com/questions/545978/finding-the-id-of-a-parent-div-using-jquery

獲取元素的兄弟節(jié)點(diǎn)：

用于得到元素的兄弟節(jié)點(diǎn)的 siblings() 方法是一個(gè)非常方便的工具。如下圖所示，使用這種方法非常簡(jiǎn)單：

$("div").siblings()

從選擇列表中移除選項(xiàng)：
當(dāng)使用選擇列表時(shí)，您可能需要根據(jù)用戶的操作來(lái)更新內(nèi)容。若要?jiǎng)h除一個(gè)選擇列表中的選項(xiàng)，可以使用下面的代碼：

$("#selectList option[value='2']").remove();

來(lái)源：http://calisza.wordpress.com/2009/03/29/6-jquery-snippets-you-can-use-to-manipulate-select-inputs/

獲取列表選項(xiàng)的文本內(nèi)容：

當(dāng)你需要快速檢測(cè)出用戶從選擇菜單中選中的選項(xiàng)時(shí)，這個(gè)方法非常有用。

$('#selectList :selected').text();

在表格中應(yīng)用“斑馬”效果（隔行換色）：

當(dāng)使用表格時(shí)，為了更好的可讀性，隔行換色的風(fēng)格是良好的解決方案。使用 jQuery，這是可以輕松做到這一點(diǎn)，沒有任何額外 HTML 標(biāo)記。

$("tr:odd").addClass("odd");

來(lái)源：http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/

計(jì)算元素的子節(jié)點(diǎn)個(gè)數(shù)：

如果你想看看 #foo 元素包含多少 div 子節(jié)點(diǎn)元素，下面的代碼將讓你知道。簡(jiǎn)單而有效！

$("#foo > div").length

來(lái)源：http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/

最新評(píng)論