爲什麼我的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/ 在他們的特定查詢中找到一個快速的答案。