JavaScript进阶第三天（节点操作+事件对象）

最新推荐文章于 2023-06-25 16:49:41 发布
最新推荐文章于 2023-06-25 16:49:41 发布
阅读量293 收藏
点赞数
分类专栏： JS进阶DOM和BOM 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45727991/article/details/111060134
版权

01、删除节点node.removeChild(child)

在这里插入图片描述
eg：

<body>
    <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 删除元素  node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 3. 点击按钮依次删除里面的孩子
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true; //要是都删完了，按钮就不能再点击了
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>
</body>

02、删除留言的案例

在这里插入图片描述
在这里插入图片描述

1、阻止链接跳转：javascript:;

li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";

整体代码

<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]);
                // (3) 删除元素 删除的是当前链接的li  它的父亲
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) { //循环所有事件，给所有的a都添加删除的事件
                    as[i].onclick = function() {
                        // node.removeChild(child); 删除的是 li 当前a所在的li  this.parentNode; 所以这里的node是ul
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>

03、节点操作-复制节点node.cloneNode()

在这里插入图片描述
eg：

<body>
    <ul>
        <li>1111</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>

04-09、动态生成表格-创建学生数据

具体代码和注释如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        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>
</head>

<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
                // 创建单元格 td
                var td = document.createElement('td');
                // 把对象里面的属性值 datas[i][k] 给 td  
                // console.log(datas[i][k]);
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            // 3. 创建有删除2个字的单元格 
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除 </a>';
            tr.appendChild(td);

        }
        // 4. 删除操作 开始 
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)  
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
        // for(var k in obj) {
        //     k 得到的是属性名
        //     obj[k] 得到是属性值
        // }
    </script>
</body>

</html>

10、document.write创建元素（了解）

在这里插入图片描述
在这里插入图片描述
所以很少使用

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

11、innerHTML和createElement的区别

innerHTML拼接元素：（非常耗时，效率低）

        // 2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
        for (var i = 0; i <= 100; i++) {
            inner.innerHTML += '<a href="#">百度</a>'
        }

innerHTML用数组创建元素再连接：（效率最高）

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

createElement创建元素：（结构清晰，效率也不错）

        // 3. document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }

在这里插入图片描述

12、DOM重点核心

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

13、事件高级导读

14、注册事件的两种方式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码：

<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('hao a u'); // 只会弹出这个（唯一性的限制）
        }
        // 2. 事件侦听注册事件 addEventListener 
        // (1) 里面的事件类型是字符串 必定加引号 而且不带on
        // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）（以下事件依次弹出22，33）
        btns[1].addEventListener('click', function () {
            alert(22);
        })
        btns[1].addEventListener('click', function () {
            alert(33);
        })
        // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function () {
            alert(11);
        })
    </script>
</body>

15、attachEvent注册事件（了解）

在这里插入图片描述
整合三种方法，兼容性解决方案

16、删除事件（解绑事件）removeEventListener

删除事件的功能：只让事件执行1次
总的代码：

<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;
            }
            // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>
</body>

法1、（常用）

        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert(11);
                // 1. 传统方式删除事件
                divs[0].onclick = null;
            }

法2、（最常用）

            // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);//移除divs1中的点击事件的fn函数
        }

法3、（了解即可）

        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }

17、DOM事件流

在这里插入图片描述
在这里插入图片描述

18、DOM事件流代码验证

捕获（由大到小）
冒泡（由小到大）（更常用）
在这里插入图片描述

1、捕获阶段：

        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true);

弹出son
2、捕获阶段：

        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, true);

根据document -> html -> body -> father -> son，先弹出father，再弹出son
3、冒泡阶段：

        // 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');
        })

根据son -> father ->body -> html -> document先弹出son，再弹出father，再弹出document

19、什么是事件对象

  1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
  2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
  3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事
  4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
  5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法
    e = e || window.event;如果识别不出e，就执行window.event即可（现在不太考虑兼容性问题，不用写这种代码）
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    ！！！重点 ！！！
    在这里插入图片描述

20、e.target 和this的区别

区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
代码举例：
html：

    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>

 // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
 // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
 var div = document.querySelector('div');
 div.addEventListener('click', function(e) {
     console.log(e.target);
     console.log(this);
 })

currentTarget和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);

        }

21、阻止默认行为

1、常见事件对象的属性和方法

        // 常见事件对象的属性和方法
        // 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、阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
法1：（最常用）

// 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);
        }

法2：（了解）

// 3. 传统的注册方式
		var a = document.querySelector('a');
        a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
             e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            e.returnValue;
             }

法3：（了解）

// 3. 传统的注册方式
		var a = document.querySelector('a');
        a.onclick = function(e) {
            // 我们也可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
            return false;
            alert(11); // 不执行
        }

22、阻止事件冒泡stopPropagation()

在这里插入图片描述
在这里插入图片描述
eg：

<body>
    <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        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>

其中

            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡

这两句话前者最常用，二者选其一即可，（后者对IE更友好）

23、事件委托

在这里插入图片描述
在这里插入图片描述
事件委托的概念（重要！！！）
在这里插入图片描述
代码：
以前我们修改li的内容需要用到for循环来一个个修改li
现在使用ul的事件对象用e.target取代了li

<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>

24、禁止选中文字、禁止右键菜单

在这里插入图片描述

注：body中document指代了body标签

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

25、获得鼠标在页面中的坐标

在这里插入图片描述
注意：坐标原点在左上角

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>

<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('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);

        })
    </script>
</body>

</html>

26、案例：跟随鼠标的天使（京东放大镜的效果）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            top: 2px;
        }
    </style>
</head>

