亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery使用之設(shè)置元素樣式用法實(shí)例

 更新時(shí)間：2015年01月19日 10:24:46   投稿：shichen2014  
這篇文章主要介紹了jQuery使用之設(shè)置元素樣式用法,實(shí)例分析了jQuery如何設(shè)置頁(yè)面的樣式風(fēng)格,包括添加、刪除、動(dòng)態(tài)切換等的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery使用之設(shè)置元素樣式用法。分享給大家供大家參考。具體分析如下：

css是頁(yè)面不能分隔的部分，jQuery中也提供了一些css相關(guān)的實(shí)用的辦法。前面文章中有使用過 addClass()為元素添加css樣式風(fēng)格。這里主要介紹jQuery如何設(shè)置頁(yè)面的樣式風(fēng)格。包括添加、刪除、動(dòng)態(tài)切換等。

1. 添加、刪除css類別。

復(fù)制代碼 代碼如下:
$(function() {
    //同時(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)來(lái)進(jìn)行類似的操作。

復(fù)制代碼 代碼如下:
$(function() {
 $("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)列表來(lái)同事設(shè)置多種樣式，通過css(name,value)設(shè)置元素的某種樣式。

例如：通過設(shè)置鼠標(biāo)mouseover和mouseout事件觸發(fā)css(name,value)來(lái)修改顏色標(biāo)記。

復(fù)制代碼 代碼如下:
$(function() {
 $("p").mouseover(function() {
     $(this).css("color", "red");
 });
 $("p").mouseout(function() {
     $(this).css("color", "black");
 });
});

css方法提供了opacity屬性。并且兼容各種瀏覽器。

如上例子修改，可以通過鼠標(biāo)事件設(shè)置p元素的透明度值。

復(fù)制代碼 代碼如下:
$(function() {
 $("p").mouseover(function() {
     $(this).css("opacity", "0.5");
 });
 $("p").mouseout(function() {
     $(this).css("opacity", "1");
 });
});

另外在css中提供了hasClass(name)方法判斷某個(gè)元素是否設(shè)置了某個(gè)css類別。返回布爾值。例如:

復(fù)制代碼 代碼如下:
$("li:last").hasClass("css1")

表達(dá)最后一個(gè)li的css屬性是否包含css1類。和
復(fù)制代碼 代碼如下:
$("li:last").is(".css1")

代碼效果完全相同。

查看jQuery源碼，hasClass方法就是調(diào)運(yùn)is()方法。

復(fù)制代碼 代碼如下:
hasClass: function(selector) {
 return this.is("." + selector);
}

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論