JavaScript总结

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        //创建元素p
        var ele = document.createElement("p");
        //创建内容
        var text = document.createTextNode("hello");
        //将内容放入元素p中
        ele.appendChild(text);

        //创建属性
        var att = document.createAttribute("class");
        //设置属性值
        att.value = "p1";
        //将属性设置给元素p
        ele.setAttributeNode(att);

        //获取div元素
        var div = document.getElementsByTagName("div")[0];
        //将元素p放入div元素中
        div.appendChild(ele);

        console.log(div);
    </script>
</body>
</html>

Element对象

我们通过document对象获取的元素或者创建的元素就是Element对象，可以将Element对象当做就是对应的元素，元素有属性那么Element对象也有属性，可以通过Element对象添加属性值给元素添加属性

Element.id:

该属性返回指定元素的id属性，该属性可以读写

// HTML 代码为 <p id="foo">
var p=document.querySelector('p');
Console.log(p.id)// "foo"

Element.className

该属性返回指定元素的class属性，它的值是一个字符串

<body>
    <div class="box box1 box2"></div>
    <script>
        //通过Class获取对应的元素    
        var div = document.getElementsByClassName("box")[0];
        //输出该元素的class属性
        console.log(div.className);
        //结果为:box box1 box2
    </script>
</body>

Element.classList

classList对象有下列方法

add()：增加一个 class。
remove()：移除一个 class。
contains()：检查当前元素是否包含某个 class。
toggle()：将某个 class 移入或移出当前元素。

vardiv=document.getElementById('myDiv');

div.classList.add('myCssClass');

div.classList.add('foo', 'bar');

div.classList.remove('myCssClass');

div.classList.toggle('myCssClass'); // 如果 myCssClass 不存在就加入，否则移除

div.classList.contains('myCssClass'); // 返回 true 或者 false

<body>
    <div class="box" id="box"></div>
    <script>
        //通过id获取对应的元素
        var div = document.getElementById("box");
        //添加class为box1
        div.classList.add("box1");
        //删除class名box
        div.classList.remove("box");
        //输出当前元素的class是否包含某个box。
        console.log(div.classList.contains("box"));
        //如果 box 不存在就加入，否则移除
        div.classList.toggle("box");
        console.log(div);
    </script>
</body>

Element.innerHTML

可以给元素添加内容

<body>
    <div class="box" id="box">asdf</div>
    <script>
        //获取对应id的Element对象
        var div = document.getElementById("box");
        //给该对象添加内容
        div.innerHTML="waeifjkladsflfsl";
    </script>
</body>

Element.innerText

可以个元素添加内容

<body>
    <div class="box" id="box">asdf</div>
    <script>
        //获取对应id的Element对象
        var div = document.getElementById("box");
        //给该对象添加内容
        div.innerText="waeifjkladsflfsl";
    </script>
</body>

Element.innerHTML和Element.innerText的区别：

innerHTML是添加一条HTML语句，他可以识别标签

<body>
    <div class="box" id="box">asdf</div>
    <script>
        //通过id获取对应的元素
        var div = document.getElementById("box");
        //给该元素添加内容(HTML语句)
        div.innerHTML="<p>hello world!</p>";
        //将该元素的结构打印出来
        console.log(div);
    </script>
</body>

innerText只是添加内容，会直接将代码渲染为字符串，而不会识别是否为HTML语句

<body>
    <div class="box" id="box">asdf</div>
    <script>
        //通过id获取对应的元素
        var div = document.getElementById("box");
        //给该元素添加内容
        div.innerText="<p>hello world!</p>";
        //将该元素的结构打印出来
        console.log(div);
    </script>
</body>

Element获取元素位置

