使用jQuery包裹页面指定文字时遇$ is not a function错误求助

嘿，咱们来拆解下你的代码为啥在网站上失效，一步步解决问题：

问题根源 #

你看到的Uncaught TypeError: $ is not a function报错，核心原因有两个可能：

1. jQuery的$别名被禁用：很多CMS（比如WordPress，从你提到的子主题推测是它）为了避免和其他JS库冲突，默认只允许用jQuery而不是$作为核心函数名。
2. 脚本加载顺序不对：你的custom.js可能在jQuery还没加载完成就执行了，导致找不到$对象。

可行修复方案 #

方案1：适配jQuery命名规范+确保DOM就绪（最推荐）

把你的代码改成下面这样，既解决了$的冲突问题，又保证DOM元素完全加载后再执行替换：

jQuery(document).ready(function($) {
  var oldString = 'Choose a Start Date', 
      newString = 'Choose a <span class="date-style-change">Start</span> Date';
  // 用html回调函数替换，比先取text更可靠，避免丢失原有HTML
  $('span').html(function(index, originalHtml) {
    return originalHtml.replace(new RegExp(oldString, "gi"), newString);
  });
});

• jQuery(document).ready(function($) { ... })：这个写法的好处是，在函数内部可以安全使用$作为jQuery的别名，同时确保DOM已经加载完毕。
• 改用.html()的回调方式，能保留目标元素原有的HTML结构，比先取.text()再替换更稳妥。

方案2：手动绑定$为jQuery别名

如果你的网站环境允许，也可以在代码开头强制把$绑定到jQuery：

var $ = jQuery.noConflict();
$(document).ready(function() {
  var oldString = 'Choose a Start Date', 
      newString = 'Choose a <span class="date-style-change">Start</span> Date', 
      newText = $('span').text().replace(RegExp(oldString,"gi"),newString); 
  $('span').html(newText);
});

方案3：修正脚本加载顺序（针对WordPress）

不要直接用<script>标签引入custom.js，推荐通过子主题的functions.php用WordPress官方的脚本加载函数，这样能自动保证jQuery先加载：

function enqueue_custom_theme_script() {
  wp_enqueue_script( 
    'custom-script', 
    get_stylesheet_directory_uri() . '/custom.js', 
    array('jquery'), // 指定依赖jQuery
    '1.0', 
    true // 在页面底部加载，提升性能+避免DOM未就绪问题
  );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_theme_script');

额外小建议 #

• 别用$('span')这种全局选择器，太容易误改页面上其他span元素。最好给目标span加个专属class（比如date-picker-label），然后用$('span.date-picker-label')来定位，更精准。
• 测试的时候可以打开浏览器控制台，输入jQuery回车，如果能输出jQuery对象，说明jQuery已经正确加载了。

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