2019-06-05 webspi第三天

01京东tab栏切换

<!--

        li标签要想有上面那根红线，那么加一个类叫active就可以了

        下面的商品div要显示，就给这个div加一个selected类就可以了

    -->

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

        }

        .wrapper {

            width: 1000px;

            height: 475px;

            margin: 0 auto;

            margin-top: 100px;

        }

        .tab {

            border: 1px solid #ddd;

            border-bottom: 0;

            height: 36px;

            width: 320px;

        }

        .tab li {

            position: relative;

            float: left;

            width: 80px;

            height: 34px;

            line-height: 34px;

            text-align: center;

            cursor: pointer;

            border-top: 4px solid #fff;

        }

        .tab span {

            position: absolute;

            right: 0;

            top: 10px;

            background: #ddd;

            width: 1px;

            height: 14px;

            overflow: hidden;

        }

        .products {

            width: 1002px;

            border: 1px solid #ddd;

            height: 476px;

        }

        .products .main {

            float: left;

            display: none;

        }

        .products .main.selected {

            display: block;

        }

        .tab li.active {

            border-color: red;

            border-bottom: 0;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <ul class="tab">

            <li class="tab-item active">国际大牌<span>◆</span></li>

            <li class="tab-item">国妆名牌<span>◆</span></li>

            <li class="tab-item">清洁用品<span>◆</span></li>

            <li class="tab-item">男士精品</li>

        </ul>

        <div class="products">

            <div class="main selected">

                <a href="###"><img src="images/guojidapai.jpg" alt="" /></a>

            </div>

            <div class="main">

                <a href="###"><img src="images/guozhuangmingpin.jpg" alt="" /></a>

            </div>

            <div class="main">

                <a href="###"><img src="images/qingjieyongpin.jpg" alt="" /></a>

            </div>

            <div class="main">

                <a href="###"><img src="images/nanshijingpin.jpg" alt="" /></a>

            </div>

        </div>

    </div>

    <!--

        样式解释：

            哪个li加active类，哪个就有上边框红色

            哪个main的div加selected，哪个就显示

        实现步骤：

            1.找到所有的li

            2.遍历所有li，给它们注册鼠标移入事件

                2.1 谁移入，谁加一个类active

                2.2 要先排他，把所有的类恢复

                2.3 在外面循环，把li的下标存到li的自定义属性里

                2.4 谁移入，取出谁的下标，再根据这个下标找到对应的div，给div加一个类selected(记得要先找到所有的main的div并排他)

    -->

    <script>

        // 找到所有的li标签

        var list = document.getElementsByTagName('li');

        // 找到所有类叫main的div标签

        var mainList = document.getElementsByClassName('main');

        // 遍历所有的li，给它们加鼠标移入事件

        for(var i = 0; i < list.length; i++){

            // 当i=0时，就把0存在了下标0的li里面

            // 当i=1时，就把1存在了下标1的li里面

            list[i].setAttribute('index',i);


            // 鼠标移入事件

            list[i].onmouseover = function(){

                // 让大家都恢复，循环4次

                for(var j = 0; j < list.length; j++){

                    list[j].className = "tab-item";

                    mainList[j].className = "main";

                }

                // 谁移入谁加active

                this.className += " active";

                // 排他，让其他所有div都恢复默认

                // for(var j = 0; j < mainList.length; j++){

                //    mainList[j].className = "main";

                // }

                // 谁移入，取出谁的下标

                var index = this.getAttribute('index');

                mainList[index].className += " selected";

            } 

        }

    </script>

02文档树

<!--

        网页中的所有内容，都在body标签里，而body在html里

        html再往上就是document

        document:文档（指的是整个网页内容）

        我们所有的元素都在document里面，相当于是由document开枝散叶而来，所以把这种关系图叫文档树(DOM)


        元素：网页中的所有标签都叫元素

        节点：网页中的所有内容都叫节点，节点包括标签、文本、注释、属性等

        总结：我们的网页内容都在document里面，DOM其实指的就是document的文档树模型，操作DOM其实就是操作document


    例：

        //代表整个网页里所有的li标签

        document.getElementsByTagName('li');

            因为这是document来调用的，而document代表整个网页，所以它是找所有网页里的li标签


        //代表只是找到ul1里面的所有li标签

        ul1.getElementsByTagName('li');

03设置body跟网页一样高

        /* 跟它的父盒子也就是document一样高 */

        /* html{

            height:100%;

        } */

        /* 跟html一样高 */

        /* body{

            height: 100%;

        } */

        /* 记住设置body跟网页内容一样高 */

        html,body{

            height: 100%;

        }

        .box{

            width: 100px;

            height: 100px;

            background-color: #f00;

        }

04节点特征&标签节点特征

<!--

        节点：网页中所有内容都叫节点

        节点有三大特征：

            nodeType：  节点类型

            nodeName：  节点名字

            nodeValue： 节点值

        每种节点特征值不一样：标签有标签的节点特征值，文本有文本的节点特征值，属性也有自己的特征值

        所以我们接下来研究一下：标签、属性、文本、注释的各种节点特征值都是几

        标签的节点特征：

            nodeType:  1

            nodeName:  大写的标签名

            nodeValue: null

        以后如果我拿到一个节点，但是我又不知道这个节点是什么类型，就可以判断nodeType是否等于1，如果等于1就代表是标签

        但是我也不知道是什么标签，就可以用nodeName知道是什么标签

    -->

</head>

<body>

    <div id="box">我是div</div>

    <span id="sp">我是span</span>

    <script>

        // 找到div

        var box = document.getElementById('box');

        console.log(box.nodeType); //1

        console.log(box.nodeName); //DIV

        console.log(box.nodeValue); //null

        // 找到span

        var sp = document.getElementById('sp');

        console.log(sp.nodeType); //1

        console.log(sp.nodeName); //SPAN

        console.log(sp.nodeValue);//null

05属性节点的节点特征

<!--

        属性节点特征：

            nodeType: 2

            nodeName: 一定是属性名,小写

            nodeValue：属性值

        元素.attributes：

            获取它所有的属性

    -->

</head>

<body>

    <div id="box" class="test" >我是div</div>

    <script>

        //找到div

        var box = document.getElementById('box');

        // 这只是叫拿到属性值

        // console.log(box.id);


        // 怎么整体拿到属性？

        // attributes可以拿到所有的属性，是一个伪数组

        // 取下标就是找到某个属性

        console.log(box.attributes[0].nodeType);//2

        console.log(box.attributes[0].nodeName);//id

        console.log(box.attributes[0].nodeValue);//box

        console.log(box.attributes[1].nodeType);//2

        console.log(box.attributes[1].nodeName);//class

        console.log(box.attributes[1].nodeValue);//test

06文本节点的节点特征

  <!--

        childNodes：

            找到自己的所有子节点

        文本节点的节点特征：

            nodeType:3

            nodeName:#text

            nodeValue:文本的内容

    -->

</head>

<body>

    <ul id="ul1">

        我是文本

        <li>隔壁老王1</li>

        <li>隔壁老王2</li>

        <li>隔壁老王3</li>

        <li>隔壁老王4</li>

        <li>隔壁老王5</li>

    </ul>

    <script>

        // 找到ul

        var ul1 = document.getElementById('ul1');

        console.log(ul1.childNodes);

        console.log(ul1.childNodes[0].nodeType);//3

        console.log(ul1.childNodes[0].nodeName);//#text

        console.log(ul1.childNodes[0].nodeValue);//文本的内容

        07注释节点的节点特征

<!--

        注释节点的节点特征： 

            nodeType:8

            nodeName:#comment

            nodeValue:注释的内容

    -->

</head>

<body>

    <ul id="ul1">

        <!-- 我是注释 -->

        <li>隔壁老王1</li>

        <li>隔壁老王2</li>

        <li>隔壁老王3</li>

        <li>隔壁老王4</li>

        <li>隔壁老王5</li>

    </ul>

    <script>

        // 找到ul1

        var ul1 = document.getElementById('ul1');

        console.log(ul1.childNodes);


        console.log(ul1.childNodes[1].nodeType);//8

        console.log(ul1.childNodes[1].nodeName);//#comment

        console.log(ul1.childNodes[1].nodeValue);//注释的内容

08如何找到html,body,head标签

<!--

        如何找body

            document.body

        如何找head

            document.head

        如何找html

            document.documentElement

        它们都是标签，所以它们的nodeType都为1

    -->

</head>

<body id="bd">


    <script>

        // var bd = document.getElementById('bd');

        // console.log(bd);

        // body每个网页只有一个，而且默认就有，所以如果你要找body，没必要上面那么麻烦，webAPI封装好了，直接用就行了

        // console.log(document.body);

        // // 怎么找head

        // console.log(document.head);

        // // 怎么找html?

        // console.log(document.documentElement);

        console.log(document.body.nodeType);//1

        console.log(document.head.nodeType);//1

        console.log(document.documentElement.nodeType);//1

09document节点

<script>


        console.log(document.nodeType); //9

        console.log(document.nodeName); //#document

        console.log(document.nodeValue);//null


    </script>

10找子节点和子元素

  <!--

        childNodes：找到所有子节点，包括标签、文本、注释、属性等

        children： 找到所有子元素，也就是说只找到子标签

                    它也是一个伪数组，里面保存了所有的子标签

    -->

</head>

<body>

    <ul id="ul1">

        <li>隔壁老王1</li>

        <li>隔壁老王2</li>

        <li>隔壁老王3</li>

        <li>隔壁老王4</li>

        <li>隔壁老王5</li>

    </ul>

    <script>

        var ul1 = document.getElementById('ul1');

        // console.log(ul1.childNodes);

        console.log(ul1.children);

        // 现在我要找到ul1里所有的li

      for(var i = 0; i < ul1.children.length; i++){

            console.log( ul1.children[i] );

      }

11找父元素

  <!--

        parentNode:

            找父节点，但是找到的只有标签，因为只有标签才能成为别人的父节点

    -->

</head>

<body>

    我是<h1 id="h1">我是标题</h1>文本

    <script>

        //    console.log( document.body.childNodes);

        var h1 = document.getElementById('h1');

        console.log(h1.parentNode); //打印body

        console.log(document.body.parentNode);//html

        console.log(document.body.parentNode.parentNode);//document

        12找父元素的补充

<!--

        parentNode：照理说这个要包括文本、注释、属性

        parentElement：这个只有标签

        但是能成为别人父元素的，只有标签

        所以在99.9999%情况下，它们两个都是一样的


        parentNode最高能找到document,而parentElement不能找到document（因为document不算标签，所以找不到）

        建议用parentNode

    -->

</head>

<body>

    <ul>

        <li id="li1">隔壁老王1</li>

        <li>隔壁老王2</li>

        <li>隔壁老王3</li>

        <li>隔壁老王4</li>

        <li>隔壁老王5</li>

    </ul>

    <script>

        //找到li1

        var li1 = document.getElementById('li1');

        // // ul

        // console.log(li1.parentNode);

        // console.log(li1.parentElement);

        // // body

        // console.log(li1.parentNode.parentNode);

        // console.log(li1.parentElement.parentElement);

        // // html

        // console.log(li1.parentNode.parentNode.parentNode);

        // console.log(li1.parentElement.parentElement.parentElement);

        // document

        console.log(li1.parentNode.parentNode.parentNode.parentNode); //document

        console.log(li1.parentElement.parentElement.parentElement.parentElement);//null

13关闭二维码

<style>

        .box {

            width: 107px;

            height: 127px;

            position: fixed;

            left: 50%;

            top: 50%;

            margin-left: -53.5px;

            margin-top: -63.5px;

            border: 1px solid #d9d9d9;

        }

        span {

            position: absolute;

            width: 15px;

            height: 15px;

            border: 1px solid #d9d9d9;

            color: #d9d9d9;

            text-align: center;

            line-height: 15px;

            left: -17px;

            top: -1px;

            /* 修改鼠标到我范围内的样式

                pointer为小手

                move 是可拖动的十字架

            */

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="images/taobao.jpg" alt="">

        <span>x</span>

    </div>

    <script>

        //获取span

        var sp = document.getElementsByTagName('span')[0];

        // 给span加点击事件

        sp.onclick = function(){

            this.parentNode.style.display = "none";

        }

    </script>

14innerText,innerHTML,textContent

<!--

    获取

        innerText：

                获取的只是纯文本，不带标签

        innerHTML：

                获取的内容带标签

                严格来讲，它才是真·获取双标签里所有内容，包括标签

    设置：

        innerText：

                设置的时候带标签，也会标签当纯文本

        innerHTML：

                设置的时候带标签，会把标签解析出来

        innerHTML比innerText功能更强大，

            innerText它有兼容问题，它是以前IE弄出来的属性，不是标准属性，所以在火狐45版本之前不支持

            innerHTML所有浏览器都支持

        textContent其实跟innerText作用是一毛一样的

            它也只是只能获取纯文本，以及设置内容时如果带标签会把标签当纯文本

        textContent在IE8和之前的浏览器不支持


    -->

    <style>

        .box{

            width: 300px;

            height: 300px;

            background-color: #f00;

        }

    </style>

</head>

<body>

    <div class="box">

        我是div

        <span>我是span</span>

        <h3>我是h3</h3>

    </div>

    <script>

        //找到div

        var box = document.getElementsByClassName('box')[0];

        // console.log(box.innerText);

        // console.log(box.innerHTML);

        // box.innerText = "我是修改的内容";

        // box.innerHTML = "我是修改的内容";

        // box.innerText = "<h3>我是新的h3</h3>";

        // box.innerHTML = "<h3>我是新的h3</h3>";

        // console.log(box.textContent);

        box.textContent = "<h3>我是新的h3</h3>";



    </script>

15创建元素的三种方式

<!--

        document.write：

            可以给body添加内容，你写标签就把标签解析出来就相当于是给body加子元素

            缺点：

                1.只能给body添加

                2.会覆盖body的所有内容

        所以这个方法我们不会用

        innerHTML：

            它可以给所有元素加子元素，但是如果你是直接赋值会覆盖原来的内容

            如果想添加新的子元素，最好用+=

        document.createElement();

            它可以创建出一个新的元素对象

            传入 标签名 就可以在内存中创建这个新的标签

            但是网页中看不到，要想看到，还必须 调用 appendChild，把它加到某个元素里面

    -->

    <style>

        .box{

            width: 300px;

            height: 300px;

            background-color: #f00;

        }

    </style>

</head>

<body>

    <input type="button" value="添加元素" id="btn">

    <div class="box">

        <u>我是下划线标签</u>

    </div>


    <script>

        // 找到div

        var box = document.getElementsByClassName('box')[0];

        document.getElementById('btn').onclick = function(){

            // 1.不会用的document.write方法

            // document.write('<h3>我是h3</h3>');

            // 2.innerHTML

            // 用原来的值加一个h3

            // box.innerHTML = box.innerHTML + "<h3>我是h3</h3>";

            // box.innerHTML += "<h3>我是h3</h3>";

            // 3.document.createElement()

            // 你要创建什么标签，就在括号里传入这个标签的名字

            var res = document.createElement('h3');

            res.innerHTML = "我是新的内容";

            // 把刚刚创建出来的h3标签，添加到box这个div里

            box.appendChild(res);

            // console.log(res);

16 innerHTML的影响

<!--

        innerHTML：


            1.如果在大量循环里用innerHTML添加子元素，会非常耗资源（卡）

                    innerHTML用+= 看起来是添加一个子元素，其实它本质都是重新赋值

                    重新赋值就意味着每次都要先删掉原来，再一个一个渲染新的

            2.会让原本拥有的子元素的事件丢失

                    丢失的原因是：它相当于是把之前的元素擦掉重写，所以原来那个事件就丢了

    -->

</head>

<body>

    <input type="button" value="添加" id="btn">

    <div class="box">

        <span id="sp">你是有事件的span哦！</span>

    </div>

    <script>

        // 找到span

        var sp = document.getElementById('sp');

        // 找到div

        var box = document.getElementsByClassName('box')[0];

        //给span加点击事件

        sp.onclick = function () {

            alert('span被点击了');

        }

        document.getElementById('btn').onclick = function () {

            box.innerHTML += "<p>新的p标签</p>";

            //重新找到新的span，再给新的span加点击事件

            var sp = document.getElementById('sp');

            sp.onclick = function () {

                alert('span被点击了');

            }

            // 下面这段代码非常卡

            // for (var i = 0; i < 10000; i++) {

            //    document.body.innerHTML += "<p>p标签</p>";

            // }

            // document.body.innerHTML += "<p>p标签</p>";

            //相当于是

            // document.body.innerHTML = document.body.innerHTML + "<p>p标签</p>";

            // document.body.innerHTML = document.body.innerHTML + "<p>p标签</p>";

            // 如果非要用innerHTML做大量拼接，那么先用一个变量，把要添加的内容存起来

            // 再一次性赋值给innerHTML就行了

            // var str = "";

            // for (var i = 0; i < 10000; i++) {

            //    str += "<p>p标签</p>";

            // }

            // document.body.innerHTML += str;

        };

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,657评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,662评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,143评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,732评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,837评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,036评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,126评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,868评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,315评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2赞 351

推荐阅读更多精彩内容