属性	描述
clientHeight	获取元素高度包括padding部分，但是不包括border、margin
clientWidth	获取元素宽度包括padding部分，但是不包括border、margin
scrollHeight	元素总高度，它包括padding，但是不包括border、margin包括溢出的不可见内容
scrollWidth	元素总宽度，它包括padding，但是不包括border、margin包括溢出的不可见内容
scrollLeft	元素的水平滚动条向右滚动的像素数量
scrollTop	元素的垂直滚动条向下滚动的像素数量
offsetHeight	元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border
offsetWidth	元素的 CSS 水平宽度（单位像素），包括元素本身的高度、padding 和 border
offsetLeft	到定位父级左边界的间距
offsetTop	到定位父级上边界的间距

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            margin: 10px;
            padding: 10px;
        }
        h3{
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <h3>标题</h3>
        <h3>标题</h3>
        <h3>标题</h3>
        <h3>标题</h3>
        <h3>标题</h3>
    </div>
    <script>
        var box = document.getElementById("box");
        //元素的高度：200px
        console.log("元素高度(包括padding):"+ box.clientHeight);
        console.log("元素宽度(包括padding):"+ box.clientWidth);
        //页面的高度(内容撑开的部分)
        console.log("元素总高度:"+box.scrollHeight);
        console.log("元素总宽度:"+box.scrollWidth);
        console.log("垂直高度:"+box.offsetHeight);
        console.log("水平宽度:"+box.offsetWidth);
    </script>
</body>
</html>

CSS操作

以上都是通过js完成HTML操作，那么如何使用js完成CSS操作呢？

1、操作 CSS 样式最简单的方法，就是使用网页元素节点的setAttribute方法直接操作网页元素的style属性

div.setAttribute(

'style','background-color:red;'+'border:1px solid black;'

);

2、通过元素节点的style属性赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        //通过id属性获取对应的元素对象的style属性
        var box = document.getElementById("box").style;
        //给box对应的元素对象的style属性的属性赋值
        box.width = "200px";
        box.height = "200px";
        box.backgroundColor = "pink";


    </script>
</body>
</html>

3、通过元素对象的属性的cssText属性添加css语句

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById("box").style;
        box.cssText = "width:200px;height:200px;background-color:pink";
    </script>
</body>
</html>

事件处理程序

HTML事件处理

在HTML的元素中设置属性οnclick=js里边设置的方法，现在我们设置的是鼠标事件，当我们点击鼠标时就会触发

缺点：HTML和js没有分开

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <button onclick="clickHandle()">按钮</button>
    <script>
        //缺点：HTML和JS没有分开
        function clickHandle(){
            console.log("点击了按钮");
        }
    </script>
</body>
</html>

DOM0级事件处理

通过js获取元素对象，通过元素对象的属性设置事件

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            console.log("点击了按钮");
        }
    </script>
</body>
</html>

但是DOM0级事件处理有一个缺点，就是无法添加两个相同的事件，相同事件会被覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            console.log("点击了按钮");
        }
        btn.onclick = function(){
            console.log("点击了按钮1");
        }
    </script>
</body>
</html>

DOM2级事件处理

通过添加事件监听器实现事件处理

优点：相同的事件不会被覆盖

缺点：写的麻烦

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        var btn = document.getElementById("btn");
        btn.addEventListener("click",function(){
            console.log("点击了按钮1");
        });
        btn.addEventListener("click",function(){
            console.log("点击了按钮2");
        })
    </script>
</body>
</html>

鼠标事件

鼠标事件指与鼠标相关的事件，具体的事件主要有以下一些

click：按下鼠标时触发
dblclick：在同一个元素上双击鼠标时触发
mousedown：按下鼠标键时触发
mouseup：释放按下的鼠标键时触发
mousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发。
mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件
mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件

Event事件对象属性

实现事件触发的方法是有参数的，参数为Event，这个参数名任意，而这个参数的作用就是监听，当我们触发某个事件时，我们可以通过监听器阻止浏览器的一些默认行为

Event对象属性

Event.Target
Event.type

Event.target

Event.target属性返回事件当前所在的节点

// HTML代码为

// <p id="para">Hello</p>

function setColor(e) {

console.log(this===e.target);

e.target.style.color='red';

}

para.addEventListener('click', setColor);

Event.type

Event.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读

Event事件对象方法

通过Event监听器阻止浏览器默认行为，

例如：当我们点击超链接，浏览器会默认跳转到该链接，此时我们就可以通过Event对象的preventDefault()函数阻止浏览器的默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com/">百度</a>
    <script>
        var a = document.getElementsByTagName("a")[0];
        a.onclick = function(e){
            e.preventDefault();
            console.log("点击了跳转,但我就不跳");
        }
    </script>
</body>
</html>

键盘事件

