本文學習如何使用jQuery獲取和操作元素的屬性和CSS樣式.
元素屬性和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操作元素屬性
在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屬性是不會被刪除掉的,只是被改變其值而已
根據上面的幾個函數,我們可以這樣使用來獲取dom的value值和innerHTML值:
$("#txt1").attr("value") $("#txt1").attr("value", "1234"); $("#dv1").attr("innerHTML", 'this is a div'); $("#dv1").attr("innerHTML");
實際上,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
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);注意:
1.addClass、removeClass、toggleClass均可添加多個類,多個類之間用空格隔開
2.removeClass方法的參數可選,如果有參數,則刪除指定class,如果無參數,則刪除匹配元素的所有class
3.在調用toggleClass(classes,switch)時,我們可以有更多的用法,例如:
//每當按鈕被點擊三次時,添加樣式 var i = 0; $("#btn").click(function () { $("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");
注意:
對於樣式值為數字的代碼示例及結果:
示例 生成的源碼 $("input").css("border-width","5");<input style="BORDER-RIGHT-WIDTH: 5px; BORDER-TOP-WIDTH: 5px; BORDER-BOTTOM-WIDTH: 5px; BORDER-LEFT-WIDTH: 5px" id="txt1" />
注意:
對於一些常用的屬性,例如width,height之類,使用attr("width")和css("width")是無法正常獲取其值的,現在,我們來介紹一些常用的屬性.
獲取常用的屬性
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)
margin為true則包括margin,否則不包括$("#txt1").outerWidth()outerHeight([margin]) 獲取第一個匹配元素外部區域高度(包括padding,border)
margin為true則包括margin,否則不包括$("#txt1").outerHeight(true)注意:
返回的高度、寬度均為數字,不帶px
參照一張圖,會更容易理解些.
2.位置相關
在設計一些彈出對象的腳本中,經常需要動態獲取彈出坐標並且設置元素的位置.jQuery為我們提供了位置相關的各個函數.
函數名 說明 例子 offset() 獲取匹配元素在當前窗口的相對偏移
只對可見元素有效$("#btn").offset().top $("#btn").offset().leftposition() 獲取匹配元素相對父元素的偏移
只對可見元素有效$("#btn").position().top $("#btn").position().leftscrollTop() 獲取匹配元素相對滾動條頂部的偏移
對可見元素和隱藏元素均有效$("div").scrollTop()scrollTop(val) 設置垂直滾動條頂部偏移為該值
對可見元素和隱藏元素均有效$("div").scrollTop(200)scrollLeft() 獲取匹配元素相對滾動條左部的偏移
對可見元素和隱藏元素均有效$("div").scrollLeft()scrollLeft(val) 設置水平滾動條左側的偏移
對可見元素和隱藏元素均有效$("div").scrollLeft(200)
注意:
offset方法是相對於當前窗口的相對偏移,而position方法是相對於父元素的偏移