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 ...
随机推荐
- Android 目录结构
Android目录结构中,values目录下对应的是应用程序所需要的数据,网上看到了一个包含values-v11等values-*的写法. 是为了进行分辨率的自适应????????? 因为还没有涉及到 ...
- shell 指令 摘录
作者: learner811 本文摘自网络 权限:用户 读写 ugoa rwx * useradd userdel groupadd groupmod usermod su sudo wh ...
- NeuralEnhance: 提高图像分辨率的深度学习模型
NeuralEnhance是使用深度学习训练的提高图像分辨率的模型,使用Python开发,项目地址:https://github.com/alexjc/neural-enhance. 貌似很多电影都有 ...
- 基于JVM原理、JMM模型和CPU缓存模型深入理解Java并发编程
许多以Java多线程开发为主题的技术书籍,都会把对Java虚拟机和Java内存模型的讲解,作为讲授Java并发编程开发的主要内容,有的还深入到计算机系统的内存.CPU.缓存等予以说明.实际上,在实际的 ...
- static变量 方法 类 和final
static变量:声明为static的变量实质上就是全局变量.当声明一个对象时,并不产生static变量的拷贝,而是该类所有的实例变量共用同一个static变量.静态变量与静态方法类似.所有此类实例共 ...
- Go 示例测试实现原理剖析
简介 示例测试相对于单元测试和性能测试来说,其实现机制比较简单.它没有复杂的数据结构,也不需要额外的流程控制,其核心工作原理在于收集测试过程中的打印日志,然后与期望字符串做比较,最后得出是否一致的报告 ...
- 使用apt-mirror搭建debian本地仓库
apt-mirror能够将官方镜像下载到本地,并保证目录结构与其一致,但是不能对镜像仓库进行修改.如果想要修改镜像仓库,需要使用reprepro. 1.安装apt-mirror # aptitude ...
- 解题:POI 2009 Fire Extinguishers
题面 洛谷数据非常水,建议去bzoj 我第一眼一看这不是那个POI2011的升级版吗(明明这个是2009年的,应该说那个是这个的弱化版,果然思想差不多. 因为$k$很小,可以考虑每个间隔距离来转移.我 ...
- BZOJ 3505 [Cqoi2014]数三角形
3505: [Cqoi2014]数三角形 Description 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个.下图为4x4的网格上的一个三角形.注意三角形的三点不能共线. Input ...
- MVC中数据验证
http://www.studyofnet.com/news/339.html http://www.cnblogs.com/kissdodog/archive/2013/05/04/3060278. ...