A23/24-给简历添加JS

关键词

loading animation （加载动画）
sticky navbar （导航栏黏着可变）
auto hightlight navbar （自动高亮导航选项,到哪里导航就高亮）
auto scroll smoothly （自动平滑滚动）
menu （菜单）
auto hide aside （自动隐藏侧边栏）
gapless slides （无缝轮播）
animate when scroll (当滚动时才会出现的动画)

loading animation

// html
<div class="loading"></div>

// css
.loading {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}
.loading::before, .loading::after {
  content:'';
  background: black;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  animation: s 1.75s linear infinite;
  opacity: 0;
}
.loading::after{
  animation-delay: 0.75s;
}
@keyframes s {
  0%{
    width: 0; height: 0; opacity: 1;
  }
  100%{
    width: 100px; height: 100px; opacity: 0;
  }
}

sticky navbar

// 当使用滚轮时对 siteTopNavBar 添加 sticky 样式
window.onscroll = function(){
  if(window.scrollY !== 0){
    siteTopNavBar.classList.add('sticky')
  } else {
    siteTopNavBar.classList.remove('sticky')
  }
}

auto hightlight navbar

获得特定元素集合（navbar里导航对应的块）
取得距离视口顶部最近的元素
获得id
获得对应的a标签
获得对应的li标签
获得它所有兄弟元素
取消所有兄弟元素的高亮
高亮距离顶部最近的那个

auto scroll smoothly

获得标签数组
遍历
阻止默认动作
获得用户点击的 a 标签
获得标签属性 href
根据 href 属性得到目标元素
根据 offsetTop 得到距离文档顶部的距离
计算当前top与目标top的差值
设置动的次数
计算每次动多少距离
计算多少时间动一次
设置定时器
让 window 滑动到指定坐标

API & 小技巧

绝对定位元素完全居中

.out{
  position:reletive;
}
.in{
  position: absolute;
  top: 0;
  left: 0;
  right : 0;
  bottom: 0;
  margin: auto;
}

绝对定位元素与浮动元素的宽度都是能多小就多小
不换行
```
.className {
  white-space: no-warp;
}
```
window.onscroll事件 -MDN
当前页面的页面滚动事件
window.scrollY属性 -MDN
返回文档在垂直方向已滚动的像素值
onmouseenter事件 -MDN
当定点设备（通常指鼠标）移动到元素上时就会触发，不会冒泡
onmouseleave事件 -MDN
当定点设备（通常指鼠标）移出元素上时就会触发，不会冒泡

target 与 currentTarget

<div id=div ><span>test</span></div>

div.onclick = function(e){  // click 事件会冒泡
  console.log(e.target)  // <span>test</span>
  console.log(e.currentTarget)  // <div id=div ><span>test</span></div>
}

target 是你操作的元素
currentTarget 是你监听的元素

node.nextSibling -MDN
Node.nextSibling 是一个只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。
语法：nextNode = node.nextSibling
注意：node.nextSibling得到的可能是文本节点。
可以写一个递归来判断：
while(node.nodeType === 3) {
node = node.nextSibling }
或者写个考虑到各种情况的，封装成一个函数使用
nodeType节点类型 -MDN
只读属性 Node.nodeType 表示的是该节点的类型。
语法：var type = node.nodeType;
返回一个整数，其代表的是节点类型。
常用的是 1 和 3：

常量值描述
Node.ELEMENT_NODE 1 一个元素节点，例如 <p> 和 <div>。
Node.TEXT_NODE 3 Element 或者 Attr 中实际的文字

tagName的返回值是大写

<div id="ele"></div>

ele.tagName  // DIV

element.tagName -MDN
返回当前元素的标签名
语法：elementName = element.tagName
elementName 是一个字符串,包含了element元素的标签名.
document.querySelectorAll() -MDN
返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。
语法：elementList = document.querySelectorAll(selectors);
elementList 是一个静态的 NodeList 类型的对象.
selectors 是一个由逗号连接的包含一个或多个CSS选择器的字符串.
如果 selectors参数中包含 CSS伪元素,则返回一个空的elementList.
```
// 例子：
var matches = document.querySelectorAll("div.note, div.alert");

var liTags = document.querySelectorAll('nav.menu > ul > li')
```
相关：element.querySelectorAll
document.querySelector() -MDN
返回文档中匹配指定的选择器组的第一个元素(使用深度优先先序遍历文档的节点 | 并且通过文档标记中的第一个元素，并按照子节点数量的顺序迭代顺序节点)。
语法：element = document.querySelector(selectors);
element 是一个 element 对象（DOM 元素）。
selectors 是一个字符串，包含一个或是多个 CSS 选择器，多个则以逗号分隔。

