一：DOM对象的查找

DOM的查找到的对象，除byID的之外，返回的都是一个数组，并不是DOM对象无法调用DOM对象的方法。

通过id查找：

因为id在一个HTML文件中唯一，因此查找到的只会是一个元素对象以数组形式（对象，）返回。直接就把对象赋值给变量了。

var dEle = document.getElementById('d1')

<div id=​"d1" class=​"left">​…​</div>​

dEle.style.color = 'red'

通过其他选择器查找：

以标签选择器为例

var dEle = document.getElementsByTagName('div')

HTMLCollection(5) [div#d1.left,div.item, div.item, div.right, d1: div#d1.left]

//查找到了5个对象，以数组形式返回，赋值给了变量dEle

dEle.style.color = 'red'

VM279:1 Uncaught TypeError: Cannot set property 'color' of undefined

at <anonymous>:1:5

//程序报错，dEle并不是一个DOM对象，是一个数组，无法调用DOM的对象方法。

二：JQuery对象查找

以任何方式查找到的都是jQuery对象，但是有很大的可能，是多个元素的集合体。

以id选择器查找

var $d1Ele = $('#d1')

$d1Ele.css('color','yellow')

以类选择器查找

$('.item').length;

9

$('.item').css('color','red');

三：jQuery操作标签样式

踩坑点：左侧菜单实例

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

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

  <title>左侧菜单示例</title>

  <style>

    body {

      width: 100%;

      margin: 0;

      height: 1000px;

    }

    .hide {

      display: none;

    }

    .left {

      width: 20%;

      height: 100%;

      background-color: #222222;

    }

    .item {

      color: black;

      margin-bottom: 15px;

    }

    .title {

      margin-top: 15px;

      margin-bottom: 15px;

      background-color: red;

    }

    .items {

      background-color: blueviolet;

    }

  </style>

</head>

<body>

<div id = 'd1' class="left">

  <div class="menu">

    <div clas="title">菜单一</div>

    <div class="items">

      <div class="item">111</div>

      <div class="item">222</div>

      <div class="item">333</div>

    </div>

    <div class="title">菜单二</div>

    <div class="items hide">

      <div class="item">111</div>

      <div class="item">222</div>

      <div class="item">333</div>

    </div>

    <div class="title">菜单三</div>

    <div class="items hide">

      <div class="item">111</div>

      <div class="item">222</div>

      <div class="item">333</div>

    </div>

  </div>

</div>

<div class="right"></div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>

$('.title').click(function () {

    $('.items').addClass('hide');

    $(this).next().removeClass('hide')

});

</script>
$('.title').click(function () {

    $('.items').addClass('hide');

    $(this).next().removeClass('hide')

});

画蛇添足，在操作jQuery对象修改CSS样式时，随手给类加了点变成（'.hide'），直接GG，愚蠢的错误。

教训：要严格区分开对象的查找和CSS样式修改的差异化。

四：jQuery文档处理

把B元素追加到A元素内部的后面

$(A).append(B)// 把B追加到A

$(A).appendTo(B)// 把A追加到B

在这里需要注意，如果要把B元素追加A元素内部：

如果A元素是块级元素，那么B元素可以是文本字符，也可以是HTML标签

$('.c1')

w.fn.init [div#d1.c1, prevObject: w.fn.init(1)]

//$('.c1')是块级元素div

$('.c1').append(p1Ele)    //追加P标签

$('.c1').append('p1Ele')   //追加文本'p1Ele'

如果A元素是行内元素，那么B元素只可以是文本字符，不能够追加HTML标签

五：clone()方法

在文件中第一次新增正常，第二次添加，出现同一元素被克隆两次

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>作业</title>

    <style>

        table {

            text-align: center;

            background-color: burlywood;

        }

        td, th {

            width: 100px;

            height: 30px;

            background-color: white;

        }

        #b1 {

            width: 105px;

            height: 30px;

        }

        .cover {

            position: fixed;

            background-color: darkgrey;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            z-index: 9;

        }

        .modal {

            width: 600px;

            height: 400px;

            background-color: white;

            position: fixed;

            left: 50%;

            top: 50%;

            margin-left: -300px;

            margin-top: -200px;

            z-index: 10;

        }

        .hide {

            display: none;

        }

    </style>

</head>

<body>

<button id="b1">新增</button>

<div class="modal hide">

    <p>

        姓名

        <input type="text" name="username">

    </p>

    <p>

        爱好

        <input type="text" name="hobby">

    </p>

    <input type="submit" value="提交">

    <button id="b2">取消</button>

</div>

<div class="cover hide"></div>

<table>

    <thead>

    <tr>

        <th>#</th>

        <th>姓名</th>

        <th>爱好</th>

        <th>操作</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td class="num">1</td>

        <td>egon</td>

        <td>喊麦</td>

        <td>

            <button name='edit'>编辑</button>

            <button name='del'>删除</button>

        </td>

    </tr>

    <tr>

        <td class="num">2</td>

        <td>Alex</td>

        <td>吹牛逼</td>

        <td>

            <button name='edit'>编辑</button>

            <button name='del'>删除</button>

        </td>

    </tr>

    <tr>

        <td class="num">3</td>

        <td>元昊</td>

        <td>不洗头</td>

        <td class="operate">

            <button name='edit'>编辑</button>

            <button name='del'>删除</button>

        </td>

    </tr>

    </tbody>

</table>

<script src="../jquery-3.3.1.min.js"></script>

<script>

    //新增功能

    $('#b1').on("click", function () {

        $('.hide').removeClass('hide');

    });

//提交输入数据

    $("input[type = 'submit']").on("click", function () {

        var $name = $("input[name = 'username']");

        var $hobby = $("input[name = 'hobby']");

        if (!$name.val()){

        }

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

        $('tbody').append(trEle);

        var tdEle1 = document.createElement('td');

        $(tdEle1).text($('tbody>tr').length);

        $(trEle).append(tdEle1);

        var tdEle2 = document.createElement('td');

        $(tdEle2).text($name.val());

        $(trEle).append(tdEle2);

        var tdEle3 = document.createElement('td');

        $(tdEle3).text($hobby.val());

        $(trEle).append(tdEle3);

        $(trEle).append($($('.operate')[0]).clone(true));

        $('.modal').addClass('hide');

        $('.cover').addClass('hide');

        $name.val('');

        $hobby.val('');

    });

    //取消新增

    $("#b2").on("click", function () {

        $("input[name = 'username']").val('');

        $("input[name = 'hobby']").val('');

        $('.modal').addClass('hide');

        $('.cover').addClass('hide');

    });

</script>

</body>

</html>

将上面之前出现错误的的代码拿下来分析：

$(trEle).append($('.operate').clone(true));

$(trEle).append($($('.operate')[0]).clone(true));

//以为选择器选取查找元素，上述表达式，在第一次clone时，会正常进行，第二次会变成二，第三次会变成六。

//这是因为，第一次克隆时，只找到一个元素，当克隆完成后，HTML中就有了两个class = 'operate'的元素了。因此就查
//找到了两个元素，然后这两个元素被拷贝，添加到新的一项中去

$(trEle).append($('.operate')[0].clone(true));

//对查找到的元素处理一下，只取第一个克隆，就避免了上面的问题。

持续踩坑中。。。。。。。。。

JS踩过的坑的更多相关文章

  1. react基础学习和react服务端渲染框架next.js踩坑

    说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...

  2. web开发实战--弹出式富文本编辑器的实现思路和踩过的坑

    前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...

  3. "开发路上踩过的坑要一个个填起来————持续更新······（7月30日）"

    欢迎转载,请注明出处! https://gii16.github.io/learnmore/2016/07/29/problem.html 踩过的坑及解决方案记录在此篇博文中! 个人理解,如有偏颇,欢 ...

  4. 第八篇：web之前端踩的一些坑

    前端踩的一些坑   前端踩的一些坑 本节内容 事件代理 清除标签的所有事件 bootstrap的模态框自定义方法 ajax在django里面实现post提交 ajax提交数据嵌套 1.事件代理 之前写 ...

  5. 使用vue开发项目需要注意的问题和可能踩到的坑

    最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下: 一.生命钩子使用需要注意的地方 1.beforeCreat ...

  6. react + antd 实现打印功能（踩了不少坑）

    最近在有网页打印需求,尝试了一下react的打印功能,遇到了不少的坑: 1.react本身有一些打印的组件,但都不好用,都是基于window.print(),但是window.print()如果直接打 ...

  7. 使用pace监控ajax踩过的坑

    使用vue.js开发移动端的活动页面时,有时候会出现因为请求的数据没有返回而使得当前活动页结构混乱或者不美观,这个时候可以考虑使用pace.js,通过设置参数值,在ajax全部请求结束之前显示load ...

  8. [坑况]——webpack搭建前端环境踩过的坑啊

    前言 嘿哈,webpack搭建前端环境踩过的坑啊! 第一个:完全不知所措 webpack4 下面用不了HtmlWebpackPlugin 和 ExtractTextPlugin 解决方案: html- ...

  9. 小程序——微信小程序初学踩过的坑

    微信小程序初学踩过的坑 一.前言     最近因为某些需要和个人兴趣打算开发一下微信小程序,经过在官方网站上的基本了解,我大体知道了微信小程序开发的大致过程,其实最本质的就是MVVM,借用了很多模式上 ...

随机推荐

  1. java异常处理常见处理

    反例之一:丢弃异常结论一:既然捕获了异常,就要对它进行适当的处理.不要捕获异常之后又把它丢弃,不予理睬. 反例之二:不指定具体的异常 结论二:在catch语句中尽可能指定具体的异常类型,必要时使用多个 ...

  2. 如何处理UIVIew addsubview 不显示subview

    老代码: addsubview不显示uilabel -(UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSIn ...

  3. javascript中对象访问自身属性的方式

    在javascript中,通过对象的方法访问对象自身属性时,必须采用this.fieldName的方式. 原因是javascript中Function是无状态的,访问对象的属性时,必须指定当前的上下文 ...

  4. InvalidArgumentError: You must feed a value for placeholder tensor 'Placeholder_1' with dtype float and shape [?,10]

    在莫烦Python教程的“Dropout 解决 overfitting”一节中,出现错误如下: InvalidArgumentError: You must feed a value for plac ...

  5. 【转】查看 Linux 发行版名称和版本号的 8 种方法

    如果你加入了一家新公司,要为开发团队安装所需的软件并重启服务,这个时候首先要弄清楚它们运行在什么发行版以及哪个版本的系统上,你才能正确完成后续的工作.作为系统管理员,充分了解系统信息是首要的任务. 查 ...

  6. 【IOI 2018】Werewolf 狼人

    虽然作为IOI的Day1T3,但其实不是一道很难的题,或者说这道题其实比较套路吧. 接下来讲解一下这个题的做法: 如果你做过NOI 2018的Day1T1,并且看懂了题面,那你很快就会联想到这道题,因 ...

  7. Weblogic CVE-2018-3191远程代码命令执行漏洞复现

      0x00 简介 北京时间10月17日,Oracle官方发布的10月关键补充更新CPU(重要补丁更新)中修复了一个高危的WebLogic远程代码执行漏洞(CVE-2018-3191).该漏洞允许未经 ...

  8. 响应式开发(六)-----Bootstrap CSS----------Bootstrap文本排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈.使用 Bootstrap 的排版特性,您可以创建标题.段落.列 ...

  9. GoLand语言快捷键

    快捷键 作用 备注 ctrl + n 导航到类名 ctrl + shift + n 导航到文件 ctrl + e/ctrl + shift + e 打开到最近的文件/打开最近修改的文件 ctrl + ...

  10. P2684 搞清洁

    P2684 搞清洁 给定一段区间及若干个线段, 求使区间被完全覆盖所需的最少线段数 错误日志: 菜 Solution 补一下贪心吧 这题最小线段覆盖 首先按照左端点排序 现在对于所有左区间到达目前已覆 ...