在前三篇文章中我們實際上還都沒怎么用jQuery去做什么讓人驚嘆的事情，別著急，接下來的幾篇中，你將會感嘆“哇，jQuery居然還能做這個！”。

創新互聯建站自2013年起，是專業互聯網技術服務公司，擁有項目做網站、網站設計網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元平城做網站,已為上家服務,為平城各地企業和個人服務,聯系電話:028-86922220

好了，廢話少說，正題。

一、操作元素的屬性和特性

我們之前學的是如何獲取HTML頁面元素，那獲取完元素要做什么呢？當然是操作元素。每個元素都有自己對應的屬性和特性，而這些屬性和特性便是在HTML頁面生成的時候，解析到各個元素上的，并且這些屬性和特性可以去動態的修改，所以操作它們對于豐富頁面效果是非常的重要。

大家是不是覺得我上面說這個“元素的屬性和特性”有點懵圈？其實也不用太較真兒，我給大家大概說一下，不過不理解也沒關系，舉例說明：

<imgid="myImage"src="p_w_picpath.gif"alt="An p_w_picpath"class="someClass"title="This is an p_w_picpath"/>

大家可以看到這個<img>元素標記了id、src、alt、class、title，我們把這些叫做元素的特性（以前我一直以屬性來稱呼，當然，純粹是自己yy)，那什么是元素的屬性呢？就是瀏覽器解析這個<img>的元素標記，并創建了這個元素的javascript對象，然后把它放到DOM里。所謂的屬性，就是針對這個javascript對象而言的（想想也是，只有對象才有屬性的啊。 ）。而特性與屬性之間也幾乎是一一對應的，它們之間存在動態關聯，改變特性，屬性會發生變化，改變屬性，特性也會發生變化。

1、操作元素屬性

介紹一個我經常用的方法each()，我真的沒理解為什么書上把each()放到這小節下面，既然提到了，那我也就說一下這個方法，非常的有用。

each(iterator)：遍歷包裝集里所有元素，為各元素分別調用傳遞進來的迭代器函數。

iterator：是一個function()，然后匹配集中的各元素分別調用一次這個function()。如果是function(n)這種形式，即function有個傳遞進來的參數n，n代表包裝集里當前元素的下標(從0開始)，而當前元素用函數this屬性就可以獲取。

紅色部分表示我也從來沒這么用過，不過感覺挺好的，還是舉個例子：

$("img").each(function(n){
   this.alt = "this is p_w_picpath["+n+"] with an id of " + this.id;
});

大家感覺怎么樣呢？這樣就把所有的<img>元素加上了一個alt屬性，并且每個alt的值是根據當前<img>的位置及id進行賦值的。

2、獲取特性值

attr(name)：獲取指派到包裝集里第一個元素指定特性的值。返回的是包裝集里第一個元素指定特性的值。如果包裝集為空，或第一個元素沒有該特性，就返回undefined。

name：（字符串）特性的名稱。該特性的值將被獲取。

注意了，用attr()獲取特性值的時候，返回的只是匹配元素的第一個元素指定特性的值。另外，attr()不僅能獲取標簽預定義的屬性，甚至還可以獲取通過javascipt或HTML標記設置的自定義特性，是不是很爽？

$("img").attr("");

像這樣便能獲取頁面上第一個<img>元素的id值是多少。

3、設置特性值

attr(name, value)：為包裝集里所有元素的name特性設置傳遞進來的值。返回的是原包裝集。

name：（字符串）將被設置的特性的名稱。

value：（字符串|對象|函數）指定特性的值。可以是有返回值的javascript表達式或者一個函數也行。

對，沒錯，和獲取特性值的方法一樣，只是它的另一種重載形式。

針對這個方法，說實話我只用過里面放字符串。書上說如果是表達式的話，就把表達式的已計算值設置為特性值。當是一個函數時，沒錯，就是針對所有匹配集里的元素調用一次這個函數，就像上面each()一樣，就連傳入的參數n表達的意思也是一樣的。

attr(attributes)：把已傳遞對象指定的特性和值設置到包裝集的所有元素上。返回包裝集。

attributes：一個對象。對象屬性被作為特性而復制到包裝集里所有元素上。

這種形式的重載變體我還真沒用過，不過大家也不要覺得害怕，因為看完例子大家會發現，原來這個方法是為了設置多個特性到包裝集里所有元素的快速簡便的方式罷了。

$("input").attr({value:" ",title:"please enter a value"});

上面的意思就是：把所有的<input>元素的value特性設置成空字符串，把title特性設置成please enter a value。  

書上說“{value:" ",title:"please enter a value"}”這個就對象字面量，可以理解成字面上的對象，格式為{key1:value,key2:value2……}，所以它也算個對象。大家就不要咬文嚼字了。

4、刪除特性

刪除一個元素的特性也是非常簡單的。

removeAttr(name)：從每個已匹配元素刪除指定的特性。返回包裝集。

name：（字符串）將要刪除的特性的名稱。

我要說的是不要以為removeAttr()是真的把一個屬性給干掉了，只是說它能達到你想要的結果，但是事實可能它只是去修改了一個屬性值。

二、修改元素樣式

要想使頁面更具活力，一定離不開元素的樣式，修改元素樣式的方法有兩種：

（1）可以添加或刪除CSS類。

（2）操作DOM元素，直接應用新樣式。

