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

参考：阮一峰-命令清单