前端学习-jsAPI-day_3

车什里

已于 2024-01-01 19:39:39 修改

阅读量386

点赞数 9

文章标签： javascript 前端 html

于 2023-12-18 20:09:08 首次发布

本文链接：https://blog.csdn.net/qq_45689662/article/details/135070376

版权

@TOC

一、i节点操作之删除节点

<body>
    <button>删除</button>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        btn.onclick = function () {
            if (ul.children.length == 0) {
                this.disabled = true;//禁用按钮
            } else {
                ul.removeChild(ul.children[0]);
            }

        }
    </script>
</body>

二、ii删除留言案例

<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }

        ul {
            margin-top: 50px;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }

        li a {
            float: right;
        }
    </style>

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 注册事件
        btn.onclick = function () {
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else {
                // console.log(text.value);
                // (1) 创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
                //   1   var a = li.querySelector('a');
                // a.onclick = function () {
                //     ul.removeChild(a.parentNode);
                // }
                li.children[0].onclick = function () {
                    // ul.removeChild(this.parentNode);
                    this.parentElement.remove();
                }
            }
               //     li.children[0].onclick = function () {
            //     ul.removeChild(this.parentNode);
            // }

        }
    </script>
</body>

运行结果：
在这里插入图片描述

三、节点操作之克隆节点

<body>
    <ul>
        <li>111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>

        var ul = document.querySelector('ul');
        // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
        // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);

    </script>
</body>

四、ii动态生成表格案例

<style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
    <body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        // 1.先去准备好学生的数据
        var datas = [{
            name: '魏璎珞',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '弘历',
            subject: 'JavaScript',
            score: 98
        }, {
            name: '傅恒',
            subject: 'JavaScript',
            score: 99
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score: 88
        }, {
            name: '大猪蹄子',
            subject: 'JavaScript',
            score: 0
        }];
        // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {// 外面的for循环管行 tr
            // 1. 创建 tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);

            // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
            for (var k in datas[i]) {
                //里面的for循环管列 td
                // 创建单元格 
                var td = document.createElement('td');

                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除 </a>';
            tr.appendChild(td);

        }
        // for(var k in obj){

        //     k得到的是属性名
        //     obj[k]得到的是属性值
        // }
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }


    </script>
</body>

运行结果：
在这里插入图片描述

五、三种创建元素方式区别

<body>
    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>
    <script>
        // window.onload = function() {
        //         document.write('<div>123</div>');

        //     }
        // 三种创建元素方式区别 
        // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
        // var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     document.write('<div>123</div>');
        // }

        // 2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
        // for (var i = 0; i <= 100; i++) {
        //     inner.innerHTML += '<a href="#">百度</a>'
        // }
        var arr = [];
        for (var i = 0; i <= 100; i++) {
            arr.push('<a herf="#">百度</a>')
        }
        inner.innerHTML = arr.join('');
        // 3. document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }
    </script>
</body>

六、innerHTML拼接效率测试

<script>
    function fn() {
        var d1 = +new Date();

        var str = '';
        for (var i = 0; i < 1000; i++) {
            document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

七、innerHTML数组效率测试

    <script>
    function fn() {
        var d1 = +new Date();
        var array = [];
        for (var i = 0; i < 1000; i++) {
            array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
        }
        document.body.innerHTML = array.join('');
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

八、createElement效率测试

<script>
    function fn() {
        var d1 = +new Date();
        for (var i = 0; i < 1000; i++) {
            var div = document.createElement('div');
            div.style.width = '100px';
            div.style.height = '2px';
            div.style.border = '1px solid red';
            document.body.appendChild(div);
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

九、注册时间的两种方式

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>

        var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function () {
            alert('hi');
        }
        btns[0].onclick = function () {
            alert('haoau');
        }
        // 2. 事件侦听注册事件 addEventListener
        // (1) 里面的事件类型是字符串 必定加引号 而且不带on
        // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function () {
            alert(22);
        }); btns[1].addEventListener('click', function () {
            alert(23);
        })
         // 3. attachEvent ie9以前的版本支持
         btns[2].attachEvent('onclick', function () {
                alert(11);
            })
    </script>
</body>

十、删除事件

 <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function () {
            alert(11);
            // 1. 传统方式删除事件
            divs[0].onclick = null;
        }
        divs[1].addEventListener('click', fn);// 里面的fn 不需要调用加小括号
        function fn() {
            alert(22);
            this.removeEventListener('click', fn);
        }
    // 3. detachEvent
    divs[2].attachEvent('onclick',fn1);
    function fn1(){
        alert(33);
        div[2].detachEvent('onclick',fn1);
    }
    </script>
</body>

十一、DOM事件流三个阶段

 <style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }

        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
    <body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
        // var son = document.querySelector('.son');
        // var father = document.querySelector('.father');
        // son.addEventListener('click', function () {
        //     alert('son');
        // }, true);
        // father.addEventListener('click', function () {
        //     alert('father');
        // }, true);

        // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function () {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        }, false);
        document.addEventListener('click', function () {
            alert('document');
        })
    </script>
</body>

十二、事件对象

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <body>
    <div>123</div>
    <script>
        // 事件对象
        var div = document.querySelector('div');
        // div.onclick = function (event) {
        //     console.log(event);
        // }
        div.addEventListener('click', function (a) {
            console.log(a);
        })
        // 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
        // 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
        // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
        // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
        // 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;
    </script>
</body>

十三、常见事件对象属性和方法

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('click', function (e) {
            console.log(e.target);
            console.log(this);

        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            // 我们给ul 绑定了事件  那么this 就指向ul  
            console.log(this);
            console.log(e.currentTarget);

            // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
            console.log(e.target);

        })
        // 了解兼容性
        // div.onclick = function(e) {
        //     e = e || window.event;
        //     var target = e.target || e.srcElement;
        //     console.log(target);

        // }
        // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识   
    </script>
</body>

十四、事件对象阻止默认行为

 <body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com"><input type="submit" value="提交" name="sub"></form>
    <script>
        // 常见事件对象的属性和方法
        // 1. 返回事件类型
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);
        function fn(e) {
            console.log(e.type);
        }
        // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function (e) {
            e.preventDefault();//  dom 标准写法
        })
        // 3. 传统的注册方式
        a.onclick=function(e){
             // 普通浏览器 e.preventDefault();  方法
            // e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
             // e.returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
            return false;
              alert(11);

        }
    </script>
</body>

十五、ii阻止事件冒泡

<style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }

        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
    <body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>

        var son = document.querySelector('.son');
        son.addEventListener('click', function (e) {
            alert('son');
            e.stopPropagation();// stop 停止  Propagation 传播
            e.cancelBubble=true;// 非标准 cancel 取消 bubble 泡泡
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        }, false);
        document.addEventListener('click', function () {
            alert('document');
        })
    </script>
</body>

十六、事件委托

 <body>
    <ul>
        <li>知否知否应是绿肥红瘦</li>
        <li>知否知否应是绿肥红瘦</li>
        <li>知否知否应是绿肥红瘦</li>
        <li>知否知否应是绿肥红瘦</li>
        <li>知否知否应是绿肥红瘦</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            alert('知否知否应是绿肥红瘦');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>

十七、常见鼠标事件

 <body>
    我是一段不愿意分享的文字
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();

        })
        // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function (e) {
            e.preventDefault();

        })
    </script>
</body>

十八、鼠标事件对象

 <style>
        body {
            height: 3000px;
        }
    </style>
    <body>
    <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function (e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

        })
    </script>
</body>