jQuery 控制屬性和樣式

記的屬性

each()遍歷元素：each(callback)方法主要用于對選擇器進行遍歷，它接受一個函數為參數，該函數接受一個參數，指代元素的序號。

對于標記的屬性而言，可以利用each()方法配合this關鍵字來獲取或者設置選擇器中每個元素相對應的屬性值；

jQuery代碼:

$(function(){
    $("img").each(function(index){
        this.title="這是第" + index + "幅圖，id是：" + this.id; //此時this指DOM對象
    });
});

HTML代碼:

<img src="01.jpg" id="Tsinghua01">
<img src="02.jpg" id="Tsinghua02">
<img src="03.jpg" id="Tsinghua03">
<img src="04.jpg" id="Tsinghua04">
<img src="05.jpg" id="Tsinghua05">

理解:首先利用$("image")獲取頁面中所有圖片的集合,然后通過each()方法遍歷所有圖片,通過this關鍵字對圖片進行訪問,獲取圖片的id,

并設置圖片的title屬性。其中each()方法的函數參數index為元素所處的序號(從0開始計數)。

jQuery代碼:

$(function(){
    $("img").each(function(index, item){
        item.title="這是第" + index + "幅圖，id是：" + this.id; //此時item指當前的DOM對象
    });
});

HTML代碼:

<img src="01.jpg" id="Tsinghua01">
<img src="02.jpg" id="Tsinghua02">
<img src="03.jpg" id="Tsinghua03">
<img src="04.jpg" id="Tsinghua04">
<img src="05.jpg" id="Tsinghua05">

//使用jQuery中插件機制

$.fn.extend({
    quanxuan:function(){
        //專用于實現全選
        this.attr("checked",true);
    },
    quxiao:function(){
        //取消功能
        this.attr("checked",false);
    },
    fanxuan:function(){
        //反選
        var leng=this.length;
        this.each(function(index,domElement){ //this指jQuery對象
        domElement.checked=!domElement.checked; //domElement=this this指DOM對象
    })
    }
});

獲取屬性的值

attr(name)

$(function(){
    //var sTitle=$("em").attr("title"); //獲取第一個<em>元素的title屬性值
    var sTitle=$("em:eq(1)").attr("title"); //獲取第二個<em>元素的title屬性值
    $("span").text(sTitle);
});

注意: 因為沒有遍歷,$("em").attr("title") 實際上獲取的是第一個<em>元素的title屬性值

$("em").attr("title") 等同于$("em:eq(1)").attr("title")

$("em").get(0).title 也是獲取第一個<em>元素的title屬性值, 而$("em").get(0)已經轉換成DOM對象, 因此就不能使用jquery對象的attr方法

設置屬性值

attr(name,value)

$("a[href^=http://]").attr("target","_blank")

jQuery代碼：

function DisableBack(){
    $("button:gt(0)").attr("disabled","disabled");
}

HTML代碼:

<button onclick="DisableBack()">第一個Button</button> 
<button>第二個Button</button> 
<button>第三個Button</button>

通過位置選擇器:gt(0),當單擊第1個按鈕時后面的兩個按鈕將同時禁用;

attr()方法還接受函數作為參數attr(name,fn),它的第2個參數為一個函數,該函數接受一個參數,為元素的序號,返回值為字符串;

jQuery代碼

$(function(){
    $("div").attr("id", function(index){
        //將id設置為序號相關的參數
        return "div-id" + index;
    }).each(function(){
        //找到每一項的span標記
        $(this).find("span").html("(id='" + this.id + "')");
    });
});

HTML代碼:

<div>第0項 <span></span></div>
<div>第1項 <span></span></div>
<div>第2項 <span></span></div>

用attr()方法接受屬性列表

$(function(){
    $("img").attr({
        src: "06.jpg",
        title: "紫荊公寓",
        width:300, //參考HTML語法, 無需加單位, 也可以寫成 widht:"300px" 加單位必須加引號
        alt: "紫荊公寓"
    });
});

刪除屬性

$("button").removeAttr("disabled");

removeAttr(name)刪除屬性相當于HTML的標記中不設置該屬性, 并不是取消了該標記的這個特點。

小結：

$().attr(屬性名稱); //獲得屬性信息值

$().attr(屬性名稱,值); //設置屬性的信息

