当前位置：首页 > jquery

jquery 初始化

2026-04-08 03:03:40jquery

jQuery 初始化方法

在网页中使用jQuery前，需要先完成初始化加载。以下是几种常见的jQuery初始化方式：

方式1：基础DOM就绪写法

$(document).ready(function() {
    // 在这里编写jQuery代码
});

方式2：简化写法

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

方式3：结合原生JavaScript的DOMContentLoaded事件

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

方式4：异步加载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库在初始化代码之前加载，通常将jQuery的<script>标签放在<head>中或<body>开头
对于现代浏览器，DOMContentLoaded事件和jQuery的ready事件效果基本相同
如果需要支持IE8及以下版本，推荐使用jQuery的ready方法
使用CDN加载jQuery时，考虑添加本地回退方案

最佳实践示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 本地回退方案
        window.jQuery || document.write('<script src="js/jquery-3.6.0.min.js"><\/script>');
    </script>
</head>
<body>
    <script>
        $(function() {
            console.log('jQuery初始化完成');
            // 业务代码
        });
    </script>
</body>
</html>