如何避免jquery库和其它库的冲突
1.产生原因:
默认情况下:jQuery使用 $ 作为jquery的快捷方式,如果别的js库也使用$的话,就可能产生冲突。为避免这种冲突,需要在把jquery引入页面后,使用jquery前把jquery设置为非冲突模式。
2.解决方法:
方法1:使用jquery的命名空间,当然就不会冲突了。
1 <!-- Loading jQuery before other libraries --> 2 <script src="jquery.js"></script> 3 <script src="prototype.js"></script> 4 <script> 5 6 // Use full jQuery function name to reference jQuery 7 jQuery(document).ready(function(){ 8 jQuery("div").hide(); 9 }); 10 11 // Use the $ variable as defined in prototype.js 12 window.onload = function() { 13 var mainDiv = $('main'); 14 }; 15 16 </script>
方法2:声明一个新的变量,来代替$。
1 <!-- Putting jQuery into no-conflict mode --> 2 <script src="prototype.js"></script> 3 <script src="jquery.js"></script> 4 <script> 5 // $j is now an alias to the jQuery function; 6 // creating the new alias is optional 7 var $j = jQuery.noConflict(); 8 $j(document).ready(function(){ 9 $j("div").hide(); 10 }); 11 12 // The $ variable now has the prototype meaning, 13 // which is a shortcut for document.getElementById. 14 // mainDiv below is a DOM element, not a jQuery object 15 window.onload = function(){ 16 var mainDiv = $('main'); 17 } 18 </script>
方法3:给ready()方法增加一个参数。比较常用此方法。
1 <!-- Another way to put jQuery into no-conflict mode --> 2 <script src="prototype.js"></script> 3 <script src="jquery.js"></script> 4 <script> 5 6 jQuery.noConflict(); 7 jQuery(document).ready(function($){ 8 // You can use the locally-scoped $ in here as an alias to jQuery 9 $("div").hide(); 10 }); 11 12 // The $ variable in the global scope has the prototype.js meaning 13 window.onload = function(){ 14 var mainDiv = $('main'); 15 } 16 17 </script>
如何避免jquery库和其它库的冲突相关推荐
- 最新的jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
- jQuery是一个JavaScript库极大的简化JavaScript编程
jQuery是一个JavaScript库极大的简化JavaScript编程 1.jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScr ...
- jQuery 是一个 JavaScript 库。
JQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库可以通过一行简单的标记被添加到网页中. jQuery是一个JavaScrip ...
- 加js库和css库| jQuery hover()用法 |document.onreadystatechange |get和post
**************************************************************************************************** ...
- jQuery :一个 JavaScript 库
1.jQuery 其中整个框架库只有一个对象叫做jquery,别名叫做$这个符号 jQuery 是一个 JavaScript 库 jQuery 极大地简化了 JavaScript 编程,基于java ...
- jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
- 使用JQuery的turn.js库来实现翻书效果
一淘模板(56admin.com)本篇文章给大家介绍jQuery的turn.js库,聊聊使用turn.js库实现翻书效果,希望对大家有所帮助! 今天来和大家分享下JQ的turn.js,下面我先来简单介 ...
- linux代码动态分析软件,举例分析Linux动态库和静态库
函数库分为静态库和动态库两种.创建Linux静态库和Linux动态库和使用它们在这里将以举例的形式详述一下.静态库在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库.动态库在程序编译时并不 ...
- 怎样用python画雪花_python使用turtle库与random库绘制雪花
本文实例为大家分享了python绘制雪花的具体代码,供大家参考,具体内容如下 代码非常容易理解,画着玩玩还是可以的.直接上代码 # -*- coding: utf-8 -*- "" ...
- Linux动态库和静态库比较
Linux动态库和静态库比较文件预览 文件目录树如下,如你所见,非常简单. 1. libtest/ 2. |-- lt.c 3. |-- lt.h 4. `-- test.c ...
最新文章
- 深入理解 Java 虚拟机-如何利用 VisualVM 对高并发项目进行性能分析
- Android逆向进阶——让你自由自在脱壳的热身运动(dex篇)
- 一文看懂当红Serverless:为何AWS、阿里云和腾讯云都在发力「无服务器架构」
- 快速整理excel_3小时整理了33个excel动图技巧,能快速提高工作效率,收藏备用吧...
- 常考的 21 条 Linux 命令
- Linux字符驱动中动态分配设备号与动态生成设备节点
- 第五期 RHCE远程班 12月1日开课(周末班)
- 第四范式获批工信部工业和信息化人才培养工程培训基地
- 数据合并之concat、append、merge和join
- 电子工程就业前景真的不如计算机吗?
- Object.keys方法拿到对象的key值
- 用gdb搞清楚一道union相关的面试题
- prometheus修改数据保留时间
- ubuntu系统启动qtceator时提示:Qt5.5.1/Tools/QtCreator/lib/qtcreator/plugins/libHelp.so: 无法加载库...
- python爬虫-8个最高效的Python爬虫框架,你用过几个?
- Win10+Anaconda创建新环境安装pytorch
- 【光学】基于matlab GUI干涉衍射仿真【含Matlab源码 1723期】
- ubuntu下用VirtualBox安装Windows虚拟机
- 磁盘blk_update_request: I/O error
- Android自动化测试框架Robotium