jQuery 改變CSS樣式基礎(chǔ)代碼
更新時間：2010年02月11日 12:34:41 作者：
jQuery提供css()的方法來實現(xiàn)嵌入式改變元素樣式，css()方法在使用上具有多樣性。
其中一種接受兩個輸入?yún)?shù)：樣式屬性和樣式值，它們之間用逗號分開。比如我們要改變鏈接顏色，我們可以使用下面的代碼：
$("#61dh a").css('color','#123456');
//這里選擇器‘$("#61dh a")'表示ID為‘#61dh'的元素下的所有鏈接。
//.css(‘color','#123456');表示把顏色設(shè)為'#123456'
如果我們需要改變多個樣式屬性，我們可以先定義屬性變量，然后直接賦值給css()方法。示例如下：
var divcss = {
background: '#EEE',
width: '478px',
margin: '10px 0 0',
padding: '5px 10px',
border: '1px solid #CCC'
};
$("#result").css(divcss);
//這里我們先定義了一個CSS樣式屬性變量‘divcss'，這類似于建立一個外部CSS文件。
//然后通過jQuery提供的css()方法，把屬性賦給ID為'#result'的DIV。
另外jQuery提供的css()方法還可以用來查看某個元素的css屬性值。例如，我們想查看鏈接的顏色，可以使用下面的代碼：
$("#61dh a").css("color")
//和第一個例子相似，但是這里我們只傳遞一個參數(shù)(樣式屬性)
最后要介紹的是如何設(shè)置鼠標(biāo)劃過后的鏈接樣式(比如: 顏色)。我們無法使用選擇器直接選擇鼠標(biāo)劃過狀態(tài)下的鏈接，也就是說$("a:hover")是不成立的。因此我們需要用到j(luò)Query提供的事件類方法 - hover()。值得注意的是，hover()方法需要定義兩個函數(shù)，一個是鼠標(biāo)劃過時；另一個是鼠標(biāo)劃過后。具體方法如下：
$("#61dh a").css('color','#123456');
$("#61dh a").hover(function(){
$(this).css('color','#999');
},
function(){
$(this).css('color','#123456');
});
//hover()方法的兩個函數(shù)使用用逗號分隔
你或許注意到這種方法一點都不簡潔(違背了jQuery的宗旨)，
其實jQuery提供的hover()方法不是用來改變CSS樣式的。在實際運用中，建議使用添加/移出CSS的方法來改變鼠標(biāo)劃過的鏈接樣式。
復(fù)制代碼 代碼如下:
$("#61dh a").css('color','#123456');
//這里選擇器‘$("#61dh a")'表示ID為‘#61dh'的元素下的所有鏈接。
//.css(‘color','#123456');表示把顏色設(shè)為'#123456'
如果我們需要改變多個樣式屬性，我們可以先定義屬性變量，然后直接賦值給css()方法。示例如下：
復(fù)制代碼 代碼如下:
var divcss = {
background: '#EEE',
width: '478px',
margin: '10px 0 0',
padding: '5px 10px',
border: '1px solid #CCC'
};
$("#result").css(divcss);
//這里我們先定義了一個CSS樣式屬性變量‘divcss'，這類似于建立一個外部CSS文件。
//然后通過jQuery提供的css()方法，把屬性賦給ID為'#result'的DIV。
另外jQuery提供的css()方法還可以用來查看某個元素的css屬性值。例如，我們想查看鏈接的顏色，可以使用下面的代碼：
復(fù)制代碼 代碼如下:
$("#61dh a").css("color")
//和第一個例子相似，但是這里我們只傳遞一個參數(shù)(樣式屬性)
最后要介紹的是如何設(shè)置鼠標(biāo)劃過后的鏈接樣式(比如: 顏色)。我們無法使用選擇器直接選擇鼠標(biāo)劃過狀態(tài)下的鏈接，也就是說$("a:hover")是不成立的。因此我們需要用到j(luò)Query提供的事件類方法 - hover()。值得注意的是，hover()方法需要定義兩個函數(shù)，一個是鼠標(biāo)劃過時；另一個是鼠標(biāo)劃過后。具體方法如下：
復(fù)制代碼 代碼如下:
$("#61dh a").css('color','#123456');
$("#61dh a").hover(function(){
$(this).css('color','#999');
},
function(){
$(this).css('color','#123456');
});
//hover()方法的兩個函數(shù)使用用逗號分隔
你或許注意到這種方法一點都不簡潔(違背了jQuery的宗旨)，
其實jQuery提供的hover()方法不是用來改變CSS樣式的。在實際運用中，建議使用添加/移出CSS的方法來改變鼠標(biāo)劃過的鏈接樣式。
相關(guān)文章
如果想要查找到有icon這個class的span除了用原始的代碼還可以用父級查詢的方法進行定位，具體的實現(xiàn)如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
這篇文章主要為大家詳細介紹了jQuery Masonry瀑布流布局神器的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
海量經(jīng)典的jQuery插件帖 可以根據(jù)需要選擇使用2010-01-01
jquery學(xué)習(xí)筆記 用jquery實現(xiàn)無刷新登錄
為了防止以后好久不用生疏，在這里記下，供剛開始學(xué)習(xí)jquery的童鞋們借鑒，我也是剛開始學(xué)jquery，有什么寫的不對的地方，還請大家指出錯誤，共同進步。2011-08-08
json+jQuery實現(xiàn)的無限級樹形菜單效果代碼
這篇文章主要介紹了json+jQuery實現(xiàn)的無限級樹形菜單效果代碼,涉及jquery針對json數(shù)據(jù)的遍歷、讀取及動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
cnblogs TagCloud基于jquery的實現(xiàn)代碼
自創(chuàng)"山寨版"的"博客園"TagCloud!...2010-06-06
IE10中flexigrid無法顯示數(shù)據(jù)的解決方法
這篇文章主要介紹了IE10中flexigrid無法顯示數(shù)據(jù)的解決方法的相關(guān)資料,需要的朋友可以參考下2015-07-07
jQuery模擬360瀏覽器切屏效果幻燈片(附demo源碼下載)
這篇文章主要介紹了jQuery模擬360瀏覽器切屏效果幻燈片,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素樣式的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jQuery實現(xiàn)向下滑出的平滑下拉菜單效果的方法,涉及jquery鼠標(biāo)事件及頁面元素樣式的動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
jQuery移動和復(fù)制dom節(jié)點實用DOM操作案例
復(fù)制節(jié)點也是常用的DOM操作之一，例如很多購物網(wǎng)站的效果,本文將介紹jQuery移動和復(fù)制dom節(jié)點等實用DOM操作，有需的朋友可以參考下2012-12-12