Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 682|回复: 0

jQuery和Prototype的兼容性和冲突的多种解决方法

[复制链接]
  • TA的每日心情
    奋斗
    2024-11-24 15:47
  • 签到天数: 804 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726782
    发表于 2021-7-22 11:37:20 | 显示全部楼层 |阅读模式

    有两种情况:

    1.先加载Prototype,再加载jQuery。

    2.先加载jQuery,再加载Prototype。

     

    针对情况1:先加载Prototype,再加载jQuery。
    方法一:jQuery 库和它的所有插件都是在jQuery名字空间内的,包括全局变量也是保存在jQuery 名字空间内的。
    使用jQuery.noConflict();主要作用是在任何时候,只要在jQuery加载后就可以调用,将$符号的使用权返回给其它的js库,jQuery在创建它自己的名字空间时就将其它库的$保存在自己的一个变量当中。

    <html>  
    <head>  
    <script src="prototype.js"></script>  
    <script src="jquery.js"></script>  
    <script type="text/javascript" >  
    //各个js库之间的主要冲突在于$的冲突,这个方法是用来处理这个问题的  
    jQuery.noConflict();  
    
    //原本使用jQuery代码部分的$ 用jQuery替代  
    jQuery(document).ready(function (){  
    jQuery("div").hide();  
    });  
    
    // Use Prototype with $(...), etc.  
    $('proto').hide();  
    </script>  
    </head>  
    <body></body>  
    </html>


    方法二:如果你仍然想使用类似于$这样比较简短的字符,你可以将jQuery.noConflict()的返回值赋值给某个变量。这个变量就是jQuery的新缩写了,当然你可以使用$以外的任意字符串,比如:

    <html>  
    <head>  
    <script src="prototype.js"></script>  
    <script src="jquery.js"></script>  
    <script type="text/javascript" >  
    //$j就相当于jQuery,名称你可以自主定义  
    var  $j = jQuery.noConflict();  
     
    // Use jQuery via $j(...)  
    $j(document).ready(function (){  
    $j("div").hide();  
    });  
     
    // Use Prototype with $(...), etc.  
    $('proto').hide();  
    </script>  
    </head>  
    <body></body>  
    </html>

     

    方法三:如果你还是想使用$,而不想使用别的字符,也是可以的。而且通常程序员都比较喜欢这样做,因为这样做写好的代码几乎都不用替换原来的$符号。那就是利用名字空间的概念就所有的jQuery代码封装在document的ready事件名字空间范围内,如:jQuery(document).ready(这里填入jQuery代码)

    <html>  
    <head>  
    <script src="prototype.js"></script>  
    <script src="jquery.js"></script>  
    <script type="text/javascript" >  
    jQuery.noConflict();  
     
    // Put all your code in your document ready area  
    jQuery(document).ready(function ($){  
    // 这样你可以在这个范围内随意使用$而不用担心冲突  
    $("div" ).hide();  
    });  
     
    // Use Prototype with $(...), etc.  
    $('proto' ).hide();  
    </script>  
    </head>  
    <body></body>  
    </html>


    针对第二种情况:先加载jQuery,再加载Prototype。
    方法四:按照这样的顺序加载,就不存在其它js库的$符号被jQuery占用的问题。所以对其它的js库的代码可以不作任何修改,照常使用$,而对 jQuery可以使用jQuery来替代$。如:

    <html>  
    <head>  
    <script src="jquery.js"></script>  
    <script src="prototype.js"></script>  
    <script type="text/javascript" >  
    // 使用 jQuery 用 jQuery(...)  
    jQuery(document).ready(function (){  
    jQuery("div" ).hide();  
    });  
     
    // 使用 Prototype 时,用 $(...),  
    $('someid' ).hide();  
    </script>  
    </head>  
    <body></body>  
    </html>


    或者你不想写jQuery这么长的字符,你可以通过另外一种方法:
    方法五:

    var  $j = jQuery;

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-12-22 13:05 , Processed in 0.061157 second(s), 30 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表