event.preventDefault() -MDN
取消默认事件
语法：event.preventDefault();
例子：

<a id=a href="https:/qq.com"></a>

a.onclick = function(e) {
  e.preventDefault()
}

// 点击 a 标签不会发生跳转

getAttribute() -MDN
返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 "" （空字符串）；
语法：let attribute = element.getAttribute(attributeName);
attribute 是一个包含 attributeName 属性值的字符串。
attributeName 是你想要获取的属性值的属性名称。
例子：
```
<a id=a href="#about"></a>

a.getAttribute('href') // '#about'

a.href  // 'http://127.0.0.1:1800/#about'
// 获得的 href 的值是浏览器补充过的
// 而 getAttribute 获得的是 用户写什么就是什么
```
debugger -MDN
debugger 语句调用任何可用的调试功能，例如设置断点。如果没有调试功能可用，则此语句不起作用。
语法：debugger
element.getBoundingClientRect() -MDN
此返回元素的大小及其相对于视口的位置
语法： rectObject = object.getBoundingClientRect();
详见MDN。
HTMLElement.offsetTop -MDN
HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。
语法：topPos = element.offsetTop;
topPos 为返回的像素数。
例子：
```
var d = document.getElementById("div1");
var topPos = d.offsetTop;
 
if (topPos > 10) {
  // div1 距离它的 offsetParent 元素的顶部的距离大于 10 px
}
```
Window.scrollTo() -MDN
滚动到文档中的某个坐标。
语法：window.scrollTo(x-coord,y-coord )
x-coord 是文档中的横轴坐标。
y-coord 是文档中的纵轴坐标。
例子：window.scrollTo( 0, 1000 );
window.setTimeout() -MDN
WindowOrWorkerGlobalScope 混合的 setTimeout()方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。
window.setInterval() -MDN
WindowOrWorkerGlobalScope 的 setInterval() 方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。
返回一个 intervalID。
语法：
let intervalID = window.setInterval(func, delay[, param1, param2, ...]);
let intervalID = window.setInterval(code, delay);
参数:
- intervalID 是此重复操作的唯一辨识符，可以作为参数传给clearInterval()。
- func 是你想要重复调用的函数。
- code 是另一种语法的应用，是指你想要重复执行的一段字符串构成的代码(使用该语法是不推荐的，不推荐的原因和eval()一样)。
- delay 是每次延迟的毫秒数 (一秒等于1000毫秒)，函数的每次调用会在该延迟之后发生。和setTimeout一样，实际的延迟时间可能会稍长一点。
  需要注意的是,IE不支持第一种语法中向延迟函数传递额外参数的功能.
window.clearInterval() -MDN
取消用setInterval设置的重复定时任务。
语法：window.clearInterval(intervalID)
intervalID是你想要取消的定时器的ID,这个ID是个整数,是由setInterval()返回的.
缓动函数 -MDN
缓动函数指定动画效果在执行时的速度，使其看起来更加真实。
几个常见的：
- linear 线性
- easeInSine 淡入
- easeOutSine 淡出
- waseInOutSine 淡入淡出
- easeInElastic
- easeOutBounce
  你可以通过Tween.js来使用
  你可以去cdnjs.com来寻找脚本
Nath.abs(x) -MDN
Math.abs(x) 函数返回指定数字 “x“ 的绝对值。
Node.parentElement -MDN
返回当前节点的父元素节点,如果该元素没有父节点,或者父节点不是一个元素节点.则返回null.
Node.parentNode -MDN
返回指定的节点在DOM树中的父节点.
ParentNode.children -MDN
返回一个Node的子elements
Node.childNodes -MDN
返回包含指定节点的子节点的集合
children与childNodes的区别
childNodes返回的不只是元素节点，可能还有本文节点（IE不返回文本节点），
而children则是只返回元素节点，（注意children在IE中包含注释节点。）
另外，两者都是即时更新的集合，也就是说如果用js动态添加一个元素，会立刻反映到集合的length属性上。

Git 相关

# 使用一次新的commit，替代上一次提交
# 如果代码没有任何新变化，则用来改写上一次commit的提交信息
$ git commit --amend -m [message]

# 重做上一次commit，并包括指定文件的新变化
$ git commit --amend [file1] [file2] ...
[git 修改commit](http://blog.csdn.net/tangkegagalikaiwu/article/details/8542827)

# 显示暂存区和工作区的差异
$ git diff

参考：阮一峰-命令清单