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仿微信聊天界面
May 06 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 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的ASP防火墙
2006/10/09 PHP
php foreach、while性能比较
2009/10/15 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
python实现360的字符显示界面
2014/02/21 Python
Python3处理文件中每个词的方法
2015/05/22 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
python能开发游戏吗
2020/06/11 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
信息专业个人的自我评价
2013/12/27 职场文书
写字楼租赁意向书
2014/07/30 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
React配置子路由的实现
2021/06/03 Javascript