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 Form轻松实现文件上传
May 24 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery异步提交表单实例
May 30 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
laravel orm 关联条件查询代码
2019/10/21 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
python编写简单爬虫资料汇总
2016/03/22 Python
python实现多张图片拼接成大图
2019/01/15 Python
解决Python使用列表副本的问题
2019/12/19 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
Python使用xpath实现图片爬取
2020/09/16 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
《新型玻璃》教学反思
2014/04/13 职场文书
投资合作协议书范本
2014/04/17 职场文书
学习十八大的心得体会
2014/09/12 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
大一学生个人总结
2015/02/15 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android