JavaScript中的this指向和自定義屬性詳解
1.this關鍵字
this指向的是當前元素
全局函數(shù)中的this指向window對象
代碼中聲明了一個全局函數(shù),是屬于瀏覽器窗口對象的,所以this表示的就是瀏覽器窗口對象window
function fn() { consolo.log(this); } fn()
標簽事件屬性中的this指向window對象
如果將一個全局函數(shù)在一個標簽屬性中調用,如下:
<button onclick="fn()">點我試試</button>
function fn() { console.log(this) }
事件屬性函數(shù)中的this指向當前操作的標簽
如果在標簽對象的屬性上聲明了一個函數(shù),此時這個函數(shù)屬于標簽屬性,所以函數(shù)內部的this指向當前標簽對象
<button id="btn">點我試試</button>
var btn = document.getElementById('btn'); btn.onclick = function() { console.log(this); }
2.自定義屬性
在前端網(wǎng)頁的開發(fā)中,JavaScript語法操作的主要是標簽對象,在一些特定的場合,需要通過設置自定義屬性來對標簽進行操作
基本語法:element.屬性名 =屬性值
var btn = document.getElementById('btn'); btn.index = 1;
3.綜合案例1:tab選項卡的實現(xiàn)
實現(xiàn)步驟
1.先完成靜態(tài)頁面的設計(html與css代碼見附錄)
2.先獲取頁面元素
var uli = document.querySelector('ul').querySelectorAll('li'); var oli = document.querySelector('ol').querySelectorAll('li');
3.通過for循環(huán)為元素添加點擊事件
for (var i = 0; i < uli.length; i++) { uli[i].addEventListener('click', function () { } ) }
4.給元素添加自定義屬性,給對應的選項卡添加索引號
uli[i].index = i;
給點擊事件添加對應的樣式(完整代碼)
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'; }) }
注意:本案例是通過添加類名來實現(xiàn)對應選項卡的顯示和隱藏,在給元素添加對應的類名之前需要將所有元素的類名清除
附錄
<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>
總結
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關注腳本之家的更多內容!
相關文章
前端echarts tooltip展示多項自定義數(shù)據(jù)代碼示例
Echarts是一個基于JavaScript的開源圖表庫,提供了豐富的圖表類型,如折線圖、柱狀圖、餅圖、散點圖等,支持動態(tài)數(shù)據(jù)交互和自定義配置,這篇文章主要給大家介紹了關于前端echarts tooltip展示多項自定義數(shù)據(jù)的相關資料,需要的朋友可以參考下2024-09-09詳解微信小程序自定義組件的實現(xiàn)及數(shù)據(jù)交互
這篇文章主要介紹了微信小程序自定義組件的實現(xiàn)及數(shù)據(jù)交互,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07