`
gongstring
  • 浏览: 585817 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

与其他库一起使用jQuery

    博客分类:
  • Ajax
阅读更多

  概要: 
  在jQuery库,几乎所有的jQuery插件都被约束在它的命名空间里,通常,“global”对象同样被存储在jQuery命名空间里,因些不会使它与其它库(如:Prototype, MooTools, or YUI)发生冲突。 
  注意,jQuery用"$"作为它自身的默认快捷方式。 
   
  "$"的功能: 
  当jQuery与其它库被加载后,你也可以不顾它的默认快捷方式而在任意一处通过调用jQuery.noConflict()函数来指定使用jQuery库,例如: 

Java代码 
  1. <html>  
  2. <head>  
  3.   <script src="prototype.js"></script>  
  4.   <script src="jquery.js"></script>  
  5.   <script>  
  6.     jQuery.noConflict();  
  7.       
  8.     // Use jQuery via jQuery(...)  
  9.     jQuery(document).ready(function(){  
  10.       jQuery("div").hide();  
  11.     });  
  12.       
  13.     // Use Prototype with $(...), etc.  
  14.     $('someid').style.display = 'none';  
  15.   </script>  
  16. </head>  
  17. <body></body>  
  18. </html>  

  这将使$回到它的原始库里,你依然可以在其它的应用程序里使用"jQuery"。 
  另外,还有其它选项。如果你想确定jQuery不会与其它库冲突——但你又想自定义一个比较短快捷方式,你可以这么做: 
Java代码 
  1. <html>  
  2. <head>  
  3.   <script src="prototype.js"></script>  
  4.   <script src="jquery.js"></script>  
  5.   <script>  
  6.     var $j = jQuery.noConflict();  
  7.       
  8.     // Use jQuery via $j(...)  
  9.     $j(document).ready(function(){  
  10.       $j("div").hide();  
  11.     });  
  12.       
  13.     // Use Prototype with $(...), etc.  
  14.     $('someid').style.display = 'none';  
  15.   </script>  
  16. </head>  
  17. <body></body>  
  18. </html>  

  你能够自定义你自己的备用名称(如:jq、$J、awesomequery——可以是任何你想要的)。 
  如果你不想给jQuery自定义其它备用名称(你更愿意使用$而不管其它库的$方法)而又不想与其它库相冲突时,以下的解决方法最常使用的。 
Java代码 
  1. <html>  
  2. <head>  
  3.   <script src="prototype.js"></script>  
  4.   <script src="jquery.js"></script>  
  5.   <script>  
  6.     jQuery.noConflict();  
  7.       
  8.     // Put all your code in your document ready area  
  9.     jQuery(document).ready(function($){  
  10.       // Do jQuery stuff using $  
  11.       $("div").hide();  
  12.     });  
  13.       
  14.     // Use Prototype with $(...), etc.  
  15.     $('someid').style.display = 'none';  
  16.   </script>  
  17. </head>  
  18. <body></body>  
  19. </html>  

  对于你的大部分代码而言,这或许是最理想的方式,因为你可以以改变最少的代码来实现完全的兼容性。 

  参考:适合jQuery的快捷表示方式 
  如果你不喜欢总是键入完整的"jQuery",有一些可供替换的快捷方式: 
  重新指定jQuery为其它快捷方式 
Java代码 
  1. var $j = jQuery;  

  如果你想使用其它不同的库,这或许是最好的方法。 
  使用下列方法,可以指定在一块代码内使用"$": 
Java代码 
  1. function($) { // some code that uses $ })(jQuery)  

  备注:如果你使用了这种方法,在这块代码中你将不能使用"$"来调用Prototype方法,因为你选择了在这块代码中唯一使用jQuery方法。 
  使用以下方法来实现DOM ready event: 
Java代码 
  1. jQuery(function($) { // some code that uses $ });  

  备注:同样,在这个代码块里你也还有调用Prototype方法。 

  原文档http://docs.jquery.com/Using_jQuery_with_Other_Libraries 
  翻译有错漏的地方请多多指正,共同完善。

分享到:
评论

相关推荐

    jQuery-in-Action.part1.pdf

    - **与其他库一起使用jQuery**:讨论了如何让jQuery与如Prototype或Dojo这样的其他JavaScript库和平共处。 - **1.4 总结** 对第一章的内容进行了回顾,强调了学习jQuery的重要性,并为下一章做了铺垫。 #### 第...

    解决其他js和jquery冲突方法

    在使用 jQuery 开发时,可能还会遇到其他问题,例如如何正确地使用 jQuery 库,如何避免与其他库的冲突等。解决这些问题需要对 jQuery 库有深入的了解,並掌握一定的编程技巧。 在实际开发中,可能还需要使用到其他...

    jquery 教程 详细解释了jquery的使用方法

    jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 JavaScript 的DOM操作、事件处理、动画制作以及Ajax交互。这个“jQuery 教程”旨在为初学者提供详细的jQuery使用方法。 一、jQuery特点 1. 轻量级:jQuery...

    jquery-migrate

    1. **下载和引入**: 首先,你需要从官方网站或者通过标签"jquery migrate 下载"找到jQuery Migrate的最新版本,并将其与jQuery库一起引入到HTML文件中。通常,引入顺序是先引入jQuery,再引入jQuery Migrate。 ```...

    JQuery教程全集

    - **Using jQuery with Other Libraries**:探讨如何将 JQuery 与其他 JavaScript 库一起使用,以充分利用各自的优势。 #### 二、实践应用 除了理论知识,《JQuery教程全集》还包含了丰富的案例,帮助读者将所学...

    jQuery是目前使用最广泛的javascript函数库。这个是很好的学习资料

    jQuery是JavaScript领域中广泛使用的一个库,其在网页开发中占据着重要地位。根据描述,jQuery因其易用性和丰富的功能而备受青睐,尤其在前100万个网站中,有46%选择了jQuery,这足以证明其流行度。微软也将jQuery视...

    jquery 下拉刷新上拉加载

    "jquery-iscroll.zip"可能是jQuery与iScroll的集成版本,方便那些习惯使用jQuery的开发者快速实现下拉刷新和上拉加载。而"20150113053248554.zip"的文件名看起来像是日期时间戳,可能包含的是某个特定版本或者项目...

    jQuery设计思想完整篇

    全世界排名前100万的网站中,有超过46%的网站使用jQuery,这远远超过了其他库的使用率。微软公司甚至将jQuery作为其官方库,这进一步证明了jQuery在业界的权威地位。对于网页开发者而言,掌握jQuery不仅能够帮助快速...

    JQuery chm帮助文件(多个版本)

    6. **jQuery 1.8.3**: 在1.8.x系列中,jQuery继续优化了性能和API一致性,增加了对jQuery.noConflict模式的支持,提高了与其他库的共存能力。 **jQuery 3.x系列** **jQuery 3.1**: 这是jQuery 3.x的主要版本之一,...

    利用jquery扩展的验证工具库

    这里主要介绍我自己所写的利用构建在jQuery之上的工具库,该库的原文件名为jquery.brady.js,但由于是构建在jQuery之上的,所以在引入页面时,一定要先...validateFormItem: 执行表单项验证, 必须与jQuery一起结合使用

    前端开源库-jquery-browserify

    **jQuery与Browserify** 在前端开发中,jQuery是一款非常流行的JavaScript库,它的核心理念是“Write Less, Do More”。jQuery简化了DOM操作、事件处理、动画制作以及Ajax交互,极大地提高了开发效率。它通过提供一...

    jQuery.mmenu-jquery.mobile最好看的侧边菜单

    它与jQuery Mobile框架结合使用,可以创造出用户界面(UI)中最具吸引力的侧边导航元素。在本文中,我们将深入探讨这两个库的核心功能和如何将它们整合在一起,以创建一个美观且易用的移动应用或网站的侧边菜单。 *...

    assets_jquery_

    jquery_"可能指的是一个与jQuery相关的资源文件夹或者项目,通常在Web开发中,"assets"目录是用来存放静态资源的,如CSS样式表、JavaScript文件、图片等,而"jquery_"则可能表明这个目录包含了与jQuery库相关的代码...

    jquery单击单张焦点显示相册列表代码.zip

    在实现过程中,开发者可能还会使用其他jQuery插件或库来增强功能,如lightbox插件,它提供了类似的功能,但可能包含更多的定制选项和附加功能,如缩略图、滑动过渡等。 最后,对于“2152”这个文件名,它可能是源...

    jquery\jQuery基础教程.pdf

    - **`jQuery(callback)`**:通常与`$(document).ready()`一起使用,确保DOM完全加载后再执行特定的JavaScript代码。 - 示例:`$(function() { alert("DOM ready!"); })`会在DOM准备好后弹出提示框显示“DOM ready!...

    jquery 实现的等待加载页面

    开发者可以通过查看这个文件来学习如何将加载指示器与页面内容正确地结合在一起,以及如何调整其样式以匹配网站的整体设计。 `index.html`是网页的主入口文件,它包含了整个页面的结构和内容。在这个案例中,它会...

    jquery1.4库与教程

    **jQuery 1.4 库详解与教程指南** jQuery 是一个高效、易用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。jQuery 1.4版本是该库的一个重要里程碑,引入了许多优化和新功能,提升了...

    jquery3.2.1官方正版

    - **NoConflict模式**: 当与其他库一起使用时,可使用 `.noConflict()` 方法防止命名冲突。 - **链式调用**: jQuery 允许连续调用方法,如 `$().html('Hello').css('color', 'red')`。 ### 5. JSQ3-2-1 文件 在...

    jQuery ace后台菜单导航

    或者与Ajax库一起工作,动态加载子菜单内容,实现异步导航。 此外,为了适应不同需求,该插件通常具有高度可配置性,允许开发者调整菜单的显示方式、默认状态、动画速度等参数。同时,通过响应式设计,它可以自动...

    jQuery.spin.js自定义页面加载Loading动画代码

    接着,你需要下载jQuery.spin.js插件文件,并将其与jQuery库一起添加到你的项目中。 接下来,我们来看看如何使用jQuery.spin.js创建自定义的Loading动画: 1. **初始化设置**:在你的JavaScript代码中,通过$.fn....

Global site tag (gtag.js) - Google Analytics