Javascript 为什么我的JQuery返回init[0]长度0？

这是我的第一个jquery，我在编写代码时遵循的是一个教程而不是jquery教程，因此对于这个问题没有帮助，但希望更好地理解正在发生的事情，因为有很多新层。最初的代码是由babel重新编写的，因此我不确定这是否是因为新的标准使该代码无法在现代浏览器中工作：

原始代码：

import $ from 'jquery';

class MobileMenu{
    constructor() {
        this.menuIcon = $(".site-header__menu-icon");
        this.menuContent = $("site-header__menu-content");
        this.events();
    }

    events() {
        this.menuIcon.click(this.toggleTheMenu.bind(this));
    }

    toggleTheMenu() {
        console.log(this.menuContent);
        this.menuContent.toggleClass("site-header__menu-content--is-visible");
    }

}



export default MobileMenu;

巴贝尔创建的代码：

var MobileMenu = function () {
   function MobileMenu() {
     _classCallCheck(this, MobileMenu);

    this.menuIcon = (0, _jquery2.default)(".site-header__menu-icon");
    this.menuContent = (0, _jquery2.default)("site-header__menu-content");
    this.events();
}

_createClass(MobileMenu, [{
    key: "events",
    value: function events() {
        this.menuIcon.click(this.toggleTheMenu.bind(this));
    }
}, {
    key: "toggleTheMenu",
    value: function toggleTheMenu() {
        console.log(this.menuContent);
        this.menuContent.toggleClass("site-header__menu-content--is-visible");
    }
}]);

return MobileMenu;
}();

exports.default = MobileMenu;

它返回：

[prevObject: jQuery.fn.init(1)]
length:0
prevObject:[document]
__proto__:Object(0)

而不是我希望对其执行操作的预期类

下面是包含该类的html片段，我已经检查了名称中的拼写错误，在搜索jQuery返回init1和length:0的原因时，没有找到太多有用的信息。我发现：但它似乎非常具体的例子，我希望更多的一般信息。我不做动态页面加载。从这个问题上，我推断jquery返回的是一个空的结果对象。这是正确的理解吗？在调试中，我应该首先检查什么？我在chrome debugger中设置了一个断点，但仍然得到了对象，但数组中有两个元素，第一个元素是我单击以触发jquery的对象

    <div class="site-header__menu-icon"></div>
    <div class="wrapper site-header__menu-content">
      <a href="#" class="btn site-header__btn">Get in Touch</a>
      <nav class="primary-nav primary-nav--pull-right">
        <ul>
          <li><a href="#our-beginning">Our Beginning</a></li>
          <li><a href="#features">Features</a></li>
          <li><a href="#testimonials">Testimonials</a></li>
        </ul>
      </nav>
    </div>
</div>

---

jQuery选择器无法识别$site-header\uu菜单内容。需要使用“.”前缀来引用在$.site-header\uu菜单图标上使用的类

---

使用id的前缀。类的前缀，而div、img、p等元素类型没有前缀。

如Satpal I所述，缺少一个前缀。在我的班级里。刚接触jquery的人应参考： 在他们的特定查询中快速找到答案。

缺少输入错误。使用类选择器this.menuContent=$.site-header\uuu menu-content

module: {
    loaders: [
        {
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            },
            test: /\.js$/,
            exclude: /node_modules/
        }
    ]
}