jQuery操作屬性值方法介紹
更新時間：2022年05月04日 11:39:03 作者：.NET開發(fā)菜鳥
這篇文章介紹了jQuery操作屬性值的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
一、獲取或設置元素的屬性值
attr()獲取或設置匹配元素的屬性值，語法如下：
獲取元素屬性值示例：
<!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>效果：
設置單個元素屬性值示例：
<!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>效果：
到此這篇關于jQuery操作屬性值的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
jQuery select表單提交省市區(qū)城市三級聯(lián)動核心代碼
這篇文章主要介紹了jQuery select表單提交省市區(qū)城市三級聯(lián)動核心代碼,需要的朋友可以參考下2014-06-06
jquery插件canvaspercent.js實現(xiàn)百分比圓餅效果
這篇文章主要為大家詳細介紹了jquery插件canvaspercent.js實現(xiàn)百分比圓餅效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
使用jquery實現(xiàn)select添加實現(xiàn)后臺權限添加的效果
使用jquery實現(xiàn)select添加實現(xiàn)后臺權限添加的效果，需要的朋友可以參考下。2011-05-05
要使對象獲得焦點，應該調(diào)用DOM對象的focus方法，下面有個不錯的示例，大家可以參考下2014-02-02
siblings() 獲得匹配集合中每個元素的同胞，通過選擇器進行篩選是可選的。接下來通過本文給大家介紹jQuery siblings()用法實例詳解，需要的朋友參考下吧2016-04-04
在Jquery中，$是JQuery的別名，所有使用$的地方也都可以使用JQuery來替換，如$('#msg')等同于JQuery('#msg')的寫法。然而，當我們引入多個js庫后，在另外一個js庫中也定義了$符號的話，那么我們在使用$符號時就發(fā)生了沖突2013-12-12
這篇文章主要介紹了jquery制作屬于自己的select自定義樣式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-11-11
jquery圓形菜單展開收縮效果是基于jquery和css3實現(xiàn)的，非常不錯，具有參考借鑒價值，需要的的朋友參考下2017-02-02
這里給大家分享的是一個網(wǎng)友咨詢的關于jQuery獲取name名的value值的問題，感覺很具有普遍性，所以記錄下來，希望對大家能有所幫助。2015-02-02
jquery獲取easyui日期控件的值實現(xiàn)方法
下面小編就為大家?guī)硪黄猨query獲取easyui日期控件的值實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11