jQuery使用之設(shè)置元素樣式用法實(shí)例
本文實(shí)例講述了jQuery使用之設(shè)置元素樣式用法。分享給大家供大家參考。具體分析如下：
css是頁面不能分隔的部分，jQuery中也提供了一些css相關(guān)的實(shí)用的辦法。前面文章中有使用過 addClass()為元素添加css樣式風(fēng)格。這里主要介紹jQuery如何設(shè)置頁面的樣式風(fēng)格。包括添加、刪除、動(dòng)態(tài)切換等。
1. 添加、刪除css類別。
//同時(shí)添加多個(gè)CSS類別
$("img").addClass("css1 css2");
});
如以上代碼對(duì)img元素添加了css1和 css2兩個(gè)樣式
removeClass與addClass方法相對(duì)應(yīng)，這里不再重復(fù)例舉。
2.在類別間動(dòng)態(tài)切換。
很多時(shí)候根據(jù)用戶的操作狀態(tài)，希望某些元素的樣式風(fēng)格在某個(gè)類別之間切換，時(shí)而addClass()類別，時(shí)而removeClass()類別，Jq提供了一個(gè)直接的toggleClass(name)來進(jìn)行類似的操作。
$("p").click(function() {
$(this).toggleClass("css1");
})
});
以上代碼實(shí)現(xiàn)了點(diǎn)擊P元素時(shí)，對(duì)css1樣式不斷切換。toggleClass(name)方式只能設(shè)定一種css類別。不能對(duì)多個(gè)css進(jìn)行切換。
3.直接獲取、設(shè)置樣式。
與attr()方法完全類似，jQuery提供了css()方法直接獲取、設(shè)置元素的樣式風(fēng)格，比如使用css(name)獲取某種樣式的風(fēng)格值。通過css(properties)列表來同事設(shè)置多種樣式，通過css(name,value)設(shè)置元素的某種樣式。
例如：通過設(shè)置鼠標(biāo)mouseover和mouseout事件觸發(fā)css(name,value)來修改顏色標(biāo)記。
$("p").mouseover(function() {
$(this).css("color", "red");
});
$("p").mouseout(function() {
$(this).css("color", "black");
});
});
css方法提供了opacity屬性。并且兼容各種瀏覽器。
如上例子修改，可以通過鼠標(biāo)事件設(shè)置p元素的透明度值。
$("p").mouseover(function() {
$(this).css("opacity", "0.5");
});
$("p").mouseout(function() {
$(this).css("opacity", "1");
});
});
另外在css中提供了hasClass(name)方法判斷某個(gè)元素是否設(shè)置了某個(gè)css類別。返回布爾值。例如:
表達(dá)最后一個(gè)li的css屬性是否包含css1類。和
代碼效果完全相同。
查看jQuery源碼，hasClass方法就是調(diào)運(yùn)is()方法。
return this.is("." + selector);
}
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- JQuery實(shí)現(xiàn)樣式設(shè)置、追加、移除與切換的方法
- jQuery使用CSS()方法給指定元素同時(shí)設(shè)置多個(gè)樣式
- 淺析JQuery UI Dialog的樣式設(shè)置問題
- JQuery設(shè)置文本框和密碼框得到焦點(diǎn)時(shí)的樣式
- JQuery擴(kuò)展插件Validate—4設(shè)置錯(cuò)誤提示的樣式
- jQuery toggle()設(shè)置CSS樣式
- jquery 如何動(dòng)態(tài)添加、刪除class樣式方法介紹
- JQuery中操作Css樣式的方法
- jquery如何改變html標(biāo)簽的樣式(兩種實(shí)現(xiàn)方法)
- jQuery實(shí)現(xiàn)為LI列表前3行設(shè)置樣式的方法【2種方法】
相關(guān)文章
jQuery獲取cookie值及刪除cookie用法實(shí)例
這篇文章主要介紹了jQuery獲取cookie值及刪除cookie用法,實(shí)例分析了jQuery操作cookie時(shí)域和路徑的作用,以及針對(duì)cookie的讀取與刪除技巧,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了jquery.validate使用時(shí)遇到的問題的解決方法的匯總，真是應(yīng)了那句老話，會(huì)者不難難者不會(huì)，這里記錄一下，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要介紹了jQuery中隱藏元素的hide方法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
完美JQuery圖片切換效果的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄昝繨Query圖片切換效果的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
解析prototype,JQuery中跳出each循環(huán)的方法
這篇文章主要介紹了在prototype,JQuery中跳出each循環(huán)的方法。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
JQuery動(dòng)態(tài)創(chuàng)建DOM、表單元素的實(shí)現(xiàn)代碼
代碼很簡單，直接上代碼。別忘記引用JQuery包。2011-08-08
jQuery點(diǎn)擊tr實(shí)現(xiàn)checkbox選中的方法
jQuery點(diǎn)擊tr實(shí)現(xiàn)checkbox選中的方法，需要的朋友可以參考一下2013-03-03
jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹
jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹，需要的朋友可以參考下2012-11-11
詳解Jquery 遍歷數(shù)組之$().each方法與$.each()方法介紹
這篇文章主要介紹了詳解Jquery 遍歷數(shù)組之$().each方法與$.each()方法介紹 ,具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
jQuery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫矩形框示例【可兼容IE8】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫矩形框,結(jié)合實(shí)例形式分析了jQuery基于事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)的圖形繪制相關(guān)操作技巧,需要的朋友可以參考下2019-05-05