jQuery noConflict() 方法

字节浮尘
• 阅读 595

前面我们已经知道,jQuery 可以使用 $ 符号作为 jQuery 的简写,但是如果除了 jQuery 以外,其他的 JavaScript 框架也使用了 $ 符号作为简写,而我们又需要同时使用两种不同的框架,那么就可能导致脚本停止运行。而 jQuery 团队考虑到了这个问题,并实现了 noConflict() 方法。

其他一些 JavaScript 框架包括:SammyEmberMooToolsBackboneKnockoutBatman CappuccinoJavaScript MVCGoogle Web Toolkit 等。

noConflict()方法的使用

noConflict() 方法会释放 $ 标识符的保留,以便其他脚本可以使用它。

我们使用 jQuery 可以直接编写全名而不是快捷方式,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $.noConflict();
    jQuery(document).ready(function(){
      jQuery("button").click(function(){
        jQuery("#add").text("欢迎来到侠课岛!");
      });
  });
</script>
</head>
<body>
  <div id="add"></div>
  <p><button>点击添加</button></p>
</body>
</html>

演示效果:
jQuery noConflict() 方法

但是我们也可以创建自己的快捷方式,noConflict() 方法返回对 jQuery 的引用,我们可以将它保留在变量中以便不时之需。例如:

var jq = $.noConflict();
    jq(document).ready(function(){
      jq("button").click(function(){
        jq("#add").text("欢迎来到侠课岛!");
      });
});

我们还可以将 $ 符号作为参数传递给 ready 方法,然后允许我们在函数中使用 $ 访问 jQuery,但是在它之外的地方我们就不得不使用 jQuery 了 :

$.noConflict();
  jQuery(document).ready(function($){
    $("button").click(function(){
      $("#add").text("欢迎来到侠课岛!");
    });
});

上述三种写法最终的效果都是一样的。

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
java通过sina端口提取股票历史数据并存入MySQL
 1.提取股票代码代码见:http://www.oschina.net/code/snippet\_2688840\_55337(http://www.oschina.net/code/snippet_2688840_55337) 2抓取sina股票的json页面数据;代码见:http://www.oschina.net/code/snip
虾米大王 虾米大王
3年前
java代码092
code092.jsp通过FindServlet类查询分页数据所有图书信息ID图书名称价格数量作者<%Listlist1(List)request.getAttribute("list");for(code089book:list1)%
虾米大王 虾米大王
3年前
java代码099
code099.jspInserttitlehere$pageScope.user.name
虾米大王 虾米大王
3年前
java代码018
code018.jsp写入cookiewindow.location.href"code017.jsp";
Wesley13 Wesley13
3年前
JAVA_将二进制流转换成图片文件
_1. __\代码\_将二进制流转换成图片文件晚风工作室www.soservers.com    _跳至\1\(http://www.oschina.net/code/snippet_931591_1760429253)\全屏预览\(http://www.oschina.net/code/piece_full?code17
Wesley13 Wesley13
3年前
PHP 调用qq邮箱接口
html代码<!DOCTYPEhtml<html<head<metacharset"UTF8"<title</title<scriptsrc"https://code.jquery.com/jquery1.9.1.min.js"</script
Stella981 Stella981
3年前
PHP返回Json数据函数封装
/返回Json数据@paramint$code@paramstring$message@paramarray$data@returnstring/publicfunctionretJson($code,$message'
Stella981 Stella981
3年前
Jquery从入门到放弃(八)
杂项:一、noConflict()为防止简写符号‘$’和其他JS库发生冲突,执行此语句后,jquery会释放出"$"符号,自己使用jquery全称$.noConflict();jQuery(document).ready(function(){jQuery("button
Stella981 Stella981
3年前
JQuery中对option的添加、删除、取值
jQuery获取Select选择的Text和Value:1\.$("select\_id").change(function(){//code...});  //为Select添加事件,当选择其中一项时触发2\.varcheckText$("select\_id").find("option:selected").text();  
Wesley13 Wesley13
3年前
Oracle:Pivot 转多列并包含多个名称
SELECTFROM(SELECTl.DISTRIBUTOR_ID,d.SKU_CODE,d.WH_CODE,d.ORDER_PACKAGES,d.PRICE,d.YEARLY||d.MONTHLYasYM,d
Stella981 Stella981
3年前
Code
ylbtechCodeNFine:NFine介绍1\.NFine平台介绍返回顶部1、使用时请务必保留来源,请勿用于违反我国法律的web平台、如诈骗等非法平台网站。版权最终解释权归《NFine团队》所有NFine是一套基于ASP.NETMVCEF6Bootstrap开发出来的框架,源代码完全开源,可以帮助你解