JQuery:通过noConflict()方法同时使用jQuery 和其他框架
jQuery - noConflict()方法
一、如何在页面上同时使用 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:
实例1:
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});
});
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.1.0.js"""></script>
<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});
});
</script>
</head> <body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>
您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用。请看这个例子:
实例2:
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.1.0.js"""></script>
<script>
var jq=$.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});
</script>
</head> <body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>
如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":
实例3:
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
("p").text("jQuery 仍然在工作!");
});
});
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.1.0.js"""></script>
<script>
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍然在工作!");
});
});
</script>
</head> <body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>
JQuery:通过noConflict()方法同时使用jQuery 和其他框架的更多相关文章
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使用 noConflict() 方法为 jQuery 变量规定新 ...
- jQuery 核心 - noConflict() 方法
1.遇到问题: 当我们写jquery时使用$,发现写的jquery全部失效: 2.发现问题: 排查后发现是noConflict()函数在作怪,因为使用noConflict()函数后,重新定义$名字为j ...
- jQuery之noConflict() 方法
jQuery 核心 - noConflict() 方法,运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库.这有助于确保jQuery不会与其他库的$对象发生冲突. noConflict() 方 ...
- jQuery 核心 - noConflict() 方法[避免冲突的方法]
定义和用法 noConflict() 方法让渡变量 $ 的 jQuery 控制权. 语法 jQuery.noConflict([removeAll]) 参数描述removeAll布尔值.指示是否允许彻 ...
- MVC异步AJAX的三种方法(JQuery的Get方法、JQuery的Post方法和微软自带的异步方法)
异步是我们在网站开发过程中必不可少的方法,MVC框架的异步方法也有很多,这里介绍三种方法: 一.JQuery的Get方法 view @{ Layout = null; } <!DOCTYPE h ...
- jQuery noConflict() 方法
如何在页面上同时使用 jQuery 和其他框架? jQuery 和其他 JavaScript 框架 正如您已经了解到的,jQuery 使用 $ 符号作为 jQuery 的简写. 如果其他 JavaSc ...
- 如何在页面上同时使用 jQuery 和其他框架?
Query 和其他 JavaScript 框架 正如您已经了解到的,jQuery 使用 $ 符号作为 jQuery 的简写. 如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办? 其他 ...
- jQuery的noConflict以及插件扩展
一.noConflict函数 JavaScript有很多插件,如果jQuery对象的$与其他插件冲突,我们可以使用noConflict()方法去掉$或者使用其他的符号代替 注:noConflict() ...
- jquery的ready方法(DOM是否加载完)详解与使用
jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:
随机推荐
- 在Windows2003上安装Active Directory Management Gateway Service
为了让基于Windows2003的域控能够被Powershell管理,必须安装KB968934,但是直接安装会报以下的错误,必须先安装NDP35SP1-KB969166.但是"因为基于 Wi ...
- ci调用application/views下的css,js,图片资源出现You don't have permission to access CodeIgniter on this server解决
原因是view文件下面有个.htaccess文件,里面写的是 Deny from all //拒绝所有请求 自己本地测试的话,就直接去掉,放到服务器就指定application/views文件 ...
- windows下Ruby开发环境搭建
一.下载 下载RubyInstaller 二.安装 按照提示安装 安装完毕后,在cmd命令窗口,输入:ruby -v 查询rbuy版本:输入gem -v 查询gem版本 三.Ruby插件(Redis插 ...
- MySQL 使用explain查看执行计划
使用explain查看执行计划, 下面是针对这两条语句进行分析,其查询结果是一样的. EXPLAIN select n.id,n.title from info n inner join info_t ...
- centos 使用pip安装mysql-python
直接使用# pip install mysql-python 命令报 EnvironmentError: mysql_config not found 错误 安装mysql-phthon 需要用的my ...
- sentinel
Computer Science An Overview _J. Glenn Brookshear _11th Edition Inherent in processing a sequential ...
- ORACLE的安装与网页版创建表空间的简单操作以及PLsql的简单操作
1.oracle的安装: 安装简单易学,在这里不做解释.下载看装包后耐心等待,注意安装目录不要有中文字符,尽量按照指定目录进行安装.安装完成后会占用有大约5g的内存. 如果要卸载oracle,需要用其 ...
- Java IO包装流如何关闭?
问题: (1)JAVA的IO流使用了装饰模式,关闭最外面的流的时候会自动调用被包装的流的close()方吗? (2)如果按顺序关闭流,是从内层流到外层流关闭还是从外层到内存关闭? 问题(1)解释: ...
- 【ZBar】ios错误ignoring file xxx missing required architecture x86_64 in file
解决方法: 1.在Project target里"Architectures"设置为:Standard (armv7,armv7s)或者 Standard (armv7,arm6 ...
- (转)常用的js设计模式
模式是解决或者避免一些问题的方案. 在JavaScript中,会用到一些常用的编码模式.下面就列出了一些常用的JavaScript编码模式,有的模式是为了解决特定的问题,有的则是帮助我们避免一些Jav ...