2020-12-13

周日   DOM和BOM

DOM （Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。 树节点；


获取子节点的两种方式，语法如下

父节点.children;children树形返回保存子元素的集合，是一个HTMLCollection对象，在返回节点包括元素节点和注释节点。

父节点。childNode；childNode中保存着一个NodeList对象。

节点的基本属性：nodeType，nodename,nodeValue。

nodeType属性，用于表明节点类型，节点类型由在Node类型中定义的数值常量来表示。

1--标签

2--属性

3--文本

要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。

节点.nodeName：获取标签节点的标签名

节点.nodeValue：获取文本节点的内容

获取父节点的方法：

元素.parentNode：属性指向文档树中的父节点。

元素.offsetParent：指向与当前元素最近的有定位属性的父级元素，如果没有定位的父级，则指向body。

操作节点

1.创建节点

document.createElement（‘标签名’）：该方法接受一个字符串标签名，返回一个标签对象的引用。

document.createTextNode（‘文本’）：该方法创建一段文本，返回文本对象的引用。


2.追加节点（父元素的末尾）

父元素.appendChild（子节点），用于父元素的末尾添加一个节点。

var oul=document.getElementsByTagName（“ul”）[0];

var cli=document.craeteElement（“li”）；

cli.innerHTML="内容"

oul.appendChild（cli）；

3.添加节点（某个元素之前）

父元素.insertBefore（要插入的节点，参考节点）：该方法接受两个参数，要插入的节点和作为参照的节点，在插入节点后，被插入的节点会变成参照节点的前一个同胞节点，同时被方法返回。


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="box" style="width: 400px;border: 1px solid #000;height: 400px;">

        <button>按钮</button>

    </div>

    <button id="btn">添加</button>

    <script>

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

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

            var bt = document.createElement('button');//1.创建一个新的标签

            bt.innerHTML = "按钮"//2.更改标签里的内容；

            o.appendChild(bt)//3.用appendChild给追加到父元素下

        }

    </script>

</body>

</html>

4.删除节点

父元素.removeChild(被删除的元素)：接受一个参数，即要移除的节点。

5.替换节点

父元素.replaceChild（新的节点，被替换的节点）；该方法接受的是两个参数：要插入的节点和要被替换的节点。

6.获取和设置属性值（取定义属性的方法）

获取元素值：元素.getAttribute('属性名')

设置属性值：元素.setAttribute（‘属性名’，‘属性值’）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

<!--  此方法是处理自定义属性 -->

    <img src="./img/1.JPG" alt="" f="自定义属性">

    <script>

        var s=document.querySelector('img');

       console.log( s.getAttribute('f'));

    </script>

</body>

</html>

表格操作：

1.获取表格元素

DOM中提供了可以简便快速获取表格元素的属性，先获取到表格table对象，在通过table获取里面的元素，如获取thead-oTab.tHead、tfoot-oTab.tFoot、tbody-oTab.tBoodies、表格里的行toTab.rows。

2.案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        table {

            width: 500px;

            border-collapse: collapse;

            margin-top: 50px;

        }

    </style>

</head>

<body>

    <label for="">用户名：</label><input type="text">

    <label for="">年龄：</label><input type="text">

    <label for="">地址：</label><input type="text">

    <button>添加</button>

    <table border="1" id="tb">

        <caption>学生信息表</caption>

        <tr>

            <th>用户名</th>

            <th>年龄</th>

            <th>地址</th>

        </tr>

        <tbody>

        </tbody>

    </table>

</body>

