jQuery无冲突模式详解


Posted in jQuery onJanuary 17, 2019

解决冲突的方法:

在jQuery中解决冲突的方法是noConflict()方法,这个方法将$标识符的控制权返回给其他JavaScript库

如以下示例中的jQuery代码将在将jQuery加载到页面后立即将其置于无冲突模式,并分配新的变量名称$j以替换$别名,以避免与原型框架冲突。详细代码如下:

// 为jQuery定义新的名字
var $j = jQuery.noConflict();
$j(document).ready(function(){
  // 单击demo时弹出对话框
  $j("#demo").click(function(){
    alert("这是jQuery的新定义");
  });
});
 
//原型框架代码
document.observe("dom:loaded", function(){
  // 点击demo1显示弹出框
  $(demo1).observe('click', function(event){
    alert("原型与jQuery一起正常运行");
  });
});

效果图如下:

jQuery无冲突模式详解

但是,如果不想为jQuery定义另一个快捷方式不想修改现有的jQuery代码或者是觉得$在jQuery中节省了不少时间而且易于使用,那么我们可以使用另一种方法来代替

我们可以将$作为参数传递给jQuery(document).ready()函数

// 为jQuery定义新的名字
jQuery.noConflict();
jQuery(document).ready(function($){
  // The dollar sign in here work as an alias to jQuery
  $("#demo").click(function(){
    alert("jQuery正在正常工作");
  });
});
 document.observe("dom:loaded", function(){
 $(demo1).observe('click', function(event){
    alert("jQuery与原型一起正常使用");
});
});

效果图:

jQuery无冲突模式详解

注意:

避免冲突的上述解决方案依赖于在加载prototype.js之后加载jQuery。但是如果在其他库之前包含jQuery,则可以在jQuery代码中使用全名,以避免冲突而不调用jQuery.noConflict()。但在这种情况下,$将具有在其他库中定义的含义

总结:以上就是本篇文章的全部内容了,希望对大家有所帮助

jQuery 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery实现简单全选框
Sep 13 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jquery插件实现代码雨特效
Apr 24 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 #jQuery
Jquery获取radio选中值实例总结
Jan 17 #jQuery
jquery获取img的src值实例介绍
Jan 16 #jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 #jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 #jQuery
jQuery实现的中英文切换功能示例
Jan 11 #jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 #jQuery
You might like
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
Php图像处理类代码分享
2012/01/19 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
python动态参数用法实例分析
2015/05/25 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
什么是python的列表推导式
2020/05/26 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
生产文员岗位职责
2014/04/05 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
卖房协议书样本
2014/10/30 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js