JavaScript中的this指向和自定義屬性詳解
阿新 • • 發佈:2021-09-08
目錄
- 1.this關鍵字
- 2.自定義屬性
- 3.綜合案例1:tab選項卡的實現
- 附錄
- 總結
1.this關鍵字
this指向的是當前元素
全域性函式中的this指向window物件
程式碼中聲明瞭一個全域性函式,是屬於瀏覽器視窗物件的,所以this表示的就是瀏覽器視窗物件window
function fn() { consolo.log(this); } fn()
標籤事件屬性中的this指向window物件
如果將一個全域性函式在一個標籤屬性中呼叫,如下:
<button onclick="fn()">點我試試</button>
function fn() { console.log(this) }
事件屬性函式中的this指向當前操作的標籤
如果在標籤物件的屬性上聲明瞭一個函式,此時這個函式屬於標籤屬性,所以函式內部的this指向當前標籤物件
<button id="btn">點我試試</button>
var btn = document.getElementById('btn'); btn.onclick = function() { console.log(this); }
2.自定義屬性
在前端的開發中,語法操作的主要是標籤物件,在一些特定的場合,需要通過設定自定義屬性來對標籤進行操作
基本語法:element.屬性名 =屬性值
var btn = document.www.cppcns.comgetElementById('btn'); btn.index = 1;
3.綜合案例1:tab選項卡的實現
實現步驟www.cppcns.com
1.先完成靜態頁面的設計(html與程式碼見附錄)
2.先獲取頁面元素
var uli = document.querySelector('ul').querySelectorAll('li'); var oli = document.querySelector('ol').querySelectorAll('li');
3.通過for迴圈為元素新增點選事件
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'; }) }
注意:本案例是通過新增類名來實現對應選項卡的顯示和隱藏,在給元素新增對應的類名之前需要將所有元素的類名清除
附錄
<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>
總結
本篇文章就到這裡了,希望能夠給你帶來幫助,也希望您能夠多多關注我們的更多內容!