jQuery中冲突避免

jQuery中需要用到$符号,如果其他js库也定义了$符号,那么就会造成冲突,会影响到js代码的正常执行,下面有几个不错的解决方法

1.引入noConflict(),将$替换为其他符号

1
2 var $j = jQuery.noConflict();
3 $j(document).ready(function(){
4 $j("#btn1").click(function(){
5 alert("Text: " + $j("#test").text());
6 });
7 }); 

缺点:引入了这段代码后,不仅是当前的js文件,该html引用的所有js中,如果有用到jquery中的$,都得用$j来代替之前的$

方案2: 
ready函数是jquery的入口函数,可以 
将$(document).ready(function(){ 
替换成 
jQuery( document ).ready(function( $){} 
缺点:只对ready嵌套内的代码有效,对嵌套外的代码是无效的。如果你所有的逻辑,都在写ready函数中,那没问题。但我们一般都会在ready函数之外写一些子函数,然后ready函数再去调用这些函数。这个方案对这些函数是无效的,因此这套方案有局限性。

方案3(推荐,特别是开发js插件时):

给js内容包上一个函数

jQuery(function($){
//你的js代码放在这里(例如第二个方案提到的ready函数和子函数)
//如果是js文件,其实就是在文件头部和尾部各加一行代码
} 

 (function($) {
//你的js代码
})(jQuery); 

这个方法,没有上面两个方案的缺点,只会影响到被包在jQuery(function($){}中的代码。 
不会影响到其他js代码,这一点很重要。试想一下,假如你写了一个js公共组件,该组件需要用到jquery,为了提高鲁棒性,需考虑$符号冲突问题。如果使用方案1,那么别人在使用时,还得遵守你的约定,把自己js代码中的$改成$,而如果使用方案3,既能避免$冲突对该组件的影响,又无需要求使用公共组件的人修改自己的代码。

文章原址:http://www.jb51.net/article/47028.htm

时间: 2025-01-02 13:59:19

jQuery中冲突避免的相关文章

ECSHOP中transport.js和jquery的冲突的简单解决办法

ECSHOP中transport.js和jquery的冲突的简单解决办法 一流资源网近日在ECSHOP网站加入了几个JS特效代码,在谷歌.火狐下正常,在各版本IE下都不常,左思不得其解. 最后才知道原来是"ECSHOP中transport.js和jquery的冲突" 因为通用头部文件中引用了 1 {insert_scripts files='transport.js,utils.js'} transport.js与jquery有冲突.原因不多讲.在网上找到一个最简单解决办法: 成功了,

jQuery中 $ 符号的冲突问题

jQuery中 $ 符号的冲突问题是常见问题之一. 在jQuery中,$是jQuery的别名,为了书写方便,我们更习惯用$('#id')这一类的方式来书写代码.当同一页面引用了jQuery多个版本或者jQuery与某些其他js库产生冲突,控制台就会报错. 同一个页面多个版本冲突解决办法 你可能会问,为什么在一个页面上会引用多个版本的jQuery,只引用一个不就好了吗? 答案是:不行.一般要用到两个(或以上)版本的jQuery库的原因是:现有的网站已经用了旧版本的jQuery以及相关插件,直接将j

谈谈 jQuery 中的防冲突(noConflict)机制

许多的 JS 框架类库都选择使用 $ 符号作为函数或变量名,jQuery 是其中最为典型的一个.在 jQuery 中,$ 符号只是 window.jQuery 对象的一个引用,因此即使 $ 被删除,window.jQuery 依然是保证整个类库完整性的坚强后盾.jQuery 的 API 设计充分考虑了多框架之间的引用冲突,我们可以使用 jQuery.noConflict 方法来轻松实现控制权的移交. jQuery.noConflict 方法包含一个可选的布尔参数[1],用以决定移交 $ 引用的同

jQuery中noConflict()机制的冲突解决方法

许多的JS框架类库都选择使用$符号作为函数或变量名,而且在实际的项目开发中,使用模板语言的话有可能"$"符号即为该模板语言的关键字.例如Veclocity模板语言,$是关键字.与jQuery一起使用可能会存在冲突(页面中直接写jq代码,引入的js文件不存在该问题). jQuery是使用$符号作为函数或变量名最为典型的一个.在jQuery中,$符号只是window.jQuery对象的一个引用,因此即使$被删除,jQuery依然能保证整个类库的完整性. jQuery的设计充分考虑了多框架之

asp.net中ScriptManager自带Ajax与jQuery事件冲突

问题引诉:最近在使用asp.net自带的无刷新提交ScriptManager时,发现一个问题,就是和我自己用jQuery写的一些事件函数和局部刷新相冲突.通过在网上收索,发现很多人都遇到这个同样的问题.最终还是找到的解决的办法,在此我想将其解决的办法分享出来供大家参考. 问题解决办法: 方法1.两者实现都能够实现页面的无刷新效果,所以可以保留其中的一种即可: 方法2.如果必须要两者混合应用,那么在用jQuery绑定事件是就要注意一些了 我们平时在jQuery中绑定事件最常用的方式有以下三种:以c

jQuery库冲突

jQuery库冲突解决办法 一次面试中面试官问到jQuery和别的库冲突怎么解决?虽然以前看过,但是我已经不记得了. 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名字,比如传入jq,那我就挂载在window.jq上. var myControl="jq"; (function(name){ var $=name ||"$"; //name存在$的值就是name的值,不存在或为null,$的值为字

jQuery中的选择器

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html PUBLIC "-//W3C//DTD

JQuery中的$符号的作用----网摘

jQuery中的“$” 在jQuery中,最频繁使用的符号“$”.$提供了各种各样丰富的功能, 包括选择页面中的一个或是一类元素,作为功能函数的前缀,window.onload的 完善,创建页面的DOM节点等... 1.选择器 在CSS中选择器的作用是选择页面中某一类(类别选择器)元素或者某一个元素(ID选择器) ,而jQuery中的"$"作为选择器,同样是选择某一类或某一类元素,只不过jQuery提供了 更多更全面的选择方式.并且为用户处理了浏览器的兼容问题 CSS可以通过如下代码来

Jquery中$(document).ready() 和 JavaScript中的window.onload方法 比较

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个(最后一个)