一些有用的JavaScript和jQuery的片段分享
為指定元素添加 CSS 類(lèi):
通過(guò)添加 CSS 類(lèi)改變?cè)氐耐庥^(guān)和感覺(jué),非常干凈的方法,而不是添加內(nèi)聯(lián)樣式。使用 jQuery,這很容易做到:
$('#myelement').addClass('myclass');
從指定元素移除 CSS 類(lèi):
你可能覺(jué)得添加 CSS 類(lèi)的操作已經(jīng)灰常牛,但我們還需要知道如何移除不需要的 CSS 類(lèi)。下面的代碼能做到這一點(diǎn):
$('#myelement').removeClass('myclass');
檢測(cè)指定元素是否具有某個(gè) CSS 類(lèi):
如果應(yīng)用程序或網(wǎng)站經(jīng)常涉及對(duì)指定元素添加或移除 CSS 類(lèi),它將變得非常有用,能夠檢測(cè)元素是否具有某個(gè) CSS 類(lèi)。
$(id).hasClass(class)
使用 jQuery 切換 CSS:
正如我們所看到的,使用 jQuery 添加或移除元素的 CSS 樣式非常簡(jiǎn)單方便。但是如果你要完全移除整個(gè) CSS 文件,并附加新樣式文件呢(例如常見(jiàn)的頁(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è)面沒(méi)有該元素,反之則頁(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ù)用戶(hù)的操作來(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è)出用戶(hù)從選擇菜單中選中的選項(xiàng)時(shí),這個(gè)方法非常有用。
$('#selectList :selected').text();
在表格中應(yīng)用“斑馬”效果(隔行換色):
當(dāng)使用表格時(shí),為了更好的可讀性,隔行換色的風(fēng)格是良好的解決方案。使用 jQuery,這是可以輕松做到這一點(diǎn),沒(méi)有任何額外 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/
相關(guān)文章
jquery實(shí)現(xiàn)metro效果示例代碼
metro效果想必大家并不陌生吧,下面為大家講解下在jquery中時(shí)如何實(shí)現(xiàn)的,新手朋友們可不要錯(cuò)過(guò)了2013-09-09
easyUI使用分頁(yè)過(guò)濾器對(duì)數(shù)據(jù)進(jìn)行分頁(yè)操作實(shí)例分析
這篇文章主要介紹了easyUI使用分頁(yè)過(guò)濾器對(duì)數(shù)據(jù)進(jìn)行分頁(yè)操作,結(jié)合實(shí)例形式詳細(xì)分析了easyUI分頁(yè)過(guò)濾器對(duì)數(shù)據(jù)進(jìn)行分頁(yè)操作具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-06-06
jquery實(shí)現(xiàn)很酷的網(wǎng)頁(yè)頂部圖標(biāo)下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)很酷的網(wǎng)頁(yè)頂部圖標(biāo)下拉菜單效果,效果非常美觀(guān)大方,通過(guò)鼠標(biāo)hover事件及頁(yè)面元素的遍歷與樣式操作實(shí)現(xiàn)該功能,需要的朋友可以參考下2015-08-08
jQuery實(shí)現(xiàn)經(jīng)典的網(wǎng)頁(yè)3D輪播圖封裝功能【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)經(jīng)典的網(wǎng)頁(yè)3D輪播圖封裝功能,結(jié)合實(shí)例形式詳細(xì)分析了基于jQuery插件Figure_3D.js實(shí)現(xiàn)3D輪播圖功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
jquery插件corner實(shí)現(xiàn)圓角邊框的方法
這篇文章主要介紹了jquery插件corner實(shí)現(xiàn)圓角邊框的方法,實(shí)例分析了jQuery插件corner的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery學(xué)習(xí)之DOM節(jié)點(diǎn)的插入方法總結(jié)
這篇文章主要給大家介紹了jQuery中DOM節(jié)點(diǎn)的插入方法,文章總結(jié)的很全面,相信對(duì)大家具有一定的參考價(jià)值,需要的朋友們一起來(lái)看看吧。2017-01-01
jquery實(shí)現(xiàn)選中單選按鈕下拉伸縮效果
這篇文章主要介紹了jquery實(shí)現(xiàn)選中單選按鈕下拉伸縮效果的方法,涉及jquery鼠標(biāo)事件及頁(yè)面元素樣式的動(dòng)態(tài)操作技巧,該功能可用于動(dòng)態(tài)顯示特定內(nèi)容(如發(fā)票打印等),需要的朋友可以參考下2015-08-08

