当前位置:  编程技术>jquery

Jquery中$命名冲突问题详解

    来源: 互联网  发布时间:2014-09-03

    本文导语:  在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法。 然而,当引入多个js库后,在另外一个js库中也定义了$符号的话,那么在使用$符号时就发生了冲突。 下文以引入两个...

在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法。

然而,当引入多个js库后,在另外一个js库中也定义了$符号的话,那么在使用$符号时就发生了冲突。

下文以引入两个库文件jquery.js和prototype.js为例来进行说明。

第一种情况:jquery.js在prototype.js之后进行引入,例如:
 

代码示例:

在这种情况下,在js代码中添加:
 

代码示例:
$('#msg').hide();

$永远代表的是jquery中定义的$符号,也可以写成JQuery('#msg').hide();
如果想要使用prototype.js中定义的$,在后面有介绍。

第二种情况:jquery.js在prototype.js之前进行引入,例如:
 

代码示例:

在这种情况下,在自己的js代码中添加:
 

代码示例:
$('#msg').hide();

$此时代表的prototype.js中定义的$符号,如果想要调用jquery.js中的工厂选择函数功能的话,只能用全称写法JQuery('#msg').hide().

下面先介绍在第一种引入js库文件顺序的情况下,如何正确的使用不同的js库中定义的$符号。

一.使用JQuery.noConflict()
该方法的作用就是让Jquery放弃对$的所有权,将$的控制权交还给prototype.js,因为jquery.js是后引入的,所以最后拥有$控制权的是jquery。
它的返回值是JQuery。

当在代码中调用了该方法后,就不可以使用$来调用jquery的方法了,此时$就代表在prototype.js库中定义的$了。
如下:
 

代码示例:
JQuery.noConflict();
//此处不可以再写成$('#msg').hide(),此时的$代表prototype.js中定义的$符号。
JQuey('#msg').hide();
 

自此以后$就代表prototype.js中定义的$,jquery.js中的$无法再使用,只能使用jquery.js中$的全称JQuery了。

二.自定义JQuery的别名
如果觉得第一种方法中使用了JQuery.noConflict()方法以后,只能使用JQuery全称比较麻烦的话,还可以为JQuery重定义别名。

例如:
 

代码示例:
var $j=JQuery.noConflict();
$j('#msg').hide();//此处$j就代表JQuery

自此以后$就代表prototype.js中定义的$,jquey.js中的$无法再使用,只能使用$j来作为jquey.js中JQuery的别名了。

三,使用语句块,在语句块中仍然使用jquery.js中定义的$。
例如:
 

代码示例:
JQuery.noConflict();
JQuery(document).ready(function($){
$('#msg').hide();//此时在整个ready事件的方法中使用的$都是jquery.js中定义的$.
});
 

或使用如下语句块:
 

代码示例:
(function($){
.....
$('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$.
})(JQuery)
 

如果在第二种引入js库文件顺序的情况下,如何使用jquery.js中的$,我们还是可以使用上面介绍的语句块的方法,如:
 

代码示例:



(function($){
.....
$('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$.
})(JQuery)

 

这种使用语句块的方法非常有用,在自己写jquery插件时,应该都使用这种写法,因为不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。


    
 
 

您可能感兴趣的文章:

  • jQuery - css() 方法示例详解
  • jquery EasyUI导入js顺序详解
  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
  • jQuery focus和blur事件的应用详解
  • jquery操作select详解(取值,设置选中)
  • Jquery中"$(document).ready(function(){ })"函数的使用详解
  • Jquery性能优化详解
  • jQuery插件开发的两种方法及$.fn.extend的详解
  • Jquery遍历修改url请求参数的代码详解
  • jquery选择器之内容过滤选择器详解
  • JQuery动画animate的stop方法使用详解
  • jquery判断浏览器类型实例详解
  • jquery操作css样式表文件的方法详解
  • 详解jquery的substring,substr,split的用法
  • jquery中each的用法详解
  • jQuery.extend 函数的用法详解
  • jQuery之ajax删除详解
  • jquery与直接写JS的区别详解
  • jquery移除、绑定、触发元素事件使用示例详解
  • jQuery解析JSON数据实例详解
  • jQuery$命名冲突怎么办如何解决
  • 使用jQuery时Form表单元素ID和name命名大忌
  • 解决jquery中美元符号命名冲突问题
  • JQuery的$命名冲突详细解析
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 让jQuery与其他JavaScript库并存避免冲突的方法
  • 解决自定义$(id)的方法与jquery选择器$冲突的问题
  • 快速解决jQuery与其他库冲突的方法介绍
  • jQuery避免$符和其他JS库冲突的方法对比
  • JQuery的$和其它JS发生冲突的快速解决方法
  • jquery插件冲突(jquery.noconflict)解决方法分享
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples
  • 精简版的jQuery jQuery.ish
  • jQuery的OpenSocial插件 OpenSocial jQuery


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3