关键词
- 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') -
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
缓动函数指定动画效果在执行时的速度，使其看起来更加真实。
几个常见的： -
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
参考：阮一峰-命令清单
网友评论