$().removeAttr(屬性名稱); //刪除屬性

$().attr(json對象); //同時為多個屬性設置信息值, json對象的鍵值對就是名稱和值

$().attr(屬性名稱,fn); //通過fn函數執行的return返回值對屬性進行賦值

獲取屬性的第二種方式:

$("input[type='checkbox']").prop("checked");

設置元素的樣式

添加、刪除CSS類別

用addClass()方法添加CSS類別

$(function(){
    //同時添加多個CSS類別
    $("div").addClass("myClass1 myClass2"); //增加多個CSS類別,用空格隔開
});

用removeClass()方法刪除CSS類別

希望某些元素的樣式風格在某個類別之間切換,時而addClass()類別,時而removeClass()類別;

用toggleClass()方法在類別間動態切換 toggle 切換

$(function(){
    $("p").click(function(){
        //點擊的時候不斷切換
        $(this).toggleClass("highlight");
    });
});

實例:jQuery制作交替變幻的表格

<html>
<head>
<title>交替變幻的表格</title>
<style>
<!--
.datalist{
border:1px solid #007108; /* 表格邊框 */
font-family:Arial;
border-collapse:collapse; /* 邊框重疊 */
background-color:#d9ffdc; /* 表格背景色 */
font-size:14px;
}
.datalist th{
border:1px solid #007108; /* 行名稱邊框 */
background-color:#00a40c; /* 行名稱背景色 */
color:#FFFFFF; /* 行名稱顏色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #007108; /* 單元格邊框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
background-color:#a5e5aa; /* 隔行變色 */
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
$("table").mouseover(function(){
$("tr:gt(0)").toggleClass("altrow");
});
$("table").mouseout(function(){
$("tr:gt(0)").toggleClass("altrow");
});
});
</script>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
</table>
</body>
</html>

直接獲取、設置樣式

jQuery提供css()方法來直接獲取、設置元素的樣式風格。使用方法與attr()幾乎一模一樣。

通過css(name)來獲取某種樣式風格的值；$("p").css("color");

通過css(properties)列表來同時設置元素的多種樣式；$("p").css({ color: "#ff0011", background: "blue" });

通過css(name,value)來設置元素的某種樣式；$("p").css("color","red");

通過css(name,function(index, value))設置一個樣式屬性的值

css()樣式操作特點：

此函數返回要設置的屬性值。接受兩個參數，index為元素在對象集合中的索引位置, value是原先的屬性值。

1 樣式獲取，jquery可以獲取行內、內部、外部的樣式。dom方式只能獲得行內樣式

2 復合屬性樣式需要拆分為"具體樣式"才可以操作

例如： background 需要拆分為 background-color background-image 等進行操作

border： border-left-style border-left-width border-left-color 等

margin： margin-left margin-top 等

也可以將樣式屬性寫成駝峰式: backgroundColor, 可以不加引號。

在json對象中, 帶橫線的css屬性(如font-size)必須加引號;

如：

$('div').css({"font-size":"40px","font-weight":"bold",color:"red"});

標準格式：

$('div').css({"font-size":"40px","font-weight":"bold","color":"red"});

css還支持獲取屬性值的方法, 保持原來的屬性值(width()和css()兩種方法)

oInput.val(tdText).css({'width':oTd.width(), 'font-size':'14px','font-weight':'bold', 'border':0,
'background-color':oTd.css('background-color')});

與下面的語句等同：

oInput.val(tdText).css('width',tdObj.width()).css('font-size','14px').css('font-weight','bold').
css('border-width',0).css('background-color',oTd.css('background-color'));

$("div").click(function() {
    $(this).css({
        width: function(index, value) {
            return parseFloat(value) * 1.2;
        },
        height: function(index, value) {
            return parseFloat(value) * 1.2;
        }
    });
});

以下代碼為<p>標記添加了mouseover和mouseout事件，當這兩個事件觸發時通過css(name,value)來修改標記的顏色。

$(function(){
    $("p").mouseover(function(){
        $(this).css("color","red");
    });
    $("p").mouseout(function(){
        $(this).css("color","black");
    });
});

另外還可以通過hasClass(name)方法來判斷某個元素是否設置了某個CSS類別，如何設置了則返回true，否則為false。

$("li:last").hasClass("myClass")

