01_body和html特殊元素获取

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>你好</h1>
    </body>
    <script type="text/javascript">
        
        // html: 需要使用document.documentElement 来获取
        html = document.documentElement
        console.log(html)
        
        // body: 需要使用document.body 获取
        body = document.body
        console.log(body)
        
        
    </script>
</html>

02_id选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="box_1">
            hello
            <div>
                你好
            </div>
        </div>
        
        <!-- document 返回的是当前网页文档,使用getElementById 来得到文档内的DOM对象 -->
        <script type="text/javascript">
            box_obj = document.getElementById('box_1')
            console.log(box_obj);  // 返回的是id 为 box_1的DOM节点对象
            console.log(typeof box_obj)
            console.dir(box_obj)  // 打印该对象的所有属性和方法
        </script>
    </body>
</html>

03_标签选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        
        
        <!-- getElementsByTagName返回的是元素对象的集合,是以伪数组的形式存储 -->
        <script type="text/javascript">
            lis = document.getElementsByTagName('li')  // 获得所有的li标签
            console.log(typeof lis)
            console.log(lis)
            
            for (var i = 0; i < lis.length; i++) {
                console.log(lis[i])
            }
            
            console.log('--------------')
            
            // 得到所有ul元素
            ul = document.getElementsByTagName('ul')
            // 得到第一个ul
            ul = ul[0]
            // 打印该ul元素
            console.log(ul)
            
        </script>
    </body>
</html>

04_类选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="box_1">
            <ul>
                <li>1</li>
                <li>2</li>
            </ul>
        </div>
        <div class="box_1">
            <ul>
                <li>1</li>
                <li>2</li>
            </ul>
        </div>
        
        <script type="text/javascript">
            box_1 = document.getElementsByClassName('box_1')
            console.log(box_1)
            console.log(typeof box_1)
        </script>
    </body>
</html>

05_queryselector选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
        
        <div class="box">
            hello
        </div>
        
        <div id="app">
            你好
        </div>
        
        
        <!-- querySelector只会选择第一个元素,并返回这个元素对象 -->
        <!-- querySelector可以选择页面中的任何DOM元素 -->
        <script type="text/javascript">
            qs_1 = document.querySelector('li');
            console.log(typeof qs_1);
            console.log(qs_1);
            
            qs_2 = document.querySelector('.box');
            console.log(qs_2);
            
            qs_3 = document.querySelector('#app');
            console.log(qs_3)
            
            // querySelectorAll会返回所有的选择器对相同
            qs_all = document.querySelectorAll('div')
            console.log(qs_all)
        </script>
    </body>
</html>

06_事件基础


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button type="button" id="btn">点一点</button>
    </body>
    
    <div style="width: 200px;height: 100px;background: pink;text-align: center;line-height: 100px;margin-top: 50px;">
        点一下哦
    </div>
    
    <script type="text/javascript">
        // 事件由3部分组成(事件三要素): 事件源, 事件类型, 事件处理程序
        // 1. 事件源: 事件被触发的对象
        // 2. 事件类型: 具体触发的某种行为,比如点击按钮就是 onclick 事件
        // 3. 事件处理程序: 通过一个函数赋值的方式完成
        
        // 执行事件的步骤
        // 1.获得事件源
        // 2. 注册事件(绑定事件)
        // 3. 添加事件处理程序
        
        
        var btn = document.querySelector('#btn')
        var div = document.querySelector('div')
        console.log(btn)
        console.log(div)
        
        // 给该DOM对象添加一个事件
        btn.onclick = function (e){
            alert(123)
        }
        div.onclick = function (){
            alert('标签弹出来了哦')
        }
        
    </script>
</html>

07_DOM操作元素-innertext/innerhtml

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <button type="button" id="btn">点一下,玩一年</button>
        <br>
        <div id="box">
            时间区域
        </div>
        
        <p id="p_box">
            p标签哦
        </p>
    </head>
    <body>
        <script type="text/javascript">
            // innerText: DOM对象内的文本内容, 不识别html中的标签(非标准),且去除空格和换行,可读写
            // innerHTML: 会自动识别标签(W3C的标准),且会保留文字内的空格,可读写
            
            
            // 1. 获取元素
            var btn = document.querySelector('#btn')
            var box = document.querySelector('#box')
            
            btn.onclick = function() {
                box.innerText = new Date()
            }
            
            //  这样再页面刷新的时候就自动刷新了
            var p_1 = document.querySelector('#p_box')
            console.log(p_1.innerHTML)
            console.log(p_1.innerText)
            p_1.innerHTML = '你好          <h1>世界</h1>'
        </script>
    </body>
</html>

