#05: DOM 就绪全解析 | CSS-Tricks

我们已经谈了很多关于选择器的内容。jQuery 选择器，比如 $(“h1”)，会选择页面上所有的 <h1> 元素。但是，当它不起作用的时候怎么办呢？这里有一个选择器会失败的例子

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Learning jQuery</title>

  <script src="js/jquery-2.0.3.js"></script>
  <script>
    $("h1").css("color", "red");
  </script>
</head>

<body>
  
  <h1>Hello, World!</h1>

</body>

</html>

那个 <h1> 元素会变成红色吗？不会。为什么呢？原因是在 jQuery 代码运行时，还没有找到 <h1> 元素。它还没有进入 DOM。这是因为 HTML 是从上到下读取的。想象一下浏览器一行一行地读取，直到读取到包含 jQuery 选择器的行，它只知道这一行和它上面的所有内容。所以没有找到 <h1> 元素，也没有发生颜色改变。

我们如何解决这个问题呢？最好的方法是在页面底部，也就是 </body> 标签之前加载 JavaScript 文件。JavaScript 文件在下载和运行时会“阻塞”页面渲染，所以无论如何都会让页面加载速度更快。但是，这也有一个好处，就是我们的 jQuery 选择器会找到它们应该找到的所有内容。

在底部加载脚本看起来像这样

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Learning jQuery</title>
</head>

<body>
  
  <h1>Hello, World!</h1>

  <script src="js/jquery-2.0.3.js"></script>
  <script>
    $("h1").css("color", "red");
  </script>

</body>

</html>

但是有时脚本会在头部加载。有很多理由，大多数都是不好的理由，但是让我们不要在没有细节的情况下过于武断 =)。

即使我们被迫在头部加载脚本，我们仍然可以用一种相当令人满意的方式来解决找不到元素的问题。我们通过 jQuery 的“DOM 就绪”函数来实现。简单来说，就是文档完成并准备被操作时。它看起来像这样

$(document).ready(function() {

});

还有一个更短的版本，它做的事情完全一样

$(function() {

});

将你的代码放在这样的函数中，可以确保它在文档就绪之前不会运行。实际上，它使用了一段相当巧妙的代码来实现这一点，当然，跨浏览器实现起来很困难。它很酷的一点是速度很快。它与等待整个窗口加载不同，因为整个窗口加载很慢，因为它要等到所有资源都下载完成才会触发。DOM 就绪要快得多。如果你确实需要等待资源完成（例如，你需要测量图像大小），你可以像这样等待它

$(window).load(function() {

});

使用 DOM 就绪来修复我们之前的头部 JavaScript 问题，代码看起来像这样

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Learning jQuery</title>

  <script src="js/jquery-2.0.3.js"></script>
  <script>
  $(function() {
    $("h1").css("color", "red");
  });
  </script>
</head>

<body>
  
  <h1>Hello, World!</h1>

</body>

</html>

Ron Gilmour

# 2013年11月17日

嗯，我以为 jQuery 必须有一个“文档就绪”包装器，但我想只有在你的代码在头部的时候才需要。感谢你的澄清。我现在要去清理一些代码了。

Richard Finelli

# 2013年12月14日

是的，我也有和 Ron 一样的想法。现在我明白了 dom 就绪的简写代码是什么，这澄清了很多东西。

ricardo garcia

# 2015年7月23日

我不知道还有简写代码。我在任何教程中都没见过，这意味着它变得越来越好。感谢 Chris，我真的很喜欢你的方法论 :)

Greg

# 2015年8月29日

嗨，感谢你的解释。说得非常清楚。你能确认以下代码示例是等效的吗？

$(document).ready(function(){
    //example
    $('h1').css("color", "blue");
});

与

jQuery(document).ready(function($){
    //example
    $('h1').css("color", "blue");
});

$(function() {
    //example
    $('h1').css("color", "blue");
});

jQuery(function($) {
    //example
    $('h1').css("color", "blue");

});

相同

我认为 jQuery(function($)> 最好，因为我不必在文档中包含 noConflict.js 文件。

Chris Coyier
评论永久链接# 2015年9月1日
```
(function($){  
  // use $ here safely
})(jQuery);
```

这些代码确实都具有相同的功能。是的，最后一个（与第二个相同）将允许你在没有冲突的情况下安全地使用 $。不过，你并不总是需要 DOM 就绪语句（比如这四种情况），例如，如果你正确地在页面底部加载了脚本（DOM 已经就绪）。所以，这是一种在没有 DOM 就绪的情况下具有相同安全性的模式

Rachel

评论永久链接# 2017年1月30日

评论

很棒的视频 :) 就像你说的，我们也可以这样做等等...哈哈