jquery 自定义$

jQuery 自定义 $ 符号

jQuery 默认使用 $ 作为全局命名空间的别名，但可以通过 jQuery.noConflict() 方法释放 $ 符号的控制权，避免与其他库（如 Prototype.js）冲突。以下是自定义 $ 符号的几种方法。

释放 $ 符号并恢复原始值

调用 jQuery.noConflict() 可以释放 $ 符号，恢复其在其他库中的定义。之后只能通过 jQuery 访问 jQuery 功能。

jQuery.noConflict();
// 此时 $ 不再代表 jQuery
jQuery(document).ready(function() {
    jQuery("div").hide();
});

自定义别名

可以将 jQuery 绑定到另一个自定义变量（如 jq），避免与其他库冲突。

var jq = jQuery.noConflict();
jq(document).ready(function() {
    jq("div").hide();
});

在闭包中继续使用 $

通过立即调用函数表达式（IIFE）传递 $ 参数，可以在局部作用域中继续使用 $ 符号。

jQuery.noConflict();
(function($) {
    $(document).ready(function() {
        $("div").hide();
    });
})(jQuery);

与其他库共存

如果页面同时使用了 jQuery 和其他库（如 Prototype.js），可以通过以下方式确保两者共存。

jQuery.noConflict();
// 其他库的 $ 恢复使用
document.observe("dom:loaded", function() {
    // Prototype.js 代码
});
// jQuery 代码
jQuery(document).ready(function() {
    jQuery("div").hide();
});

恢复 $ 并延迟执行

如果需要延迟执行 jQuery 代码，可以结合 noConflict 和 ready 方法。

jQuery.noConflict();
jQuery(function() {
    // 这里的 $ 是 jQuery
    var $ = jQuery;
    $("div").hide();
});

动态加载时处理

在动态加载 jQuery 的场景中（如模块化环境），可以通过配置确保 $ 的正确使用。

require(['jquery'], function(jq) {
    var $ = jq.noConflict();
    $(document).ready(function() {
        $("div").hide();
    });
});

以上方法可以根据具体需求选择，确保 jQuery 与其他库或自定义逻辑的兼容性。