快捷導(dǎo)航

JS和jQuery通過(guò)this獲取html標(biāo)簽中的屬性值(實(shí)例代碼)

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

本文通過(guò)實(shí)例代碼給大家分享JS和jQuery通過(guò)this獲取html標(biāo)簽中的屬性值，非常不錯(cuò)，具有參考借鑒價(jià)值，需要額朋友參考下吧

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

<html>
 <head>
  <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
  <script type="text/javascript">
   /** JQUERY 通過(guò)當(dāng)前標(biāo)簽屬性名，獲取屬性的值 */
   function attrsByJquery(obj){
    var v1 = $(obj).attr("dbname");
    var v2 = $(obj).attr("name");
    alert(v1);
    alert(v2);
   }
   
   /** JAVASCRIPT 通過(guò)當(dāng)前標(biāo)簽屬性名，獲取屬性的值 */
   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>

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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