learn vallian JS 30 days

day 1 - Drum kit

T: 2017-01-07
Drum kit 视频地址
主要知识点有：

1. classList 对 节点 'class' 的操作方法 add | remove | toggle | contains(但需要注意的是IE11对这个属性都不是很支持)，caniuse classList
2. transition相应的事件 transitionend, 这个事件是指，当 css transition 完成时触发，注意这个属性IE还不支持， MDN 上 transitionend
3. 元素，及其相关的属性，比如play() | currentTime,其中currentTime IE还不支持

关于classList说明一下：

// 使用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

常常会有这种想法，就是在导航栏，给

,添加一个 is-active 类，当点击其它标签时，这个 is-active 类会添加给被点击的元素上。当然这用 jQuery 分分钟的事，用原生的JS写就比较难了。

后来查了一些资料，算是找到了方法: stack overflow

codepen 代码

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');
});