對於如何修飾HTML標籤,這對於JS來說,可以通過setAttribute來設定標籤的屬性,通過getAttribute來得到標籤的屬性,而在JQ中當然也可以實現類似的功能,方法上肯定比JS要簡化多了。
一 通過修改標籤屬性來改變它的樣式
JS設定和獲取標籤的屬性
<script type="text/javascript"> window.onload = function () { var attr = document.getElementById("attr"); attr.setAttribute("style", "font-weight:bold;") alert(attr.getAttribute("style")); } </script>
JQ設定和獲取標籤的屬性
<script src="http://img1.c2cedu.com/Scripts/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#attr").attr("style", "color:#ff0000");//單個屬性的設定 $("#Avatar").attr({ "class": "banner", "alt": "頭像", "src": "http://pic.cnblogs.com/avatar/a118538.jpg?id=11133319" });//多個屬性的設定 alert($("#Avatar").attr("src")); //得到指定標籤的屬性 }); </script>
值得注意的是JS的window.onload方法塊的內容是在JQ的$(function(){})方法塊執行完成後,再執行的。
二 通過修改標籤的CSS樣式來改變它的樣式
看看基本的語法:
$("#attr").addClass("banner");//新增樣式 $("#attr").removeClass("banner");//移除樣式 //JQ支援連帶寫法,因為removeClass的返回結果也是一個Jq物件,所以Jq物件的所有方法和事件它都可以使用 $("#attr").removeClass("banner").addClass("bannerOver");
下面是一個例子,當在dd標籤上單擊時,將當前dd塊進行高亮顯示
<style> .banner { background: #0094ff; } .bannerOver { background: #808080; } .cur { background: #ff6a00; } </style> <script> $(function () { $('#menu_title').find('dd').click(function () { $('#menu_title').find('dd').removeClass('cur'); $(this).addClass('cur'); }) }) </script> <dl id="menu_title"> <dt>人</dt> <dd>一種高階動物</dd> <dt>狗</dt> <dd>人類的朋友</dd> <dt>貓</dt> <dd>貓科動物的祖先</dd> </dl>
下面是為表格的隔行變色效果
.odd { background: #808080; }
.even { background: #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") .siblings() .removeClass("selected"); })
新增滑鼠移入與移出事件
// 滑鼠移入 與移出 $("#menu_title>dd").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );
恩,好了對於標籤的樣式控制這塊內容就講到這裡吧,感謝您的閱讀!