<script>

    var btn = document.getElementsByTagName('button')[0];

    var tb = document.getElementsByTagName('tbody')[0];

    var ipt = document.getElementsByTagName('input');

    // var t = document.getElementById('tb');//找到表格节点

    // var tr = document.createElement("tr");

    // var s = t.appendChild(tr)//创建一个tr节点

    // var td1 = document.createElement('td');

    // var td2 = document.createElement('td');

    // var td3 = document.createElement('td');

    // // var s2 = s.appendChild(td)

    //    var s3=s.appendChild(td)

    //    var s4=s.appendChild(td)

    //   console.log(s2);

    btn.onclick = add;//1.给按钮添加点击事件

    function add() {

        var user = ipt[0].value;//2.取出值赋给td，此时，没有td，要创建td

        var age = ipt[1].value;

        var addr = ipt[2].value;

        // console.log( ipt[0].value);//添加点击事件

        if (user == "" || age == "" || addr == "") {

            return;

        }

        create(user,age,addr)

        ipt[0].value=ipt[1].value=ipt[2].value="";

    }

    function create(user, age, addr) {

        var td1 = data(user);

        var td2 = data(age);

        var td3 = data(addr);

        var tr = document.createElement('tr');

        tr.appendChild(td1)

        tr.appendChild(td2)

        tr.appendChild(td3)

        tb.appendChild(tr);

    }

    //构造内容td

    function data(cnt) {//3.由于我们要造三个td，所以可以创建一个函数，

        var td = document.createElement('td')//1-1.创造一个td

        td.innerHTML = cnt//1-2.将内容

        return td;

    }

</script>

</html>

案例2：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        #form {

            width: 480px;

            margin: 30px auto;

            border: 1px solid #eee;

            border-radius: 5px;

            padding: 10px;

            line-height: 30px;

            position: relative;

        }

        button {

            position: absolute;

            right: 10px;

            bottom: 10px;

        }

        #tab {

            width: 500px;

            margin: 30px auto;

            border-collapse: collapse;

        }

        th,

        td {

            border: 1px solid #000;

            padding: 5px;

        }

        tbody tr td:first-child {

            text-align: center;

        }

        /*input[type]  属性选择器  选择input标签，并且有type属性input标签*/

        /*input[type = "checkbox"]  选择有type属性并且值为checkbox的input标签*/

        input[type="checkbox"] {

            width: 15px;

            height: 15px;

        }

        #div1 {

            position: relative;

            width: 480px;

            padding: 10px;

            margin: 0 auto;

        }

    </style>

    <script>

    </script>

</head>

<body>

    <div id="form">

        请输入姓名: <input type="text" id="name"> <br> 请输入性别: <input type="radio" id="sex" name="sex" checked>男 <input type="radio" name="sex" id="sex2">女<br> 请输入年龄: <input type="text" id="age">

        <button>添加到表格</button>

    </div>

    <table id="tab">

        <thead>

            <tr>

                <th width="20%"><input type="checkbox" id="all">全选</th>

                <th>姓名</th>

                <th>性别</th>

                <th>年龄</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td><input type="checkbox"></td>

                <td>张三</td>

                <td>女</td>

                <td>88</td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>李四</td>

                <td>男</td>

                <td>18</td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>王五</td>

                <td>女</td>

                <td>1</td>

            </tr>

        </tbody>

    </table>

    <div id="div1">

        <button>删除所选行</button>

    </div>

</body>

<script>

    var ipt1 = document.getElementById('name');

    var ipt2 = document.getElementById('sex');

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

    var ipt3 = document.getElementById('age');

    var tb = document.querySelector('#tab').tBodies[0];

    // var trs=document.querySelectorAll('')

    document.getElementsByTagName('button')[0].onclick = add;//添加

    document.querySelector('#all').onchange=function(){

        var str=tb.children;//找到所有的tr

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

            str[i].children[0].children[0].checked=this.checked;

        }

    }

    document.querySelectorAll('button')[1].onclick=function(){//删除

    }

    function add() {

        var er = ' <td><input type="checkbox"></td>';//创建

        var user = ipt1.value; //2.取出值赋给td，此时，没有td，要创建td

        var sex = ipt2.checked?'男':'女';

        var age = ipt3.value;;

        // change(sex);

        // console.log( ipt[0].value);//添加点击事件

        if(ipt1.value==''||ipt3.value=='') return;

        create( er,user, sex, age)

        // ipt1.value = ipt3.value = "";

    }

    console.log(sex);

    function create(er,user, sex, age) {

        var td1 = data(er);

        var td2 = data(user);

        var td3 = data(sex);

        var td4 = data(age);

        var tr = document.createElement('tr');

        // tr.appendChild(td0)

        tr.appendChild(td1)

        tr.appendChild(td2)

        tr.appendChild(td3)

        tr.appendChild(td4)

        tb.appendChild(tr);

    }

    //构造内容td

    function data(cnt) { //3.由于我们要造三个td，所以可以创建一个函数，

        var td = document.createElement('td') //1-1.创造一个td

        td.innerHTML = cnt //1-2.将内容

        return td;

    }

