jQuery的$语法与JavaScript中$作为document.getElementById简写的冲突疑问

二者并不天然互斥，你遇到的兼容问题本质是全局作用域下的$变量被覆盖导致的：

• 如果你先定义自定义$函数，再引入jQuery，jQuery会默认把全局$赋值为自身实例，覆盖你写的函数
• 如果你先引入jQuery，再定义自定义$函数，你的代码会覆盖jQuery的$，导致jQuery语法失效

你可以通过以下方案实现二者共存：

方案1：使用jQuery官方的无冲突模式 #

这是jQuery专门为解决$命名冲突提供的能力，调用jQuery.noConflict()会将全局$变量还原为引入jQuery之前的值，你可以为jQuery单独指定其他别名使用：

// 1. 先引入jQuery
// 2. 释放$的全局控制权，将jQuery实例赋值给自定义别名
const jq = jQuery.noConflict();

// 此时$就是你自定义的document.getElementById简写
$('main'); // 等价于document.getElementById('main')
// jQuery相关调用使用自定义别名即可
jq('div').hide(); // 等价于原来的$('div').hide()

方案2：局部作用域内使用jQuery的$ #

如果你不想改jQuery的调用写法，可以将jQuery相关代码包裹在自执行函数中，通过参数传递的方式在局部作用域内使用$指代jQuery，完全不影响全局的自定义$：

jQuery.noConflict();

// 自执行函数内部的$仅在当前作用域内指代jQuery
(function($) {
  $(document).ready(function() {
    $('button').click(() => alert('jQuery触发的点击事件'));
  });
})(jQuery);

// 全局作用域下$依然是你的自定义函数
$('main'); // 正常使用

方案3：修改自定义简写的命名 #

如果不想调整jQuery的使用逻辑，也可以把你自定义的ID选择简写换个不会冲突的命名即可：

function $id(x) { return document.getElementById(x); }
// 使用时直接调用$id即可
$id('main');

另外补充说明：jQuery本身的ID选择器$('#元素ID')已经实现了和你自定义$函数完全一致的基础功能，同时还支持链式调用其他jQuery方法，如果你的项目已经全量引入jQuery，也可以直接用jQuery的原生语法，不需要额外自定义简写。

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