jquery如何改變html標籤的樣式(兩種實作方法)_jquery

對於如何修飾html標籤，這對於js來說，可以透過setAttribute來設定標籤的屬性，透過getAttribute來得到標籤的屬性，而在jq當然也可以實現類似的功能，方法上肯定比js要簡化多了。
一通過修改標籤屬性來改變它的樣式
js設置和獲取標籤的屬性

複製代碼 程式碼如下:

　

jq設定與取得標籤的屬性

複製程式碼

複製程式碼

程式碼

值得注意的是JS的window.onload方法區塊的內容是在JQ的$(function(){})方法區塊執行完成後，再執行的。
二透過修改標籤的css樣式來改變它的樣式

看看基本的語法：複製程式碼

複製程式碼


程式碼如下:

$("#attr").addClass("banner");//新增樣式
$("#attr").removeClass( "banner");//移除樣式

　　　　　　　　　　　　　　　　　　//ＪＱ帶寫法，因為連帶寫法，因為它是使用的").removeClass("banner").addClass("bannerOver"); 下面是一個例子，當在dd標籤上單擊時，將當前dd塊進行高亮顯示

複製程式碼


程式碼如下:



<script> <BR>$(function () { <BR> $('#menu_title').find('dd').click(function () { <BR>$('#menu_title').find('dd').removeClass('cur'); <BR>$ (this).addClass('cur'); <BR>}) <BR>}) <BR></script>

人

一種高級動物

狗

人類的朋友

貓

貓科動物的祖先

下面是為表格的隔行變色效果

複製程式碼


程式碼如下:

.odd { background: #808080; }

. ffd800; } .selected { background: #0094ff; color: #fff; }　　　　 .hover { background: #808080; } 複製程式碼

程式碼如下:

var $trs = $("#menu_title>dd"); //選取所有行$trs.filter(":odd ").addClass("odd"); //為奇數行加上odd樣式$trs.filter(":even").addClass("even"); //為偶數行加上odd樣式

點選行後，讓目前行高亮顯示複製程式碼

程式碼如下:


//點擊行,新增變色樣式
$trs.click(function(e) {
$(this).addClass("selected")
　　　　　　　　　　　　　　　　　　　　、] moveClass("selected" );

})
加入老鼠移入與移出事件

複製程式碼 程式碼如下:

$("#menu_title>dd").hover(
function () {
$(this).addClass("hover");
},
function ( ) {
$(this).removeClass("hover");
}
);


恩，好了對於標籤的樣式控制這塊內容就講到這裡吧，感謝您的閱讀！