摘要:表示要設(shè)置的屬性名稱,返回值就是要設(shè)置的屬性值實例設(shè)置字體大小使用相對值設(shè)置屬性值,在原有的基礎(chǔ)上加上獲取標(biāo)簽的字體同時設(shè)置多個屬性方法方法設(shè)置或返回被選元素的文本內(nèi)容。
JQuery干貨篇之處理元素
attr注意這里用的還是我前兩篇用的例子,詳情請看我的博客
attr() 方法設(shè)置或返回被選元素的屬性值。
語法:
$(selector).attr(attribute) 返回被選元素的屬性值。
$(selector).attr(attribute,value) 設(shè)置被選元素的屬性和值
$(selector).attr(attribute,function(index,oldvalue)) 設(shè)置被選元素的屬性和值。
參數(shù) | 描述 |
---|---|
attribute | 規(guī)定屬性的名稱。 |
function(index,oldvalue) | 規(guī)定返回屬性值的數(shù)。該函數(shù)可接收并使用選擇器的 index 值和當(dāng)前屬性值。 |
實例:
$("img").filter(":first").attr("src"); //得到屬性 $("img").each(function (index,elem) { if(index%2==0) $(elem).attr("src","lily.png"); //設(shè)置屬性 console.log($(elem).attr("src")); }) $("img").attr("src",function (index,oldValue) { //這里的oldValue表示原來屬性的值,index是索引 if(oldValue=="rose.png") return "lily.png"; else return "astor.png"; }) attrs={ //使用映射對象一次設(shè)置多個值 src:"lily.png", style: "border: thick double red" }; $("img:eq(1)").attr(attrs);removeAttr
removeAttr() 方法從被選元素中移除屬性。
語法:
$(selector).removeAttr(attribute) 這里的attribute是屬性的名字
實例:
$("img:first").removeAttr("src"); //刪除屬性srcaddClass
addClass() 方法向被選元素添加一個或多個類
語法:
$(selector).addClass(class) 這里的class是類名如果需要添加多個類,中間用空格隔開
$(selector).addClass(function(index,oldclass)) 這里的index是索引,oldClass是原來就有的類名,都是可選參數(shù)。這個函數(shù)的返回的就是要添加的類名
實例:
$("img:even").addClass("redBar"); //向偶數(shù)的img添加類redBar $("img").addClass(function (index,currentClass) { //這里的currentClass就是原來有的類名,可選 if(index==1) return "blueBar"; //第二個img應(yīng)用blueBar這個類 else return "redBar"; //這里需要注意的是,對同一個img應(yīng)用類的時候,因為這個類的定義有優(yōu)先級,上面定義會被后面定義的覆蓋,所以要注意類定義的位置 }) $("img").filter(":odd").addClass("redBar").end().filter(":even").addClass("blueBar"); //鏈?zhǔn)秸{(diào)用 $("img").addClass("blueBar redBar"); //添加兩個類hasClass
hasClass() 方法檢查被選元素是否包含指定的class
語法:
$(selector).hasClass(class) //返回值是false和true
實例:
console.log($("img:odd").hasClass("redBar"));toggleClass
toggleClass() 對設(shè)置或移除被選元素的一個或多個類進行切換。該方法檢查每個元素中指定的類。如果不存在則添加類,如果已設(shè)置則刪除之。這就是所謂的切換效果
語法:
$(selector).toggleClass(class,switch) class必需的,用來規(guī)定添加或移除class的指定元素,如需規(guī)定若干 class,請使用空格來分隔類名。switch是boolean可選參數(shù),規(guī)定是否添加或移除class
$(selector).toggleClass(function(index,class),switch) index表示索引,class表示選擇器當(dāng)前擁有的類
實例:
$("img").toggleClass("redBar"); //這里對所有的img在redBar這個類之間切換 $("img").toggleClass("redBar blueBar"); //在兩個類之間來回的切換 $("").appendTo("#buttonDiv").click(function (e) { $("img").toggleClass("redBar blueBar"); //在兩種class之間切換,如果有就刪除,沒有的就添加 e.preventDefault(); }) //下面添加一個按鈕,完成同時添加多個圖片的效果 $("").appendTo("#buttonDiv").click(function (e) { $("img").toggleClass(function (index,currentClass) { if(index%2==0) return "blueBar"; //動態(tài)的切換,這里是偶數(shù)就切換blue else return "redBar blueBar"; //這里是奇數(shù)的圖片在兩種顏色來回的切換 }); e.preventDefault(); })css
css() 方法返回或設(shè)置匹配的元素的一個或多個樣式屬性,這里只說css,還有其他的設(shè)置css樣式請看w3School
語法:
$(selector).css(name) 返回第一個匹配元素的 CSS 屬性值。name是css屬性的名稱
$(selector).css(name,value) 設(shè)置所有匹配元素的指定 CSS 屬性。name表示屬性名稱,value表示屬性的值
$(selector).css(name,function(index,value)) 此函數(shù)返回要設(shè)置的屬性值。接受兩個參數(shù),index 為元素在對象集合中的索引位置,value 是原先的屬性值。name表示要設(shè)置的屬性名稱,返回值就是要設(shè)置的屬性值
實例:
$("label").css("font-size","30px"); //設(shè)置字體大小 $("label").css("font-size","+=10"); //使用相對值設(shè)置屬性值,在原有的基礎(chǔ)上加上10 console.log($("h1").css("font-family")); //獲取h1標(biāo)簽的字體 var cssValues={ "border":"thick double red", "font-size":"1.5em" }; $("label").css(cssValues); //同時設(shè)置多個屬性text
htmltext() 方法方法設(shè)置或返回被選元素的文本內(nèi)容。當(dāng)該方法用于返回一個值時,它會返回所有匹配元素的組合的文本內(nèi)容(會刪除 HTML 標(biāo)記)
語法:
$(selector).text() 當(dāng)該方法用于返回一個值時,它會返回所有匹配元素的組合的文本內(nèi)容(會刪除 HTML 標(biāo)記)。
$(selector).text(content) 當(dāng)該方法用于設(shè)置值時,它會覆蓋被選元素的所有內(nèi)容。
$(selector).text(function(index,oldcontent)) index表示索引,oldcontent表示選擇器當(dāng)前的文本內(nèi)容
valhtml() 方法返回或設(shè)置被選元素的內(nèi)容 (inner HTML)。如果該方法未設(shè)置參數(shù),則返回被選元素的當(dāng)前內(nèi)容。
語法:
$(selector).html() 當(dāng)使用該方法返回一個值時,它會返回第一個匹配元素的內(nèi)容。
$(selector).html(content) 當(dāng)使用該方法設(shè)置一個值時,它會覆蓋所有匹配元素的內(nèi)容。
$(selector).html(function(index,oldcontent)) 使用函數(shù)來設(shè)置所有匹配元素的內(nèi)容。index - 可選。接收選擇器的index 位置,oldcontent - 可選。接收選擇器的當(dāng)前內(nèi)容
本人博客文章val() 方法返回或設(shè)置被選元素的值,元素的值是通過 value 屬性設(shè)置的。該方法大多用于 input 元素,如果該方法未設(shè)置參數(shù),則返回被選元素的當(dāng)前值
語法:
$(selector).val(value) 設(shè)置文本域的值為value
$(selector).val() 得到文本域的值
$(selector).val(function(index,oldvalue)) 設(shè)置文本域的值,這里函數(shù)的返回值將會用來設(shè)置文本域的值,index表示元素索引,oldvalue表示選擇器當(dāng)前文本域的值
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/111906.html
摘要:干貨篇之選擇元素實驗的的代碼選擇器選擇正在處理動畫的元素選擇第一個元素選擇最后一個元素選擇第個元素從開始選擇序號為偶數(shù)的元素選擇序號為奇數(shù)的元素選擇序號大于的元素選擇序號小于的元素選擇所有的文本輸入框 JQuery 干貨篇之選擇元素 實驗的HTML+CSS的代碼 html Example Jacquis Flower Shop ...
摘要:表示要設(shè)置的屬性名稱,返回值就是要設(shè)置的屬性值實例設(shè)置字體大小使用相對值設(shè)置屬性值,在原有的基礎(chǔ)上加上獲取標(biāo)簽的字體同時設(shè)置多個屬性方法方法設(shè)置或返回被選元素的文本內(nèi)容。 JQuery干貨篇之處理元素 注意這里用的還是我前兩篇用的例子,詳情請看我的博客 attr attr() 方法設(shè)置或返回被選元素的屬性值。 語法: $(selector).attr(attribute) 返回被選...
摘要:表示要設(shè)置的屬性名稱,返回值就是要設(shè)置的屬性值實例設(shè)置字體大小使用相對值設(shè)置屬性值,在原有的基礎(chǔ)上加上獲取標(biāo)簽的字體同時設(shè)置多個屬性方法方法設(shè)置或返回被選元素的文本內(nèi)容。 JQuery干貨篇之處理元素 注意這里用的還是我前兩篇用的例子,詳情請看我的博客 attr attr() 方法設(shè)置或返回被選元素的屬性值。 語法: $(selector).attr(attribute) 返回被選...
摘要:在匹配元素集合中的每個元素后面插入?yún)?shù)所指定的內(nèi)容,作為其兄弟節(jié)點。當(dāng)需要移走一個元素,不久又將該元素插入時,這種方法很有用。實例從中移除集合中匹配元素的所有子節(jié)點。 JQuery干貨篇之插入元素 本次使用的html,css還是我上一篇的源代碼,詳情請看上一篇文章 分類 插入子元素:append,prepend ,appendTo,prependTo 封裝包裹元素:wrap,wrap...
閱讀 2383·2021-11-24 10:31
閱讀 3438·2021-11-23 09:51
閱讀 2251·2021-11-15 18:11
閱讀 2398·2021-09-02 15:15
閱讀 2462·2019-08-29 17:02
閱讀 2295·2019-08-29 15:04
閱讀 842·2019-08-29 12:27
閱讀 2866·2019-08-28 18:15