jQuery樣式之.attr和.remove
阿新 • • 發佈：2018-11-10
舉例瞭解jQuery中樣式之.attr和.removeAttr使用方法：
jQuery中用attr()方法來獲取和設定元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會經常用到attr()
attr()有4個表示式
- attr(傳入屬性名)：獲取屬性的值
- attr(屬性名, 屬性值)：設定屬性的值
- attr(屬性名,函式值)：設定屬性的函式值
- attr(attributes)：給指定元素設定多個屬性值，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }
removeAttr()刪除方法
.removeAttr( attributeName ) : 為匹配的元素集合中的每個元素中移除一個屬性（attribute）
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-3.3.1.js"></script> <title>無標題文件</title> </head> <body> <h2>.attr()與.removeAttr()</h2> <h3>.attr</h3> <form> <input type="text" value="設定value" /> <input type="text" value="獲取value"/> <input type="text" value="回撥拼接value" /> <input type="text" value="刪除value" /> </form> <script type="text/javascript"> //找到第一個input，通過attr設定屬性value的值 $('input:first').attr('value','.attr( attributeName, value )') </script> <script type="text/javascript"> //找到第二個input，通過attr獲取屬性value的值 $('input:eq(1)').attr('value') </script> <script type="text/javascript"> //找到第三個input，通過使用一個函式來設定屬性 //可以根據該元素上的其它屬性值返回最終所需的屬性值 //例如，我們可以把新的值與現有的值聯絡在一起： $('input:eq(2)').attr('value',function(i, val){ return '通過function設定' + val }) </script> <script type="text/javascript"> //找到第四個input，通過使用removeAttr刪除屬性 $('input:ea(3)').removeAttr('value') </script> </body> </html>
瀏覽器中預覽效果：
