Question

是否可以从下面的脚本中删除两个$()又名现成的处理程序？我想在DOM准备好之前加载jquery，但仍然能够引用#certification。

    $(function(){
           $("#certification").multiselect({
               minWidth: "500",
               noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
               selectedText: function(numChecked, numTotal, checkedItems){
                   return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
               }
           });
    });

编辑：请假设#certification出现在上述脚本之前（<head>中）。在整个DOM准备好之前，我想从脚本中引用#certification。没有$ ready处理程序可以做到这一点吗？

EDIT2：请假设上面位于<head>

决议：根据给出的建议，我能够解决问题。删除了$（function（）{}）就绪处理程序，＃certification元素出现在jquery之前。 #certification元素和jquery都从<head>移动到<body>，它应该在那里。现在，jquery在DOM的其余部分准备好之前显示，正如预期的那样。谢谢大家的回答。

Answer 1

#certification元素需要存在才能选择它。您应该能够在元素定义之后放置脚本并且没问题。

行：

<script>
    $(function(){
        $('#certification').whatever();
    });
</script>
<div id="certification"></div>

不行：

<script>
    $('#certification').whatever();
</script>
<div id="certification"></div>

行：

<div id="certification"></div>
<script>
    $('#certification').whatever();
</script>

Answer 2

不，你不能。在DOM准备好之前，元素将不可用。或者在代码中的元素#certification.之后移动脚本。 $(function(){});确保引用元素的脚本运行正常（因为只有在文档准备就绪时才会执行就绪回调），无论它放在何处。

如果你通过text {。之外的$('#certification')或者在DOM中的元素之前引用元素，它就不会选择元素，任何选择器的情况都是如此，除了你绑定的事件委托之外文件头的事件被委托给任何匹配的选择器（这是一个完全不同的动物），因为文档头是你可以随时引用的东西。

Answer 3

这取决于你想要做什么，更多的背景会有所帮助。然而值得注意的是，如果你在head部分中有JS片段（我假设你想把它放在'在DOM加载之前'），那么#certification将不存在，因为它引用了一个带有ID的DOM元素'认证'。

有关您正在尝试做什么的更多信息将有助于提供更好的建议。

我建议的是让你的块成为一个函数，然后在DOM上调用它：

function doMultiSelect(elem) {
  elem.multiselect({
     minWidth: "500",
     noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
     selectedText: function(numChecked, numTotal, checkedItems){
     return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
    }
 });
}

然后您可以使用

在DOM上调用它

$(function() {
  doMultiSelect($("#certification"));
});

我刚看到你的澄清。做：

<div id="certification""></div>
<script> $("#certification").multiselect.......</script>

这应该可以正常工作

Answer 4

我想在DOM准备好之前加载jquery，但仍然可以引用#certification

怎么回事？

#certification是DOM的一部分，你想如何在它加载之前引用它？

如果您在元素减速后运行脚本将有意义。

Answer 5

一种通用方法是轮询元素可用性，并推迟到那里：

(function doit(){
          var fields= $("#certification");
         if(!fields.length){return setTimeout(doit, 50);}
            fields.multiselect({
               minWidth: "500",
               noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
               selectedText: function(numChecked, numTotal, checkedItems){
                   return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
               }
           });
    }());

我更喜欢使用事件或委托观察者，但如果你不能以最佳方式订购标签，这将有效。

Answer 6

“是否可以从下面的脚本中删除两个$()又名现成的处理程序？”

您的脚本仅包含一个就绪处理程序，但是可以删除它。

“请假设#certification出现在上述脚本之前。我想在整个DOM准备好之前从脚本中引用#certification。是否可以在没有$ ready handler？“

是。 script元素中的代码可以引用在该脚本之前出现的元素，因为页面源中较高的元素已经被解析并添加到DOM中。因此，如果您的脚本位于元素之后，那么您可以简单地执行此操作：

       $("#certification").multiselect({
           minWidth: "500",
           noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
           selectedText: function(numChecked, numTotal, checkedItems){
               return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
           }
       });

“EDIT2：请假设上面位于<head>”

咦？这与您之前的“请假设”声明相矛盾。如何在 #certification元素之后脚本位于头部？你不应该在head部分包含“regular”元素，只包括title元素加上base，link，meta，style或script元素。如果确实包含#certification，它可能适用于某些浏览器，但这不是一个好的计划。

规则并不是很复杂。为了让任何给定的脚本引用一个元素，脚本必须在元素添加到DOM后运行。所以：

在引用的元素之后包含脚本元素

将脚本包含在DOM ready（或onload）处理程序
中
以上两个

请注意，您可以在页面上包含多个脚本块，因此您只需将$("#certification").multiselect({...})部分包含在紧邻#certification元素后面的自己的脚本元素中，然后在其他位置包含其他脚本（例如，在头部的DOM就绪处理程序中，或在关闭</body>标记之前的正文末尾。）

编辑：根据您在另一个答案中发布的一些评论“$是否需要等待DOM完成加载？”和“所以我无法避免使用$()就绪处理程序？如果没有它，有没有办法编写jquery？”，以及在原始问题中你谈到过的事实>两个“$()又名现成的处理程序”，似乎您误解了$()函数的作用。

$()只是jQuery()的别名，在将函数作为参数传递时会创建一个DOM就绪处理程序。传递字符串时，如$("#certification")中与创建就绪处理程序无关。

在DOM准备好之前加载jquery - 可以通过删除$（）别名来实现吗？

6 个答案: