day 1 - Drum kit
T: 2017-01-07
Drum kit 視頻地址
主要知識(shí)點(diǎn)有：
-
classList 對(duì) 節(jié)點(diǎn) 'class' 的操作方法
add|remove|toggle|contains(但需要注意的是IE11對(duì)這個(gè)屬性都不是很支持)擂送，caniuse classList -
transition相應(yīng)的事件
transitionend, 這個(gè)事件是指，當(dāng) css transition 完成時(shí)觸發(fā)，注意這個(gè)屬性IE還不支持偎球， MDN 上 transitionend -
<audio>元素收擦，及其相關(guān)的屬性开财，比如
play()| currentTime,其中currentTime IE還不支持
關(guān)于classList說(shuō)明一下：
<div class="container js-hover"></div>
// 使用className可以獲取一個(gè)字符串
var elm = $('.container');
elm.className; // "container js-hover";
// 添加一個(gè)class進(jìn)去
var classNames = elm.className.split(/\s+/);
classNames .push('info-news');
elm.className = classNames .join(" ");
// 移除一個(gè)class,則先找到該class
var pos = -1,
i,
len;
for (i = 0, len = classNames.length; i < len; i++) {
if (classNames[i] === 'js-hover') {
pos = i;
break;
}
}
classNames.splice(pos, 1);
elm.classNames.join(' ');
// 使用classList 獲取一個(gè)數(shù)組
elm.classList; // ["container", "js-hover"]
// 添加一個(gè)class
elm.classList.add('info-news');
// 移除
elm.classList.remove('js-hover');
// toggle
elm.classList.toggle('container');
// 是否存在
elm.classList.contains('container'); // true
day 2 - add 'active' to element
T: 2017-1-11
常常會(huì)有這種想法始鱼，就是在導(dǎo)航欄千埃，給<li>,添加一個(gè) is-active 類济欢，當(dāng)點(diǎn)擊其它標(biāo)簽時(shí)赠堵，這個(gè) is-active 類會(huì)添加給被點(diǎn)擊的元素上。當(dāng)然這用 jQuery 分分鐘的事法褥，用原生的JS寫就比較難了茫叭。
后來(lái)查了一些資料，算是找到了方法: stack overflow
html(使用jade寫):
ul#nav.tabs
li.tab.is-active: a(href="#") Home
li.tab: a(href="#") People
li.tab: a(href="#") Times
li.tab: a(href="#") Life
樣式：
body
padding-top: 20px
ul,
li
padding: 0
margin: 0
list-style: none
.tabs
display: flex
border-bottom: 1px solid #D7DBDD
.tab
cursor: pointer
padding: 5px 30px
color: #16A2D7
font-size: 16px
.tab.is-active
border-bottom: 2px solid red
color: black
js代碼：
var nav = document.querySelector('#nav')
// 事件委托
nav.addEventListener('click', e => {
var target = e.target;
var currentTarget = e.currentTarget;
// 判斷是否是點(diǎn)擊的目標(biāo)
if (target.tagName.toUpperCase() === 'LI') {
currentTarget.querySelector('.is-active').classList.remove('is-active');
target.classList.add('is-active');
}
})
主要知識(shí)點(diǎn)：
- 利用事件委托
- e.currentTarget和e.target的使用
- e.currentTarget.querySelector()查詢子節(jié)點(diǎn)中的元素
當(dāng)然這種寫法只是為了寫出代碼半等，實(shí)際中考慮兼容性和難易程度還是選擇jQuery比較方便
jquery寫法:
var tab = $('.tab');
tab.on(click, function(e) {
tab.removeClass('is-active');
$(this).addClass('is-active');
});