08_DOM操作元素-属性控制

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img {
                display: block;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <button type="button" id="ldh">ldh</button>
        <button type="button" id="zxy">zxy</button>
        <img src="jsapis_material/第一天/images/ldh.jpg" >
        
        <script type="text/javascript">
            var ldh = document.querySelector('#ldh')
            var zxy = document.querySelector('#zxy')
            var img = document.querySelector('img')
            
            ldh.onclick = function(){
                img.src = "jsapis_material/第一天/images/ldh.jpg"
                img.title = '刘德华'
            }
            zxy.onclick = function(){
                img.src = "jsapis_material/第一天/images/zxy.jpg"
                img.title = '张学友'
            }
        </script>
    </body>
</html>

09_DOM操作元素-属性案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img {
                width: 400px;
            }
        </style>
    </head>
    <body>
        <img src="" >
        
        <script type="text/javascript">
            var img_01 = document.querySelector('img')
            
            // 根据时间的不同替换不同的图片
            var date = new Date()
            var h = date.getHours()
            
            if (h < 12) {
                img_01.src = 'jsapis_material/第一天/images/s.gif';
            }else if (h <18){
                img_01.src = 'jsapis_material/第一天/images/x.gif';
            }else{
                img_01.src = 'jsapis_material/第一天/images/w.gif';
            }
            
        </script>
    </body>
</html>

10_DOM操作元素-表单属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button type="button" id="btn">点一点</button>
        <input type="text" id="ipt_text" value="" />
        <button type="button" id="btn_">点一下</button>
        
        
        
        
    </body>
    <script type="text/javascript">
        // 利用DOM元素可以操作的表单属性: type value checked selected disabled
        var btn = document.querySelector('#btn')
        var btn_ = document.querySelector('#btn_')
        var ipt_text = document.querySelector('#ipt_text')
        
        btn.onclick = function(){
            ipt_text.value = '点我干啥,禁用你丫的'
            this.disabled = true  // this 指向了调用者,谁调用指向谁,这里指向了 btn
        }
        
        var flag = true
        btn_.onclick = function(){
            console.dir(ipt_text)
            if (flag) {
                ipt_text.value = '******'
                flag = !flag
            } else{
                ipt_text.value = 123456
                flag = !flag
            }
        }
        
        
        
    </script>
</html>

11_DOM操作元素-表单案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                position: relative;
                width: 200px;
                border-bottom: #ccc solid 1px;
                margin: 100px auto;
            }
            .box input {
                width: 370px;
                height: 20px;
                border: 0;
                outline: none;
            }
            img {
                position: absolute;
                top: 2px;
                right: 10px;
                width: 18px
            }

        </style>
    </head>
    <body>
        <div class="box">
            <img src="jsapis_material/第一天/images/close.png" >
            <input type="password" name="" />
        </div>
        
        <script type="text/javascript">
            var img = document.querySelector('img')
            var input = document.querySelector('input')
            
            var flag = true
            img.onclick = function () {
                input.type = flag?'text':'password',  // 改变input的type类型
                img.src = flag?'jsapis_material/第一天/images/open.png':'jsapis_material/第一天/images/close.png',
                flag = !flag
            }
        </script>
        
    </body>
</html>

12_DOM操作元素-样式属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                background: pink;
            }
            
            .my_style1 {
                width: 200px;
                height: 200px;
                background: peachpuff;
            }
            .my_style2 {
                font-size: 14px;
            }
        </style>
    </head>
    <body>
        
        <div class="box">
            1. 操作的样式不多时可以通过控制style, 如果需要修改的样式很多  需要操作className 来让改DOM元素改变 样式类,<br>
            2. 操作DOM改变的style 会变成行内式,样式权重会很高<br>
            3. 注意,classname会覆盖原有的类名<br>
            4. 注意style获取的是可读写属性,这里是与offset不同的(offset最好只读),而且style里只能获取到行内样式的属性<br>
        </div>
        <button type="button">点一下变灰色</button>
        
        <script type="text/javascript">
            var btn = document.querySelector('button')
            var box = document.querySelector('.box')
            
            console.log(box.style.width)  // 注意style里只包含行内样式的属性
            
            btn.onclick = function(event) {
                box.style.background = '#ccc'
                box.className = 'my_style1 my_style2'
                console.dir(box)
            }
        </script>
    </body>
</html>

13_DOM操作元素-循环创建

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            ul {
                width: 250px;
                margin: 100px auto;
                list-style: none;
            }
            ul li {
                float: left;
                width: 24px;
                height: 24px;
                background: pink;
                margin: 15px;
                background: url('jsapis_material/第一天/images/sprite.png') no-repeat;
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        
        <script type="text/javascript">
            var lis = document.querySelectorAll('li')
            for (var i = 0; i < lis.length; i++) {
                var y = i * -44
                lis[i].style.backgroundPosition = '0 ' + y + 'px'
                
            }
        </script>
    </body>
</html>

14_DOM操作元素-禁用选择框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
        <select id="sel">
            <option value ="haha">123</option>
        </select>
        
        <input type="" name="" id="" value="" />
        
        <button type="button">点击禁用</button>
    </body>
    
    <script type="text/javascript">
        let sel = document.querySelector('#sel')
        let btn = document.querySelector('button')
        
        btn.addEventListener('click',()=>{
            sel.disabled = !sel.disabled
        })
    </script>
</html>

15_DOM操作元素-显示隐藏文本框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            input {
                color: #ccc;
                color: #ccc;
            }

            .msg {
                display: inline-block;
                font-size: 12px;
                color: #999;
                background: url(jsapis_material/第一天/images/mess.png) no-repeat left center;
                padding-left: 20px;
                margin: 0;
            }

        </style>
    </head>
    <body>
        <input type="text" value="手机" />
        <p class="msg">请输入手机号</p>
    </body>


    <!-- 
    onfocus 在该DOM元素获得焦点的时候触发
     onblur 在该DOM元素失去焦点的时候触发
     -->
    <script type="text/javascript">
        var ipt = document.querySelector('input')
        var p = document.querySelector('.msg')
        ipt.onfocus = function() {
            if (this.value == '手机') {
                this.value = ''
            }

            p.style.display = 'none'

            // 获得焦点的时候需要把文本框内的文字变黑
            this.style.color = '#333'
        }
        ipt.onblur = function() {
            if (this.value == '') {
                this.value = '手机'
                this.style.color = '#ccc'
                p.style.display = 'inline-block'
            }
            
        }
    </script>
</html>

16_立即执行函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 
         不需要调用立即可以执行的函数:且可以传递参数到函数内部,不要忘了用分号隔开
         立即执行函数最大的作用就是创建了一个独立的作用域类似 lambda , 有两种写法
         1. (function(){})() 
         2. (function(){}())
         -->
        <script type="text/javascript">
            (function(args){console.log('立即执行_1_'+args)})('hello');
            (function(args){console.log('立即执行_2_'+args)}('hello'))
        </script>
    </body>
</html>

17_排它锁

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button type="button">1</button>
        <button type="button">2</button>
        <button type="button">3</button>
        <button type="button">4</button>

    </body>
    <script type="text/javascript">
        var btns = document.querySelectorAll('button')

        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                console.log(this.innerText)
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</html>

18_事件-鼠标滑过

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            ul {
                list-style: none;
            }

            li {
                display: inline-block;

                /* background: pink; */
                width: 300px;
                padding-top: 10px;
                border-bottom: #ccc solid 2px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <!-- 
         onmouseover: 为DOM元素绑定鼠标经过事件
         -->

        <script type="text/javascript">
            var lis = document.querySelector('ul').querySelectorAll('li')

            for (var i = 0; i < lis.length; i++) {
                if (i % 2 == 0) {
                    lis[i].onmouseover = function() {
                        this.style.backgroundColor = 'pink'
                    };
                    lis[i].onmouseout = function() {
                        this.style.backgroundColor = ''
                    }
                }
            }
        </script>
    </body>
</html>

19_事件练习-全选和反选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            
        </style>
    </head>
    <body>
        <input type="checkbox" id="all" />全选
        
        <ul>
            <li><input type="checkbox" id="sub" />唱</li>
            <li><input type="checkbox" id="sub" />跳</li>
            <li><input type="checkbox" id="sub" />rap</li>
        </ul>
        
        <script type="text/javascript">
            var all = document.querySelector('#all')
            var subs = document.querySelector('ul').querySelectorAll('#sub')
            // 全选/反选 检测全选按钮的选中状态,依次赋值给子元素
            all.onclick = function(){
                console.log(this.checked)
                for (var i = 0; i < subs.length; i++) {
                    subs[i].checked = this.checked
                }
            }
            
            var flag = 0
            for (var i = 0; i < subs.length; i++) {
                subs[i].onclick = function() {
                    if (this.checked) {
                        flag++
                    } else{
                        flag--
                    }
                    
                    if (flag == subs.length) {
                        all.checked = true
                    } else{
                        all.checked = false
                    }
                }
            }
            
        </script>
        
        
    </body>
</html>

20_自定义属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="box" id="box_id" data-say_hello='hello'>
            2233
        </div>
        
        
        
        <!-- 
        document.attr: 只能获取document的内置属性,不支持自定义属性
        document.getattribute('attr'): 可以获得document的所有属性,包括自定义的属性
        document.setAttribute('age','18'): 手动设置一个age的属性
        document.removeAttribute('age'): 删除DOM中的age属性
        
        h5新增: 自定义的属性如果我们以 data-开头 则可以使用 document.dateset 这个属性histo拿到所有的自定义属性的集合
        
        -->
        
        <script type="text/javascript">
            var box = document.querySelector('#box_id')
            console.log(box.id)
            // console.log(box.data-say_hello)
            
            console.log('class: ',box.getAttribute('class'))  // 获取元素使用的类, 注意这里不能使用className
            console.log('data-say_hello: ', box.getAttribute('data-say_hello'))
            
            box.setAttribute('age','18')
            box.removeAttribute('age')
            
            console.log(box.dataset.say_hello)
            console.log(box.dataset['say_hello'])
            
        </script>
    </body>
</html>

21_父子兄弟节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <div class="box">我是div</div>
        <span>我是span</span>
        <ul>
            <li>我是1</li>
            <li>我是2</li>
            <li>我是3</li>
            <li>我是4</li>
            <li>我是5</li>
        </ul>

        <!-- 
        -- 节点分为: 元素节点, 文本节点, 属性节点
        -- 节点可以通过nodetype来的获取节点的类型  1元素节点,3文本节点,2属性节点
        
         parentNode: 得到DOM对象的最近的一个上级父节点,如果找不到父节点,则返回null
         childNodes: 得到DOM对象所有的子节点(包含了文本节点和子节点)
         children: 获得DOM对象的所有的子 "元素" 节点, 注意是元素
         firstChild: 得到DOM对象的第一个子节点,不管是文本节点还是元素节点 
         firstElementChild: 得到DOM对象的第一个子元素节点(有兼容性情况)
         
         
         nextSibling: 得到上一个兄弟节点
         nextElementSibling: 得到上一个兄弟元素
         -->
        <script type="text/javascript">
            var box = document.querySelector('.box')
            var ul = document.querySelector('ul')


            console.log(box.parentNode) // 得到box 的父节点
            console.log(ul.childNodes) // 得到ul 的所有子节点
            console.log(ul.children) // 得到ul 的所有的子元素节点 
            console.log(ul.firstChild) // 得到ul的第一个子节点
            console.log(ul.lastChild) // 得到ul的最后一个子节点
            console.log(ul.firstElementChild) // 得到ul第一个子元素节点

            console.log(box.nextSibling) // 下一个节点
            console.log(box.nextElementSibling) // 下一个元素节点
            console.log(box.previousSibling, 1) // 上一个节点
            console.log(box.previousElementSibling, 2) // 上一个元素节点

            // 实际开发情况
            console.log(ul.children[0]) // 第一个
            console.log(ul.children[ul.children.length - 1]) //最后一个


            // 循环注册事件
            lis = ul.children // 
            for (var i = 0; i < lis.length; i++) {
                if (i % 2 != 1) {
                    lis[i].style.background = 'coral'
                }
            }
        </script>
    </body>
</html>

22_创建节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>2333</li>
        </ul>
        <!-- 
        createElement: 创建一个标签
        
         appendChild: 追加元素
         children: 插入元素,需要传入需要插入的位置
         -->
        
        <script type="text/javascript">
            // 创建节点
            li = document.createElement('li')
            li.innerText = 'hello'
            l1 = document.createElement('li')
            li.innerHTML = 'say'
            
            // 添加节点到 ul 中
            var ul = document.querySelector('ul')
            ul.insertBefore(li,ul.children[0])  // 添加到前面
            // ul.appendChild(li)  // 添加到后面
        </script>
    </body>
</html>

23_删除节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" name="" id="" value="" />
        <button type="button" id="pu">发布</button>
        <button type="button" id="de">删除</button>
        <ul>

        </ul>
        <!-- 
         removeChild: 删除父节点中的子节点(需要传入子节点对象),注意!需要从父节点删除
         -->

        <script type="text/javascript">
            var btn = document.querySelector('#pu')
            var btn_de = document.querySelector('#de')
            var ul = document.querySelector('ul')
            var ipt = document.querySelector('input')

            btn.onclick = function() {
                if (ipt.value == '' || ipt.value.trim() == '') {
                    alert('不能输入空')
                    return
                }

                var li = document.createElement('li')
                li.innerHTML = ipt.value + "<a href='#'>删除</a>"
                li.style.background = 'pink'

                // ul.appendChild(li)
                ul.insertBefore(li, ul.children[0])

                // 创建删除的按钮
                var as = document.querySelectorAll('a')
                console.log(as)
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        // 需要删除 ul中a 标签的父节点  就是li 
                        ul.removeChild(this.parentNode)
                    }
                }
            }

            btn_de.onclick = function() {
                if (ul.children.length == 0) {
                    return
                }

                ul.removeChild(ul.children[0])
            }
        </script>
    </body>
