jQuery新手求助：代码报错Uncaught ReferenceError: h1Headers is not defined

嘿，我来帮你搞定这个jQuery新手常踩的坑！

错误原因 #

你遇到的ReferenceError问题很明确：h1Headers和h3Headers是manipulateDOM函数内部的局部变量，函数外面的代码根本访问不到它们。JavaScript里，用var（或者let/const）在函数内声明的变量，作用域只限于这个函数内部，出了函数就“消失”了。

你现在的代码结构问题一目了然：

$(document).ready(function() { manipulateDOM(); });
function manipulateDOM() {
  // 这里的变量是局部的，函数外部完全访问不到
  var h1Headers = $('h1');
  var h3Headers = $('h3');
}
// 这几行代码在函数外面，根本不知道h1Headers、h3Headers是什么！
h1Headers.text('Hello World');
h3Headers.first().css('text-decoration', 'line-through');
h3Headers.css('color', '#37887D');

修正方案 #

把所有操作DOM的代码都移到manipulateDOM函数内部，这样既能访问到局部变量，又能确保DOM已经加载完成后再执行操作：

$(document).ready(function() { manipulateDOM(); });
function manipulateDOM() {
  var h1Headers = $('h1');
  var h3Headers = $('h3');
  
  // 把操作语句移到函数内部，就能正常访问变量了
  h1Headers.text('Hello World');
  h3Headers.first().css('text-decoration', 'line-through');
  h3Headers.css('color', '#37887D');
}

或者更简洁的写法，直接把代码放进ready回调里，不用单独定义函数：

$(document).ready(function() {
  var h1Headers = $('h1');
  var h3Headers = $('h3');
  
  h1Headers.text('Hello World');
  h3Headers.first().css('text-decoration', 'line-through');
  h3Headers.css('color', '#37887D');
});

额外小提示 #

1. 建议把jQuery脚本标签放在HTML的</body>标签之前，配合ready回调使用，能彻底避免“DOM元素还没加载就去选择”的问题。
2. 尽量使用局部变量，避免全局变量污染，这是写干净、可维护代码的好习惯。

内容的提问来源于stack exchange，提问作者Princewill