当前位置:  编程技术>WEB前端

解决jquery中美元符号命名冲突问题

    来源: 互联网  发布时间:2014-08-25

    本文导语:  在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库的,而这种语句块的写法却能屏蔽冲突。

ps :jquery中特殊字符的含义:
#  指示 id 
.  指示 class 
*  全选 
,  多选 
空格 后代 
>  子 
~  兄弟 
+  下一个 
:  子(多功能) 
()  函数式的过滤与查找

    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • window.onload事件覆盖掉body onload事件(window.onload和html body onload事件冲突)解决办法
  • Oracle与JSDK4.0环境变量冲突,如何解决(在线等待)?
  • 多jdk环境下安装多个tomcat冲突解决配置方法
  • 解决grails服务端口冲突的办法(grails修改端口号)
  • 如何解决linux中的声音冲突的问题
  • 如何解决C语言,函数名与宏冲突
  • 浙ICP备11055608号-3 iis7站长之家
  • asp.net ajax时用alert弹出对话框与验证控件冲突的解决方法
  • 解决自定义$(id)的方法与jquery选择器$冲突的问题
  • PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
  • MySQL中字段名和保留字冲突的解决办法
  • sqlserver数据库最大Id冲突问题解决方法之一
  • mysql 双向同步的键值冲突问题的解决方法分享
  • 解决Oracle XDB与Tomcat等的8080端口的冲突
  • Android之ScrollView嵌套ListView和GridView冲突的解决方法
  • 快速解决jQuery与其他库冲突的方法介绍
  • ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
  • JQuery的$和其它JS发生冲突的快速解决方法
  • 使用python搭建Django应用程序步骤及版本冲突问题解决
  • 创建共享库文件(.so)版本冲突问题如何解决
  • android基础教程之android的listview与edittext冲突解决方法
  • secureCRT下Linux终端汉字乱码解决方法
  • VS2005解决方案管理器中不显示解决方案节点的解决办法
  • 修改配置真正解决php文件上传大小限制问题(nginx+php)
  • 有高手能破解RAR的密码吗,至今没有找到人能解决?(先只给10分意思意思,若解决,至少给解决的人500分!说话算话!)
  • 修改配置真正解决php文件上传大小限制问题(apache+php)
  • 解决 select 挡住div的解决方法
  • sharepoint 2010中item.Update()和item.SystemUpdate 修改数据版本问题解决
  • 奇怪,怎么“已解决”问题只有4页(10/17日之后的),以前的已解决问题到哪里看?
  • andriod中UIScrollView无法正常滚动的解决方法
  • 解决!解决!求助如何安装多系统!


  • 站内导航:


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

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

    浙ICP备11055608号-3