腳本之家服務器常用軟件

快捷導航

jQuery?獲取與設置元素屬性的詳細方法(看完這篇文章就搞明白了)

更新時間：2023年06月09日 00:45:56 作者：卡卡西最近怎么樣

這篇文章帶領大家熟練掌握?jQuery?的屬性方面的操作，包括固有屬性的獲取與設置，自定義屬性的獲取與設置等等，走進?jQuery?的更深層次階段，這也是腳本之家小編發(fā)現(xiàn)的一篇比較實用的文章

一：固有屬性的設置與獲取 prop

什么是固有屬性？固有屬性即標簽本身具有的屬性，例如 a 標簽的 href 屬性，input 標簽的 type 屬性，這些就叫做元素的固有屬性，此版塊我們要學會獲取與設置其固有屬性。

1.1 固有屬性的獲取

element.prop('屬性名')

<body>
   <input type="text">
   <script>
       console.log($('input').prop('type'));
   </script>
</body>

1.2 固有屬性的設置

element.prop('屬性名'，'屬性值')

<body>
   <input type="text">
   <script>
       $('input').prop('type','password');
   </script>
</body>

input 標簽的固有屬性 type 的值設置為了 password

<head>...</ head>
<body>
<inputtype="password"> == $0
<script>
$('input').prop('type','password');
</script>
</body>

二：自定義屬性的設置與獲取 attr

在原生 JS 版塊我們使用過自定義屬性，在點擊導航切換頁面時我們給排列的五個 div 依次設置了自定義屬性 index，我們使用的是 setAttribute 設置定義屬性，和 getAttribute 獲取設置好的自定義屬性值，在 jQuery 領域，我們也有同樣效果的獲取和設置自定義屬性的方法。

2.1 自定義屬性的設置

element.attr('屬性名'，'屬性值')

<body>
   <div></div>
   <script>
       $('div').attr('index','100')
   </script>
</body>

設置了自定義屬性 index 值為100，如果元素本身就有自定義屬性，那么更改自定義屬性值也用此方法，將第二個參數(shù)改為想要設置的值即可

2.2 自定義屬性的獲取

element.attr('屬性名')

<body>
   <div index="1"></div>
   <script>
       console.log($('div').attr('index'));
   </script>
</body>

三：數(shù)據(jù)緩存 data

還有一個獲取設置屬性值的辦法為數(shù)據(jù)緩存 data，這個里面的數(shù)據(jù)即屬性值，不會顯示在控制臺的元素標簽里（不會改變 DOM 結構），而是存放在元素的內存中，但是當頁面刷新，元素內存中的數(shù)據(jù)將被刪除

3.1 數(shù)據(jù)緩存的形式設置屬性和獲取性值

設置屬性：element.data('屬性名'，'屬性值')

獲取屬性值：element.data('屬性名')

<body>
   <div></div>
   <script>
       $('div').data('index','1');
   </script>
</body>

可以發(fā)現(xiàn)我們雖然添加了自定義的屬性 index，但是結構中并沒有顯示，這就是因為數(shù)據(jù)存放在了元素內存中，沒有改變 DOM 結構

但是如果我們獲取是可以得到這個屬性值的

<body>
   <div></div>
   <script>
       $('div').data('index','1');
       console.log($('div').data('index'));
   </script>
</body>

3.2 數(shù)據(jù)緩存獲取 H5 標準的自定義書屬性

我們知道 H5 標準下的自定義屬性前面有個 data- ，在這里使用data獲取H5標準的自定義屬性時不需要加 data-，并且得到的是一個 數(shù)字型 的值

<body>
   <div data-index="123456"></div>
   <script>
       console.log($('div').data('index'));
   </script>
</body>

【注意?。〔恍枰?data- 前綴，并且此處獲取的值為數(shù)字型】

JavaScript 自定義屬性 data-*

定義和用法

data-* 屬性用于存儲頁面或應用程序的私有自定義數(shù)據(jù)。

data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。

存儲的（自定義）數(shù)據(jù)能夠被頁面的 JavaScript 中利用，以創(chuàng)建更好的用戶體驗（不進行 Ajax 調用或服務器端數(shù)據(jù)庫查詢）。

data-* 屬性包括兩部分：

屬性名不應該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符
屬性值可以是任意字符串

注釋：用戶代理會完全忽略前綴為 "data-" 的自定義屬性。

HTML 4.01 與 HTML5 之間的差異

data-* 屬性是 HTML5 中的新屬性。

語法

屬性值

值	描述
somevalue	規(guī)定屬性的值（以字符串）。

實例

function showDetails(element) {
      var elementType = element.getAttribute("data-type");
      alert(element.innerHTML + "是" + elementType + "屬性角色");
    }

  <h1>角色</h1>
  <p>點擊某個角色來查看其屬性：</p>
  <ul>
    <li onclick="showDetails(this)" id="fire" data-type="火">迪盧克</li>
    <li onclick="showDetails(this)" id="thunder" data-type="雷">菲謝爾</li>
    <li onclick="showDetails(this)" id="water" data-type="水">芭芭拉</li>
  </ul>

使用dataset屬性操作自定義屬性

function showDetails(element) {
    var elementType = element.getAttribute("data-type");
    var h3 = document.getElementsByTagName('h3')[0]
    alert(element.innerHTML + "是" + elementType + "屬性角色");
    h3.innerHTML = element.dataset.type
  }

<h1>角色</h1>
  <p>點擊某個角色來查看其屬性：</p>
  <ul>
    <li onclick="showDetails(this)" id="fire" data-type="火">迪盧克</li>
    <li onclick="showDetails(this)" id="thunder" data-type="雷">菲謝爾</li>
    <li onclick="showDetails(this)" id="water" data-type="水">芭芭拉</li>
  </ul>
  <h3></h3>

在函數(shù)中alert語句前添加一行代碼，對將被點擊的元素的data-type賦值

element.dataset.type = '不知道啥屬性'

<h1>角色</h1>
  <p>點擊某個角色來查看其屬性：</p>
  <ul>
    <li onclick="showDetails(this)" id="fire" data-type="火">迪盧克</li>
    <li onclick="showDetails(this)" id="thunder" data-type="雷">菲謝爾</li>
    <li onclick="showDetails(this)" id="water" data-type="水">芭芭拉</li>
  </ul>
  <h3></h3>
<script> 
function showDetails(element) {
    var elementType = element.getAttribute("data-type");
    var h3 = document.getElementsByTagName('h3')[0]
	element.dataset.type = '不知道啥屬性'
    alert(element.innerHTML + "是" + elementType + "屬性角色");
    h3.innerHTML = element.dataset.type
  }
</script>