</html>

24_复制节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <!-- 
        cloneNode(): 括号为空, 或者里面是false 则是浅拷贝(只赋值标签,不复制内容)
         -->
        <script type="text/javascript">
            var ul = document.querySelector('ul')
            // 获得ul 中第一个li
            var li = ul.children[0]
            
            // 克隆
            lii = li.cloneNode(true)
            
            // 添加克隆的节点
            ul.appendChild(lii)
            
        </script>
    </body>
</html>

25_事件基础-注册事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <button type="button" class="btn_1">1</button>
        <button type="button" class="btn_2">2</button>
        
        <!-- 
         传统注册事件: 最后注册的事件会覆盖上面的事件
         addEventListener: 监听事件注册,同一个元素对同一个事件可以注册多个监听器需要传递事件类型(事件类型不需要写 on了 比如 click),事件处理函数和useCapture(是否捕获),
         相同事件类型触发的顺序,是按照注册顺序依次触发
         -->
         <script type="text/javascript">
             btn_1 = document.querySelector('.btn_1')
             btn_2 = document.querySelector('.btn_2')
            
            // 传统注册方式
            btn_1.onclick = function(){
                alert(1)
            }
            // 传统注册方式
            btn_1.onclick = function(){
                alert(111)
            }
            
            // 事件监听
            btn_2.addEventListener('click',function(){
                alert(222)
            })
            btn_2.addEventListener('click',function(){
                alert(233)
            })
            
            
         </script>
    </body>
</html>

26_事件基础-解除事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button type="button" class="btn_1">
            1. 只能点一次哦
        </button>
        
        <button type="button" class="btn_2">
            2. 只能点一次哦
        </button>
        
        <!-- 
         传统方法注册的事件 直接把事件名称 赋值为 none 即可解绑事件
         或者使用 dom 对象 removeEventListener 方法
         -->
        <script type="text/javascript">
            btn_1 = document.querySelector('.btn_1')
            btn_2 = document.querySelector('.btn_2')
            btn_1.onclick = function(){
                alert(1)
                btn.onclick = 'none'
            }
            
            
            function func(){
                alert(2333)
                // 移除事件
                btn_2.removeEventListener('click',func)
            }
            // 添加事件监听
            btn_2.addEventListener('click',func)
        </script>
    </body>
</html>

27_事件基础-事件流

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box_1 {
                width: 300px;
                height: 300px;
                background: pink;
                padding: 100px;
                box-sizing: border-box;
            }
            .box_2 {
                width: 100px;
                height: 100px;
                background: #BEBEB3;
            }
        </style>
    </head>
    <body>
        <div class="box_1">
            box1
            <div class="box_2">
                box2
            </div>
        </div>
        
        
        <!-- 
        DOM事件流三个阶段
         1. js 代码中只能执行捕获或者冒泡其中的一个阶段
         2. onclick 和attachevent 能得到冒泡阶段
         3. 捕获阶段 如果addeventlistener 第三个参数是true那么则该事件处于捕获阶段,执行顺序是 box_1->box_2
         3. 冒泡阶段 如果addeventlistener 第三个参数是false 或者省略那么会让该事件处于冒泡阶段会从内到外依次执行 box_2->box_1
         
         -->
        <script type="text/javascript">
            var box_1 = document.querySelector('.box_1')
            var box_2 = document.querySelector('.box_2')
            
            // 添加box_2点击事件
            box_2.addEventListener('click',function(){alert('box_2')})
            
            // 添加box_1点击事件
            box_1.addEventListener('click',function(){alert('box_1')},true)
        </script>
    </body>
</html>

28_事件基础-阻止行为与阻止冒泡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 100px;
                height: 100px;
                background: pink;
            }
        </style>
    </head>
    <body>

        <div>
            <a href="https://www.baidu.com">百度一下你就知道</a>
        </div>
        
        
        <!-- 
         stopPropagation: 阻止冒泡事 件
         -->
        <script type="text/javascript">
            var div = document.querySelector('div')
            var a = document.querySelector('a')

            // 阻止 a 标签的默认行为
            a.addEventListener('click', function(event) {
                event.preventDefault()  // 阻止默认行为,W3C DOM 推荐的写法
                
                event.stopPropagation()  // 阻止该事件冒泡
            }) 

            // 
            div.addEventListener('click', function(event) {
                console.log(event)
            })
        </script>
    </body>
