多库共存

问题

页面：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <input type="button" value="按钮" id="btn" />
</body>

</html>

脚本：

//页面加载
$(function () {
  $("#btn").click(function () {
    console.log("$$$$");
  });
});

点击按钮后，正确输出；那么如果$被占用了后，又如何

 var $=10;//普通的变量,10
 console.log($);
//页面加载
$(function () {
  $("#btn").click(function () {
    console.log("$$$$");
  });
});

解决

报错了，那么可以将$替换成jQuery来进行

var $ = 10; // 普通的变量, 10
console.log($);
//页面加载
jQuery(function () {
  jQuery("#btn").click(function () {
    console.log("jQuery");
  });
});

改进

点击按钮后完整输出，那么如果不想使用jQuery，想像$一样简便输出如何改进

var xy = $.noConflict(); //把$的权利给了xy了,$就可以作为其他的用法出现在代码中
var $ = 10; //普通的变量,10
console.log($);
//页面加载
xy(function () {
  xy("#btn").click(function () {
    console.log("$--->xy");
  });
});

释放了权限，将 $`的权限给了`xy`，就可以使用`xy`代替`$