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

我的目標是沒有的jQuery遍歷DOM每次我想要做的#popup DIV的東西，所以我想將它保存到一個變量使用它在我的腳本。

當頁面加載時，控制檯按照我的預期打印出對象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

當然，這是有效的。提高性能實際上是一件好事。

Answer 3

你想你運行你的選擇並將其分配給變量之前要小心的是，DOM其實是加載，但除此之外，你可以在沒有任何問題的變量存儲到DOM元素的引用。

var globalVariable; 

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

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

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