</html>

29_事件基础-事件对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {openSUSE
                width: 100px;
                height: 100px;
                background: pink;
                text-align: center;
                line-height: 100px;
            }

            span {
                background: #1BA1E6;
            }
        </style>
    </head>
    <body>
        
        <br>
        <div>
            <span>1231</span>
        </div>

        <!-- 
         事件的回调函数可以接收一个形参event, 表示该事件对象,事件对象只有有了事件才会存在,对象内包含了和事件一些相关的数据的集合
         clientX,clientY: 得到当前事件触发时的鼠标在 '可视区' 的坐标
         pageX,pageY: 返回相对于文档页面的 坐标,比如网页很长需要获得当前元素距离整个页面头部的距离
         target: 返回触发事件对象(取决于你点击了哪个元素),比如你点了ul中里的li 那么就返回li  包含了该li中的属性
         this: 返回绑定事件的对象
         -->

        <script type="text/javascript">
            var div = document.querySelector('div')

            div.addEventListener('click', function(event) {
                console.log(event) // 打印事件对象
                console.log(event.type) // 打印事件类型
                
                console.log(event.pageX)  // 打印

                console.log(event.target) // 返回触发事件对象(取决于你点击了哪个元素)
                console.log(this) // 返回绑定事件的对象
            })

            div.addEventListener('mousemove', function(event) {
                console.log(event.type)
                console.log(event.clientX,event.clientY,event.pageY)
            })
            div.addEventListener('mouseout', function(event) {
                console.log(event.type)
            })
        </script>
    </body>
</html>

30_事件基础-委托

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

        <!-- 
         事件委托是设置监听器到父节点上,然后利用冒泡实例影响设置每个节点
         -->
        <script type="text/javascript">
            var ul = document.querySelector('ul')
            ul.addEventListener('click', function(event) {
                console.log(event.target.textContent)
                
                // 得到父节点
                var fat = event.target.parentNode
                // 得到所有兄弟节点
                lis = fat.children
                
                for (var i = 0; i < lis.length; i++) {
                    lis[i].style.background = 'none'
                }
                
                event.target.style.background = 'pink'
            })
        </script>
    </body>
</html>

31_事件基础-鼠标事件的案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                position: absolute;
                width: 100px;
                height: 100px;
                background: url(jsapis_material/第三天/images/angel.gif) no-repeat;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    <script type="text/javascript">
        var div = document.querySelector('div')
        
        document.addEventListener('mousemove', function(event) {
            var x = event.clientX
            var y = event.clientY

            div.style.left = x -50 + 'px' 
            div.style.top = y -40 + 'px'

        })
    </script>
</html>

32_事件基础-键盘事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="" name="" id="" value="按下s自动获取焦点" />


        <!-- 
         keydown: 键盘按下的操作(此时输入的文本还没有传递到输入框中),keyCode不区分字母大小写
         keyup: 键盘抬起的操作,keyCode不区分字母大小写
         keypress: 键盘按下的操作,keyCode区分字母大小写,但是不识别 功能键 比如上下左右 ctrl shift enter键

         event.keyCode: 返回键盘字母对应的ASCII码
         -->

        <script type="text/javascript">
            var ipt = document.querySelector('input')
            
            document.addEventListener('keyup', function(event) {
                console.log('keyup:抬起' + event.keyCode)
                if (event.keyCode == 83) {
                    ipt.value = ''
                    ipt.focus()
                }
            })
            document.addEventListener('keydown', function(event) {
                console.log('keydown:按下' + event.keyCode)
            })
            document.addEventListener('keypress', function(event) {
                console.log('keypress:按下' + event.keyCode)
            })
        </script>
    </body>
</html>

33_事件基础-键盘事件案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                    margin: 0;
                    padding: 0;
                }
                
                .search {
                    position: relative;
                    width: 178px;
                    margin: 100px;
                }
                
                .con {
                    display: none; 
                    position: absolute;
                    top: -40px;
                    width: 171px;
                    border: 1px solid rgba(0, 0, 0, .2);
                    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
                    padding: 5px 0;
                    font-size: 18px;
                    line-height: 20px;
                    color: #333;
                }
                .con::before {
                    content: '';
                    width: 0;
                    height: 0;
                    position: absolute;
                    top: 28px;
                    left: 18px;
                    border: 8px solid #000;
                    border-style: solid dashed dashed;
                    border-color: #fff transparent transparent;
                }
            </style>

    </head>
    <body>
        <div class="search">
            <div class="con">123</div>
            <input type="text" placeholder="请输入您的快递单号" class="jd">
        </div>

        <script type="text/javascript">
            var con = document.querySelector('.con')
            var jd = document.querySelector('.jd')

            jd.addEventListener('keyup', function(event) {
                if (this.value == '') {
                    con.style.display = 'none'
                } else {
                    con.innerText = this.value
                    con.style.display = 'block'
                }
            })
            jd.addEventListener('blur',function(event){
                con.style.display = 'none'
            })
            jd.addEventListener('focus',function(event){
                if (this.value != '') {
                    con.style.display = 'block'
                    con.innerText = this.value
                }
            })
        </script>
    </body>
</html>

34_BOM基础

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
        <!-- 
        BOM: 浏览器对象模型 window
         定义在全局作用域中的变量和函数, 都会变成window对象的属性和方法
         当然全局作用域中的函数或者变量使用时,可以省略window
         -->
    </body>
    
    <script type="text/javascript">
        // window.alert(123)
        
        flag = '张三'
        console.dir(window)
        console.dir(window.flag)  // window 直接调用全局中的变量
        console.dir(window.name)
        
    </script>
