javascript - jQuery:是否可以将 DOM 元素分配给变量供以后使用？

Question

我正在从事一个使用 jQuery 的项目，我对 Mootools 更加熟悉。

我先从我的代码开始。

var customNamespace = {
    status: 'closed',
    popup: $('#popup'),

    showPopup: function() {
        // ...  
    }
}

$(document).ready(function(){
    console.log($('#popup'));
    console.log(customNamespace.popup);
    console.log($(customNamespace.popup));

    $('#popup').fadeIn('slow');
    (customNamespace.popup).fadeIn('slow');
    $(customNamespace.popup).fadeIn('slow');
});

我的目标是每次我想对#popup div 执行某些操作时，都不让 jQuery 遍历 DOM，因此我想将它保存到一个变量中，以便在我的整个脚本中使用它。

当页面加载时，控制台会按我的预期打印出对象 3 次，因此我假设对于每个方法，fadeIn 都会正常工作。但它没有，只是

$('#popup').fadeIn('slow');

实际上在 div 中淡出。

即使我删除了我的命名空间散列，只是将对象保存到一个全局变量中，然后执行

var globalVariable = $('#popup');
.
.
.
globalVariable.fadeIn('slow');

也没有像我想象的那样工作。 jQuery 可以做我想做的事吗？

Answer 1

在运行选择器并将其分配给变量之前，您要小心 DOM 实际上已加载，否则您可以毫无问题地将对 DOM 元素的引用存储在变量中。

var globalVariable;

$(document).ready(function(){ 
    globalVariable = $('#popup');
    console.log($('#popup')); 
    console.log(globalVariable); 

    $('#popup').fadeIn('slow'); 
    globalVariable.fadeIn('slow'); 
});