如何在SharePoint Script Editor中使用JQuery而不覆盖站点主JS脚本

嘿，这个问题我之前帮不少人解决过——SharePoint本身往往已经加载了jQuery或者其他核心脚本，直接在Script Editor里塞自己的jQuery代码很容易引发冲突，导致站点原生功能出问题。下面几个方法结合起来，就能完美隔离你的脚本，只作用于你添加的HTML内容：

• 用noConflict()重命名你的jQuery实例
  这是最关键的一步，它能把你引入的jQuery和SharePoint全局的jQuery/$变量彻底分开。比如：

  <!-- 先加载你需要的jQuery版本（如果SharePoint自带的版本不满足需求，可上传到站点库后引用相对路径） -->
  <script src="/sites/你的站点名/Style Library/jquery-3.7.1.min.js"></script>
  <script>
    // 释放全局的jQuery和$变量，把我们的jQuery实例重命名为jq
    var jq = jQuery.noConflict(true);
  </script>
  

  之后你所有的自定义脚本里，都用jq代替$或者jQuery来选择元素，比如jq("#my-custom-btn").click(...)，完全不会碰站点原生的jQuery。

• 给你的HTML容器加专属标识，限定选择范围
  给Script Editor里的所有HTML套一个唯一的容器（比如加个专属类或ID），这样你的jQuery只会在这个容器内查找元素，不会误操作站点其他部分：

  <div class="my-custom-script-editor-wrap">
    <!-- 你的自定义HTML内容 -->
    <button id="my-custom-btn">点击测试</button>
  </div>
  

  然后写脚本的时候，把选择器限定在这个容器里：

  jq(".my-custom-script-editor-wrap #my-custom-btn").click(function() {
    jq(this).text("已点击");
  });
  

• 用IIFE隔离作用域，放心用$
  如果习惯了用$写代码，不想每次都敲jq，可以把脚本包在立即执行函数里，把jq传进去当局部的$：

  (function($) {
    // 这里面的$就是我们自定义的jq，随便用！
    $(".my-custom-script-editor-wrap .my-element").hide();
  })(jq);
  

• 注意加载顺序
  如果需要自己加载jQuery，一定要把它放在你的自定义脚本之前；如果SharePoint自带的jQuery版本能满足需求，你可以跳过加载步骤，直接用var jq = jQuery.noConflict();（不用加true）来获取一个独立实例，避免覆盖全局。

这样一套操作下来，你的脚本就完全被隔离在自己的HTML范围内，绝对不会干扰SharePoint的核心JS功能啦。

内容的提问来源于stack exchange，提问作者Žan Konečnik