<body>
    <img src="images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function (e) {
            // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
            // console.log(1);
            // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            //3 . 千万不要忘记给left 和top 添加px 单位
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';
        });
    </script>
</body>

</html>
皮匠大大
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
c认证web进阶dom与bom
10-03
3、常用的节点属性获取方式 关于图片复制到csdn编译器不识别问题 DOM下 1、DOM修改 2、DOM添加 3、DOM删除 案例 DOM控制css样式 1、通过style属性控制样式 2、通过classList控制样式 背景更换 背景色更换...
JavaScript阻止链接跳转
qq_46112274的博客
12-19 1070
<a href='javascript:;'>删除</a> <a href='javascript:void(0)'>删除</a>
做了这么多年前端，将常见的报错bug总结出来贴给大家吧！
qq_54753561的博客
06-25 3032
做了这么多年前端，将常见的报错bug总结出来贴给大家吧！前端jsbug总结，vuebug，gitbug，webpackbug总结。
<a>标签中的href="javascript:;"是什么意思？
aizongsai2251的博客
01-05 535
例子：<a href="javascript:;">我的大学</a> javascript: 是一个伪协议 javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 href="javascript:;"就是去掉a标签的默认...
a标签阻止链接跳转（href=‘javascript:；‘）
Dontla的博客
04-15 585
<a href='javascript:;'>删除</a>
<a href="javascript"></a>是什么意思？
qq_40586654的博客
07-04 1399
看别人这么写，自己也想逼格下。&lt;a href="javascript"&gt;&lt;/a&gt;简单来说，”javascript:”是另外一种嵌套js代码在网页中的方法。 跟通过标签嵌套js代码差不多。 如点击下面链接会会执行”javascript:”后面的内容。不过不推荐这种写法。 理由是使用标签href属性通常是保存超链接，用来控制页面转向。...
基于fastapi的爬虫可视化调度系统源码+项目部署说明.zip
08-21
2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...
Training-Program:一些无限小的工作
03-30
无限小工作一些无限小的工作第一个练习：使用fetch和API去完成天气的显示通过天气API获取几个城市的天气情况并且可以通过按钮进行切换把城市的天气信息包裹到fetch方法中去进行请求进阶玩法：切换城市的时候进行做一...
《10天掌握MongoDB》2012完整版.pdf[带书签]
04-02
第三天:学会FIND 认识FIND 子键筛选 复杂查询 查询条件操作符 正则表达式 数组查询 数组查询-$SIZE 数组查询-$SLICE 数组查询-子项定位 数组查询-$ELEMMATCH 游标 $WHERE 排序分页 排序分页-排序比较的顺序 排序分页...
Java语言基础下载
09-07
第二十七章：JavaScript进阶 521 学习目标 521 基于对象的JavaScript语言 522 对象的基础知识 522 this关键词 523 new运算符 523 常用对象的属性和方法 525 算术函数的math对象 527 创建新对象 529 JavaScript中的...
使用cloneNode函数复制节点元素--svg拖拽复制
Rainman_的博客
05-11 893
function selectElement(event){ // if(event.button==0){ console.log("select element"); // var id=event.currentTarget.getAttribute('xlink:href'); // console.log('id:'+id); // var use
html5拖拽透明,在html5中拖放div在dragstart上显示为透明
weixin_39761645的博客
06-16 661
有没有办法控制拖放的外观。我通过以下链接通过克隆一个div来实现代码如下:elemDragStart(event) {event.dataTransfer.effectAllowed = 'move';var crtElem = event.currentTarget.cloneNode(true);crtElem.style.backgroundColor = "red";crtElem.sty...
IE和Firefox的Javascript兼容性总结
讲不出再见
10-11 497
长久以来JavaScript兼容性一直是Web开发者的一个主要问题。在正式规范、事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬。为此，主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 　　一、函数和方法差异； 　　二、样式访问和设置
JS复制（拷贝）
HarryHY的博客
01-09 995
dom浅复制： var image=this.cloneNode(false); dom深复制： var image=this.cloneNode(true); JS的浅复制： //浅复制：这种方法只能复制给目标对象 //如果复制多个属性对象时 后面的属性冲突会覆盖前面的 //原型属性不能复制 并且不能复制遍历属性 是否可写属性 冻结属性 //只是引用关系...
cloneNode(true)和cloneNode()的区别？（克隆节点）
tjmengqw的博客
08-13 4743
cloneNode() 代表浅克隆 —标签里的元素，事件没有复制。 cloneNode(true) 代表深克隆 —完全把真节点的东西给复制了过来 案例写法： var nrow = row.cloneNode(true); 注： 平常可用在表格行复制，增加一行或减少一行 ...
jq 获取含类的子集_jQuery - 使用.children()方法获取已选取集合元素的子元素
weixin_30802367的博客
12-24 1380
jQuery .children() 获取已选取集合元素的子元素selector (optional)是用于选取元素的表达式。方法返回新的jquery对象。.children([selector])获取每个已选取元素的子元素，支持通过选取表达式过滤子元素。以下代码获取DIV的子元素并设置其边框。$(document).ready(function(){$("div").children().c...
e.target的含义
LuoShengMenwh的博客
12-15 1641
$(function(){     $("li:has(ul)").click(function(e){         if(this==e.target){             $(this).children().toggle();             $(this).css("list-style-image",($(this).children().is(":hidden
javascript进阶
最新发布
10-09
引提供了一些关于JavaScript的进阶内容，包括获取元素的不同方式和JS的引入方式。其中，通过类名、标签名、name属性名、id名以及选择器都可以获取元素。而关于JS引入方式，可以通过内联方式、外部文件引入方式和动态...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值