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'); 
});

Answer 2

您在哪里分配全局变量？

如果它位于 document.ready 声明之外，那么您很可能为其分配了尚未加载的内容。

尝试这个：

$(document).ready(function(){ 
    var customNamespace = { 
        status: 'closed', 
        popup: $('#popup'), 

        showPopup: function() { 
            // ...   
        } 
    } 
    console.log($('#popup')); 
    console.log(customNamespace.popup); 
    console.log($(customNamespace.popup)); 

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

当你尝试输出时会发生什么.length？:

console.log($('#popup').length); 
console.log(customNamespace.popup.length); 
console.log($(customNamespace.popup.length));