</script>

</html>


补充找找元素的方法：

元素.querySelector

元素.querySelectorAll

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div>

        <div class="box">好</div>

        <div id="box">在</div>

        <p>真的</p>

        <p>不是的</p>

    </div>

</body>

<script>    

    // var o=document.querySelector("#box")//根据id找

    // var o=document.querySelector('.box')//根据类名

    var o=document.querySelectorAll('div')//根据标签名来找到所有元素

    var o=document.querySelectorAll('p')//根据标签名来找到所有元素

    var o=document.querySelector('div')

    var o=document.querySelector('p')//只会找到第一个标签

    console.log(o);

</script>

</html>


BOM

BOM全称Browser Object Model-浏览器对象模型，他提供了很多对象，用于访问浏览器的功能，没有规范，BOM的核心是window。

三大弹出窗。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <button>打开</button>

    <button>关闭</button>

</body>

<script>

    var bt1=document.querySelector('button');

    // bt1.onmouseenter=function(){

    //     alert('弹出')//弹出框

    //     prompt("输入框")//输入框

    //     confirm('警告框')//警告框

    // }

    bt1.onclick=function(){

        // open()//打开一个空白窗口

        open('http://www.baidu.com','_target')

    }

</script>

</html>


open和close，打开和关闭窗口。

history对象，历史记录查询。

navigator对象，此对象的属性通常用于检测显示网页的浏览器类型

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        console.log(navigator);

        console.log(navigator.language);

        console.log(navigator.appCodeName);//浏览器代号

        console.log(navigator.appName);//浏览器名称

        console.log(navigator.appVersion);//浏览器版本

    </script>

</body>

</html>

body的位置属性；分为三组对比来记。

1.client系列

1）元素可视宽高

    元素.clientWidth（width+左右的padding）

    元素.clientHeight（height+上下的padding）

2）屏幕的可视宽高

    document.documentElement.clientWidth

    document.documentElement.clienHeight

3）元素边框

    元素.clientTop:上边框的高度

    元素.clientLeft：做边框的宽度

2.offset系列

1）获取与元素的占位宽高

    元素.offsetWidth：width+padding+border

    元素.offsetHeight：height+padding+border

2）获取元素在页面中的位置

    元素.offsetTop：当前元素的顶部，定位到父元素的距离，没有定位父元素，到body的距离

    元素.offsetLeft：当前元素的左边，到定位父元素的距离，没有定位父元素，到body的距离

3.scroll系列

1）滚动事件

    window.onscroll：滚动条滚动的时候调用

2）屏幕滚动距离

    document.documentElement.scrollTop:获取页面被卷去的高度；

    document.body.scrollTop

3）元素的滚动

    元素.scrollTop:被卷去的高

    元素.scrollLeft:被卷去的宽

    元素.scrollWidth:获取元素实际内容宽

    元素.scrollHeight:获取元素的实际内容高

总结：

width：content 内容

clientWidth：padding+content 可视宽

offsetWidth：content+padding+border 占位宽

scrollWidth：内容的实际宽度


clientTop：border

offsetTop：相对于父元素之间的距离

scrollTop：被卷去的高度

document.documentElement.scrollTop||document.body.scrolllTop   //所有浏览器的兼容写法，滚动条。

document.document.clientWidth 屏幕宽


