JQuery官方学习资料(译):避免与其他库的冲突
- 避免与其他库的冲突
- 设置无冲突模式
<!-- 无冲突模式 --> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> var $j = jQuery.noConflict(); // $j是jQuery方法的别名;创建新的别名是可选的。 $j(document).ready(function() { $j( "div" ).hide(); }); // $的意义是document.getElementById()的快捷方式. mainDiv是一个DOM元素,而不是一个jQuery对象。 window.onload = function() { var mainDiv = $( "main" ); } </script> |
<!-- 无冲突模式的另一种设置方式 --> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); jQuery( document ).ready(function( $ ) { // 你可以在这里使用$作为JQuery的别名。 $( "div" ).hide(); }); // $在全局范围内是有prototype.js意义的. window.onload = function(){ var mainDiv = $( "main" ); } </script> |
考虑到用更少的代码以实现完全的兼容,这可能是最理想的解决方案。
- 引用JQuery在其他库之前
<!-- 在其他库之前加载JQuery --> <script src="jquery.js"></script> <script src="prototype.js"></script> <script> // 使用完整的JQuery名称来进行操作。 jQuery( document ).ready(function() { jQuery( "div" ).hide(); }); // 使用$作为prototype.js的定义 window.onload = function() { var mainDiv = $( "main" ); }; </script> |
- 引用JQuery函数的多种方式
- 创建一个新别名
<script src="prototype.js"></script> <script src="jquery.js"></script> <script> var $jq = jQuery.noConflict(); </script> |
- 使用立即调用的函数表达式
<!-- 在立即调用的函数中使用$ --> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); (function( $ ) { // 你可以在这里使用$。 })( jQuery ); </script> |
请注意,如果你使用这个技巧,你将不能够立即调用函数来使用其内部的prototype.js的方法。
- 使用参数传递给jQuery( document ).ready()函数
<script src="jquery.js"></script> <script src="prototype.js"></script> <script> jQuery(document).ready(function( $ ) { // 你可以在这里使用$。 }); </script> |
或者使用更简洁的语法:
<script src="jquery.js"></script> <script src="prototype.js"></script> <script> jQuery(function($){ // 你可以在这里使用$。 }); </script> |
JQuery官方学习资料(译):避免与其他库的冲突的更多相关文章
- JQuery官方学习资料(译):使用JQuery的.index()方法
.index()是一个JQuery对象方法,一般用于搜索JQuery对象上一个给定的元素.该方法有四种不同的函数签名,接下来将讲解这四种函数签名的具体用法. 无参数的.index() < ...
- JQuery官方学习资料(译):遍历JQuery对象和非JQuery对象
JQuery提供了一个对象遍历的Utility方法$.each()和一个JQuery集合遍历方法.each(). $.each() $.each()是一个通用的方法用来遍历对象和数组, ...
- JQuery官方学习资料(译):Utility方法
JQuery提供了一些utility方法在$命名空间里,这些方法对完成常规的编程任务非常有帮助. $.trim() 删除前后部的空白内容. // 返回 "lots of ex ...
- JQuery官方学习资料(译):Data方法
你可能经常会想需要通过元素来存储一些数据.在JavaScript中你可能需要给元素添加属性来实现这样的功能,但是在某些浏览器中,你可能还需要处理因此造成的内存泄露问题.JQuery提供了一个简 ...
- JQuery官方学习资料(译):CSS
JQuery提供了一个处理方法,可以获取或设置元素的CSS属性. // 获取 CSS 属性 $( "h1" ).css( "fontSize" ); / ...
- JQuery官方学习资料(译):遍历
一旦你通过JQuery创建了选择器,你就可以对此进行更为深入的遍历.遍历可以分为三个基本组成部分,父节点.子节点和兄弟节点.JQuery为这些部分提供了许多丰富易用的方法. <div c ...
- JQuery官方学习资料(译):JQuery对象
每当创建一个新的元素(或者选择一个已经存在的元素)时,JQuery将返回一个元素的集合.大部分的开发人员新接触JQuery的时候,都把这个集合当做数组.这个集合中的DOM元素有从零开始的索引, ...
- JQuery官方学习资料(译):操作元素
获取和设置元素的信息 有很多种方式可以改变现有的元素,最常见的是改变HTML内容或者元素的属性.JQuery提供了简单的夸浏览器的方法来帮助你实现元素信息的获取和设置. .html():获 ...
- JQuery官方学习资料(译):选择器的运作
Getters 和 Setters JQuery的方法重载,方法设置和获取值一般使用相同名称的方法,当一个方法用来设置一个值的时候称之为Setter,当一个方法用来获取一个值的时候称之为Get ...
随机推荐
- Spring Boot中使用Spring Security进行安全控制转载来自翟永超
我们在编写Web应用时,经常需要对页面做一些安全控制,比如:对于没有访问权限的用户需要转到登录表单页面.要实现访问控制的方法多种多样,可以通过Aop.拦截器实现,也可以通过框架实现(比如:Apache ...
- jquery向Django后台发送数组
在$.ajax中加入 traditional:true, //加上此项可以传数组 后端用 array = request.POST.getlist('ids') #django接收数组 来接收数组
- 超实用的 Nginx 极简教程,覆盖了常用场景
概述 什么是 Nginx? Nginx (engine x) 是一款轻量级的 Web 服务器 .反向代理服务器及电子邮件(IMAP/POP3)代理服务器. 什么是反向代理? 反向代理(Reverse ...
- LeetCode题解33.Search in Rotated Sorted Array
33. Search in Rotated Sorted Array Suppose an array sorted in ascending order is rotated at some piv ...
- map,set和weakmap,weakset
概述 set和map属于es6的内容,今天在看书的时候遇到了,所以好好的总结一下,供以后开发时参考,相信对其他人也有用. 参考资料: mdn Keyed collections Map和WeakMap ...
- [Swift]错误提示:Method does not override any method from its superclass
问题原因:方法名称书写错误! ViewController 生命周期 // 加载视图时会调用该方法 override func loadView() { super.loadView() print( ...
- JavaScript 对象(上)
简述: 1.是 JavaScript 的基本类型 2.是一种复合值,可通过名字访问这些值 3.可看作属性的无序集合,每个属性都是一个名/值对(属性名是字符串或标识符) 4.可以从一个称为原型的对象继承 ...
- Java NIO工作机制简介
前言 本博客只简单介绍NIO的原理实现和基本工作流程 I/O和NIO的本质区别 NIO将填充和提取缓冲区的I/O操作转移到了操作系统 I/O 以流的方式处理数据,而 NIO 以缓冲区的方式处理数据:I ...
- dpkg: 处理软件包 qjackctl (--configure)时出错解决方法
第一步:备份 $ sudo mv /var/lib/dpkg/info /var/lib/dpkg/info.bk 第二步:新建 $ sudo mkdir /var/lib/dpkg/info 第三步 ...
- KNN算法基本实例
KNN算法是机器学习领域中一个最基本的经典算法.它属于无监督学习领域的算法并且在模式识别,数据挖掘和特征提取领域有着广泛的应用. 给定一些预处理数据,通过一个属性把这些分类坐标分成不同的组.这就是KN ...