jquery 初始化

jQuery 初始化方法

在 HTML 文件中引入 jQuery 库后，可以通过以下方式初始化 jQuery 代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // jQuery 代码写在这里
  });
</script>

简写形式

jQuery 的初始化也可以使用简写形式，效果与上述方法相同：

$(function() {
  // jQuery 代码写在这里
});

现代 JavaScript 替代方案

对于现代项目，可以使用原生 JavaScript 的 DOMContentLoaded 事件替代 jQuery 的 ready 方法：

document.addEventListener('DOMContentLoaded', function() {
  // 代码写在这里
});

异步加载 jQuery

如果需要异步加载 jQuery，可以使用以下方法：

function loadScript(url, callback) {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  script.onload = callback;
  document.head.appendChild(script);
}

loadScript('https://code.jquery.com/jquery-3.6.0.min.js', function() {
  $(function() {
    // jQuery 代码写在这里
  });
});

模块化环境中的 jQuery 初始化

在使用模块打包工具(如 Webpack)的项目中，可以通过 npm 安装 jQuery 后这样使用：

import $ from 'jquery';

$(function() {
  // jQuery 代码写在这里
});

注意事项

确保 jQuery 库在自定义脚本之前加载，否则会抛出 "$ is not defined" 错误。

在大型项目中，考虑使用 jQuery 的 noConflict 模式，特别是当与其他库可能存在 $ 符号冲突时：

var jq = $.noConflict();
jq(document).ready(function() {
  // 使用 jq 代替 $
});