等同于$("li:last").is(".myClass")

在jQuery中其實hasClass方法內部調用的就是is()方法,只不過代碼可讀性更高一些;

小結：

class屬性值操作

$().attr('class',值);

$().attr('class');

$().removeAttr('class屬性'); //刪除class的屬性

class具體快捷操作方法：

$().addClass(class屬性值); //給class屬性追加信息值

$().removeClass(class屬性值); //刪除class屬性中的某個信息值

$().toggleClass(class屬性值); //開關效果，有就刪除，沒有就添加

css樣式操作

$().css(name,value); //設置

$().css(name); //獲取

$().css(json對象); //同時修改多個css樣式

CSS樣式操作-寬高

width() 取得第一個匹配元素當前計算的寬度值(px)。

width(val) 為每個匹配的元素設置CSS寬度(width)屬性的值; 如果沒有明確指定單位(如：em或%), 默認使用px

height(100) height("100px") 后面含有單位的必須加引號

面的表格列出了所有用于處理 HTML 和 CSS 的 jQuery 方法。

下面的方法適用于 HTML 和 XML 文檔。除了：html() 方法。

方法	描述
addClass()	向被選元素添加一個或多個類名
after()	在被選元素后插入內容
append()	在被選元素的結尾插入內容
appendTo()	在被選元素的結尾插入 HTML 元素
attr()	設置或返回被選元素的屬性/值
before()	在被選元素前插入內容
clone()	生成被選元素的副本
css()	為被選元素設置或返回一個或多個樣式屬性
detach()	移除被選元素（保留數據和事件）
empty()	從被選元素移除所有子節點和內容
hasClass()	檢查被選元素是否包含指定的 class 名稱
height()	設置或返回被選元素的高度
html()	設置或返回被選元素的內容
innerHeight()	返回元素的高度（包含 padding，不包含 border）
innerWidth()	返回元素的寬度（包含 padding，不包含 border）
insertAfter()	在被選元素后插入 HTML 元素
insertBefore()	在被選元素前插入 HTML 元素
offset()	設置或返回被選元素的偏移坐標（相對于文檔）
offsetParent()	返回第一個定位的祖先元素
outerHeight()	返回元素的高度（包含 padding 和 border）
outerWidth()	返回元素的寬度（包含 padding 和 border）
position()	返回元素的位置（相對于父元素）
prepend()	在被選元素的開頭插入內容
prependTo()	在被選元素的開頭插入 HTML 元素
prop()	設置或返回被選元素的屬性/值
remove()	移除被選元素（包含數據和事件）
removeAttr()	從被選元素移除一個或多個屬性
removeClass()	從被選元素移除一個或多個類
removeProp()	移除通過 prop() 方法設置的屬性
replaceAll()	把被選元素替換為新的 HTML 元素
replaceWith()	把被選元素替換為新的內容
scrollLeft()	設置或返回被選元素的水平滾動條位置
scrollTop()	設置或返回被選元素的垂直滾動條位置
text()	設置或返回被選元素的文本內容
toggleClass()	在被選元素中添加/移除一個或多個類之間切換
unwrap()	移除被選元素的父元素
val()	設置或返回被選元素的屬性值（針對表單元素）
width()	設置或返回被選元素的寬度
wrap()	在每個被選元素的周圍用 HTML 元素包裹起來
wrapAll()	在所有被選元素的周圍用 HTML 元素包裹起來
wrapInner()	在每個被選元素的內容周圍用 HTML 元素包裹起來
$.escapeSelector()	轉義CSS選擇器中有特殊意義的字符或字符串
$.cssHooks	提供了一種方法通過定義函數來獲取和設置特定的CSS值

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

文檔處理

jQuery中對dom元素進行操作。

屬性/方法	描述
append(content\|fn)	向每個匹配的元素內部追加內容。$("p").append("<b>Hello</b>");向所有段落中追加一些HTML標記。
appendTo(content)	把所有匹配的元素追加到另一個指定的元素中。使用這個方法是顛倒了常規的$(A).appendTo(B)的操作，即不是把B追加到A中，而是把A追加到B中。 $("p").appendTo("div");把所有段落追加到div元素中
prepend(content\|fn)	向每個匹配的元素內部前置內容。$("p").prepend("<b>Hello</b>");向所有段落中前置一些HTML標記代碼。
prependTo(content)	把所有匹配的元素前置到另一個、指定的元素元素集合中。使用這個方法是顛倒了常規的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。$("p").prependTo("#foo"); 把所有段落追加到ID值為foo的元素中。
after(content\|fn)	在每個匹配的元素之后插入內容。$("p").after("<b>Hello</b>");在所有段落之后插入一些HTML標記代碼。
before(content\|fn)	在每個匹配的元素之前插入內容。$("p").before("<b>Hello</b>");在所有段落之前插入一些HTML標記代碼。
insertAfter(content)	把所有匹配的元素插入到另一個、指定的元素元素集合的后面。使用這個方法是顛倒了常規的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。$("p").insertAfter("#foo");把所有段落插入到一個元素之后。與 $("#foo").after("p")相同
insertBefore(content)	把所有匹配的元素插入到另一個、指定的元素元素集合的前面。使用這個方法是顛倒了常規的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。$("p").insertBefore("#foo");把所有段落插入到一個元素之前。與 $("#foo").before("p")相同。
wrap(html\|ele\|fn)	把所有匹配的元素用其他元素的結構化標記包裹起來。 $("p").wrap("<div class='wrap'></div>"); 把所有的段落用一個新創建的div包裹起來
unwrap()	這個方法將移出元素的父元素。這能快速取消 .wrap()方法的效果。 $("p").unwrap(); 把所有段落的父元素直接移除
wrapAll(html\|ele)	將所有匹配的元素用單個元素包裹起來。$("p").wrapAll("<div></div>");用一個生成的div將所有段落包裹起來
wrapInner(html\|ele\|fn)	將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來。$("p").wrapInner("<b></b>");把所有段落內的每個子內容加粗
replaceWith(content\|fn)	將所有匹配的元素替換成指定的HTML或DOM元素。 $("p").replaceWith("<b>Paragraph. </b>");把所有的段落標記替換成加粗的標記。
replaceAll(selector)	用匹配的元素替換掉所有 selector匹配到的元素。 $("<b>Paragraph. </b>").replaceAll("p");把所有的段落標記替換成加粗標記
empty()	刪除、清空匹配的元素集合中所有的子節點。$("p").empty();把所有段落的子元素（包括文本節點）刪除
remove([expr])	從DOM中刪除所有匹配的元素。$("p").remove();從DOM中把所有段落刪除
clone([Even[,deepEven]])	克隆匹配的DOM元素并且選中這些克隆的副本。（傳入參數布爾值（true 或者 false）指示事件處理函數是否會被復制。） $("b").clone().prependTo("p");克隆所有b元素（并選中這些克隆的副本），然后將它們前置到所有段落中。

2 篩選

jQuery中對dom元素進行篩選判斷。

屬性/方法	描述
first()	first() 獲取第一個元素。 $('li').first()
last()	last() 獲取最后個元素。 $('li').last()
is(expr\|obj\|ele\|fn)	根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。如果沒有元素符合，或者表達式無效，都返回false。 $("input[type='checkbox']").parent().is("form");由于input元素的父元素是一個表單元素，所以返回true。
has(expr\|ele)	保留包含特定后代的元素，去掉那些不含有指定后代的元素。.has()方法將會從給定的jQuery對象中重新創建一組匹配的對象。 $('li').has('ul').css('background-color', 'red');給含有ul的li加上背景色
find(e\|o\|e)	搜索所有與指定表達式匹配的元素。 $("p").find("span");從所有的段落開始，進一步搜索下面的span元素。
parent([expr])	取得一個包含著所有匹配元素的唯一父元素的元素集合。 $("p").parent(".selected");查找段落的父元素中每個類名為selected的父元素。
siblings([expr])	取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。 $("div").siblings();找到每個div的所有同輩元素。

3 樣式

jQuery中對dom元素進行樣式上的操作。

