1.document.getElementById('ID')和 document/parent.querySelector('选择器')区别

document.getElementById('ID'):

通过指定ID获取元素；
返回第一个符合条件的元素；
如果找不到匹配项，则返回null;
只有document下存在getElementById;

document/parent.querySelector('选择器'):

通过指定选择器获取元素；
返回第一个符合条件的元素；
如果找不到匹配项，则返回null;
IE8以下不可以使用；

2.遮罩层（弹窗）

专门写一个div（宽高为100%，控制器透明度、背景色、display）做遮罩层，通过绝对定位的层级实现遮罩

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cover{ 
        position:absolute;left:0px;top:0px;
        background:rgba(0, 0, 0, 0.4);
        width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
        height:100%;
        filter:alpha(opacity=60);  /*设置透明度为60%*/
        opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
        display:none; 
        z-Index:1;  
    }
    #modal{ 
        position:absolute;
        width:500px;
        height:300px;
        top:50%;
        left:50%;
        background-color:#fff;
        display:none;
        cursor:pointer;
        z-Index:2;  
    }
    </style>
</head>
<body>
        <div>显示页面的全部内容
                <div id="opens">打开弹框</div>
        </div>
            <!-- //页面的遮罩层 -->
        <div id="cover"></div>
            <!-- //页面的弹出框 -->
        <div id="modal">
                <div id="closes">关闭弹框</div>
        </div>
        <script>
             var opens = document.querySelector("#opens");
             var closes = document.querySelector("#closes");
             var cover = document.querySelector("#cover");
             var modal = document.querySelector("#modal");
             opens.onclick = function(){
                cover.style.display="block";   //显示遮罩层
                modal.style.display="block";   //显示弹出层
            };
             closes.onclick = function(){
                cover.style.display="none";   //隐藏遮罩层
                modal.style.display="none";   //隐藏弹出层
             };
        </script>
</body>
</html>

3.JS中的style操作的是行间样式，不能修改<style>和外面.css文件中的样式值;

4.<script><script/>标签最好放在</body>结束标签的上一行

如果放在<head></head>标签中间，由于html页面是自上而下的顺序进行解析，就有可能在处理script脚本时，存在还未定义的标签或选择器或样式；如果一定要用在<head></head>标签中间，必须使用window.onload()，设置在页面完全加载完成后，再执行JS脚本；所以<script><script/>标签最好放在</body>结束标签的上一行，以便在所有HTML页面元素全部加载完成后，再处理JS脚本，也不会降低用户体验（在处理JS时，出现问题可能会导致页面完全空白）

5.函数两种调用方法

函数名调用和事件调用（ box.onclick = funcEvent;事件调用时不能写括号，否则页面加载或刷新时会直接调用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>函数调用</title>
</head>
<body>
    <button id="box">事件调用</button>
    <script>
        function func(){
            alert("函数名调用");
        }  
        func();//函数名调用  

        //事件调用
        function funcEvent(){
            alert("事件调用");
        }
        var box = document.getElementById("box");
        box.onclick = funcEvent;
    </script>
</body>
</html>

6.‘1’+1=11？

原因：+号的作用；字符串

+号的作用：

作为计算的加法运算符使用，此时加号的油油两侧必须都是数字；
作为连接符进行使用，把加号两边的内容连接起来，此时加号的任意一边必有一个为字符串；

如何判断+号的两边是数字还是字符串：通过typeof 值即可知道其类型；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input class="input1" type="text">
    +
    <input class="input2" type="text">
    <button class="plus">=</button>
    <span class="result"></span>
    <script>
        var input1 = document.querySelector('.input1');
        var input2 = document.querySelector('.input2');
        var plus = document.querySelector('.plus');
        var result = document.querySelector('.result');

        plus.onclick = function(){
            console.log(input1.value + input2.value);
            console.log(typeof input1.value);
            result.innerHTML = input1.value + input2.value ;           
        };
    </script>
</body>
</html>

结果：

注意：获取ID，获取class,获取value,获取innerHTML这些获取到的全部都是String，不能作为数字进行计算。

7.不能再声明变量时直接获取值

因为当第一次刷新表单时，有可能使用的是声明时的默认值即为空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简易聊天</title>
    <style>
        * { margin:0; padding:0;}
        div { width: 438px; height: 312px; background: url('wechat_bg.gif') no-repeat; background-size: cover; margin: 150px auto; position: relative;}
        textarea { 
            display: block; 
            border:1px solid #554d96; 
            width:222px; 
            height: 80px; 
            line-height: 20px;
            /* text-indent: 22px; */
            padding: 5%;
            position: absolute; 
            top: 72px; 
            left: 106px; 
            border-radius: 4px;
            box-sizing: border-box;
            box-shadow: 1px 1px #9a94ce;
            outline:none;
            resize: none;

        }
        input { 
            position: absolute; 
            top: 162px; 
            left: 268px; 
            width: 60px;
            height: 20px;
            color: white;
            background: none;
            border:2px solid white;
            background: #0aa1d4;
            font-size: 10px;
            vertical-align: middle;
            border-radius: 4px;
        }
        ul {
            list-style: none;
            position: absolute;
            top: 196px;
            left: 105px;
        }

        li {
            width:226px; 
            height: 26px;
            line-height: 26px;
            text-indent: 12px;
            background: #554d95;
            color: white;
            border-radius: 6px;
            margin-bottom: 10px;
        }

    </style>
</head>
<body>
    <div>
        <textarea name="inputarea" id="inputarea" class="inputarea" cols="30" rows="10"></textarea>
        <input class="sbt_btn" type="submit" value="提交">
        <ul class="chat_list">
        </ul>
    </div>
    <script>
        var sbtBtn = document.querySelector(".sbt_btn");
        var inputarea = document.querySelector(".inputarea");
        var chatList = document.querySelector(".chat_list");
        sbtBtn.onclick = function(){
            if(inputarea.value != ''){
                chatList.innerHTML = '<li>' + inputarea.value + '</li>' + chatList.innerHTML;
            }
        };
    </script>
</body>
</html>

此处一定不能写成，这样获取到的值永远是第一次刷新时的空值：

var sbtBtn = document.querySelector(".sbt_btn");
        var inputarea = document.querySelector(".inputarea").value;
        var chatList = document.querySelector(".chat_list");
        sbtBtn.onclick = function(){
            if(inputarea != ''){
                chatList.innerHTML = '<li>' + inputarea + '</li>' + chatList.innerHTML;
            }
        };

8. :nth-of-type(n)

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.n 可以是数字、关键词或公式。

p:nth-of-type(2)
{
background:#ff0000;
}

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：

p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

