JS和jQuery通過this獲取html標簽中的屬性值(實例代碼)

更新時間：2017年09月11日 15:17:42 作者：Charles9703

本文通過實例代碼給大家分享JS和jQuery通過this獲取html標簽中的屬性值，非常不錯，具有參考借鑒價值，需要額朋友參考下吧

廢話不多說了，具體代碼如下所示：

<html>
 <head>
  <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
  <script type="text/javascript">
   /** JQUERY 通過當前標簽屬性名，獲取屬性的值 */
   function attrsByJquery(obj){
    var v1 = $(obj).attr("dbname");
    var v2 = $(obj).attr("name");
    alert(v1);
    alert(v2);
   }
   
   /** JAVASCRIPT 通過當前標簽屬性名，獲取屬性的值 */
   function attrsByJs(obj){
    var v1 = obj.getAttribute('name');
    var v2 = obj.getAttribute('dbname');
    alert(v1);
    alert(v2);
   }
   
   function attrsButtons(obj){
    var v = obj.getAttribute('name');
    var vv = $(obj).attr("myname");
    alert(v);
    alert(vv);
   }
   
  </script>
 </head>
 <body>
  <div>
   <div style="width: 100px;height: 30px;float:left; margin-left:30px;" name="this is name feild" dbname="oracle1" onclick="attrsByJs(this)">JavaScript</div>
   <div style="width: 100px;height: 30px;float:left; margin-left:30px;" name="this is name feild" dbname="oracle2" onclick="attrsByJquery(this)">Juqery</div>
   <input type="button" name="abcdeg" myname="this is my name" onclick="attrsButtons(this)" value="buttons">
  </div>
 </body>
</html>

總結

以上所述是小編給大家介紹的JS和jQuery通過this獲取html標簽中的屬性值，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

JS實現(xiàn)百度網(wǎng)盤任意文件強制下載功能
這篇文章主要介紹了JS實現(xiàn)百度網(wǎng)盤任意文件強制下載 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-08-08
微信小程序的注冊頁面包含倒計時驗證碼、獲取用戶信息
本文通過實例代碼給大家介紹了微信小程序的注冊頁面包含倒計時驗證碼、獲取用戶信息的相關知識，本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
2019-05-05
ElementUI的Dialog彈窗實現(xiàn)拖拽移動功能示例代碼
這篇文章主要介紹了ElementUI的Dialog彈窗實現(xiàn)拖拽移動功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-07-07
如何使用工具規(guī)范前端項目的commits與changelog技巧
這篇文章主要為大家介紹了如何使用工具規(guī)范前端項目的commits與changelog技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
js中的preventDefault與stopPropagation詳解
本篇文章主要是對js中的preventDefault與stopPropagation進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
uniapp表單驗證方法詳解
From表單組件具有數(shù)據(jù)收集、提交數(shù)據(jù)的功能,某種程度上說它就是一個容器,下面這篇文章主要給大家介紹了關于uniapp表單驗證的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-10-10
使用JavaScript觸發(fā)過渡效果的方法
hover 和 :focus 這樣的偽類，我們可以很方便的將元素從一個樣式切換到另一個樣式，而且切換是會有過渡效果。但有時我們想要使用 js 來驅動過渡（即在代碼中觸發(fā)過渡）也是可以實現(xiàn)的，下面通過本文給大家介紹下
2017-01-01
詳解實現(xiàn)一個通用的“劃詞高亮”在線筆記功能
這篇文章主要介紹了實現(xiàn)一個通用的“劃詞高亮”在線筆記文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
JavaScript調(diào)用模式與this關鍵字綁定的關系
這篇文章主要介紹了JavaScript調(diào)用模式與this關鍵字綁定的關系的相關資料,需要的朋友可以參考下
2018-04-04
JS利用ffmpeg和sharp玩轉音視頻和圖片
ffmpeg?是一個非常流行的開源軟件套件,用于處理音頻和視頻數(shù)據(jù),而要想對圖片之類的進行壓縮,我們可以選擇?sharp?來進行操作,所以下面我們就來學習一下前端如何利用ffmpeg和sharp玩轉音視頻和圖片吧
2023-10-10