</html>

35_BOM基础-窗口加载事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            window.addEventListener('load', function() {
                console.log('后执行了 load')
                
                // var btn = document.querySelector('button')
                // btn.addEventListener('click', function() {
                //     alert('点我干嘛')
                // })
            })
            document.addEventListener('DOMContentLoaded',function(){
                console.log('先执行了 DOMContentLoaded')
                
                var btn = document.querySelector('button')
                btn.addEventListener('click', function() {
                    alert('点我干嘛')
                })
            })
            
        </script>
    </head>
    <body>
        <button type="button">点一下</button>
    </body>
    <!-- 
     load: BOM的事件(类似window.onload),该事件会在页面所有的元素加载完毕之后再加载,所以上面script放在body上面也可以执行
     
     DOMContentLoaded: DOM事件,该事件是DOM加载完毕(但是不包含图片 css等)就可以执行,加载速度比 load 更快
     -->
</html>

36_BOM基础-浏览器窗口大小

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 200px;
                height: 100px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <div>调整一下窗口高度试试</div>
        
        <!-- 
        resize: 当浏览器窗口的大小发生变化的时候触发该事件 
        innerHeight: 获得当前window窗口的高度
        innerWidth: 获得当前window窗口的宽度
         -->
        <script type="text/javascript">
            var div = document.querySelector('div')
            
            window.addEventListener('resize',function(event){
                console.log(window.innerHeight)
                console.log(window.innerWidth)
                if (window.innerHeight < 300) {
                    div.style.display = 'none'
                }else {
                    div.style.display = 'block'
                }
            })
        </script>
    </body>
</html>

37_定时器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button type="button">点一下让广告不消失</button>
        <img src="jsapis_material/第四天/images/ad.jpg">
        <div>1</div>
    </body>

    <!-- 
    this: 定时器中的this 指的是window对象
     setTimeout: 设置定时器(只调用一次)接收两个参数, 回调函数,以及延迟时间(毫秒)可以省略默认为0立即执行,并返回一个 定时器对象,
     clearTimeout,clearInterval: 停止一个定时器,接收一个参数,传入一个定时器对象
     setInterval: 设置一个周期定时器, 每隔一段时间开就运行一次回调函数
     -->

    <script type="text/javascript">
        var ad = document.querySelector('img')
        
        // 设置一个一次性任务
        var func = function() {
            console.log('时间到了')
            ad.style.display = 'none'
        }
        var ret = setTimeout(func, 2000)
        console.dir(ret)
        
        // 设置一个周期性任务
        flag = 1
        div = document.querySelector('div')
        var func_1 = function() {
            div.innerText = flag
            flag++
        }

        var ret_1 = setInterval(func_1, 1000)
        
        
        var btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            console.log('停止了一些任务')
            clearTimeout(ret)
            clearTimeout(ret_1)
            clearInterval(ret_1)
        })
    </script>
</html>

38_定时器案例01

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            span {
                /* float: left; */
                display: inline-block;
                width: 40px;
                height: 40px;
                background: #ccc;
                margin-left: 10px;
                line-height: 40px;
                text-align: center;

            }
        </style>
    </head>
    <body>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </body>

    <script type="text/javascript">
        var hour = document.querySelector('.hour')
        var minute = document.querySelector('.minute')
        var second = document.querySelector('.second')

        var countDown = function() {
            var inputTime = +new Date('2019-05-01 18:00:00')
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }

        // 设置一个周期性定时器来刷新秒杀的时间
        setInterval(countDown, 1000)
        
        // 先调用一次函数,防止页面刷新时还没到执行时间导致页面闪烁
        countDown()
    </script>
</html>

39_定时器案例02

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" name="" id="" value="" />
        <button type="button">发送</button>
    </body>
    <script type="text/javascript">
        var btn = document.querySelector('button')

        var flag = 3
        btn.addEventListener('click', function(event) {
            btn.innerText = '请' + flag + '秒后发送'
            btn.disabled = 'true'

            // 添加一个周期性定时器
            var ret = setInterval(function() {
                if (flag == 0) {
                    clearTimeout(ret)
                    btn.disabled = false
                    btn.innerText = '发送'
                } else {
                    console.log(flag)
                    flag--
                    btn.innerText = '请' + flag + '秒后发送'
                }
            }, 1000)

            // 添加一个一次性定时器用于清除定时器
            // var clear_flag = function(){
            //     clearTimeout(ret)
            //     btn.disabled = 'false'
            // }
            // setTimeout(clear_flag,1000*60)
        })
    </script>
</html>

40_location对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <button type="button">点击后跳转百度</button>
    </body>

    <!-- 
     location: 包含了请求路径的一些参数
      href: 获取或者设置整个URL
      hash: 获取hash 就是锚点后的值
      assign: 和href一样可以跳转界面(重定向界面)
      replace: 替换当前界面但是不能后退回来页面了
      reload: 刷新界面
     -->
    <script type="text/javascript">
        console.log(location) // 获得 location 对象
        console.log(location.href) // 获取或者设置整个URL
        console.log(location.hash) // 获取hash

        var btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            console.log('即将改变页面地址')
            btn.disabled = 'true'


            setTimeout(function() {
                clearTimeout(ret)
                location.href = 'https://www.baidu.com'
            }, 5000);

            flag = 5
            ret = setInterval(function() {
                btn.innerText = '' + flag + '秒后跳转到百度'
                flag--
            }, 1000)

        })
    </script>
</html>

