一些有用的JavaScript和jQuery的片段分享
為指定元素添加 CSS 類:
通過添加 CSS 類改變元素的外觀和感覺,非常干凈的方法,而不是添加內(nèi)聯(lián)樣式。使用 jQuery,這很容易做到:
$('#myelement').addClass('myclass');
從指定元素移除 CSS 類:
你可能覺得添加 CSS 類的操作已經(jīng)灰常牛,但我們還需要知道如何移除不需要的 CSS 類。下面的代碼能做到這一點:
$('#myelement').removeClass('myclass');
檢測指定元素是否具有某個 CSS 類:
如果應(yīng)用程序或網(wǎng)站經(jīng)常涉及對指定元素添加或移除 CSS 類,它將變得非常有用,能夠檢測元素是否具有某個 CSS 類。
$(id).hasClass(class)
使用 jQuery 切換 CSS:
正如我們所看到的,使用 jQuery 添加或移除元素的 CSS 樣式非常簡單方便。但是如果你要完全移除整個 CSS 文件,并附加新樣式文件呢(例如常見的頁面顏色切換等效果)?事實上這相當(dāng)簡單,如下面的例子所示:
$('link[media='screen']').attr('href', 'Alternative.css');
來源:http://addyosmani.com/blog/50-jquery-snippets-for-developers/
向某個元素追加 HTML 代碼:
當(dāng)你需要向某個元素追加一些 HTML 內(nèi)容時,append() 方法省時省力:
$('#lal').append('sometext');
檢測某個元素是否存在:
當(dāng)使用 JavaScript 進行工作時,我們經(jīng)常需要檢查某個元素是否存在。使用 jQuery 和 length 長度屬性,它是非常簡單的事:如果長度為 0,頁面沒有該元素,反之則頁面中有使用該元素。
if ($('img').length) { log('We found img elements on the page using "img"');} else { log('No img elements found');}
來源:http://jqueryfordesigners.com/element-exists/
獲取指定元素的父級元素:
使用 DOM 你可能需要知道某個元素的直接父級元素。closest() 方法將讓你知道:
var id = $("button").closest("div").attr("id");
來源:http://stackoverflow.com/questions/545978/finding-the-id-of-a-parent-div-using-jquery
獲取元素的兄弟節(jié)點:
用于得到元素的兄弟節(jié)點的 siblings() 方法是一個非常方便的工具。如下圖所示,使用這種方法非常簡單:
$("div").siblings()
從選擇列表中移除選項:
當(dāng)使用選擇列表時,您可能需要根據(jù)用戶的操作來更新內(nèi)容。若要刪除一個選擇列表中的選項,可以使用下面的代碼:
$("#selectList option[value='2']").remove();
來源:http://calisza.wordpress.com/2009/03/29/6-jquery-snippets-you-can-use-to-manipulate-select-inputs/
獲取列表選項的文本內(nèi)容:
當(dāng)你需要快速檢測出用戶從選擇菜單中選中的選項時,這個方法非常有用。
$('#selectList :selected').text();
在表格中應(yīng)用“斑馬”效果(隔行換色):
當(dāng)使用表格時,為了更好的可讀性,隔行換色的風(fēng)格是良好的解決方案。使用 jQuery,這是可以輕松做到這一點,沒有任何額外 HTML 標(biāo)記。
$("tr:odd").addClass("odd");
來源:http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/
計算元素的子節(jié)點個數(shù):
如果你想看看 #foo 元素包含多少 div 子節(jié)點元素,下面的代碼將讓你知道。簡單而有效!
$("#foo > div").length
來源:http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/
相關(guān)文章
jQuery實現(xiàn)發(fā)送驗證碼控制按鈕禁用功能
最近接到新需求,需要實現(xiàn)一個點擊發(fā)送驗證碼之后,按鈕禁用,在5秒之后取消禁用,看似需求很簡單,實現(xiàn)起來還真的好好動動腦筋,下面小編把jquery控制按鈕禁用核心代碼分享給大家,需要的朋友參考下吧2021-07-07jquery快捷動態(tài)綁定鍵盤事件的操作函數(shù)代碼
動態(tài)綁定鍵盤事件的方法或許會有很多,在本文將為大家介紹下jquery是如何快捷實現(xiàn)的,感興趣的朋友不要錯過2013-10-10jQuery Selectors(選擇器)的使用(七、子元素篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實例方式進行講述,以簡單,全面為基礎(chǔ),不會涉及很深,我的學(xué)習(xí)方法:先入門,后進階!2009-12-12