屬性/方法	描述
addClass(class\|fn)	為每個匹配的元素添加指定的類名 $("p").addClass("selected"); 為匹配的元素加上 'selected' 類
removeClass([class\|fn])	從所有匹配的元素中刪除全部或者指定的類 $("p").removeClass("selected"); 從匹配的元素中刪除 'selected' 類
toggleClass(class\|fn[,sw])	如果存在（不存在）就刪除（添加）一個類。$("p").toggleClass("selected"); 為匹配的元素切換 'selected' 類
hasClass(class)	檢查元素是否含有某個特定的類，如果有，則返回true。 $("div").hasClass("protected")
css(name\|pro\|[,val\|fn])	訪問匹配元素的樣式屬性 $("p").css("color") 取得第一個段落的color樣式屬性的值。$("p").css("color","red"); 將所有段落字體設為紅色
height/width([val\|fn])	取得匹配元素當前計算的高/寬度值（px） $("p").height();$("p").width();
offset([coordinates])	獲取匹配元素在當前視口的相對偏移。返回的對象包含兩個整型屬性：top 和 left，以像素計。此方法只對可見元素有效 var p=$("p:last"); var offset=p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );

4 事件

jQuery中dom元素事件的操作。

屬性/方法	描述
on(eve,[sel],[data],fn)1.7+	在選擇元素上綁定一個或多個事件的事件處理函數 $("p").on("click", function(){ alert( $(this).text() ); });
off(eve,[sel],[fn])1.7+	在選擇元素上移除一個或多個事件的事件處理函數。off() 方法移除用.on()綁定的事件處理程序 $("p").off( "click", "**" )
bind(type,[data],fn)	為每個匹配元素的特定事件綁定事件處理函數。 $(document).bind('mousemove',function(e){ $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); });
unbind(t,[d\|f])	bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。如果沒有參數，則刪除所有綁定的事件。 $("p").unbind( "click" )
one(type,[data],fn)	為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。 $("p").one("click", function(){ alert( $(this).text() ); });
hover([over,]out)	一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。這是一個自定義的方法，它為頻繁使用的任務提供了一種“保持在其中”的狀態。當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。 $("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );

事件冒泡：事件在dom文檔中，會逐層往上觸發。如點擊了div里面的一個p元素，那么div及其上層元素的click也會被觸發。如要阻止事件的冒泡可以在里層的元素的事件方法中return false。

5 效果

jQuery中對dom元素進行樣式上的操作。

屬性/方法	描述
show([s,[e],[fn]])	顯示隱藏的匹配元素。 $("p").show() 顯示所有段落
hide([s,[e],[fn]])	隱藏顯示的元素。 $("p").hide() 隱藏所有段落
slideDown([s],[e],[fn])	通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成后可選地觸發一個回調函數。 $("p").slideDown("slow"); 用600毫秒緩慢的將段落滑下
slideUp([s,[e],[fn]])	通過高度變化（向上減?。﹣韯討B地隱藏所有匹配的元素，在隱藏完成后可選地觸發一個回調函數。 $("p").slideUp("slow");用600毫秒緩慢的將段落滑上
slideToggle([s],[e],[fn])	通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發一個回調函數。 $("p").slideToggle("slow");用600毫秒緩慢的將段落滑上或滑下
fadeIn([s],[e],[fn])	通過不透明度的變化來實現所有匹配元素的淡入效果，并在動畫完成后可選地觸發一個回調函數。$("p").fadeIn("slow");用600毫秒緩慢的將段落淡入
fadeOut([s],[e],[fn])	通過不透明度的變化來實現所有匹配元素的淡出效果，并在動畫完成后可選地觸發一個回調函數。 $("p").fadeOut("slow");用600毫秒緩慢的將段落淡出
fadeTo([[s],o,[e],[fn]])	把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，并在動畫完成后可選地觸發一個回調函數。 $("p").fadeTo("slow", 0.66);用600毫秒緩慢的將段落的透明度調整到0.66，大約2/3的可見度
fadeToggle([s,[e],[fn]])	通過不透明度的變化來開關所有匹配元素的淡入和淡出效果，并在動畫完成后可選地觸發一個回調函數。 $("p").fadeToggle("slow");用600毫秒緩慢的將段落淡入/出
animate(p,[s],[e],[fn])1.8*	用于創建自定義動畫的函數。

在線咨詢

上一篇：前端開發：一個開源、簡單易用的jQuery表格插件（
下一篇：HTML+CSS：css的常用標簽總結，了解各個標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

jQuery 控制屬性和樣式

文檔處理

2 篩選

3 樣式

4 事件

5 效果

您的項目需求