JS踩过的坑

一：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 {
       100%;
      margin: 0;
      height: 1000px;
    }
    .hide {
      display: none;
    }
    .left {
       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>

View Code

$('.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 {
             100px;
            height: 30px;
            background-color: white;
        }

        #b1 {
             105px;
            height: 30px;
        }

        .cover {
            position: fixed;
            background-color: darkgrey;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 9;
        }

        .modal {
             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>

View Code

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

$(trEle).append($('.operate').clone(true));
$(trEle).append($($('.operate')[0]).clone(true));
//以为选择器选取查找元素，上述表达式，在第一次clone时，会正常进行，第二次会变成二，第三次会变成六。
//这是因为，第一次克隆时，只找到一个元素，当克隆完成后，HTML中就有了两个class = 'operate'的元素了。因此就查
//找到了两个元素，然后这两个元素被拷贝，添加到新的一项中去
$(trEle).append($('.operate')[0].clone(true));
//对查找到的元素处理一下，只取第一个克隆，就避免了上面的问题。

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