亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2023年06月09日 00:45:56   作者：卡卡西最近怎么樣  
這篇文章帶領(lǐng)大家熟練掌握?jQuery?的屬性方面的操作，包括固有屬性的獲取與設(shè)置，自定義屬性的獲取與設(shè)置等等，走進(jìn)?jQuery?的更深層次階段，這也是腳本之家小編發(fā)現(xiàn)的一篇比較實用的文章

此篇文章帶領(lǐng)大家熟練掌握 jQuery 的屬性方面的操作，包括固有屬性的獲取與設(shè)置，自定義屬性的獲取與設(shè)置等等，走進(jìn) jQuery 的更深層次階段

一：固有屬性的設(shè)置與獲取 prop

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

1.1 固有屬性的獲取 

element.prop('屬性名')

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

1.2 固有屬性的設(shè)置 

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

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

input 標(biāo)簽的固有屬性 type 的值設(shè)置為了 password

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

 二：自定義屬性的設(shè)置與獲取 attr 

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

2.1 自定義屬性的設(shè)置 

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

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

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

2.2 自定義屬性的獲取

element.attr('屬性名')

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

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

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

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

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

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

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

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

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

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

3.2 數(shù)據(jù)緩存獲取 H5 標(biāo)準(zhǔn)的自定義書屬性

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

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

 【注意！！不需要加 data- 前綴，并且此處獲取的值為數(shù)字型】

JavaScript 自定義屬性 data-*

定義和用法

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

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

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

data-* 屬性包括兩部分：

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

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

HTML 4.01 與 HTML5 之間的差異

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

語法

<element data-*="somevalue">

屬性值

值描述
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>

到此這篇關(guān)于jQuery 獲取與設(shè)置元素屬性的詳細(xì)方法(看完這篇文章就搞明白了)的文章就介紹到這了,更多相關(guān)jQuery 獲取與設(shè)置元素屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論