实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{padding: 0;

        margin: 0;}

        div{

            width: 100px;

            height: 100px;

            background-color: azure;

            border: 10px solid lightblue ;

            padding: 4px;

            margin: 2px;

        }

    </style>

</head>

<body>

    <div></div>

</body>

<script>

var o=    document.querySelector('div')

    console.log(o.offsetWidth);//获取元素的width和padding和border

    console.log(o.offsetHeight);//获取元素height和padding和border


    </script>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div{

            width: 400px;

            height: 600px;

            border:3px solid  lemonchiffon;

            overflow: scroll;

           white-space: nowrap;

        }

    </style>

</head>

<body>

    <div>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

        <p>l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否</p>

    </div>

</body>

<script>

    var o=document.querySelector('div');

    console.log(o.scrollWidth);//获取元素的内容宽

    console.log(o.scrollHeight);//获取元素的内容高

    console.log(o.scrollTop);//被卷走的高度

</script>

</html>


懒加载：先只加载可视窗口区域的图片，当用户向下拖动滚动条时在继续加载后面的图片。这样做的好处是节约加载流量，减少加载时的线程数量，优化了用户体验。

懒加载实例：


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        img {

            width: 500px;

            height: 400px;

        }

    </style>

</head>

<body>

    <img src="" alt=""

        _src="https://img10.360buyimg.com/imgzone/jfs/t1/113060/12/1418/185227/5e980a6dE5f25e04e/5ccdffc0b7a9e271.jpg">

    <img src="" alt=""

        _src="https://img10.360buyimg.com/imgzone/jfs/t1/95408/16/18803/242500/5e980a6dEb79fff73/b95a401fdaa46838.jpg">

    <img src="" alt=""

        _src="https://img10.360buyimg.com/imgzone/jfs/t1/113060/12/1418/185227/5e980a6dE5f25e04e/5ccdffc0b7a9e271.jpg">

    <img src="" alt=""

        _src="http://img10.360buyimg.com/imgzone/jfs/t1/26298/2/3140/95881/5c24a2a3Ec88bc8e7/31a622ea7e7f135a.jpg">

    <img src="" alt=""

        _src="http://img10.360buyimg.com/imgzone/jfs/t1/88385/4/14421/309252/5e65b6f1Ec8c72fb2/0969945cc3994b62.jpg">

    <img src="" alt=""

        _src="http://img10.360buyimg.com/imgzone/jfs/t1/102251/19/14425/221709/5e65b6c1Eab3d1427/278d241d878fc230.jpg">

    <img src="" alt=""

        _src="http://img10.360buyimg.com/imgzone/jfs/t1/104868/9/14544/76373/5e65b6c1E970d4f5c/e4a72c73c6d552a7.jpg">

    <img src="" alt=""

        _src="http://img10.360buyimg.com/imgzone/jfs/t1/45973/2/12795/633596/5d99867bE84169bb5/2287eb4a615c53cf.jpg">

    <img src="" alt=""

        _src="http://img30.360buyimg.com/popWareDetail/jfs/t1/118005/4/18300/111948/5f649374E790686f6/81a6fec05cd6e58c.jpg">

    <img src="" alt=""

        _src="http://img30.360buyimg.com/popWareDetail/jfs/t1/122120/40/13016/132812/5f649374E3548027d/d6db0daac30fcc09.jpg">

    <img src="" alt=""

        _src="http://img30.360buyimg.com/popWareDetail/jfs/t1/118886/1/18746/124561/5f649374Ee99bca2d/74cf607b335d1083.jpg">

    <script>

        var Img=document.querySelectorAll('img');

        var clh=document.documentElement.clientHeight;

        showImg();

        function showImg(){

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

                var oth=Img[i].offsetTop;//每张图片距离顶部的位置

                var lit=document.documentElement.scrollTop||document.body.scrollTop;//卷去的可视区高度

                if(oth<=lit+clh){

                 Img[i].src=Img[i].getAttribute('_src')   

                }

            }

        }

        window.onscroll=function(){

            showImg();

        }

        // var pics = document.querySelectorAll('img');

        // var cHeight = document.documentElement.clientHeight;//屏幕可视的高度

        // showImg();

        // //遍历所有的图片，判断哪些图片应该显示

        // // 图片距离顶部的距离<窗口可视高度+页面卷去的高度   

        // function showImg() {

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

        //         var st = pics[i].offsetTop;//每个图片距离顶部的距离

        //         var t = document.documentElement.scrollTop || document.body.scrollTop;//页面卷去的高度            

        //         if (st <= t + cHeight) {

        //             pics[i].src = pics[i].getAttribute('_src');//取出，赋值

        //         }

        //     }

        // }

        // window.onscroll = function () {

        //     showImg();

        // };

    </script>

