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

您在哪里分配全局变量？

如果它在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));

Answer 2

在运行选择器并将其分配给变量之前，您需要小心实际加载DOM，否则您可以在变量中存储对DOM元素的引用而没有任何问题。

var globalVariable;

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

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

Answer 3

当然，这很有效。提高绩效实际上是一件好事。

Answer 4

从$()返回的所有内容都将永远是一个对象。您的问题是，当分配customNamespace并执行代码时，DOM元素#popup尚不存在，因此，您将在该示例中得到零长度对象

要检查你是否在jQuery中找到了一个对象，你不检查结果为null，你检查它的长度。

为了确保在执行代码时存在DOM节点，请将其推迟到DOMReady：

$(document).ready(function() {
   ...
});

Answer 5

使用数据方法并避免在DOM中存储数据。一些开发人员习惯将数据存储在HTML属性中，如fx。：

$('selector').attr('alt', 'data being stored');

//以后可以使用以下方法检索数据： $（ '选择'）ATTR（ 'ALT'）;

HTML属性并不意味着存储类似的数据，而“alt”作为参数名称并不真正有意义。在大多数情况下，正确的选择是使用jQuery中的数据方法。它允许您将数据与页面上的元素相关联。

$('selector').data('paramtername', 'data being stored');

//然后稍后获取数据 $（ '选择'）数据（ 'paramtername'）;

此方法允许您存储具有有意义名称的数据，并且它更灵活，因为您可以在页面上的任何元素上存储任意数量的数据。有关data（）和removeData（）的更多信息，请参阅此处jQuery internals这样做的一个经典用法是保存输入字段的默认值，因为您希望在焦点上清除它。

        <form id="testform">
 <input type="text" class="clear" value="Always cleared" />
 <input type="text" class="clear once" value="Cleared only once" />
 <input type="text" value="Normal text" />
</form>

$(function() {
 //Go through every input field with clear class using each function
 //(NB! "clear once" is two classes clear and once)
 $('#testform input.clear').each(function(){
   //use the data function to save the data
   $(this).data( "txt", $.trim($(this).val()) );
 }).focus(function(){
   // On focus test for default saved value and if not the same clear it
   if ( $.trim($(this).val()) === $(this).data("txt") ) {
     $(this).val("");
   }
 }).blur(function(){
   // Use blur event to reset default value in field that have class clear
   // but ignore if class once is present
   if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
     //Restore saved data
     $(this).val( $(this).data("txt") );
   }
 });
});

在这里演示：link text

Answer 6

我喜欢构建类似于此的脚本。对我而言，它将我的所有页面控件保持在一起它还允许我为每个页面更轻松地维护我的脚本。

/*   CONTROLS GLOBAL  */
var Controls;


var Class = {
    create: function () {
        return function () {
            this.initialize.apply(this, arguments);
        }
    }
}

//Set up page control objects
PageControls = Class.create();
PageControls.prototype = {
    initialize: function () {

        //Use jquery to initialize our controls, 
        //one should probably use more appropriate names other than ctrl1, ctrl2 .. 
        //but for demo purposes  ...
        this.ctrl1 = $($("#Control1"));
        this.ctrl2 = $($("#Control2"));
        this.ctrl3 = $($("#Control3"));

    }
}

准备好了......

$(document).ready(function () {

    /* Initialize our global page controls */
    Controls = new PageControls();

    //Now we can use our controls
    Controls.ctrl1.val("Text for control 1");
    Controls.ctrl2.val("Text for control 2");
    Controls.ctrl3.val("Text for control 3");
});

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

6 个答案: