day 1 - Drum kit
T: 2017-01-07
Drum kit 视频地址
主要知识点有：
-
classList 对 节点 'class' 的操作方法
add|remove|toggle|contains(但需要注意的是IE11对这个属性都不是很支持)，caniuse classList -
transition相应的事件
transitionend, 这个事件是指，当 css transition 完成时触发，注意这个属性IE还不支持， MDN 上 transitionend -
<audio>元素，及其相关的属性，比如
play()| currentTime,其中currentTime IE还不支持
关于classList说明一下：
<div class="container js-hover"></div>
// 使用className可以获取一个字符串
var elm = $('.container');
elm.className; // "container js-hover";
// 添加一个class进去
var classNames = elm.className.split(/\s+/);
classNames .push('info-news');
elm.className = classNames .join(" ");
// 移除一个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 获取一个数组
elm.classList; // ["container", "js-hover"]
// 添加一个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
常常会有这种想法，就是在导航栏，给<li>,添加一个 is-active 类，当点击其它标签时，这个 is-active 类会添加给被点击的元素上。当然这用 jQuery 分分钟的事，用原生的JS写就比较难了。
后来查了一些资料，算是找到了方法: 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;
// 判断是否是点击的目标
if (target.tagName.toUpperCase() === 'LI') {
currentTarget.querySelector('.is-active').classList.remove('is-active');
target.classList.add('is-active');
}
})
主要知识点：
- 利用事件委托
- e.currentTarget和e.target的使用
- e.currentTarget.querySelector()查询子节点中的元素
当然这种写法只是为了写出代码，实际中考虑兼容性和难易程度还是选择jQuery比较方便
jquery写法:
var tab = $('.tab');
tab.on(click, function(e) {
tab.removeClass('is-active');
$(this).addClass('is-active');
});