键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件

keydown：按下键盘时触发。
keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
keyup：松开键盘时触发该事件

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <input type="text" id="text">
    <script>
        var box = document.getElementById("text");
        box.onkeydown = function(){
            console.log("键盘按下了");
        }
        box.onkeyup = function (e) {
            console.log(e.target.value);
        }
        box.onkeypress = function(){
            console.log("keypress");
        }
    </script>
</body>
</html>

事件代理

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）

下方有一段代码，当我们点击子类的div时，父类的div事件也会触发

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    <script>
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");

        box1.onclick = function(){
            console.log("点击了box1");
        }
        box2.onclick = function(){
            console.log("点击了box2");
        }
    </script>
</body>
</html>

所以此时我们就可以通过事件代理，完成通过父类解决子类的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <ul id="ul">
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
    </ul>
    </div>
    <script>
        var ul = document.getElementById("ul");
        ul.onclick = function(e){
            if(e.target.tagName==="LI"){
                console.log("li被点击");
            }            
        }
    </script>
</body>
</html>

定时器：

setTimeout定时器

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <script>
        var time = setTimeout(function(){
            console.log("执行1次");
        }, 3000);
        time;
    </script>
</body>
</html>

三秒过后将会执行代码

setInterval定时器

setInterval定时器的使用方法和setTimeout定时器一样，但是setInterval的作用是每隔n秒执行1次，也就是说setInterval是无限次执行的

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <script>
        var time = setInterval(function(){
            console.log("执行1次");
        }, 3000);
        time;
    </script>
</body>
</html>

防抖优化：

防抖属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。

从滚动条监听的例子说起

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        h3{
            height: 500px;
        }
    </style>
</head>
<body>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <script>
        function showTop() {
            var scrollTop=document.documentElement.scrollTop;
            console.log('滚动条位置：'+scrollTop);
        }
        //滚动条监听，当我们滑动滚动条时就会触发该监听
        window.onscroll=showTop
    </script>
</body>
</html>

当我稍微滑动一下滚动条就会触发n多次该事件，那么这样子就会造成浏览器性能的下降

实现原理：

通过一个引用将setTimeout定时器封装起来，当我们要执行改代码时，这个引用就会等于这个定时器，此时timer就是有值的，如果我们再次执行shake这个方法，那么timer此时不为null

if语句判断为true，进入if语句清空前面的定时器，然后再次调用定时器执行该方法

意思其实就是：当我们一直触发该条件时，就不会一直执行代码，而是清除上次的定时器，然后重新开始计时

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        h3{
            height: 500px;
        }
    </style>
</head>
<body>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <script>
        function shake(fn,delay){
            var timer = null;
            return function(){
                if(timer){
                    clearTimeout(timer);
                }
                timer = setTimeout(fn,delay);
            }
    }
        function showTop() {
         var scrollTop = document.documentElement.scrollTop;
         console.log('滚动条位置：'+scrollTop);
        }
        //滚动条监听，当我们停止滑动滚动条0.3秒后就会触发该监听
        window.onscroll=shake(showTop,300)
        
    </script>
</body>
</html>

防抖定义

对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次

节流优化：

还是使用滚动事件的例子，如果用户想要的需求是，就算一直滑动滚动条，也会触发滚动事件，每隔n秒触发一次

大家重点看注释部分，通过注释部分可以很好的理解这段代码是如何实现的

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style>
        h3 {
            height: 500px;
        }
    </style>
</head>

<body>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <script>
        function shake(fn, delay) {
            var flag = true;
            //以上厕所为例，
            //此时如果flag为true，那么厕所没有人
            return function () {
                if (!flag) {
                    return false;
                }
                //如果flag为true，那么顺利进入上厕所
                //进入了厕所得锁门吧，所以需要将flag设置为false
                flag = false;
                //上厕所
                setTimeout(function(){
                    //上厕所
                    fn();
                    //上完厕所打开门，将flag转为true
                    flag = true;
                }, delay);
                
            }
        }
        function showTop() {
            var scrollTop = document.documentElement.scrollTop;
            console.log('滚动条位置：' + scrollTop);
        }
        window.onscroll = shake(showTop, 500)
    </script>
</body>

</html>

滑动滚动条过后