41_location案例-index

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <div></div>
        <button type="button">点击回到刚才界面</button>
    </body>
    <script type="text/javascript">
        var div = document.querySelector('div')
        
        console.log(location.search)
        var querystring = location.search.substr(1)
        var querystring = querystring.split('=')
        var user_name = querystring[1]
        div.innerHTML = '' + user_name + '欢迎你'
        
        var btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            console.log(history)
            history.back()
        })
    </script>
</html>

42_location案例_login

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="38_location案例_index.html">
            
            <input type="text" name="user_name" />请输入用户名
            
            <br>
            <input type="submit" value="点击提交"/>
        </form>
        
        
    </body>
</html>

43_navigator对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 
         navigator: 包含了浏览器的一些信息系统版本,浏览器内核以及版本等等
         -->
        <script type="text/javascript">
            console.log(navigator)
            console.log(navigator.userAgent)
            
        </script>
    </body>
</html>

44_history对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 
         history: 包含了浏览器左右箭头的一些信息
             back: 相当于后退按钮
             forward: 相当于前进按钮
             go(参数): 相当于前进按钮但是可以通过参数控制前进几个界面
         -->
        <script type="text/javascript">
            console.dir(history)
        </script>
    </body>
</html>

45_offset系列-元素偏移

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box_1 {
                position: relative;
                left: 100px;
                top: 100px;
                width: 200px;
                height: 200px;
                background: pink;
                padding: 50px;
                box-sizing: border-box;
            }

            .box_2 {
                width: 100px;
                height: 100px;
                background: paleturquoise;
                border: 10px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div class="box_1">
            <div class="box_2">

            </div>
        </div>

        <!-- 
        offset: 的属性只能获取,而不能进行修改,但是却能得到任意样式表中的样式值(style只能得到行内样式的样式值,但是却可以修改)
         offsetWidth,offHeight: 该DOM的宽度和高度,包含padding 和border的
         offsetTop: DOM的顶部距离父元素的距离,如果父元素没有使用定位,则获取到距离浏览器窗体的距离
         offsetParent: 返回带有定位的父元素(如果父元素没有定位属性,那么则返回body)
         -->

        <script type="text/javascript">
            b1 = document.querySelector('.box_1')
            b2 = document.querySelector('.box_2')

            console.log('包含了边框和padding的宽度:', b2.offsetWidth)
            console.log('距离顶部父元素的高度:', b2.offsetTop)
            
            console.log('带有定位的父元素:',b2.offsetParent)
        </script>
    </body>
</html>

46_offset案例-计算鼠标位置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            
            div {
                width: 200px;
                height: 200px;
                background: pink;
                margin: 100px;
            }
        </style>
    </head>
    <body>
        <div>
            鼠标放上来试试
        </div>


        <script type="text/javascript">
            var div = document.querySelector('div')
            div.addEventListener('mousemove', function(e) {
                // 1. 首先得到鼠标在页面中的坐标
                ex = e.pageX
                ey = e.pageY

                // 2. 得到盒子距离页面的距离
                px = this.offsetLeft
                py = this.offsetTop
                console.log(`盒子距离页面(${px}, ${py}), 鼠标在页面中的坐标: (${ex}, ${ey})`)

                // 3. 鼠标在页面中的坐标 减去 盒子距离页面的距离, 就得到了鼠标距离盒子边距的距离
                nx = ex - px
                ny = ey - py

                this.innerHTML = nx + ',' + ny

            })
        </script>
    </body>
</html>

47_offset案例-拖动模态框

<!DOCTYPE html>
<html>

    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }
        
        ul,
        li,
        ol,
        dl,
        dt,
        dd,
        div,
        p,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        a {
            padding: 0px;
            margin: 0px;
        }
        
        .login {
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }
        
        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        }
        
        .login-input-content {
            margin-top: 20px;
        }
        
        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }
        
        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }
        
        a {
            text-decoration: none;
            color: #000000;
        }
        
        .login-button a {
            display: block;
        }
        
        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }
        
        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }
        
        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }
        
        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
    </head>

    <body>
        <div class="login-header"><a id="link" href="javascript:;">点击,弹出登录框</a></div>
        <div id="login" class="login">
            <div id="title" class="login-title">登录会员
                <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
            </div>
            <div class="login-input-content">
                <div class="login-input">
                    <label>用户名:</label>
                    <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
                </div>
                <div class="login-input">
                    <label>登录密码:</label>
                    <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
                </div>
            </div>
            <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
        </div>
        <!-- 遮盖层 -->
        <div id="bg" class="login-bg"></div>

        <script type="text/javascript">
            var bg = document.querySelector('#bg')
            var login = document.querySelector('.login')
            var a = document.querySelector('.login-header')
            var close = document.querySelector('.close-login')
            var title = document.querySelector('#title')

            a.addEventListener('click', function() {
                login.style.display = 'block'
                bg.style.display = 'block'
            })

            close.addEventListener('click', function() {
                login.style.display = 'none'
                bg.style.display = 'none'
            })


            title.addEventListener('mousedown', function(e) {
                
                // 1. 鼠标按下,获得鼠标在盒子内的坐标
                var lx = e.pageX - login.offsetLeft
                var ly = e.pageY - login.offsetTop
                console.log(e.pageX,e.pageY,login.offsetLeft,login.offsetTop)

                // 2. 添加鼠标移动事件(鼠标移动的坐标减去 鼠标在盒子中的坐标就是模态框的left和top)
                var func = function(e) {
                    var nx = e.pageX - lx
                    var ny = e.pageY - ly
                    // console.log(ny, nx)
                    login.style.left = nx + 'px'
                    login.style.top = ny + 'px'
                }
                document.addEventListener('mousemove', func)

                // 3. 添加鼠标弹开事件
                document.addEventListener('mouseup', function(e) {
                    // 移除鼠标移动事件
                    document.removeEventListener('mousemove', func)
                })
            })
        </script>
    </body>

