如何在页面上同时使用 jQuery 和其他框架?

jQuery 和其他 JavaScript 框架

正如您已经了解到的,jQuery 使用 $ 符号作为 jQuery 的简写。

如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办?

其他一些 JavaScript 框架包括:MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写(就像 jQuery),如果您在用的两种不同的框架正在使用相同的简写符号,有可能导致脚本停止运行。

jQuery 的团队考虑到了这个问题,并实现了 noConflict() 方法。

jQuery noConflict() 方法

noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。

当然,您仍然可以通过全名替代简写的方式来使用 jQuery:

$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is still working!");
});
});

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用。请看这个例子:

var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});

如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":

$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});

参考:http://www.shouce.ren/api/view/a/12044

Jquery复习(九)之noConflict()的更多相关文章

  1. jQuery 复习

    jQuery 复习 基础知识 1, window.onload $(function(){});   $(document).ready(function(){}); 只执行函数体重的最后一个方法,事 ...

  2. Jquery 复习练习(01)

    Jquery 复习练习 window.onload = function() {} == $(function() {}); 千万注意:js对象和jq对象的区别,这也是常常犯的错误 js对象举例: w ...

  3. ②jquery复习

    # jQuery 复习--by 传智前端与移动开发学院 ## 1. jQuery是什么?(了解)+ www.github.com+ jQuery 其实就是一堆的js函数,是普通的js,只不过应用广泛, ...

  4. jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理

    jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理 最近在看jquery源码分析的视频教学,希望将视频中学到的知识用博客记录下来,更希望对有同样对jquery源码有困惑 ...

  5. jQuery的扩展与noConflict

    jQuery的扩展 noConflict

  6. 前端(jQuery)(6)-- jQuery的扩展与noConflict

    1.jQuery的扩展 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. jquery复习笔记

    Jquery基础 让一个按钮灰掉 $("button").("disabled","true"); ance desc选择器(ance代表祖 ...

  8. Jquery 复习练习(02)Javascript 与jquery 互转 onclick 与click区别

    Javascript 与jquery 互转 jquery 为<script src="jquery-1.8.3.js"></script> 以checkbo ...

  9. 2016/4/21 关于jquery复习

    jQuert AJAX [1]jQuery load()方法 :是AJAX方法, 从服务器加载数据,并把数据放入被选元素中 语法: $(selector).load(URL,data,callback ...

随机推荐

  1. R_Studio(决策树算法)鸢尾花卉数据集Iris是一类多重变量分析的数据集【精】

    鸢尾花卉数据集Iris是一类多重变量分析的数据集 通过花萼长度,花萼宽度,花瓣长度,花瓣宽度4个属性预测鸢尾花卉属于(Setosa,Versicolour,Virginica)三个种类中的哪一类 针对 ...

  2. 官网Windows 10安装程序驱动下载--截止:2019.01.06版本

    说明:鉴于win7,8不可直接再下载原装iOS文件,这份共享程序包是为以后N年做的准备.如果N年后这个包还可以用,就可以省去很多麻烦. 百度网盘分享:https://pan.baidu.com/s/1 ...

  3. Spring boot之JPA

    JPA 步骤: (1)在pom.xml添加mysql,spring-data-jpa依赖 (2)在application.properties文件中配置mysql连接配置文件 (3)在applicat ...

  4. C++入门经典-例3.10-根据输入的字符输出字符串

    1:代码如下: // 3.10.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #inc ...

  5. oj.1677矩形嵌套,动态规划 ,贪心

    #include<iostream> #include<algorithm> #include<cstring> using namespace std; stru ...

  6. JavaScript 函数相关属性

    1.name 既函数名 function test(){ console.log("Haha") }; console.log(test.name)//test 2.length属 ...

  7. 关于varchar的总结

    摘自:https://www.jianshu.com/p/c3e188440c67 大家都知道用 varchar 比用 char 类型更省空间(不过性能略有下降,char查询更快),相对于定长的 ch ...

  8. 后盾网lavarel视频项目---5、淘宝镜像cnpm的原理及如何使用

    后盾网lavarel视频项目---5.淘宝镜像cnpm的原理及如何使用 一.总结 一句话总结: 原理:把npm上面的所有软件copy过来 使用:npm install -g cnpm --regist ...

  9. 浏览器端-W3School-JavaScript:JavaScript 全局对象

    ylbtech-浏览器端-W3School-JavaScript:JavaScript 全局对象 1.返回顶部 1. JavaScript 全局对象 全局属性和函数可用于所有内建的 JavaScrip ...

  10. java中常见异常总汇,附解释

    Java Exception: 1.Error 2.Runtime Exception 运行时异常3.Exception 4.throw 用户自定义异常 异常类分两大类型:Error类代表了编译和系统 ...