JavaScript中的this指向和自定義屬性詳解
1.this關(guān)鍵字
this指向的是當(dāng)前元素
全局函數(shù)中的this指向window對象
代碼中聲明了一個(gè)全局函數(shù),是屬于瀏覽器窗口對象的,所以this表示的就是瀏覽器窗口對象window
function fn() { consolo.log(this); } fn()
標(biāo)簽事件屬性中的this指向window對象
如果將一個(gè)全局函數(shù)在一個(gè)標(biāo)簽屬性中調(diào)用,如下:
<button onclick="fn()">點(diǎn)我試試</button>
function fn() { console.log(this) }
事件屬性函數(shù)中的this指向當(dāng)前操作的標(biāo)簽
如果在標(biāo)簽對象的屬性上聲明了一個(gè)函數(shù),此時(shí)這個(gè)函數(shù)屬于標(biāo)簽屬性,所以函數(shù)內(nèi)部的this指向當(dāng)前標(biāo)簽對象
<button id="btn">點(diǎn)我試試</button>
var btn = document.getElementById('btn'); btn.onclick = function() { console.log(this); }
2.自定義屬性
在前端網(wǎng)頁的開發(fā)中,JavaScript語法操作的主要是標(biāo)簽對象,在一些特定的場合,需要通過設(shè)置自定義屬性來對標(biāo)簽進(jìn)行操作
基本語法:element.屬性名 =屬性值
var btn = document.getElementById('btn'); btn.index = 1;
3.綜合案例1:tab選項(xiàng)卡的實(shí)現(xiàn)
實(shí)現(xiàn)步驟
1.先完成靜態(tài)頁面的設(shè)計(jì)(html與css代碼見附錄)
2.先獲取頁面元素
var uli = document.querySelector('ul').querySelectorAll('li'); var oli = document.querySelector('ol').querySelectorAll('li');
3.通過for循環(huán)為元素添加點(diǎn)擊事件
for (var i = 0; i < uli.length; i++) { uli[i].addEventListener('click', function () { } ) }
4.給元素添加自定義屬性,給對應(yīng)的選項(xiàng)卡添加索引號
uli[i].index = i;
給點(diǎn)擊事件添加對應(yīng)的樣式(完整代碼)
for (var i = 0; i < uli.length; i++) { uli[i].index = i; uli[i].addEventListener('click', function () { for (var j = 0; j < uli.length; j++) { uli[j].className = ''; oli[j].className = ''; } this.className = 'current'; oli[this.index].className = 'current'; }) }
注意:本案例是通過添加類名來實(shí)現(xiàn)對應(yīng)選項(xiàng)卡的顯示和隱藏,在給元素添加對應(yīng)的類名之前需要將所有元素的類名清除
附錄
<style> * { margin: 0; padding: 0; list-style: none; } .box { height: 250px; width: 300px; border: 2px solid; } ul { display: flex; justify-content: space-between; background: red; border-bottom: 2px #ccc; } ul li { float: left; width: 100px; color: #fff; cursor: pointer; height: 40px; line-height: 40px; text-align: center; } ul li.current { border-bottom: 5px green solid; } ol li { margin: 30px; display: none; } ol li.current { display: block; } </style> <div class="box"> <ul> <li class="current">第一頁</li> <li>第二頁</li> <li>第三頁</li> </ul> <ol> <li class="current">我是第一頁</li> <li>我是第二頁</li> <li>我是第三頁</li> </ol> </div>
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
前端echarts tooltip展示多項(xiàng)自定義數(shù)據(jù)代碼示例
Echarts是一個(gè)基于JavaScript的開源圖表庫,提供了豐富的圖表類型,如折線圖、柱狀圖、餅圖、散點(diǎn)圖等,支持動態(tài)數(shù)據(jù)交互和自定義配置,這篇文章主要給大家介紹了關(guān)于前端echarts tooltip展示多項(xiàng)自定義數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2024-09-09JavaScript實(shí)現(xiàn)大文件上傳的示例代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)大文件上傳功能的示例代碼,文中的代碼講解詳細(xì),對我們學(xué)習(xí)JavaScript有一定幫助,感興趣可以跟隨小編一起學(xué)習(xí)一下2022-11-11js中回調(diào)函數(shù)的學(xué)習(xí)筆記
這篇文章主要介紹了js中回調(diào)函數(shù)的相關(guān)知識,需要的朋友可以參考下2014-07-07詳解微信小程序自定義組件的實(shí)現(xiàn)及數(shù)據(jù)交互
這篇文章主要介紹了微信小程序自定義組件的實(shí)現(xiàn)及數(shù)據(jù)交互,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07js實(shí)現(xiàn)簡易點(diǎn)擊切換顯示或隱藏
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡易點(diǎn)擊切換顯示或隱藏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11微信小程序中時(shí)間戳和日期的相互轉(zhuǎn)換問題
這篇文章主要介紹了微信小程序中時(shí)間戳和日期的相互轉(zhuǎn)換問題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07