</html>

48_clint系列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box_1 {
                width: 200px;
                height: 100px;
                background: pink;
                border: solid 15px #ccc;
                padding: 3px;
            }
        </style>
    </head>
    <body>
<div class="box_1">
    这个粉色区域是200x100,边框宽度是15b <br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
</div>
    </body>
    
    <!-- 
     client: 返回不包含边框的 可视区域 的大小(不包含border)
     -->
    
    <script type="text/javascript">
        box_1 = document.querySelector('.box_1')
        console.log(box_1.clientHeight)  // 打印 可视区域的高度(边框内元素的高度)
        console.log(box_1.clientWidth)  // 打印可视区域的宽度
        
        console.log(box_1.clientLeft)  // 打印可视区域左边框的宽度
        console.log(box_1.clientTop)  // 打印可视区域上边框的高度
    </script>
</html>

49_scroll系列-元素滚动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 130px;
                height: 170px;
                border: solid 15px pink;
                background: #1BA1E6;
                padding: 13px;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div><br>1111111111111111111111111111<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>2<br>1<br>11<br>1<br>1<br>1</div>
        
        <!-- 
         scroll: 可以动态的的到该元素 内容 的大小(不包含border),滚动距离,如果盒子内的内容超出了盒子 则会获得内容的实际大小
         scrolltop: 返回被卷去的上侧距离,返回数值不带单位
         scrollleft: 返回被卷去的左侧距离
         
         scrollwidth: 返回自身实际的宽度,不含边框
         scrollheight: 返回自身实际的高度 不含边框
         
         
         注意:如果是浏览器最右边的系统拉选框滚动则需要使用 window.pageYOffset 获得卷起值
         -->
         <script type="text/javascript">
             var div = document.querySelector('div')
            console.log(div.scrollHeight)
            console.log(div.scrollWidth)
            console.log(div.scrollTop)
            console.log(div.scrollLeft)
            
            div.addEventListener('scroll',function(){
                console.log('内容的高',div.scrollHeight)
                console.log('内容的宽',div.scrollWidth)
                console.log('被卷去的头部',div.scrollTop)
                console.log('被卷去的左边',div.scrollLeft)
            })
         </script>
         
         
        
    </body>
</html>

50_scroll案例-仿淘宝侧边栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .box_1 {
                width: 400px;
                height: 3000px;
                background:-webkit-linear-gradient(top left,pink,red,pink);
                margin: 0 auto;
            }
            .box {
                position: absolute;
                top: 120px;
                left: 50%;
                margin-left: 200px;
                width: 50px;
                height: 100px;
                background: palegoldenrod;
            }
            span {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="box_1">
            <div class="box">
                <span>返回顶部</span>
            </div>
        </div>
        
        <script type="text/javascript">
            //  注意对于整个页面获取被卷去的头部需要使用 window.pageYOffset
            
            
            var box_1 = document.querySelector('.box_1')
            var box = document.querySelector('.box')
            var sp = document.querySelector('span')
            
            box_top = box.offsetTop  // 得到小盒子距离顶部的距离
            
            // document.addEventListener('scroll',function(){
            window.addEventListener('scroll',function(){
                if (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop > 100) {
                    sp.style.display = 'inline';
                    box.style.top =  box_top - 100 + 'px'  // 顶部的距离减去需要停止的距离就得到定位的距离
                    box.style.position = 'fixed'
                }else {
                    box.style.position = 'absolute'
                    sp.style.display = 'none';
                    box.style.top =  box_top + 'px'
                }
            })
        </script>
    </body>
</html>

51_动画运动案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                position: absolute;
                height: 100px;
                width: 100px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <button type="button">点击动画开始</button>
        <div class="box">

        </div>
    </body>

    <script type="text/javascript">
        function action(obj, target) { // 封装的一个动画函数

            clearInterval(obj.t) // 每次开启一个新的定时器的时候就关闭obj的上一个定时器,否则会开很多的定时器,动画会越来越快

            obj.t = setInterval(() => { // 定时器直接赋值成obj的一个对象避免开辟内存的消耗
                if (obj.offsetLeft >= target) {
                    console.log('任务结束了')
                    clearInterval(obj.t)
                }
                
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 10)
        }

        let box = document.querySelector('.box');


        let btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            action(box, 50)
        })
    </script>
</html>

52_动画缓动案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                position: absolute;
                height: 100px;
                width: 100px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <button type="button" class="btn_200">点击动画开始200</button>
        <button type="button" class="btn_300">点击动画开始300</button>
        <div class="box">

        </div>
    </body>

    <script type="text/javascript">
        
        // 缓动动画原理: 每次移动的距离 = (目标值 - 现在的位置) / 10
        function action(obj, target) { 

            clearInterval(obj.t)
            
            obj.t = setInterval(() => {
                
                // 得到每次移动的距离
                let setp = (target - obj.offsetLeft) / 10
                
                // 取整,防止因为出现小数而导致到不了目标位置的情况
                setp > 0 ? Math.ceil(setp) : Math.floor(setp)
                
                if (obj.offsetLeft == target) {
                    obj.t = null
                    clearInterval(obj.t)
                }
                
                obj.innerHTML = target
                obj.style.left = obj.offsetLeft + setp + 'px';
            }, 10)
        }

        let box = document.querySelector('.box');


        let btn_200 = document.querySelector('.btn_200')
        btn_200.addEventListener('click', function() {
            action(box, 200)
        })
        let btn_300 = document.querySelector('.btn_300')
        btn_300.addEventListener('click', function() {
            action(box, 300)
        })
    </script>
</html>
Last modification:October 16th, 2020 at 11:16 am
安安,亲觉得有用, 请随意打赏嗷