jQuery 核心 - noConflict() 方法[避免冲突的方法]
定义和用法
noConflict() 方法让渡变量 $ 的 jQuery 控制权。
语法
jQuery.noConflict([removeAll])
参数描述removeAll布尔值。指示是否允许彻底将 jQuery 变量还原。
说明
许多 JavaScript 库使用 $ 作为函数或变量名,jQuery 也一样。在 jQuery 中,$ 仅仅是 jQuery 的别名,因此即使不使用 $ 也能保证所有功能性。假如我们需要使用 jQuery 之外的另一 JavaScript 库,我们可以通过调用 $.noConflict() 向该库返回控制权:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
$.noConflict();
// 使用另一个库的 $ 的代码
</script>
可以与 .ready() 方法结合起来使用,来为 jQuery 对象起别名,这项技术非常有效:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// 使用 jQuery $ 的代码
});
// 使用其他库的 $ 的代码
</script>
此外,通过向该方法传递参数 true,我们可以将 $ 和 jQuery 的控制权都交还给原来的库。用之前请考虑清楚!
这是相对于简单的 noConflict 方法更极端的版本,因为这将完全重新定义 jQuery。这通常用于一种极端的情况,比如你想要将 jQuery 嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。
实例
例子 1
将 $ 引用的对象映射回原始的对象:
jQuery.noConflict(); jQuery("div p").hide(); // 使用 jQuery $("content").style.display = "none"; // 使用其他库的 $()
例子 2
恢复使用别名 $,然后创建并执行一个函数,在这个函数的作用域中仍然将 $ 作为 jQuery 的别名来使用。在这个函数中,原来的 $ 对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效:
jQuery.noConflict(); (function($) {
$(function() {
// 使用 $ 作为 jQuery 别名的代码
});
})(jQuery);... // 其他用 $ 作为别名的库的代码
例子 3
可以将 jQuery.noConflict() 与简写的 ready 结合,使代码更紧凑:
jQuery.noConflict()(function(){
// 使用 jQuery 的代码
});
... // 其他库使用 $ 做别名的代码
例子 4
创建一个新的别名用以在接下来的库中使用 jQuery 对象:
var j = jQuery.noConflict(); j("div p").hide(); // 基于 jQuery 的代码 $("content").style.display = "none"; // 基于其他库的 $() 代码
例子 5
完全将 jQuery 移到一个新的命名空间:
var dom = {};
dom.query = jQuery.noConflict(true);
结果:
dom.query("div p").hide(); // 新 jQuery 的代码 $("content").style.display = "none"; // 另一个库 $() 的代码 jQuery("div > p").hide(); // 另一个版本 jQuery 的代码
jQuery 核心 - noConflict() 方法[避免冲突的方法]的更多相关文章
- 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 --- 第一期 (初识jQuery, JQuery核心函数和工具方法)
个人学习笔记 初识jQuery 1.我的第一个JQuery <!DOCTYPE html> <html lang="en"> <head> & ...
- Jquery()核心函数的7个重载方法
(1) jquery() 该函数返回一个空的jQuery对象.在jQuery1.4以后的版本中,改函数返回一个空的jQuery对象.在之后的版本中,该函数会返回一个包含document节点的对象. ( ...
- Jq_DOM元素方法跟JQuery 核心函数跟JQuery 事件方法
JQuery DOM 元素 函数 描述 .get() 从队列中删除所有未运行的项目. .ind ...
- jQuery核心之那些有效的方法
jQuery提供了一些很有效的方法,这些方法都在$命名空间之下,对常规的编码很有帮助,完整的api详见:utilities documentation on api.jquery.com $.trim ...
- jQuery库(noConflict)冲突解决机制
很多JSFramework库选择使用$符号作为一个函数或变量名,而在实际的项目开发,模板语言,则有可能"$"符号是模板语言keyword.例如Veclocity模板语言,$它是ke ...
- JQuery中serialize()、serializeArray()和param()方法示例介绍
在项目中做form表单提交的时候,如果参数比较少,可以通过jquery一个个取得,但是当 form表参数很多的情况下,还是一一取得的话无疑是加大了工作量,那我们需要咱们获取到表单的所有参数呢,幸好,j ...
随机推荐
- Direct Shot Correspondence Matching
一篇BMVC18的论文,关于semantic keypoints matching.dense matching的工作,感觉比纯patch matching有意思,记录一下. 1. 摘要 提出一种针对 ...
- arx对正在操作的文件进行保存
//对正在操作的文件进行保存 STDMETHODIMP CTHDatabase::Save(void) { // TODO: 在此添加实现代码 Acad::ErrorStatus es ; try{ ...
- struts2框架学习之第一天
day01 Struts2概述 1 什么是框架 试想一下,人与人之间不同之处多,还是相同之处多呢?当然是相同之处多,不同之处少!人都有头,而且头都在脖子上面! 软件之间也是相同之处多,不同之处少,框架 ...
- 微信小程序-下拉松开弹不回去顶部留一段空白
解决办法: 空白的出现有可能是多次触发下拉事件导致请求过多导致页面反应延迟. 在 onPullDownRefresh 事件里加setTimeout事件延迟下下拉刷新的事件. /** * 页面相关事件处 ...
- AngularJs 刷新页面
第一种: AngularJs 刷新页面可采用下面的方式:首先先在控制器中注册$window,然后定义函数$scope.reloadRoute,在需要刷新页面的地方调用函数$scope.reloadRo ...
- web-font 个人学习小总结
个人觉得 web-font 分为两种: 第一种就是真正文本字体,客户端没有安装的字体通过远程加载字体来实现特殊字体提高用户体验: icodon.com : http://icodon.com/goo ...
- mysql线上数据库单表超过200G的处理
tbl_user_data占用了大量磁盘空间,数据表占用大概200G,索引30G左右,查询非常慢,影响业务的支持进行现在需要对它进行清理 临时解决方案是将原表重命名,新建一个和这个表相同的空表来替换( ...
- python学习第40天
# 多表查询 # 索引的基础理论 + 数据准备
- JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法
### 之前用了js自带的剪贴板对象clipboardData 对象以为就可以实现粘贴复制,但是种只支持IE的. 就找了jq的一个插件Zclip,但是网上的说法是利用了flesh来实现的,我用了之后可 ...
- layui 常见的表单元素
第一步:引用文件 效果图(日期.文件上传在下面): <form class="layui-form" action=""> <div clas ...