jQuery設置了很多為標簽進行屬性的操作,比如添加、刪除。 一 、屬性 1 attr(name | properties | [key, value | fn]) 設置或返回被選擇的屬性值。 參數: (1) name :屬性名,返回該屬性值。 (2) properties:該參數為'名 : 值' ...
jQuery設置了很多為標簽進行屬性的操作,比如添加、刪除。
一 、屬性
1 attr(name | properties | [key, value | fn])
設置或返回被選擇的屬性值。
參數:
(1) name :屬性名,返回該屬性值。
(2) properties:該參數為'名 : 值' 對的JSON格式對象,給標簽進行設值,如: $("img").attr({'width':'100','height':'100','src':'1.png'})
(3) key, value:為屬性key設置值value。
(4) key, function(index,attr):設置屬性,函數function返回屬性值,入參index為當前元素的索引值,attr為原先屬性值。
2 removeAttr(name)
從每一個匹配的元素中刪除一個屬性。
3 prop(name | properties | [key, value | fn])
獲取在匹配的元素集中的屬性值(雷同 attr )
4 removeProp(name)
用來刪除由prop方法設置的屬性值。
5 addClass(class | fn)
為每個匹配的元素添加指定的類名。
參數:
(1) class:一個或多個要添加到元素中的CSS類名,多個class用空格分開。
(2) function(index, class):此函數必須返回一個或多個class。index為元素索引,class為元素以前的class。
6 removeClass([class | fn])
為匹配的元素刪除全部或指定的類。
參數:
(1) class:一個或多個要刪除的CSS類名,多個class用空額分開。
(2) removeClass():刪除全部class
(3) function(index, class):此函數必須返回一個或多個class。index為元素索引,class為元素以前的class。
7 toggleClass(class | fn [, switch])
如果存在(不存在)就刪除(添加)一個class。
參數:
(1) class:CSS類名。
(2) class, switch:要切換的class, 一個用來判斷樣式類添加還是移除的 boolean 值。
(3) switch: 一個用來判斷樣式類添加還是移除的 boolean 值。
(4) function(index, class[, switch]):1:用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數。接收元素的索引位置和元素舊的樣式類作為參數。 2: 一個用來判斷樣式類添加還是移除的 boolean 值。
8 html([val | fn])
設置或返回第一個元素的html內容。
參數:
(1) html():返回第一個元素的html內容。
(2) val:要設置的HTML內容值。
(3) function(index, html):返回一個HTML字元串。index為元素在集合中的索引位置,html為原先的html。
9 text([val | fn])
設置或返回所有匹配元素的內容。
text() 返回由所有匹配元素包含的文本內容組合起來的文本。
參數:
(1) val:要設置的值
(2) function(index, value):此函數要返回一個設置的值。index為元素在集合中的索引位置,text為原先的text值。
10 val([val | fn | arr])
設置或返回匹配元素的當前值。
在jQuery1.2後,可以返回任意元素的值,包括select,如果多選,將返回一個數組,包含其選擇的值。
參數:
(1) val():獲取文本框中的值,如 $('input').val();
(2) val:要設置的值,如 $('input').val('HELLO WORLD!');
(3) function(index, value):此函數返回一個要設置的值。index為元素在集合中的索引位置,value為原先的值。
(4) array:用於checkbox/select/radio 的值,如 $("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check2", "radio1"]);
二、CSS
1 css(name | pro | [, val | fn])
訪問匹配元素的樣式屬性。
參數:
(1) name:要訪問的屬性名稱,如 $('p').css('color');
(2) properties:要設置樣式的 '名 : 值' JSON對象,如: $("p").css({ color: "#ff0011", background: "blue" });
(3) name, value:為屬性name設置值為value。
(4) name, function(index, value):為屬性name設置值,函數返回要設置的值。如:
$('#div1').css({ width: function(index, value) { return parseFloat(value) * 1.2; }, height: function(index, value) { return parseFloat(value) * 1.2; } });
2 offset([coordinates])
返回匹配元素在當前視口的相對偏移。
返回的對象包含兩個整型屬性:top 和 left。此方法只對可見元素有效。
參數:
(1) coordinates:一個對象(如:{ top: 10, left: 30 } ) ,必須包含top和left屬性,作為元素的新坐標。這個參數也可以是一個返回一對坐標的函數,函數的第一個參數是元素的索引,第二個參數是當前的坐標。
var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top ); $("p:last").offset({ top: 10, left: 30 }); $("p:last").offset(function(index,coord){ var top = coord.top; var left = coord.left + 50; return {"top":top,"left":left}; });
3 position()
獲取匹配元素相對於父元素的偏移
返回的對象包含兩個整形屬性:top 和 left。此方法只對可見元素有效。
4 height([val | fn])
獲取匹配元素當前計算的高度值(px)。
參數:
(1) val:設定CSS中height值,可以是字元串或者數字。
(2) function(index, height):返回一個用於設置高度的函數。
5 width([val | fn])
獲取第一個匹配元素當前計算的寬度值(px)。
6 innerHeight()
獲取第一個匹配元素內部區域高度(包括補白、不包括邊框)。
此方法對可見和隱藏元素均有效。
7 innerWidth
獲取第一個匹配元素內部區域寬度(包括補白、不包括邊框)。
此方法對可見和隱藏元素均有效。
8 outerHeight([options])
獲取第一個匹配元素外部高度(預設包括補白和邊框)。
此方法對可見和隱藏元素均有效。
參數:
(1) options:設置為true時,計算邊距在內。
9 outerWidth([options])
獲取第一個匹配元素外部寬度(預設包括補白和邊框)。
此方法對可見和隱藏元素均有效。
參數:
(1) options:設置為true時,計算邊距在內。