Java程序员从笨鸟到菜鸟之（八十八）跟我学jquery（四）JQuery框架操作元素的属性与样式
在前面幾篇博客中，我們初步了解了一下jQuery的好處，基本語法，還有一些基本函數，這是學習jquery的基礎，在這篇博客中，我們一起來學習一下JQuery框架操作元素的屬性與樣式，在web開發中，修改頁面元素的屬性和樣式是我們需要常用的功能。所以掌握好這個知識點，對于我們在web開發中也是一個非常有力的利劍。好，下面我們就具體來看一下：
首先來看一下兩個概念的區別：
元素屬性和Dom屬性
?對于下面這樣一個標簽元素:
<img??id='img'src="1.jpg"??alt='1'??class="imgs"></img>?
我們通常將id,src,alt,class稱為屬性,也即元素屬性.但是,當瀏覽器對標簽元素進行解析時,會將元素解析為Dom對象,相應的,元素屬性也就解析為Dom屬性.元素屬性和Dom屬性只是在我們對其進行不同解析時的不同稱呼.
注意:
1.元素被解析成Dom時,元素屬性和Dom屬性并不一定是原來的名稱.
例如,img的class屬性,在表現為元素屬性時是class;在表現為Dom屬性時,屬性名為className
2.在JavaScript中,我們可以直接獲取或設置Dom屬性
JQuery操作DOM屬性
??????因為?JQuery都是針對包裝集進行操作，所以在JQuery中沒有包裝操作“DOM屬性”的函數。但是JQuery提供了each()函數用于遍歷?JQuery包裝集，其中的this指針指向當前的DOM對象，我們可以應用這一點配合原生javascript來操作元素的DOM屬性：
? ?
[javascript]?view plaincopy print?
??$.each()函數的解析：上例代碼中的$.each()中第一個參數為數組或者對象，第二個是回調函數，這個回調函數可以存在兩個參數，第一個參數是數組或者對象的索引，第二個參數是數組或者對象的值。
JQuery操作元素屬性
??????JQuery提供了屬性attr()包裝集函數，能夠同時操作包裝集中所有元素的屬性，我們依舊通過實例來了解如何使用JQuery操作元素屬性：
[javascript]?view plaincopy print?
上面的實例中包含了attr()包裝集函數的各種用法。打開Firebug，可以看到代碼運行的結果。
在jQuery中,提供了attr函數來操作元素屬性,具體如下:
| 函數名 | 說明 | 例子 |
| attr(name) | 取得第一個匹配元素的屬性值. | $("input").attr("value") |
| attr(property) | 將一個"名/值"形式的對象設置為所有匹配元素的屬性 | $("input").attr({?value:?"txt",?title:?"text"}); |
| attr(key,value) | 為所有匹配的元素設置一個屬性值 | $("input").attr("value","txt"); |
| attr(key,fn) | 為所有匹配的元素設置一個計算的屬性值 | $("input").attr("title",?function()?{?return?this.value?}); |
| removeAttr(name) | 從所有匹配的元素中刪除一個屬性 | $("input").removeAttr("value"); |
注意:
1.如果要設置對象的class屬性時,必須使用className作為屬性名.
2.我們可以使用removeAttr刪除元素屬性,但其對應的Dom屬性是不會被刪除掉的,只是被改變其值而已
實際上,jQuery提供了更簡單的方法來訪問value,innerHTML,具體函數如下:
| 函數名 | 說明 | 例子 |
| val() | 獲取第一個匹配元素的value值 | $("#txt1").val() |
| val(val) | 為匹配的元素設置value值 | $("#txt1").val("txt1") |
| html() | 獲取第一個匹配元素的html內容 | $("#dv1").html() |
| html(val) | 設置每一個匹配的元素的html內容 | $("#dv1").html("this?is?a?div") |
| text() | 取得所有匹配文本節點的內容,并將其連接起來 | $("div").text() |
| text(val) | 將所有匹配元素的置為val | $("div").text("divs") |
JQuery操作CSS樣式
我們可以通過修改元素CSS類或者直接修改元素的樣式來操作CSS樣式。
1，JQuery修改CSS類
一個元素可以應用多個css類，但是不幸的是在DOM屬性中是用一個以空格分割的字符串存儲的，而不是數組。所以如果在原始javascript時代我們想對元素添加或者刪除多個屬性時，都要自己操作字符串，而JQuery改變了這一切。
下面進入實例，看一下JQuery是如何操作CSS類的：
使用上面的方法，我們可以將元素的CSS類像集合一樣修改，再也不必手工解析字符串。
注意：addClass(?class?)?和removeClass(?[classes]?)?的參數可以一次傳入多個css類，用空格分割，比如:
$("#btnAdd").bind("click",?function(event)?{?$("p").addClass("colorRed?borderBlue");?});
removeClass方法的參數可選，如果不傳入參數則移除全部CSS類：
$("p").removeClass()
2，JQuery修改CSS樣式
同樣當我們想要修改元素的具體某一個CSS樣式，即修改元素屬性"style"時，JQuery也提供了相應的方法，下面我們通過實例來看一下如何使用JQuery修改CSS樣式：
[javascript]?view plaincopy print?
總結修改css樣式方法如下：
1.修改CSS類
| 函數名 | 說明 | 例子 |
| addClass(classes) | 為每個匹配的元素添加指定的類名 | $("input").addClass("colorRed?borderBlack"); |
| hasClass(class) | 判斷匹配元素集合中是否至少有一個包含了指定的css類,如果有一個含有指定css類,則返回true | alert($("input").hasClass("borderBlack")); |
| removeClass([classes]) | 從匹配元素中移除所有或指定的css類 | $("input").removeClass("colorRed?borderBlack"); |
| toggleClass(classes) | 如果存在(不存在)就刪除(添加)指定類 | $("input").toggleClass("colorRed?borderBlack"); |
| toggleClass(classes,switch) | 當switch是true時,添加類,switch為false時,刪除類 | $("input").toggleClass("colorRed?borderBlack",?true); |
2.修改CSS樣式
| 函數名 | 說明 | 例子 |
| css(name) | 訪問第一個匹配元素的樣式屬性 | $("input").css("color") |
| css(properties) | 把一個"名/值"對設置給所有匹配元素的樣式屬性 | $("input").css({border:"solid?3px?silver",color:"red"}) |
| css(name,value) | 為匹配的元素設置同一個樣式屬性 | $("input").css("border-width","5"); |
最后附上一些獲取常用的屬性的方法：
1.寬、高相關
| 函數名 | 說明 | 例子 |
| width() | 獲取第一個匹配元素的寬度,默認為px | $("#txt1").width() |
| width(val) | 為匹配的元素設置寬度值,默認為px | $("#txt1").width(200) |
| height() | 獲取第一個匹配元素的高度,默認為px | $("#txt1").height() |
| height(val) | 為匹配的元素設置寬度值,默認為px | $("#txt1").height(20) |
| innerWidth() | 獲取第一個匹配元素內部區域寬度(包括padding,不包括border) | $("#txt1").innerWidth() |
| innerHeight() | 獲取第一個匹配元素內部區域高度(包括padding,不包括border) | $("#txt1").innerHeight() |
| outerWidth([margin]) | 獲取第一個匹配元素外部區域寬度(包括padding,border) | $("#txt1").outerWidth() |
| outerHeight([margin]) | 獲取第一個匹配元素外部區域高度(包括padding,border) | $("#txt1").outerHeight(true) |
注意:
返回的高度、寬度均為數字,不帶px
參照一張圖,會更容易理解些.
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
2.位置相關
在設計一些彈出對象的腳本中,經常需要動態獲取彈出坐標并且設置元素的位置.jQuery為我們提供了位置相關的各個函數.
| 函數名 | 說明 | 例子 |
| offset() | 獲取匹配元素在當前窗口的相對偏移 | $("#btn").offset().top $("#btn").offset().left |
| position() | 獲取匹配元素相對父元素的偏移 | $("#btn").position().top $("#btn").position().left |
| scrollTop() | 獲取匹配元素相對滾動條頂部的偏移 | $("div").scrollTop() |
| scrollTop(val) | 設置垂直滾動條頂部偏移為該值 | $("div").scrollTop(200) |
| scrollLeft() | 獲取匹配元素相對滾動條左部的偏移 | $("div").scrollLeft() |
| scrollLeft(val) | 設置水平滾動條左側的偏移 | $("div").scrollLeft(200) |
注意:
offset方法是相對于當前窗口的相對偏移,而position方法是相對于父元素的偏移
要特別注意區分attr()和css()，比如說：
$comment_text.css("background-color","white");
$comment_text.attr("disabled",false);?
from:?http://blog.csdn.net/csh624366188/article/details/7706484
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的Java程序员从笨鸟到菜鸟之（八十八）跟我学jquery（四）JQuery框架操作元素的属性与样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java程序员从笨鸟到菜鸟之（八十七）跟
- 下一篇： Java程序员从笨鸟到菜鸟之（八十九）跟