jquery库与其他库冲突的问题解决-jquery.noConflict()
在使用jQuery开发的时候,可能还会使用到其他的JS库,比如Prototype,但多库共存时可能会发生冲突;若是发生冲突后,可以通过以下几种方案进行解决:
一、 jQuery库在其他库之前导入,直接使用jQuery(callback)方法如:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--先导入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!--后导入其他库 -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
二、jQuery库在其他库之后导入,使用jQuery.noConflict()方法将变量$的控制权让渡给其他库,有以下几种方式:
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
//代码二
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
//代码三
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
//代码四
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype
/*********************************************************************/
jQuery(document).ready(function(){ //一加载页面的时候就将权利让出去
jQuery.noConflict();
});
</script>
jquery库与其他库冲突的问题解决-jquery.noConflict()的更多相关文章
- jquery库与其他库(比如prototype)冲突的解决方法
前端开发很容易会遇到jQuery库与其他库冲突的场景,比如和prototype库冲突. 实际上这种冲突是因为不同的第三方JS库争夺对$标识符的控制权引起的. 解决方法,就是使用jQuery提供的jQu ...
- Jquery库及其他库之间的$命名冲突解决办法
首先我们应该知道,在jquery中,$(美元符号)就是jquery的别名,也就是说使用$和使用jquery是一样的,在很多时候我们命名空间时,正是因为这个$而产生的冲突的发生.比如说:$('#xmla ...
- jQuery与其他JS库冲突解决
实际开发中遇到JQuery与其他js库起冲突 究其原因,是它们的全局对象定义冲突了,特别是变量”$”, 可重载$函数.使用jQuery.noConflict()就可以通过重载$函数 例:项目中应用的 ...
- 锋利的jQuery-1--解决jquery库和其他库的冲突
在jquery中,$(美元符号)就是jquery的别名,也就是说使用$和使用jquery是一样的,在很多时候我们命名空间时,正是因为这 个$而产生的冲突的发生.比如说:$('#xmlas')和JQue ...
- 如何避免jQuery库和其他库的冲突
默认情形:jQuery用$作为自身的快捷方式 1. jQuery库在其他库之后导入 (1)方法:使用jQuery.noConflict()函数将变量$的控制权转移给其他库 (2)操作: (a)在js代 ...
- jQuery 引入多个库文件冲突
index.html <head><meta http-equiv="Content-Type" content="text/html; charset ...
- 配置自己的OpenGL库,glew、freeglut库编译,库冲突解决(附OpenGL Demo程序)
平台:Windows7,Visual C++ 2010 1. 引言 实验室的一个项目,用到OpenGL进行实时绘制,还用到一些其他的库,一个困扰我很久的问题就是编译时遇到的各种符号未定义,符号重定义之 ...
- 怎样让jQuery和其它js库共存
怎样让jQuery和其它js库共存 有时候需要同时使用jQuery和其它javascript,比如在joomla中默认的是motools,但很多人还是希 望能够使用jQuery,如果直接调用的话,由于 ...
- jquery中美元符号命名冲突问题解决
在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多个js库后,在另外一个js库 ...
随机推荐
- update project maven项目的时候出错
preference node "org.eclipse.wst.validation"has been remove 上面的错误是因为修改包名无法互相引入导致的,仅仅需要将Ecl ...
- Android屏幕录制
自己实现了Android的屏幕录制App. 用了MediaProjection类来作为源,MediaRecoder来捕捉,编码转换为本地视频. 效果图: 主要是这段代码开始录像: startActiv ...
- leetcode168
public class Solution { private string Convert(int k) { var s = ""; switch (k) { : s = &qu ...
- Tomcat集群---Cluster节点配置
<!-- Cluster(集群,族) 节点,如果你要配置tomcat集群,则需要使用此节点. className 表示tomcat集群时,之间相互传递信息使用那个类来实现信息之间的传递. cha ...
- Linux 登陆提示文字
/etc/issue是从本地登陆显示的信息 /etc/issue.net是从网络登陆显示的信息 /etc/motd内容由系统管理员确定,常用于通告信息,如计划关机时间的警告等 每次用户登录时,/etc ...
- Perl 变量:哈希变量
Perl 哈希变量哈希是 key/value 对的集合.Perl中哈希变量以百分号 (%) 标记开始.访问哈希元素格式:${key}. 1.创建哈希创建哈希可以通过以下两种方式: 1.为每个 key ...
- Spark之 SparkSql、DataFrame、DataSet介绍
SparkSql SparkSql是专门为spark设计的一个大数据仓库工具,就好比hive是专门为hadoop设计的一个大数据仓库工具一样. 特性: .易整合 可以将sql查询与spark应用程序进 ...
- go_函数
函数语法要点 返回值类型写在最后面 可返回多个值 函数可作为参数 没有默认参数,可选参数,只有可变参数列表(...int) package main import ( "fmt" ...
- memcache分布式的高速缓存系统
http://baike.baidu.com/link?url=8v9IdWg0i_ptrTfz0APh32-SbvNUAWvXrcZM5vuJ8BrjCR2oylrieOXJ3vkSuRAq3kQV ...
- 全新的css网站布局--Grid布局
Grid布局全新的css网站布局 CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格),items 是 grid( ...