p:nth-of-type(3n+0)
{
background:#ff0000;
}

        li:nth-of-type(1) { background: url('selector_img/icon1.png') no-repeat #ffe3e2 20px 14px;}
        li:nth-of-type(2) { background: url('selector_img/icon2.png') no-repeat #ffe3e2 20px 14px;}
        li:nth-of-type(3) { background: url('selector_img/icon3.png') no-repeat #ffe3e2 20px 14px;}
        li:nth-of-type(4) { background: url('selector_img/icon4.png') no-repeat #ffe3e2 20px 14px;}
        li:nth-of-type(5) { background: url('selector_img/icon5.png') no-repeat #ffe3e2 20px 14px;}


                <ul>
                    <li>微博</li>
                    <li>图片</li>
                    <li>博客</li>
                    <li>视频</li>
                    <li>更多>></li>
                </ul>

9.判断条件

if判断中，表达式最终会转成布尔值后才会继续进行判断，所以如果需要判断时，已经知道了布尔值结果，可以在if判断里直接写布尔值，尽量不使用表达式

开关：在判断条件不适合用在判断条件里时，可以通过设置标识符，切换状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>下拉菜单展合</title>
    <style>
        ul,li,div,body { margin: 0; padding: 0; }
        ul li { list-style: none; }
        .bg { width: 1000px; height: 1000px; background: url('selector_img/bg.jpg') no-repeat; margin:0 auto; position: relative;}
        .wrap { position: absolute; top:280px; left: 330px; border-radius: 6px; padding:4px;  }
        .selector { width: 342px; height: 70px; line-height: 70px; color:white; font-size: 32px; position: absolute; top:4px; left: 12px; text-align: center; background: url('selector_img/ar.png') no-repeat #f97775 278px 28px; border-radius: 12px;}
        .list { position: absolute; top:74px; left: 12px; display: none; }
        li { width: 212px; height: 70px; line-height: 70px; border-radius: 12px; margin-top: 2px; padding-left:130px; font-size: 32px;  }
        li:nth-of-type(1) { background: url('selector_img/icon1.png') no-repeat #ffe3e2 20px 14px;}
        li:nth-of-type(2) { background: url('selector_img/icon2.png') no-repeat #ffe3e2 20px 14px;}
        li:nth-of-type(3) { background: url('selector_img/icon3.png') no-repeat #ffe3e2 20px 14px;}
        li:nth-of-type(4) { background: url('selector_img/icon4.png') no-repeat #ffe3e2 20px 14px;}
        li:nth-of-type(5) { background: url('selector_img/icon5.png') no-repeat #ffe3e2 20px 14px;}
        .wrap_bg { width:350px; height: 430px; background: #f97775; border-radius: 6px; padding:4px; display: none; }
    </style>
</head>
<body>
    <div class="bg">
        <div class="wrap">
            <div class="selector">菜单</div>
            <div class="list">
                <ul>
                    <li>微博</li>
                    <li>图片</li>
                    <li>博客</li>
                    <li>视频</li>
                    <li>更多>></li>
                </ul>
            </div>
            <div class="wrap_bg"></div>
        </div>
    </div>
    <script>
        var selector = document.querySelector(".selector");
        var list = document.querySelector(".list");
        var wrap_bg = document.querySelector(".wrap_bg");
        var onOff = true;
        selector.onclick = function(){
            if(onOff){
                list.style.display = "block"; 
                wrap_bg.style.display = "block";
                //注意这里不能再事件外面再更改onOff
                onOff = false;
            }else{
                list.style.display = "none"; 
                wrap_bg.style.display = "none";
                onOff = true;
            }
        };
    </script>
</body>
</html>

10. img.style.src 中src不是样式属性所以不能这样用

如下：imgPic.src = "img/monster2.png";

不能用成imgPic.style.src = "img/monster2.png";

<body>
   <div class="bg">
        <div class="chat_list"></div>
        <div class="send">
            <img class="imgPic" src="img/monster1.png" alt="">
            <input class="text" type="text">
            <button class="btn">发送</button>
        </div>
   </div> 
   <script>
       var imgPic = document.querySelector(".imgPic");
       var onOff = true;
       imgPic.onclick = function(){
            if(onOff){
                imgPic.src = "img/monster2.png";
                onOff = false;
            }else{
                imgPic.src = "img/monster1.png";
                onOff = true;
            }
       };

   </script>
</body>

11. value值需要在哪用就在哪获取，否则可能会获取到空值

如onclick事件中，如果在onclick之前就获取，会获取到空值

如下，如果在声明时直接var inputarea = document.querySelector(".inputarea").value;会得到空值，之后再onclick方法里也是空值

<body>
    <div>
        <textarea name="inputarea" id="inputarea" class="inputarea" cols="30" rows="10"></textarea>
        <input class="sbt_btn" type="submit" value="提交">
        <ul class="chat_list">
        </ul>
    </div>
    <script>
        var sbtBtn = document.querySelector(".sbt_btn");
        var inputarea = document.querySelector(".inputarea");
        var chatList = document.querySelector(".chat_list");
        sbtBtn.onclick = function(){
            if(inputarea.value != ''){
                chatList.innerHTML = '<li>' + inputarea.value + '</li>' + chatList.innerHTML;
            }else{
                alert("发送内容不能为空");
            }
        };
    </script>
</body>

12.如果轮播图所有图都很大，需要加载一段时间，怎么样实现能使用户体验好一些

设置预加载图，在页面加载完后，再去加载轮播图，使用懒加载即给图片加一个onload事件。

如果是大量图片的H5，建议做整个页面的load预加载图。

13.获取元素的多种方式

document.getElementById("idName")在文档中通过id获取一个元素；
document/parent.querySelector("选择器")在父级下通过css选择器获取一个元素（根据选择器匹配到第0个元素）；
parent.getElementsByTagName("标签名")在父级下通过标签名获取一组元素（类数组）；
parent.getElementsByClassName("类名")在父级下通过类名获取一组元素（类数组）；
parent.querySelectorAll("选择器")在父级下通过css选择器获取一组元素（类数组）；

一般不建议直接从document文档中获取，一般从某个元素的父级到子级逐级获取

类数组：一组元素、集合、NodeList都是类数组

14.类数组和数组的相同点和区别

一组元素（类数组）不能直接操作（即不能直接设置其样式等），哪怕这组元素只有一个，想要操作都只能通过下标进行操作每一个；如：btns.style.background = "red";只能btns[0].style.background = "red";加上下标后才能进行操作；如果要批量操作一组元素，可以使用循环；
一组元素.length代表元素的个数；
类数组下标也是从0开始；

15.循环

循环：批量的操作元素，重复性的处理某些事情

同时执行的多个嵌套循环不能使用相同变量，不同时执行的可以相同

有两个（多个）循环变量的情况下，什么时候结束？当最后一个循环变量不成立时，循环就结束（此处当i<10不成立时就结束）。

京东幻灯片：数组存储图片和文字；

点击下一页按钮时，切换图片、改变文字、切换导航圆点（先直接全部清除圆点，再给当前的圆点的className设置成active）;

鼠标移入小圆点，显示缩略图（给a标签加上移入移出事件）；批量添加事件：nav[i].onmouseover = function(){}; nav[i].onmouseout = function(){};获取到当前图片；

注意：循环里的代码是在页面JS代码加载时就解析了，而navs[i].onmouseover是在鼠标移入时才执行，即页面加载完后for循环已经执行完了，所以此时navs[i].onmouseover里的navs[i]是循环执行结束后的结果即角标为navs[i].length时的结果，即navs数组的最后一个（即navs[i].length）；

注意事件函数中不要去调用外边循环的变量，因为此时循环已经执行完了。

正确调用方法：使用上下文环境对象，this进行获取。

16.this 上下文环境执行对象

this在事件处理函数中，代表的是当前调用事件的元素（在事件函数中，代表触发当前函数的元素），如果在事件函数中，我们需要拿到操作是这组中的某一个，就可以使用this。只有function中才有this，所以上下文环境变量指的就是function的执行范围内。

原则：除了嵌套函数以外，谁调用，this指向谁

函数被谁调用，this就指向谁，如果被事件调用，指向当前触发事件的元素；
如果直接调用就指向window（全局对象）；

17.伪类和伪元素的区别

一个冒号是伪类，目的是为了通过选择器，格式化DOM树以外的信息（比如： <a> 标签的:link、:visited 等）以及不能被常规CSS选择器获取到的信息（要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到）。弥补了CSS选择器的不足，用来更方便地获取信息。

伪类：

:first-child 匹配第一个子元素。

<ul>
    <li>111</li>
    <li>222</li>
</ul>

li:first-child {
  color: red; // 第一个 li 会变红
}

:last-child匹配最后一个子元素。

li:last-child {
  color:red; // 最后一个 li 会变红
}

:first-of-type匹配属于其父元素的第一个特定类型的子元素。

<div>
    <h1>h1文本</h1>
    <p>p文本</p>
</div>

p:first-of-type {
  color: red;  // <p>标签的内容变为红色
}

:last-of-type匹配属于其父元素的最后一个特定类型的子元素。

<div>
    <h1>h1文本</h1>
    <h1>h1文本2</h1>
    <p>p文本</p>
</div>

h1:last-of-type {
  color: red;  // 倒数第一个<h1>标签的内容变为红色(h1文本2)
}

:first-child 与 :first-of-type 的区别:

如果你的CSS写成以下，页面是不会有变化的，因为<p>元素并不是父元素<div>的第一个子元素。

p:first-child {
  color:red;
}

两个冒号是伪元素，伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用 ::before 或 ::after。

伪元素：

::before在被选元素之前插入内容。需要指定content属性来插入内容。

<p>CSS</p>

p::before {
  content: "Hi,";
}

::after在被选元素之后插入内容。需要指定content属性来插入内容。

<p>Hi, </p>

p::after {
  content: "CSS";
}

结果为：Hi,CSS

::first-letter匹配元素中文本的首字母。

<p>我在学伪元素</p>

p::first-letter {
  font-size: 32px;
}

::first-line匹配元素中第一行的文本(只能在块元素中使用)。

<p>我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素</p>

p::first-line {
  color: red;
}

::selection匹配被用户选中的部分

<p>我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素</p>

p::selection {
  color: red;
}

18. CSS中旋转图片

transform: rotate(180deg);

各个浏览器需要进行兼容

.prev,.next { width:25px; height:46px; display: block; background: url('img/ar.png') no-repeat;}
        .next { 
            transform:rotate(180deg);
            -ms-transform:rotate(180deg); 	/* IE 9 */
            -moz-transform:rotate(180deg); 	/* Firefox */
            -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
            -o-transform:rotate(180deg); 	/* Opera */
}

<span class="prev"></span>
<span class="next"></span>

19.CSS制作导航栏圆点，切换图片同时切换圆点位置，缩略图显示，点击a标签或缩略图切换banner图片/文字/导航按钮

<nav>
     <a href="#" class="active"><img src="img/img1.jpg" alt=""></a>
     <a href="#"><img src="img/img2.jpg" alt=""></a>
     <a href="#"><img src="img/img3.jpg" alt=""></a>
     <a href="#"><img src="img/img4.jpg" alt=""></a>
     <a href="#"><img src="img/img5.jpg" alt=""></a>
</nav>

 /* 通过宽高，margin，border,overflow:hidden隐藏border以外的内容及圆角处理导航栏圆点（和三角形图标一样） */
        nav { position: absolute; left: 0; bottom: 10px; text-align: center; width: 100%;}
        nav a { display: inline-block; width: 10px; height: 10px; margin: 0 3px; background: #fff; border-radius: 50%; position: relative; }
        nav img { position: absolute; top: -36px; left: -18px; margin: 0 3px; width: 40px; display: none; border: 2px solid #fff;}
        nav .active { background: #ff6600; }

代码解析：

a标签中，使用display: inline-block;使a标签一行内显示，width: 10px; height: 10px; margin: 0 3px; background: #fff; border-radius: 50%;设置a标签的长宽，各个a标签间的距离，背景色，设置圆角，使a标签显示成圆点；设置相对路径，以便设置点击a标签时hover显示图片缩略图；

img标签中，设置图片于a标签的绝对位置，设置图片大小，并默认不显示，a悬浮时，最后通过JS控制只显示一张缩略图

结果：

切换banner更改圆点的位置：

注意：需要通过document.querySelectorAll("nav a")获取到所有的a标签：

//将banner图放进数组
        var bannersArr = ["img/img4.jpg","img/img3.jpg","img/img1.jpg","img/img5.jpg","img/img2.jpg"];
        //将文字说明放进数组
        var remarkArr = ["时尚潮流先锋——做最好的自己","未来属于我们——只要有你","JavaScript高级工程师——你值得拥有","生命在于静止","畅想未来——有你有我有大家"];

        var prev = document.querySelector(".prev");
        var next = document.querySelector(".next");
        var imgPath = document.querySelector(".active img");
        var remark = document.querySelector(".remark");
        //需要获取到全部的a标签
        var navs = document.querySelectorAll("nav a");
        var num = 0 ;
        next.onclick = function(){
            //在切换到下一张前先清除当前banner的active样式
            // navs[num].className = "";
            num++;
            num = num>bannersArr.length-1?0:num;
            imgPath.src = bannersArr[num];
            remark.innerHTML = remarkArr[num] + " 第"+ (num+1) +"页";
            //for循环的方式暴力清除全部banner的active样式
            for (var i = 0; i < navs.length; i++) {
                navs[i].className = "";
            }
            //nav导航栏圆点切换（将当前的banner圆点样式改为active）
            navs[num].className = "active";
            console.info(navs[num]);

        };
        prev.onclick = function(){
            //在切换到下一张前先清除当前banner的active样式
            // navs[num].className = "";
            num--;
            num = num<0?bannersArr.length-1:num;
            imgPath.src = bannersArr[num];
            remark.innerHTML = remarkArr[num] + " 第"+ (num+1) +"页";
            //for循环的方式暴力清除全部banner的active样式
            for (var i = 0; i < navs.length; i++) {
                navs[i].className = "";
            }
            //nav导航栏圆点切换（将当前的banner圆点样式改为active）
            navs[num].className = "active";
        };

两种方式清除非当前banner的active样式：

方式一：

//在切换到下一张前先清除当前banner的active样式

navs[num].className = "";

num++;

方式二：

//for循环的方式暴力清除全部banner的active样式
for (var i = 0; i < navs.length; i++) {
     navs[i].className = "";
}

结果：

显示缩略图：

注意：

for循环中的代码是在页面一加载就进行解析的，而onmouseover等事件函数是在有事件行为时才执行，所以在for循环里获取一组元素的结果是只拿到了最后一个下标的元素；
可以通过this指向当前触发点击事件的元素，进行处理；

        //实现鼠标移入移出显示banner缩略图
        //navs是类数组（querySelectorAll获取到的是一组元素），不能直接操作一组元素，因此使用for循环进行操作
        for(var i=0;i<navs.length;i++){
            navs[i].index = i; // 为第i个a元素添加一个index属性，赋值为i
            navs[i].onmouseover = function(){
                //for循环中的代码是在页面一加载就进行解析的，而onmouseover等事件函数是在有事件行为时才执行，所以不能在for循环的事件函数中获取一组元素的值
                //需要通过this上下文环境（在事件函数中，谁调用就指向触发当前函数的元素）,所以通过this就可以在循环里获取每个a标签
                var navImg = this.querySelector("img");
                navImg.src = bannersArr[this.index];
                navImg.style.display = "block";
            };
            navs[i].onmouseout = function(){
                //for循环中的代码是在页面一加载就进行解析的，而onmouseover等事件函数是在有事件行为时才执行，所以不能在for循环的事件函数中获取一组元素的值
                //需要通过this上下文环境（在事件函数中，谁调用就指向触发当前函数的元素）,所以通过this就可以在循环里获取每个a标签
                var navImg = this.querySelector("img");
                navImg.style.display = "none";
            };    
        }

点击a标签或缩略图切换banner/页码remark/导航按钮：

注意：此处的navs[i].index = i;用于在解析循环时就记录下a标签的index，以便在点击时获取对应的index，跳转到对应的banner图片和按钮以及页码备注。

navs[i].index = i; // 为第i个a元素添加一个index属性，赋值为i
navs[i].onclick = function(){
                //将所有a标签的样式进行暴力清除
                for(var j=0;j<navs.length;j++){
                    navs[j].className = "";
                }
                //将当前的a标签的样式设置为active
                this.className = "active";
                //将文字更改为对应页文字
                console.info(this.index);
                imgPath.src = bannersArr[this.index];
                remark.innerHTML = remarkArr[this.index] + " 第"+ (this.index+1) +"页";
                num = this.index;//必须将此处的index再赋值为num，才能再点击按钮后再次按上下一页时不出错
 };

问题一：有什么办法可以在鼠标移入按钮时，可以紧接着再移到缩略图上进行点击？因为a标签移出时隐藏了（display:none）缩略图，如果将图片紧挨着按钮可以（但是感觉不美观）?

解决方法一：图片的显示隐藏使用opacity属性。但是切换时会有抖动

解决方法二：使用定时器延时隐藏缩略图

window.setTimeout(function(){
    navImg.style.display = "none";
},1000);

问题二：点击a标签圆点按钮切换后再点击上一页下一页，发现按钮当前页切换有问题

解决：num = this.index;必须将此处的index再赋值为num，将当前点击的页码赋值给上下页，才能在点击按钮后再次按上下一页时得到正确的页码索引。

19.禁止a标签刷新

a标签是超链接，会导致页面的刷新，或者跳转页面，所以可以通过href="javascript:;"来禁止其发生

20.简易banner轮播图

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东简易幻灯片</title>
    <style>
        body,ul,li,a,div { margin:0; padding:0; }
        ul,li { list-style: none ;}
        a { cursor: pointer; text-decoration: none; }
        img { vertical-align: top; }
        .banner_bg { width:1000px; height:800px; background: url('img/bg.jpg') no-repeat; margin: 0 auto; position: relative;}
        .banner { width: 536px; height: 356px; position: absolute; top: 168px; left: 296px; }
        ul li { display: none; }
        ul .active { display: block; }
        .prev,.next { width:25px; height:46px; display: block; background: url('img/ar.png') no-repeat;}
        .prev { position: absolute; top: 154px; left: 12px; }
        .next { 
            position: absolute; top: 154px; right: 12px;
            transform:rotate(180deg);
            -ms-transform:rotate(180deg); 	/* IE 9 */
            -moz-transform:rotate(180deg); 	/* Firefox */
            -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
            -o-transform:rotate(180deg); 	/* Opera */
        }
        .mark { width: 532px; height: 70px; line-height: 70px; position: absolute; top: 544px; left: 296px; text-align: center; color: #666666; font-size: 20px; }
        /* 通过宽高，margin，border,overflow:hidden隐藏border以外的内容及圆角处理导航栏圆点（和三角形图标一样） */
        nav { position: absolute; left: 0; bottom: 10px; text-align: center; width: 100%;}
        nav a { display: inline-block; width: 10px; height: 10px; margin: 0 3px; background: #fff; border-radius: 50%; position: relative; }
        nav img { position: absolute; top: -36px; left: -18px; margin: 0 3px; width: 40px; display: none; border: 2px solid #fff;}
        nav .active { background: #ff6600; }
    </style>
</head>
<body>
    <div class="banner_bg">
            <div class="banner">
                    <ul>
                        <li class="active"><img src="img/img1.jpg" alt=""></li>
                        <li><img src="img/img2.jpg" alt=""></li>
                        <li><img src="img/img3.jpg" alt=""></li>
                        <li><img src="img/img4.jpg" alt=""></li>
                        <li><img src="img/img5.jpg" alt=""></li>
                    </ul>
                    <span class="prev"></span>
                    <span class="next"></span>
                    <nav>
                        <a href="#" class="active"><img src="img/img1.jpg" alt=""></a>
                        <a href="#"><img src="img/img2.jpg" alt=""></a>
                        <a href="#"><img src="img/img3.jpg" alt=""></a>
                        <a href="#"><img src="img/img4.jpg" alt=""></a>
                        <a href="#"><img src="img/img5.jpg" alt=""></a>
                    </nav>
            </div>
            <div class="mark">时尚潮流先锋——做最好的自己</div>
    </div>
</body>

方法一：num++方式（需要图片有规律）

<script>
        var prev = document.querySelector(".prev");
        var next = document.querySelector(".next");
        var imgPath = document.querySelector(".active img");
        var num = 1;
        next.onclick = function(){
            console.info(imgPath);
            num++;
            if(num>5){
                num = 1;
            }
            imgPath.src =  "img/img" + num + ".jpg";
        };
        prev.onclick = function(){
            console.info(imgPath);
            num--;
            if(num<1){
                num = 5;
            }
            imgPath.src =  "img/img" + num + ".jpg";
        };
    </script>

方法二：数组方式（图片任意）

<script>
        //将banner图放进数组
        var bannersArr = ["img/img4.jpg","img/img3.jpg","img/img1.jpg","img/img5.jpg","img/img2.jpg"];
        //将文字说明放进数组
        var markArr = ["时尚潮流先锋——做最好的自己","未来属于我们——只要有你","JavaScript高级工程师——你值得拥有","生命在于静止","畅想未来——有你有我有大家"];

        var prev = document.querySelector(".prev");
        var next = document.querySelector(".next");
        var imgPath = document.querySelector(".active img");
        var num = 0 ;
        next.onclick = function(){
            num++;
            // if(num>4){
            //     num = 0;
            // }
            num = num>bannersArr.length-1?0:num;
            imgPath.src = bannersArr[num];
            console.info(imgPath.src);
        };
        prev.onclick = function(){
            num--;
            // if(num<0){
            //     num = bannersArr.length-1;
            // }
            num = num<0?bannersArr.length-1:num;
            imgPath.src = bannersArr[num];
            console.info(imgPath.src);
        };
    </script>

21.直接使用元素.innerHTML += ".....";会产生性能问题

可以将元素.innerHTML放进声明的变量中，再进行赋值

var cont = "";

cont += "<div></div>";

box.innerHTML(src);

22.保持文本格式输出使用 <pre></pre>并使用white-space::pre-wrap

文本框输入内容，后端传入后没有换行符标识，但需要保持原本的段落格式，需要使用 <pre></pre>并使用white-space:：pre-wrap进行处理。

23.classList 类数组

类数组只是和数组相似，并没有数组中的各种方法。

classList不兼容IE8（需要自己使用webpark搭建构建工具，配置进行编译使其兼容各种版本）

classList获取设置元素的class列表（类数组），能获取元素的所有class名字：

通过下标获取到元素的每一个class；
length：元素的class个数
value ：存储完整的class
add('class名字')：给元素添加一个class；
remove('class名字')：从元素的classList删除一项class；
contains(class名字)：判断元素的classList是否包含这个class，是返回true，否返回false;
toggle(‘class名字’)：切换class，如果元素有这个class就删掉，没有就加上这个class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义复选框-classList(方法测试)</title>
    <style>
        body,h2 { margin: 0; padding: 0; }
        .bg { width: 554px; height: 800px; background: url('img/checkboxbg.png') no-repeat; margin: 0 auto; }
        .options { width: 306px; height: 166px; position: relative; left: 124px; top: 323px;}
        h2 { color: #e3637c; position: absolute; left: 152px; top: 34px;}
        .checkeara { position: absolute; left: 0; top: 98px; text-align: center; width: 306px; height: 32px;}
        a { text-decoration: none; display: inline-block; width: 70px; height: 30px; line-height: 30px; border: 1px solid #e3637c; color: black;  }
        .checked { background: url('img/checked.png') no-repeat 55px 15px; }
    </style>
</head>
<body>
    <div class="bg">
        <div class="options">
            <h2>模拟复选</h1>
            <div class="checkeara">
                <a href="javascript:;" class="item1 checked">美食</a>
                <a href="javascript:;" class="item1">逛街</a>
                <a href="javascript:;" class="item1">旅游</a>
            </div>
        </div>
    </div>
    <script>
        var options = document.querySelectorAll("a");
        for(var i=0;i<options.length;i++){
            options[i].onclick = function(){
                this.classList.add("unchecked");
                console.info("添加unchecked后的classList类数组："+this.classList.value);//value获取所有的class类（类数组）
                this.classList.remove("item1");//移除元素的某个class类
                console.info("删除item1后的classList类数组："+this.classList.value);
                console.info("是否包含item1类："+this.classList.contains("item1"));//元素是否包含某个class类，是返回ture，否返回false
                this.classList.toggle("item1");//切换class，如果有就删除这个类，如果没有就添加这个类
                console.info("删除item1类后再使用toggle切换item1后："+this.classList.value);
                console.info("数组的长度："+this.classList.length);//元素的class类个数
            };
        }
    </script>
</body>
</html>

结果：

24.自定义复选框

方法一：使用className判断是否为checked，是则取消，否则加上checked（使用于class只有一个的情况下）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义复选框</title>
    <style>
        body,h2 { margin: 0; padding: 0; }
        .bg { width: 554px; height: 800px; background: url('img/checkboxbg.png') no-repeat; margin: 0 auto; }
        .options { width: 306px; height: 166px; position: relative; left: 124px; top: 323px;}
        h2 { color: #e3637c; position: absolute; left: 152px; top: 34px;}
        .checkeara { position: absolute; left: 0; top: 98px; text-align: center; width: 306px; height: 32px;}
        a { text-decoration: none; display: inline-block; width: 70px; height: 30px; line-height: 30px; border: 1px solid #e3637c; color: black;  }
        .checked { background: url('img/checked.png') no-repeat 55px 15px; }
    </style>
</head>
<body>
    <div class="bg">
        <div class="options">
            <h2>模拟复选</h1>
            <div class="checkeara">
                <a href="javascript:;" class="checked">美食</a>
                <a href="javascript:;">逛街</a>
                <a href="javascript:;">旅游</a>
            </div>
        </div>
    </div>
    <script>
        var options = document.querySelectorAll("a");
        for(var i=0;i<options.length;i++){
            options[i].onclick = function(){
                // if(this.className == ""){
                //     this.className = "checked";
                // }else{
                //     this.className = "";
                // }

                //注意此处需要使用空号包着整个赋值部分
                this.className = (this.className=="checked"?"":"checked");
            };
        }
    </script>
</body>
</html>

方法二：多个class存在时，不能再根据className进行判断，可以使用classList

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义复选框-classList(方法测试)</title>
    <style>
        body,h2 { margin: 0; padding: 0; }
        .bg { width: 554px; height: 800px; background: url('img/checkboxbg.png') no-repeat; margin: 0 auto; }
        .options { width: 306px; height: 166px; position: relative; left: 124px; top: 323px;}
        h2 { color: #e3637c; position: absolute; left: 152px; top: 34px;}
        .checkeara { position: absolute; left: 0; top: 98px; text-align: center; width: 306px; height: 32px;}
        a { text-decoration: none; display: inline-block; width: 70px; height: 30px; line-height: 30px; border: 1px solid #e3637c; color: black;  }
        .checked { background: url('img/checked.png') no-repeat 55px 15px; }
    </style>
</head>
<body>
    <div class="bg">
        <div class="options">
            <h2>模拟复选</h1>
            <div class="checkeara">
                <a href="javascript:;" class="item1 checked">美食</a>
                <a href="javascript:;" class="item1">逛街</a>
                <a href="javascript:;" class="item1">旅游</a>
            </div>
        </div>
    </div>
    <script>
        var options = document.querySelectorAll("a");
        for(var i=0;i<options.length;i++){
            options[i].onclick = function(){
                this.classList.toggle("checked");
                /*
                if(this.classList.contains("checked")){
                    this.classList.remove("checked");
                }else{
                    this.classList.add("checked");
                }*/
                //this.classList.contains("checked")?this.classList.remove("checked"):this.classList.add("checked");
            };
        }
    </script>
</body>
</html>

结果：

25.自定义单选框

方式一：给当前option（this.classList.add('checked')）加上checked，并且移除非当前项的checked

思路：通过循环将所有的单选项全部清除options[i].classList.remove('checked')，再给当前加上checked

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义单选框</title>
    <style>
        body,h2 { margin: 0; padding: 0; }
        .bg { width: 554px; height: 800px; background: url('img/bg.png') no-repeat; margin: 30px auto; }
        .options { width: 306px; height: 166px; position: relative; left: 124px; top: 168px; text-align: center;}
        a { text-decoration: none; display: inline-block; width: 70px; height: 30px; line-height: 30px; border: 1px solid #e3637c; color: black;  }
        .checked { background: url('img/checked.png') no-repeat 55px 15px; }
    </style>
</head>
<body>
    <div class="bg">
        <div class="options">
                <a href="javascript:;" class="item checked">男</a>
                <a href="javascript:;" class="item">女</a>
                <a href="javascript:;" class="item">保密</a>
        </div>
    </div>
    <script>
        var options = document.querySelectorAll("a");
        for(var i=0;i<options.length;i++){
            options[i].onclick = function(){
            //思路：首先循环清除所有为checked的选项，再将当前项设置为checked（**注意此处需要循环清除，外层的for循环已经在解析时执行过了）
            for(var i=0;i<options.length;i++){
                options[i].classList.remove("checked");
            }
            this.classList.add("checked");
            };
        }
    </script>
</body>
</html>

方式二：通过this==option[i]判断是否是当前操作的单选项

思路：判断this==option[i]判断是当前操作的option，如果options[i] == this，说明找到了当前操作的一项，如果是当前项就加上checked，其余非当前项全部清除checked

<script>
        var options = document.querySelectorAll("a");
        for(var i=0;i<options.length;i++){
            options[i].onclick = function(){
                //要得到所有的options[i]并进行处理，需要重新循环得到，onclick外的循环已经在JS第一次执行时就执行过了
                //如果是当前项就加上checked，其余非当前项全部清除checked
                for(var j=0;j<options.length;j++){
                    if(this==options[j]){
                        this.classList.add("checked");
                    }else{
                        options[j].classList.remove("checked");
                    }
                }
            };
        }
    </script>

方法三：定点删除，直接找到class类名为checked的选项，直接删除，再将当前项设置为checked

此方法是直接操作DOM，所以性能不是特别好

<script>
        var options = document.querySelectorAll("a");
        for(var i=0;i<options.length;i++){
            options[i].onclick = function(){
                //定点清除：找到为checked的class的选项，直接清除，再将当前项加上checked
                var checkedOption = document.querySelector(".options .checked");
                checkedOption.classList.remove("checked");
                this.classList.add("checked");
            };
        }

26.阻止链接响应（点击链接后不做任何事情）

<a href="#" >test</a> //点击链接，在页面过长时，会返回到顶部。但可以加上 onclick="return false"，防止上滚到页的顶部
<a href="####" >test</a> //使用2个到4个#，见的大多是"####"，也有使用"#all"等其他的。默认不上滚到页的顶部
<a href="javascript：void(0);" >test</a> //其中，javascript:void(0) 仅仅表示一个死链接，执行空事件。javascript:void(0)是javascript的操作符，会计算一个表达式，但不会返回值，当用户点击链接时，void(0) 计算为 0，但在 JavaScript 上没有任何效果。当然也不会改变当前页面的任何内容新浪微博写法
<a href="javascript:;" >test</a> //QQ空间写法

javascript：void(0);和javascript:;基本没什么区别，但在ie6.0下可能存在bug：

用这种方法挂载的事件处理函数中改变img的src属性，浏览器不会显示图片，必须在右键菜单中点显示图片才能显示。//没遇到。
不能使用右键菜单中的open in new window //打开新链接，自然是不能的，都没链接如何打开。
不能把链接地址加入收藏夹 //ie6会提示“您可能添加不安全的收藏页”并把javascript:; 或者 javascript:void(0);做为收藏页名称
页面mediaplayer播放停止 //不祥
javascript:void(0)之后再用onclick提交新页面或刷新页面是不成功的。//不会改变当前页面的任何内容

27.选项卡切换

方法一：设置id值作为索引(在选项卡个数太多的时候不使用，需手动添加多个id)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡切换</title>
    <style>
        .options .active {
            background: red;
        }
        .cont div {
            display: none;
        }
        .cont .show {
            margin: 10px;
            font-size: 40px;
            display: block;
        }
    </style>
</head>
<body>
<div>
    <div class="options">
        <button id="1" class="active">选卡一</button>
        <button id="2">选卡二</button>
        <button id="3">选卡三</button>
    </div>
    <div class="cont">
        <div class="show">选卡一对应内容</div>
        <div>选卡二对应内容</div>
        <div>选卡三对应内容</div>
    </div>
</div>  
<script>
    var btns = document.querySelectorAll(".options button");
    var conts = document.querySelectorAll(".cont div");
    for(var i=0;i<btns.length;i++){
        
        btns[i].id = i;
        btns[i].onmouseover = function(){
            //conts个数和btns个数一样，所以可以借助同一个循环(**)
            for(var i=0;i<btns.length;i++){
                //点击某个选卡时，清除其他所有选卡选中状态active，给当前选卡加上active
                btns[i].classList.remove("active");
                //给当前选项卡对应的div内容区添加show
                conts[i].classList.remove("show");
            }
            this.classList.add("active"); 
            //第0个按钮对应第0个div,第1个按钮对应的第1个div,第2个按钮对应的第2个div
            //所以拿到当前的按钮的id（this.id）就能得到当前应该是第几个div
            conts[this.id].classList.add("show");

        };
    }
</script>  
</body>
</html>

方法二：自定义索引（推荐方法）：自定义属性，即定义一个标准里没有的属性

当在事件中需要知道操作的元素是第几个时，可以使用索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡切换——自定义索引</title>
    <style>
        .options .active {
            background: red;
        }
        .cont div {
            display: none;
        }
        .cont .show {
            margin: 10px;
            font-size: 40px;
            display: block;
        }
    </style>
</head>
<body>
<div>
    <div class="options">
        <button class="active">选卡一</button>
        <button>选卡二</button>
        <button>选卡三</button>
    </div>
    <div class="cont">
        <div class="show">选卡一对应内容</div>
        <div>选卡二对应内容</div>
        <div>选卡三对应内容</div>
    </div>
</div>  
<script>
    var btns = document.querySelectorAll(".options button");
    var conts = document.querySelectorAll(".cont div");
    for(var i=0;i<btns.length;i++){
        //自定义属性index：给元素添加一个标准里没有的属性
        btns[i].index = i;
        console.info(btns[i].index);
        btns[i].onmouseover = function(){
            //conts个数和btns个数一样，所以可以借助同一个循环(**)
            for(var i=0;i<btns.length;i++){
                //点击某个选卡时，清除其他所有选卡选中状态active，给当前选卡加上active
                btns[i].classList.remove("active");
                //给当前选项卡对应的div内容区添加show
                conts[i].classList.remove("show");
            }
            this.classList.add("active"); 
            //第0个按钮对应第0个div,第1个按钮对应的第1个div,第2个按钮对应的第2个div
            //所以拿到当前自定义的属性index就能得到当前应该是第几个div
            conts[this.index].classList.add("show");

        };
    }
</script>  
</body>
</html>

方法三：定点清除（DOM中直接找到当前选中的btn,div） ,直接操作DOM性能不好，不推荐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡切换——定点清除</title>
    <style>
        .options .active {
            background: red;
        }
        .cont div {
            display: none;
        }
        .cont .show {
            margin: 10px;
            font-size: 40px;
            display: block;
        }
    </style>
</head>
<body>
<div>
    <div class="options">
        <button class="active">选卡一</button>
        <button>选卡二</button>
        <button>选卡三</button>
    </div>
    <div class="cont">
        <div class="show">选卡一对应内容</div>
        <div>选卡二对应内容</div>
        <div>选卡三对应内容</div>
    </div>
</div>  
<script>
    //思路：直接找到样式为active的进行清除，再将当前点击的设置为active即可
    var btns = document.querySelectorAll(".options button");
    var conts = document.querySelectorAll(".cont div");

    for(var i=0;i<btns.length;i++){
        //自定义属性index
        btns[i].index = i;
        btns[i].onmouseover = function(){
            //直接找到样式为active，show的btn和div进行清除(需要操作DOM性能不太好)
            var activeBtn = document.querySelector(".options .active");
            var showDiv = document.querySelector(".cont .show");

            activeBtn.classList.remove("active");
            showDiv.classList.remove("show");

            //再将当前点击的btn和对应的div设置为active,show即可
            this.classList.add("active"); 
            conts[this.index].classList.add("show");

        };
    }
</script>  
</body>
</html>

方法四：通过num记录当前选中的在第几个btn（并对应cont）；点击其他btn后直接对选中的btn清除选中，再给当前选中的设置选中；同步记录到当前选中的btn，cont

注意：最后最后一定要更改同步记录的num为当前选中的btn ,num=this.index;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡切换——定点清除——num记录</title>
    <style>
        .options .active {
            background: red;
        }
        .cont div {
            display: none;
        }
        .cont .show {
            margin: 10px;
            font-size: 40px;
            display: block;
        }
    </style>
</head>
<body>
<div>
    <div class="options">
        <button class="active">选卡一</button>
        <button>选卡二</button>
        <button>选卡三</button>
    </div>
    <div class="cont">
        <div class="show">选卡一对应内容</div>
        <div>选卡二对应内容</div>
        <div>选卡三对应内容</div>
    </div>
</div>  
<script>
    //思路：通过num记录当前选中的在第几个btn（并对应cont）；点击其他btn后直接对选中的btn清除选中，再给当前选中的设置选中；同步记录到当前选中的btn，cont
    var btns = document.querySelectorAll(".options button");
    var conts = document.querySelectorAll(".cont div");

    var num = 0;//通过num记录当前选中的在第几个btn

    for(var i=0;i<btns.length;i++){
        btns[i].index = i;
        btns[i].onmouseover = function(){
            //点击其他btn后直接对选中的btn清除选中
            btns[num].classList.remove("active");
            conts[num].classList.remove("show");

            //再给当前选中的btn,div设置选中active,show
            this.classList.add("active"); 
            conts[this.index].classList.add("show");

            //**同步记录到当前选中的btn，cont
            num = this.index;
        };
    }
</script>  
</body>
</html>

28.九九乘法表：<br>换行形式/position定位形式

使用两种方式进行实现：

方式一：<br>换行形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>九九乘法表-br换行方式</title>
    <style>
        body,ul,li,div { margin: 0; padding: 0; }
        img { vertical-align: top; border: none; }
        ul,li { list-style: none; }

        .bg { width: 1600px; height: 1067px; background: url('img/99tab_bg.jpg') no-repeat; margin: 0 auto; }
        .tab99 { width:1156px; height: 436px; background: #e8e5fc; position: relative; top: 436px; left: 250px; padding: 30px 0 0 30px; border-radius: 12px; }
        .tab99 div { width: 120px; height: 40px; line-height: 40px; background: #78cc64; color: white; text-align: center; border-radius: 4px; margin: 0 2px 2px 0; display: inline-block; }
    </style>
</head>
<body>
      <div class="bg">
        <div class="tab99">
          <!-- <div>1 * 1 = 1</div><br><div>1 * 2 = 2</div><div>1 * 2 = 2</div><div>1 * 2 = 2</div> -->
        </div>
      </div>  
      <script>
        //br换行方式需要设置div样式：display: inline-block;
        var tab99 = document.querySelector(".tab99");
        var divStr = '';
        for(var i=1;i<10;i++){
          for(var j=1;j<=i;j++){
            var txt = j + " * " + i + " = " + i*j;
            divStr += '<div>'+ txt +'</div>';
          }
          divStr += '<br>';
        }
        tab99.innerHTML = divStr;
      </script>
</body>
</html>

方式二：position定位形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>九九乘法表-position定位方式</title>
    <style>
        body,ul,li,div { margin: 0; padding: 0; }
        img { vertical-align: top; border: none; }
        ul,li { list-style: none; }

        .bg { width: 1600px; height: 1067px; background: url('img/99tab_bg.jpg') no-repeat; margin: 0 auto; }
        .tab99 { width:1156px; height: 436px; background: #e8e5fc; top: 436px; left: 250px; padding: 30px 0 0 30px; border-radius: 12px; position: relative; }
        .tab99 div { width: 120px; height: 40px; line-height: 40px; background: #78cc64; color: white; text-align: center; border-radius: 4px; margin: 0 2px 2px 0; position: absolute; }
    </style>
</head>
<body>
      <div class="bg">
        <div class="tab99"></div>
      </div>  
      <script>
        var colors = ['#78cc64','#58cd7e','#4fcdad','#4cc7dd','#469ee8','#465de8','#5846e8','#8346e8','#9e46e8'];
        //position方式需要设置div样式：position定位top,left
        var tab99 = document.querySelector(".tab99");
        var divStr = '';
        for(var i=1;i<10;i++){
          for(var j=1;j<=i;j++){
            var txt = j + " * " + i + " = " + i*j;
            //因为i,j初始化为1，但是定位是从0，0开始，所以需要使用i-1和j-1。本身需要上下margin 30所以需要再+30
            var topStr = (i-1)*42 + 30;
            var leftStr = (j-1)*122 + 30;
            divStr += '<div style="top:'+ topStr +'px;left:'+ leftStr +'px;background:'+ colors[i-1] +'">'+ txt +'</div>';
          }
        }
        tab99.innerHTML = divStr;
      </script>
</body>
</html>

结果：

29.拼图实现（position实现/取模实现）

方法一：position实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拼图——position实现</title>
    <style>
        body { margin:0; padding:0; background-color: #d3f1d5; }
        .bg { width: 545px; height:545px; margin: 100px auto; position: relative; }
        .bg div { width: 50px; height: 50px; background: url('img.jpg') no-repeat; position: absolute; }
    </style>
</head>
<body>
<div class="bg"></div>
<script>
    var bg = document.querySelector(".bg");
    var divStr = '';
    var w = 50;
    var h = 50;
    //i代表行，j代表列
    for(var i=0;i<10;i++){
        for(var j=0;j<10;j++){
            var x = w * j;
            var y = h * i;
            var bp = -x + 'px -' + y + 'px';
            //加了5px的间隙（只给div定位加不给背景图定位加）
            divStr += '<div style="top:'+ (y+5*i) +'px;left:'+ (x+5*j) +'px;background-position:'+ bp +'"></div>';
        }
    }
    bg.innerHTML = divStr;
</script>
</body>
</html>

方法二：取模实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拼图——取模实现</title>
    <style>
        body { margin:0; padding:0; background-color: #d3f1d5; }
        .bg { width: 545px; height:545px; margin: 100px auto; position: relative; }
        .bg div { width: 50px; height: 50px; background: url('img.jpg') no-repeat; position: absolute; }
    </style>
</head>
<body>
<div class="bg"></div>
<script>
    var bg = document.querySelector(".bg");
    var divStr = '';
    var w = 50;
    var h = 50;
    //总共100个div,10行显示，每行10个
    /*
     --x:   0   1    2   3    4    5    6    7    8    9    —— 0-9
            10  11   12  13   14   15   16   17   18   19   —— 10-19
            20  21   22  23   24   25   16   27   28   29   —— 20-29
            30  31   32  33   34   35   36   37   38   39   —— 30-39
       
        发现X轴，任意数%10的值都为0-9
        发现Y轴，都是从0-9,10-19,20-29，每个数/10的整数位即其所在的第几行

    */
    for(var i=0;i<100;i++){
        var x = i%10;//每行第0-9个
        var y = parseInt(i/10);//第几行行
        var bp = -(x*w) + 'px -' + (y*h) + 'px';
        divStr += '<div style="top:'+ ((5+h)*y) +'px;left:'+ ((5+w)*x) +'px;background-position:'+ bp +'"></div>';
    }
    bg.innerHTML = divStr;
</script>
</body>
</html>

结果：

JavaScript高级笔记

1.document.getElementById('ID')和 document/parent.querySelector('选择器')区别

2.遮罩层（弹窗）

3.JS中的style操作的是行间样式，不能修改<style>和外面.css文件中的样式值;

4.<script><script/>标签最好放在</body>结束标签的上一行

5.函数两种调用方法

6.‘1’+1=11？

7.不能再声明变量时直接获取值

8. :nth-of-type(n)

9.判断条件

10. img.style.src 中src不是样式属性所以不能这样用

11. value值需要在哪用就在哪获取，否则可能会获取到空值

12.如果轮播图所有图都很大，需要加载一段时间，怎么样实现能使用户体验好一些

13.获取元素的多种方式

14.类数组和数组的相同点和区别

15.循环

16.this 上下文环境执行对象

17.伪类和伪元素的区别

18. CSS中旋转图片

19.CSS制作导航栏圆点，切换图片同时切换圆点位置，缩略图显示，点击a标签或缩略图切换banner图片/文字/导航按钮

19.禁止a标签刷新

20.简易banner轮播图

21.直接使用元素.innerHTML += ".....";会产生性能问题

22.保持文本格式输出使用 <pre></pre>并使用white-space::pre-wrap

23.classList 类数组

24.自定义复选框

25.自定义单选框

26.阻止链接响应（点击链接后不做任何事情）

27.选项卡切换

28.九九乘法表：<br>换行形式/position定位形式

29.拼图实现（position实现/取模实现）

猜你喜欢

JavaScript高级笔记

1.document.getElementById('ID')和 document/parent.querySelector('选择器')区别

2.遮罩层（弹窗）

3.JS中的style操作的是行间样式，不能修改<style>和外面.css文件中的样式值;

4.<script><script/>标签最好放在</body>结束标签的上一行

5.函数两种调用方法

6.‘1’+1=11？

7.不能再声明变量时直接获取值

8. :nth-of-type(n)

9.判断条件

10. img.style.src 中src不是样式属性所以不能这样用

11. value值需要在哪用就在哪获取，否则可能会获取到空值

12.如果轮播图所有图都很大，需要加载一段时间，怎么样实现能使用户体验好一些

13.获取元素的多种方式

14.类数组和数组的相同点和区别

15.循环

16.this 上下文环境执行对象

17.伪类和伪元素的区别

18. CSS中旋转图片

19.CSS制作导航栏圆点，切换图片同时切换圆点位置，缩略图显示，点击a标签或缩略图切换banner图片/文字/导航按钮

19.禁止a标签刷新

20.简易banner轮播图

21.直接使用元素.innerHTML += ".....";会产生性能问题

22.保持 文本格式输出 使用 <pre></pre>并使用white-space::pre-wrap

23.classList 类数组

24.自定义复选框

25.自定义单选框

26.阻止链接响应（点击链接后不做任何事情）

27.选项卡切换

28.九九乘法表：<br>换行形式/position定位形式

29.拼图实现（position实现/取模实现）

猜你喜欢

22.保持文本格式输出使用 <pre></pre>并使用white-space::pre-wrap