1. 程式人生 > >jq學習筆記(一)

jq學習筆記(一)

簡單 ren 當前 一個 text 互斥 元素 如果 property

1 .attr() 與 .removeAttr()方法

- atr()方法用來獲取和設置元素屬性
attr()有4個表達式:

attr(傳入屬性名):獲取屬性的值
attr(屬性名, 屬性值):設置屬性的值
attr(屬性名,函數值):設置屬性的函數值
attr(attributes):給指定元素設置多個屬性值,即:{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }

- removeAttr()刪除方法



2.jQuery的屬性與樣式之.val()

jQuery中有一個.val()方法主要是用於處理表單元素的值,比如 input, select 和 textarea。

.val()方法

.val()無參數,獲取匹配的元素集合中第一個元素的當前值
.val( value ),設置匹配的元素集合中每個元素的值
.val( function ) ,一個用來返回設置值的函數

註意事項:

通過.val()處理select元素, 當沒有選擇項被選中,它返回null
.val()方法多用來設置表單的字段的值
如果select元素有multiple(多選)屬性,並且至少一個選擇項被選中, .val()方法返回一個數組,這個數組包含每個選中選擇項的值

.html(),.text()和.val()的差異總結:

.html(),.text(),.val()三種方法都是用來讀取選定元素的內容;

只不過.html()是用來讀取元素的html內容(包括html標簽),.text()用來讀取元素的純文本內容,包括其後代元素,.val()是用來讀取表單元素的"value"值。

其中.html()和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上;另外.html()方法使用在多個元素上時,只讀取第一個元素;.val()方法和.html()相同,如果其應用在多個元素上時,只能讀取第一個表單元素的"value"值,但是.text()和他們不一樣,如果.text()應用在多個元素上時,將會讀取所有選中元素的文本內容。

.html(htmlString),.text(textString)和.val(value)三種方法都是用來替換選中元素的內容,如果三個方法同時運用在多個元素上時,那麽將會替換所有選中元素的內容。

.html(),.text(),.val()都可以使用回調函數的返回值來動態的改變多個元素的內容。

3.jQuery的屬性與樣式之增加樣式.addClass()

.addClass( className )方法:

.addClass( className ) : 為每個匹配元素所要增加的一個或多個樣式名
.addClass( function(index, currentClass) ) : 這個函數返回一個或更多用空格隔開的要增加的樣式名

註意事項:

.addClass()方法不會替換一個樣式類名。它只是簡單的添加一個樣式類名到元素上



4.jQuery的屬性與樣式之刪除樣式.removeClass()

.removeClass( )方法

.removeClass( [className ] ):每個匹配元素移除的一個或多個用空格隔開的樣式名
.removeClass( function(index, class) ) : 一個函數,返回一個或多個將要被移除的樣式名

註意事項

如果一個樣式類名作為一個參數,只有這樣式類會被從匹配的元素集合中刪除 。 如果沒有樣式名作為參數,那麽所有的樣式類將被移除




5.jQuery的屬性與樣式之樣式操作.css()

.css() 方法:獲取元素樣式屬性的計算值或者設置元素的CSS屬性

獲取:
.css( propertyName ) :獲取匹配元素集合中的第一個元素的樣式屬性的計算值
.css( propertyNames ):傳遞一組數組,返回一個對象結果

設置:
.css(propertyName, value ):設置CSS
.css( propertyName, function ):可以傳入一個回調函數,返回取到對應的值進行處理
.css( properties ):可以傳一個對象,同時設置多個樣式

註意事項:
1.瀏覽器屬性獲取方式不同,在獲取某些值的時候都jQuery采用統一的處理,比如顏色采用RBG,尺寸采用px
2..css()方法支持駝峰寫法與大小寫混搭的寫法,內部做了容錯的處理
3.當一個數只被作為值(value)的時候, jQuery會將其轉換為一個字符串,並添在字符串的結尾處添加px,例如 .css("width",50}) 與 .css("width","50px"})一樣




6.jQuery的屬性與樣式之切換樣式.toggleClass()

.toggleClass( )方法:在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類,取決於這個樣式類是否存在或值切換屬性。即:如果存在(不存在)就刪除(添加)一個類

1-.toggleClass( className ):在匹配的元素集合中的每個元素上用來切換的一個或多個(用空格隔開)樣式類名
2-.toggleClass( className, switch ):一個布爾值,用於判斷樣式是否應該被添加或移除
3-.toggleClass( [switch ] ):一個用來判斷樣式類添加還是移除的 布爾值
4-.toggleClass( function(index, class, switch) [, switch ] ):用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數。接收元素的索引位置和元素舊的樣式類作為參數

註意事項:

1-toggleClass是一個互斥的邏輯,也就是通過判斷對應的元素上是否存在指定的Class名,如果有就刪除,如果沒有就增加

2-toggleClass會保留原有的Class名後新增,通過空格隔開

jq學習筆記(一)