jQuery中 noConflict() 方法使用


Posted in Javascript onApril 25, 2013

jQuery 和其他 JavaScript 框架
正如您已经了解到的,jQuery 使用 $ 符号作为 jQuery 的简写。

如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办?

其他一些 JavaScript 框架包括:MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写(就像 jQuery),如果您在用的两种不同的框架正在使用相同的简写符号,有可能导致脚本停止运行。

jQuery 的团队考虑到了这个问题,并实现了 noConflict() 方法。

jQuery noConflict() 方法
noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。

实例
当然,您仍然可以通过全名替代简写的方式来使用 jQuery:

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行!");
  });
});

实例
您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用。请看这个例子:
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行!");
  });
});

实例
如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在运行!");
  });
});
Javascript 相关文章推荐
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 #Javascript
js Array对象的扩展函数代码
Apr 24 #Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 #Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 #Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 #Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 #Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 #Javascript
You might like
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
python3 简单实现组合设计模式
2020/07/02 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
法制宣传口号
2014/06/16 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书