jQuery操作屬性值方法介紹
一、獲取或設(shè)置元素的屬性值
attr()獲取或設(shè)置匹配元素的屬性值,語法如下:
獲取元素屬性值示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>屬性操作</title> <style> *{ margin: 0px; padding: 0px; } td{ width: 100px; border: 1px solid #cccccc; cursor: pointer; } </style> <!--引入jQuery--> <script src="../jquery-3.3.1.js"></script> <!--javascript--> <script> $(function(){ $("img").click(function(){ // 獲取屬性的值 alert($("img").attr("src")) ; }); }); </script> </head> <body> <img src="../qq.jpg" /> </body> </html>
效果:
設(shè)置單個元素屬性值示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>屬性操作</title> <style> *{ margin: 0px; padding: 0px; } td{ width: 100px; border: 1px solid #cccccc; cursor: pointer; } </style> <!--引入jQuery--> <script src="../jquery-3.3.1.js"></script> <!--javascript--> <script> $(function(){ $("img").click(function(){ // 獲取屬性的值 //alert($("img").attr("src")) ; // 添加單個屬性 $("img").attr("alt","QQ斗地主"); alert($("img").attr("alt")) ; }); }); </script> </head> <body> <img src="../qq.jpg" /> </body> </html>
效果:
添加多個屬性值示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>屬性操作</title> <style> *{ margin: 0px; padding: 0px; } td{ width: 100px; border: 1px solid #cccccc; cursor: pointer; } </style> <!--引入jQuery--> <script src="../jquery-3.3.1.js"></script> <!--javascript--> <script> $(function(){ $("img").click(function(){ // 獲取屬性的值 //alert($("img").attr("src")) ; // 添加單個屬性 //$("img").attr("alt","QQ斗地主"); //alert($("img").attr("alt")) ; // 添加多個屬性 $("img").attr({"alt":"QQ斗地主","title":"斗地主"}); console.log($(this).attr("alt")); console.log($(this).attr("title")); }); }); </script> </head> <body> <img src="../qq.jpg" /> </body> </html>
效果:
二、刪除屬性值
removeAttr()匹配的元素中刪除一個屬性,語法如下:
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>屬性操作</title> <style> *{ margin: 0px; padding: 0px; } td{ width: 100px; border: 1px solid #cccccc; cursor: pointer; } </style> <!--引入jQuery--> <script src="../jquery-3.3.1.js"></script> <!--javascript--> <script> $(function(){ $("img").click(function(){ // 獲取屬性的值 //alert($("img").attr("src")) ; // 添加單個屬性 //$("img").attr("alt","QQ斗地主"); //alert($("img").attr("alt")) ; // 添加多個屬性 //$("img").attr({"alt":"QQ斗地主","title":"斗地主"}); //console.log($(this).attr("alt")); //console.log($(this).attr("title")); // 刪除屬性 $(this).removeAttr("src"); }); }); </script> </head> <body> <img src="../qq.jpg" /> </body> </html>
效果:
到此這篇關(guān)于jQuery操作屬性值的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實現(xiàn)iframe父窗體和子窗體的相互調(diào)用
這篇文章主要介紹了jQuery實現(xiàn)iframe父窗體和子窗體的相互調(diào)用,涉及jQuery窗體調(diào)用的相關(guān)技巧,需要的朋友可以參考下2016-06-06jQuery基于ID調(diào)用指定iframe頁面內(nèi)的方法
這篇文章主要介紹了jQuery基于ID調(diào)用指定iframe頁面內(nèi)的方法,涉及jQuery針對頁面框架元素的選擇與方法的調(diào)用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-07-07jQuery使用CSS()方法給指定元素同時設(shè)置多個樣式
這篇文章主要介紹了jQuery使用CSS()方法給指定元素同時設(shè)置多個樣式的方法,實例分析了jQuery中css方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03cnblogs TagCloud基于jquery的實現(xiàn)代碼
自創(chuàng)"山寨版"的"博客園"TagCloud!...2010-06-06jquery結(jié)合html實現(xiàn)中英文頁面切換
這篇文章主要為大家詳細(xì)介紹了jquery結(jié)合html實現(xiàn)中英文頁面切換,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11