task24 给简历加js

2018-10-12 本文已影响0人阿龙哟

要实现的效果：
1.sticky navbar
2.auto highlight navbar
3.auto scroll smoothly
4.second menu
前四个效果实现需要记得的知识点

1.window.onscroll

为当前页面的页面滚动事件添加事件处理函数.

window.onscroll = scroll;
function scroll()
{
 alert("检测到页面滚动事件:"+window.pageXOffset+" "+window.pageYOffset);
 // 注意: window.innerWidth 和 window.innerHeight 可以获得页面可见区域的宽和高.
}

2.scrollX和scrollY

scrollX返回文档/页面水平方向滚动的像素值。
var x = window.scrollX;
x 为该文档从左侧开始滚动的像素值。
注意：
pageXOffset 属性是 scrollX 属性的别名：
window.pageXOffset == window.scrollX; // 总是 true
scrollY返回文档在垂直方向已滚动的像素值。
var y = window.scrollY;
y 是文档从顶部开始滚动过的像素值。
pageYOffset 属性是 scrollY 属性的别名：
window.pageYOffset == window.scrollY; // 总是返回 true

3.doucment.querySelector()和document.querySelectorAll()

element = document.querySelector(selectors);
文档对象模型Document引用的**querySelector()**方法返回文档中与指定选择器或选择器组匹配的第一个 html元素Element。如果找不到匹配项，则返回null。

返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。
elementList = document.querySelectorAll(selectors);

elementList 是一个静态的 NodeList 类型的对象.
*selectors* 是一个由逗号连接的包含一个或多个CSS选择器的字符串.
selectors参数不能包含Css伪元素，否则会返回空

新出来的API,尽量多使用这个，少使用ById，ByClass

4.onmouseenter,onmouseleave,

on就是监听的意思

mouseenter
当定点设备（通常指鼠标）移动到元素上时就会触发 mouseenter 事件
类似 mousemouseover，它们两者之间的差别是 mouseenter不会冒泡（bubble），也就是说当指针从它的子层物理空间移到它的物理空间上时不会触发

mouseleave
指点设备（通常是鼠标）的指针移出某个元素时，会触发mouseleave事件。
mouseleave 和 mouseout 是相似的，但是两者的不同在于mouseleave 不会冒泡而mouseout 会冒泡。

5.event.preventDefault

[Event]接口的 preventDefault( )方法，告诉user agent如果此事件没有需要显式处理，那么它默认的动作也不要做（因为默认是要做的）。
阻止默认事件，但是此事件还是继续传播，除非碰到事件侦听器调用[stopPropagation()]或[stopImmediatePropagation()]，才停止传播。

阻止冒泡：

event.stopPropagation();
阻止捕获和冒泡阶段中当前事件的进一步传播。

6.e.target和e.currenttarget的区别

e.target is what triggers the event dispatcher to trigger and e.currentTarget is what you assigned your listener to.
e.Target是触发事件调度程序触发的对象，e.currentTarget是您分配给侦听器的对象。

demo
var body = document.body,
    btn = document.getElementById( 'id' );
body.addEventListener( 'click', function( event ) {
    console.log( event.currentTarget === body );
    console.log( event.target === btn );
}, false );

点击button，会出现两个true

7.getAttribute()

getAttribute() 返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 "" （空字符串）

let attribute = element.getAttribute(attributeName);

 let linkPonit = document.querySelectorAll('.navlist>li>a');
        for(let i=0;i<linkPonit.length;i++){
            linkPonit[i].onclick = (e) =>{
                e.preventDefault();//阻止默认动作
                let a = e.currentTarget;
                let href=a.getAttribute('href');//不能直接写a.href，因为获取到的 不是id名而是带有http协议的id 
                let element = document.querySelector(href);
                let top = element.offsetTop
                window.scrollTo(0,top-80)
            }
        }

8.css样式问题