首頁 > web前端 > js教程 > 主體

jquery元素固有屬性的操作:prop()和removeProp()

无忌哥哥
發布: 2018-06-29 11:49:38
原創
1735 人瀏覽過

jquery元素固有屬性的操作:prop()和removeProp()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.元素固有属性的操作:prop()和removeProp()</title>
</head>
<body>
<img src="../images/fbb.jpg" width="200" alt="美女" title="明星" id="pic" data-nation="中国">
</body>
登入後複製

1.prop():只能取得元素的固有屬性

取得固有屬性alt,title

var res = $(&#39;#pic&#39;).prop(&#39;alt&#39;)
var res = $(&#39;#pic&#39;).prop(&#39;title&#39;)
登入後複製

取得自訂屬性data-nation,返回undefined,取得不到

var res = $(&#39;#pic&#39;).prop(&#39;data-nation&#39;)
登入後複製
登入後複製

但是如何使用prop()進行動態設定自訂屬性後,就可以正常取得到

var res = $(&#39;#pic&#39;).prop(&#39;data-nation&#39;,&#39;中国山东&#39;)
登入後複製

此時查看元素,發現自訂屬性並未變更,所以這種設定對元素無影響

此時再次檢視到的自訂屬性值,只是存在於目前腳本的一個臨時資料

var res = $(&#39;#pic&#39;).prop(&#39;data-nation&#39;)
登入後複製
登入後複製

2.removeProp()

這個方法與removeAttr()有二點不同:

1.不支援空格分隔的屬性清單字串,即一次只能刪除一個屬性

2.它不能刪除原生屬性,如果真要刪除,只要將值設為false即可

不能同時移除多個屬性,所以此條語句無效

var res = $(&#39;#pic&#39;).removeProp(&#39;alt data-nation&#39;)
登入後複製

刪除自訂屬性data-nation

var res = $(&#39;#pic&#39;).removeProp(&#39;data-nation&#39;)
登入後複製

刪除原生固有的屬性alt,刪除失敗

var res = $(&#39;#pic&#39;).removeProp(&#39;alt&#39;)
登入後複製

用removeAttr()刪除原生屬性alt, 刪除成功

var res = $(&#39;#pic&#39;).removeAttr(&#39;alt&#39;)
登入後複製

所以,如果要用removeProp()刪除原生屬性,大多情況下將值設為false即可

#最終由使用者腳本自行處理

var res = $(&#39;#pic&#39;).prop(&#39;alt&#39;,false)
var res = $(&#39;#pic&#39;).prop(&#39;alt&#39;)
登入後複製

控制台查詢結果

console.log(res)
登入後複製

以上是jquery元素固有屬性的操作:prop()和removeProp()的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板