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

Question

这是我的第一个jQuery，我正在编写一个教程后面的代码（不是jQuery教程，所以这个问题没有帮助），但想更好地理解发生了什么，因为有很多新的图层。由巴贝尔原始代码重新编写的，所以我不知道这是否是因为一个新的标准已将此代码在现代浏览器无法正常工作：

原始代码：

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返回init（1）和length：0而使用Google搜索时未找到非常有用的信息。我发现：Why is my JQuery selector returning a n.fn.init[0], and what is it?但它似乎非常具体到这个实例，我希望得到更多的一般信息。我没有做动态页面加载。从这个问题，但我收集我的jquery返回一个空的结果对象。这是一个正确的理解，我应该在调试中首先检查什么？我在chrome调试器中设置了一个断点，但仍然只是获得了对象，但数组中有两个元素，第一个元素是我单击的对象来触发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> 

这里是巴贝尔模块：

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

Answer 1

jQuery选择不认$（ “站点header__menu内容”）。 '。'前缀是需要引用一个类，就像您在$（“。site-header__menu-icon”）上使用的那样。

使用ID的前缀＃，。类的前缀和元素类型的前缀，如div，img，p等。

Answer 2

正如Satpal提到的，我错过了一个。在我的类选择器中。新来jquery的人应该参考： https://api.jquery.com/category/selectors/ 在他们的特定查询中找到一个快速的答案。