</body>

</html>


回到顶部案例：


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div {

            height: 1500px;

        }

        button {

            position: fixed;

            right: 15px;

            bottom: 15px;

            display: none;

        }

    </style>

</head>

<body>

    <div></div>

    <button>回到顶部</button>

    <script>

        var btn=document.querySelector('button');//找按钮

        document.onscroll=function(){//给页面添加监听事件

              var st=document.documentElement.scrollTop||document.body.scrollTop;//被卷去的高度

        if(st>=500){

            btn.style.display="block";

        }else{

            btn.style.display='none';

            }

        }


btn.onclick=function(){

    var st=document.documentElement.scrollTop||document.body.scrollTop;

    var t=setInterval(function(){

        st-=10;//每次让卷出的高度减少10

        if(st<=0){

            clearInterval(t);

        }

        document.documentElement.scrollTop=st;//再把

    },10)

}

        // var btn = document.querySelector('button');

        // //滚动

        // document.onscroll = function () {

        //     var st = document.documentElement.scrollTop || document.body.scrollTop;//被卷去的高度

        //     if (st >= 500) {

        //         btn.style.display = 'block';

        //     } else {

        //         btn.style.display = 'none';

        //     }

        // };

        // document.querySelector('button').onclick = function () {

        //     var st = document.documentElement.scrollTop || document.body.scrollTop;

        //     var t=setInterval(function () {

        //         st -= 10; 

        //         if(st<=0){

        //             clearInterval(t);

        //         }

        //         document.documentElement.scrollTop=st;

        //     }, 2);


        // };

    </script>

</body>

</html>

resize事件

    当前屏幕发生变化的时候调用，会不间断的调用。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <img src="http://img30.360buyimg.com/popWareDetail/jfs/t1/118886/1/18746/124561/5f649374Ee99bca2d/74cf607b335d1083.jpg"

        alt="">

    <script>

        //窗口尺寸发生改变事件

        function show() {

            var Img = document.querySelector('img');

            var clt = document.documentElement.clientWidth;//可视区域宽度

            Img.style.width = clt + 'px';

        }

        show()

        window.onresize = function () {

            show();

        }

        // function show() {

        //     var img = document.querySelector('img');

        //     var w = document.documentElement.clientWidth;//可视区域宽度

        //     img.style.width = w + 'px';

        // }

        // show();

        // window.onresize = function () {

        //     show();

        // }

    </script>

</body>

</html>


淘宝评价案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 100%;

            height: 100px;

            margin-bottom: 20px;

            background: pink;

        }

        #pingjia {

            background: red;

            margin: 0;

        }

        #pingjia.active {

            position: fixed;

            top: 0;

        }

    </style>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div id="pingjia" class=""></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</body>

<script>

    var dis = document.querySelector("#pingjia");

    var ofT = dis.offsetTop;//目标元素距离顶部的位置

    console.log(ofT);

    var sH = document.documentElement.scrollHeight;

    document.onscroll = function () {

        var src = document.documentElement.scrollTop || document.body.scrollTop;//被卷走的高度

        console.log(src);

        if (ofT <= src) {

            dis.className = 'active';

        } else {

               dis.className='';

        } 


    } 

</script>

</html>

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

推荐阅读更多精彩内容