jquery中美元符号命名冲突问题解决
在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法。然而,当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生了冲突。下面以引入两个库文件 jquery.js和prototype.js为例来进行说明。
第一种情况:jquery.js在prototype.js之后进行引入,如: <</span> script src = " prototype.js " type = " text/javascript " />
<</span> script src = " jquery.js " type = " text/javascript " />
在这种情况下,我们在自己的js代码中如下写的话:
$( ' #msg ' ).hide();
$永远代表的是jquery中定义的$符号,也可以写成JQuery('#msg').hide();如果想要使用prototype.js中定义的$,我们在后面再介绍。
第二种情况:jquery.js在prototype.js之前进行引入,如: <</span> script src = " jquery.js " type = " text/javascript " />
<</span> script src = " prototype.js " type = " text/javascript " />
在这种情况下,我们在自己的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中的$,我们还是可以使用上面介绍的语句块的方法,如:
<</span> script src = " jquery.js " type = " text/javascript " />
<</span> script src = " prototype.js " type = " text/javascript " />
<</span> script type = " text/javascript " >
(function($){ $( ' #msg ' ).hide(); // 此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery)
</</span> script >
这种使用语句块的方法非常有用,在我们自己写jquery插件时,应该都使用这种写法,因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。
ps :jquery中特殊字符的含义:
# 指示 id
. 指示 class
* 全选
, 多选
空格 后代
> 子
~ 兄弟
+ 下一个
: 子(多功能)
() 函数式的过滤与查找
jquery中美元符号命名冲突问题解决的更多相关文章
- 解决jQuery中美元符号($)命名与别的js脚本库引用冲突方法
在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多个js库后,在另外一个js库 ...
- jquery中美元符号($)命名冲突
http://blog.csdn.net/shanshan209/article/details/6341727 在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替 ...
- $ -----JavaScript 中美元符号 $ 的作用
JavaScript 中美元符号 $ 是什么 1.首先可以用来表示变量,比如变量 var s='asdsd'或var $s='asdasd'; 2.在正则表达式中,它可以匹配结尾:/sa$/.test ...
- PostgreSQL中美元符号引用的字符串常量
虽然用于指定字符串常量的标准语法通常都很方便,但是当字符串中包含了很多单引号或反斜线时很难理解它,因为每一个都需要被双写.要在这种情形下允许可读性更好的查询,PostgreSQL提供了另一种被称为“美 ...
- Jquery中的事件命名机制
来源:aitangyong的专栏 JQuery中的bind()和unbind(),提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件.JQuery支持自定义事件,这显 ...
- Vue中美元$符号的意思与vue2.0中的$router 和 $route的区别
vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...
- Vue中美元$符号的意思
vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...
- jQuery$命名冲突问题解决方法
也许你在看此文章之前还不知道jquery有一个noConflict()东西了,它就是为了避免与其它js插件碰到相同变量的一个解决方法,利用noConflict()可以把变量存到其它指定的变量中去如,我 ...
- 【转】js程序中美元符号$是什么
$符号在php中是表示变量的特征字符, 在js中它也有很多作用, 一般我们用来命名一个函数名称,获取id的1.首先可以用来表示变量, 比如变量 var s='asdsd'或var $s='asdasd ...
随机推荐
- 深入理解JAVA集合系列三:HashMap的死循环解读
由于在公司项目中偶尔会遇到HashMap死循环造成CPU100%,重启后问题消失,隔一段时间又会反复出现.今天在这里来仔细剖析下多线程情况下HashMap所带来的问题: 1.多线程put操作后,get ...
- 第一个spring冲刺心得及感想
在这次spring中,学到了不少东西: 1.团队协作精神 2.任务细节化,任务燃尽图 3.身为sm的责任 但是在过程中也认识到了一些不足 1.对于团队协作完成一个大的项目还是不熟悉 2.个人能力的不足 ...
- Internet History, Technology and Security (Week 6)
Week 6 Technology: Transport Control Protocol (TCP) Welcome to Week 6 of IHTS. We are in our second ...
- PHP TS 和 NTS 版本选择
在PHP 开发和生产环境搭建过程中,需要安装PHP语言解析器.官方提供了2种类型的版本,线程安全(TS)版和非线程安全(NTS)版,有时后我们开发环境和实际生产的环境有所不同,因此也需要选择安装对应的 ...
- [学习]仿照cnblog 搭建 Oracle RAC 双节点 困.. 后续做不下去了..
1. 学习地址: https://blog.csdn.net/yuzifen?t=1 2. 克隆之前创建好的虚拟机: 3. 给虚拟机增加新的硬盘. 注意事项 1) 必须是厚置备的磁盘才可以. 2) 必 ...
- swusec的构想,顺便送开学福利——校园网一号多登录演示
前言: 我不是什么大牛,我只想通过我的努力,打造swu网络安全爱好者的圈子.期待你加入. swusec是什么? swusec (SouthWestUniversity SecurityTeam),西南 ...
- 【设计模式】—— 原型模式Prototype
前言:[模式总览]——————————by xingoo 模式意图 由于有些时候,需要在运行时指定对象时哪个类的实例,此时用工厂模式就有些力不从心了.通过原型模式就可以通过拷贝函数clone一个原有的 ...
- maven下载、安装、卸载以及MyEclipse配置maven
maven下载 官网下载:http://maven.apache.org/download.cgi 点击链接为官网下载页面,翻到下图所示位置,点击红框选项即可下载 maven安装 1.解压 ...
- 51nod 1208 窗上的星星 | 线段树 扫描线
51nod 1208 Stars In Your Window 题面 整点上有N颗星星,每颗星星有一个亮度.用一个平行于x轴和y轴,宽为W高为H的方框去套星星.套住的所有星星的亮度之和为S(包括边框上 ...
- uoj35 后缀排序
题目链接:http://uoj.ac/problem/35 这是一道模板题. 读入一个长度为 n 的由小写英文字母组成的字符串,请把这个字符串的所有非空后缀按字典序从小到大排序,然后按顺序输出后缀的第 ...