資源描述：
《使用jQuery操作元素的屬性與樣式.doc》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、使用jQuery操作元素的屬性與樣式————————————————————————————————作者：————————————————————————————————日期：使用jQuery操作元素的屬性與樣式2011-08-1314:25本文學(xué)習(xí)如何使用jQuery獲取和操作元素的屬性和CSS樣式.元素屬性和Dom屬性對于下面這樣一個標(biāo)簽元素:我們通常將id,src,alt,class稱為屬性,也即元素屬性.但是,當(dāng)瀏覽器對標(biāo)簽元素進(jìn)行解析時,會將元素解
2、析為Dom對象,相應(yīng)的,元素屬性也就解析為Dom屬性.元素屬性和Dom屬性只是在我們對其進(jìn)行不同解析時的不同稱呼.值得注意的是:1.元素被解析成Dom時,元素屬性和Dom屬性并不一定是原來的名稱.例如,img的class屬性,在表現(xiàn)為元素屬性時是class;在表現(xiàn)為Dom屬性時,屬性名為className2.在JavaScript中,我們可以直接獲取或設(shè)置Dom屬性使用jQuery操作元素屬性在jQuery中,提供了attr函數(shù)來操作元素屬性,具體如下:函數(shù)名說明例子attr(name)取得第一個匹配元素的屬性值.$("input").attr("val
3、ue")attr(property)將一個"名/值"形式的對象設(shè)置為所有匹配元素的屬性$("input").attr({value:"txt",title:"text"});attr(key,value)為所有匹配的元素設(shè)置一個屬性值$("input").attr("value","txt");attr(key,fn)為所有匹配的元素設(shè)置一個計算的屬性值$("input").attr("title",function(){returnthis.value});removeAttr(name)從所有匹配的元素中刪除一個屬性$("input").remove
4、Attr("value");注意:1.如果要設(shè)置對象的class屬性時,必須使用className作為屬性名.2.我們可以使用removeAttr刪除元素屬性,但其對應(yīng)的Dom屬性是不會被刪除掉的,只是被改變其值而已根據(jù)上面的幾個函數(shù),我們可以這樣使用來獲取dom的value值和innerHTML值:$("#txt1").attr("value")
$("#txt1").attr("value","1234");
$("#dv1").attr("innerHTML",'thisisadiv');
$("#dv1").attr("innerHTML");
5、實際上,jQuery提供了更簡單的方法來訪問value,innerHTML,具體函數(shù)如下:函數(shù)名說明例子val()獲取第一個匹配元素的value值$("#txt1").val()val(val)為匹配的元素設(shè)置value值$("#txt1").val("txt1")html()獲取第一個匹配元素的html內(nèi)容$("#dv1").html()html(val)設(shè)置每一個匹配的元素的html內(nèi)容$("#dv1").html("thisisadiv")text()取得所有匹配文本節(jié)點的內(nèi)容,并將其連接起來$("div").text()text(val)將所有匹
6、配元素的置為val$("div").text("divs")使用jQuery操作CSS1.修改CSS類函數(shù)名說明例子addClass(classes)為每個匹配的元素添加指定的類名$("input").addClass("colorRedborderBlack");hasClass(class)判斷匹配元素集合中是否至少有一個包含了指定的css類,如果有一個含有指定css類,則返回truealert($("input").hasClass("borderBlack"));removeClass([classes])從匹配元素中移除所有或指定的css類$(
7、"input").removeClass("colorRedborderBlack");toggleClass(classes)如果存在(不存在)就刪除(添加)指定類$("input").toggleClass("colorRedborderBlack");toggleClass(classes,switch)當(dāng)switch是true時,添加類,switch為false時,刪除類$("input").toggleClass("colorRedborderBlack",true);注意:1.addClass、removeClass、toggleClass均
8、可添加多個類,多個類之間用空格隔開2.removeClass方法的參數(shù)可選,如果