1、添加和刪除類名稱

addClass(names)：添加指定的一個或多個類名稱到包裝集的所有元素。返回包裝集。

names：一個字符串，包含將要添加的一個類名稱，或者包含空格分隔的、將要添加的多個類的名稱（因為對于HTML標簽的class來說，允許一個標簽有多個類，只是類名之間需要用空格區分開來）。

而對應的

removeClass(names)：從包裝集各元素里刪除指定的一個或多個類名稱。返回包裝集。

names：如上。

說一下添加類名稱的方法，其實昨天我在寫一個小程序的時候就突然開竅用了addClass方法，情況是這樣的，因為我的HTML頁面結構比較復雜，我在選取元素的時候用了一堆parent()，children()這樣的方法，所以導致我不確定自己最終選取的元素是否是自己想要的。

要是在以前，我就會在最終所選擇的元素集的事件function里加一個alert，這樣就能提示我到底選的對不對？啊~現在想想，這種方法是有多傻啊~

昨天我寫了一個CSS類，里面大概是紅色加粗實線邊框的樣式，然后我就在選擇的元素后面加上了這個addClass()方法，結果效果非常好，我可以在瀏覽器中很明顯的找出我當前的選擇語法匹配出的元素集。

另外，有時候我們需要來回切換一組樣式，也許是為了表現兩個狀態之間的變化，或者其他理由。jQuery為我們提供了現成的方法。

toggleClass(name)：如果在元素中指定類名稱不存在，則添加指定類名稱；如果元素已擁有指定類名稱，則從元素中刪除指定類名稱。返回包裝集。

name：如上。

大家覺得難理解嗎？就是假如頁面上有10張圖片，5張是關于鋼鐵俠（alt=ironman）的，5張是關于綠巨人（alt=hook）的，初始狀態下只顯示鋼鐵俠的圖片，鼠標下按一次顯示另一個隱藏的人物圖片，同時把當前顯示的人物圖片隱藏掉。有一個CSS類appear表示顯示圖片的樣式。

.mousedown(function(){
    $("img[alt=ironman]").toggleClass("appear");
    $("img[alt=hook]").toggleClass("appear");
})

2、獲取和設置樣式

css(name,value)：設置指定的值到每個已匹配元素的指定的CSS樣式屬性。返回包裝集。

name：（字符串）將要設置的CSS屬性名稱

value：（字符串|數字|函數）如果傳遞函數作為參數，則為包裝集各元素分別調用函數，以函數返回值作為CSS樣式屬性值。每次函數調用的this屬性，設置為當前正在計算的元素。

大家會問元素一般不都是有class屬性嗎？那怎么不用attr()的方法去修改class呢？是可以這樣修改，但是有時候我們想完全覆蓋樣式表，直接在元素上應用樣式會效果更好一些，這時候就用到了css這個方法，不過css方法使用和attr其實是差不多的，只是單獨針對樣式而已罷了。

$("div").css("background-color",  "red");

把所有<div>元素的背景顏色變成紅色。

css(properties)：為所有已匹配元素設置已傳遞對象里多個鍵所指定的CSS屬性為相關的值（value）。返回包裝集。

properties：（對象）指定一個對象，對象的屬性被復制為包裝集里所有元素的CSS屬性。

這個也沒什么說的，就跟上面的attr(abbribute)方法有點一樣。

css(name)：獲取包裝集里第一個元素name所指定CSS屬性的已計算樣式值。返回已計算樣式值。

name：（字符串）指定一個CSS屬性名稱，返回它的已計算樣式值。

這個也沒什么好說的，我好像沒使用過這個重載變體，有興趣的朋友自己寫練習體會一下。

對于我們經常使用的CSS值，jQuery也直接設計出了方法，更加方便我們的使用，比如width()和height()方法。可以用來設置和獲取寬高。

3、對于樣式來說，更有用的命令

hasClass(name)：確定匹配集里是否有元素擁有已傳遞name參數所指定的類名稱。有就返回true，否則返回false。

name：（字符串）將要檢查的類名稱。

大家會不會這個的感覺有點熟悉，我們之前的一篇有講過is()方法，就是判斷某包裝集是否包含在另一個包裝集的方法。話說jQuery內部正是這樣實現hasClass()函數的。

有了hasClass()這個方法，我們就可以在某些時候，比如判斷某個元素的樣式中有無此類，這樣就不會太唐突了。說實話，這個我很難舉例，只會在一些特定場合上用到，而且你會發現非常有用。

今天先寫到這吧，在家用筆記本邊學邊寫也是非常的費勁的，不像是在公司兩個顯示屏。哈哈，我有點懶惰啦~~今天學的幾乎之前都有用過，但是有些重載方法的使用還是讓我長見識的，以前不知道有那么多的重載方法。

本篇剩余內容我會在“jQuery 學習系列筆記（三）（續）”中表出。

---

關于jQuery的學習系列筆記我寫的會比較簡潔，更注重的是快速上手使用，當然，非常重要的知識點我還是會專門指出的。

PS：歡迎留言交流，24小時內必有回復。

網頁標題：jQuery學習系列筆記（三）
URL網址：http://vcdvsql.cn/article8/pejoip.html

成都網站建設公司_創新互聯，為您提供面包屑導航、網站營銷、建站公司、App設計、微信小程序、網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