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

View Code

$('.title').click(function () {
    $('.items').addClass('hide');
    $(this).next().removeClass('hide')
});

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

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

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

一：DOM对象的查找

二：JQuery对象查找

三：jQuery操作标签样式

猜你喜欢