jquery attr()設置和獲取屬性值實例教程
語法:
1、attr(“屬性名”); //獲取屬性的值(取得第一個匹配元素的屬性。通過這個方法可以方便的從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應屬性,則返回undefined)
2、attr(“屬性名”,“屬性值”); //設置屬性的值(為所有匹配的元素設置一個屬性值)
3、attr(“屬性名”,“函數(shù)值”); //設置屬性的函數(shù)值(為所有匹配的元素設置一個計算的屬性值。不提供值,而是提供一個函數(shù),由這個函數(shù)家孫的值作為屬性值)
4、attr(properties); //給指定元素設置多個屬性值,即:{屬性名1:“屬性值1”,屬性值2:”屬性值2”}(這是一種在所有匹配元素中批量設置很多屬性的最佳方式。注意,如果你要設置的對象的class屬性,你必須使用className作為屬性名,或者你可以直接使用 class 或者 id )
注意:所有的標點符號都是英文符號,在給指定元素設置多個屬性值的時候,注意雙引號“”的使用!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>設置和獲取屬性值</title> <style> </style> <script src="js/jquery-3.1.0.min.js"></script> <script> $(function(){ var n=0; $("#btn1").on("click",function(){ alert($("img").attr("src"))//獲取 }); $("#btn2").on("click",function(){ //設置 if(n==0){ $("img").attr("src","images/02.jpg") n=1 }else if (n==1){ $("img").attr("src","images/03.jpg") n=2 }else if (n==2){ $("img").attr("src","images/04.jpg") n=3 }else if (n==3){ $("img").attr("src","images/05.jpg") n=0 } }) }) </script> </head> <body> <button type="button" id="btn1"> 獲取屬性值 </button> <button type="button" id="btn2"> 設置屬性值 </button> <br><br> <img src="images/01.jpg"> </body> </html>
- jQuery .attr()和.removeAttr()方法操作元素屬性示例
- jQuery使用attr()方法同時設置多個屬性值用法實例
- jQuery中attr()和prop()在修改checked屬性時的區(qū)別
- jQuery獲取attr()與prop()屬性值的方法及區(qū)別介紹
- Jquery attr()方法 屬性賦值和屬性獲取詳解
- 詳談jQuery操縱DOM元素屬性 attr()和removeAtrr()方法
- 關(guān)于jquery中attr()和prop()方法的區(qū)別
- jQuery中.attr()和.data()的區(qū)別分析
- 詳談jQuery中使用attr(), prop(), val()獲取value的異同
- jquery更改元素屬性attr()方法操作示例
相關(guān)文章
jquery mobile的觸控點擊事件會多次觸發(fā)問題的解決方法
這篇文章主要介紹了jquery mobile的觸控點擊事件會多次觸發(fā)問題的解決方法以及替代方法,需要的朋友可以參考下2014-05-05jQuery實現(xiàn)滑動頁面固定頂部顯示(可根據(jù)顯示位置消失與替換)
這篇文章主要介紹了jQuery實現(xiàn)滑動頁面固定頂部顯示,還可根據(jù)顯示位置消失與替換對應的當前顯示項,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10jQuery.position()方法獲取不到值的安全替換方法
這篇文章主要介紹了jQuery.position()方法獲取不到值的安全替換方法,本文給出了一種變通的方法,用.offset()來換算,需要的朋友可以參考下2015-03-03jquery隊列queue與原生模仿其實現(xiàn)方法分享
jquery中的queue和dequeue是一組很有用的方法,他們對于一系列需要按次序運行的函數(shù)特別有用。特別animate動畫,ajax,以及timeout等需要一定時間的函數(shù)2014-03-03input:checkbox多選框?qū)崿F(xiàn)單選效果跟radio一樣
checkbox是多選,怎么才能讓他變成單選,效果跟radio一樣呢,本菜鳥就自己寫了個小程序,代碼很簡單2014-06-06