首页 前端知识 JS中JQuery与其他库冲突问题的解决办法

JS中JQuery与其他库冲突问题的解决办法

2024-09-30 23:09:18 前端知识 前端哥 754 58 我要收藏

在JS中,当使用JQuery开发引入时,可能还会用到其他库,比如Prototype、MooTools等,这时对$符的争夺,将造成程序混乱,可能通过以下几种方式进行解决:

    一、JQuery库在其他库之前导入

将JQueryy库在其他库之前导入,并用JQuery代替$解释符,即将$(回调)用JQuery(回调)代替。如下示例

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JQuery库在其他库之前导入</title>

<!--先导入JQuery-->

       <script src="js/jquery-1.11.1.min.js"></script>

<!--后导入prototype-->

       <script src="js/prototype.js"></script>

</head>

<body>

       <p id="prototypepp">prototype</p>

       <p>JQuery将被绑定在click事件上</p>

<script>

       jQuery(function(){//在这里直接使用JQuery代替$符

              jQuery("p").click(function(){

                     alert(jQuery(this).html());

              })

       })

       $("prototypepp").style.display="none";//因JQuery已将$符让出,故在此可使用prototype库了

</script>

</body>

</html>

二、JQuery库在其他库之后导入

JQuery在其他库之后导入,可以使用JQuery.noConflick()方法将变量$的控制权让出去,然后再通过以下两种解决办法使用JQuery库。

(一)将JQuery()函数作为JQuery对象的制造工厂

    <!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JQuery库在其他库之后导入</title>

<!--先导入prototype-->

         <script src="js/prototype.js"></script>

<!--后导入JQuery-->

         <script src="js/jquery-1.11.1.min.js"></script>

</head>

<body>

          <p id="prototypepp">prototype</p>

          <p>JQuery将被绑定在click事件上</p>

<script>

         jQuery.noConflict();//将变量&符的控制权交出去

         jQuery(function(){//在这里直接使用JQuery代替$符

                jQuery("p").click(function(){

                       alert(jQuery(this).html());

                })

         })

         $("prototypepp").style.display="none";//因JQuery已将$符让出,故在此可使用prototype库了

</script>

</body>

</html>

(二)自定一个快捷方式(如$j、$m等)

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JQuery库在其他库之后导入</title>

<!--先导入prototype-->

       <script src="js/prototype.js"></script>

<!--后导入JQuery-->

       <script src="js/jquery-1.11.1.min.js"></script>

</head>

<body>

       <p id="prototypepp">prototype</p>

       <p>JQuery将被绑定在click事件上</p>

<script>

       var $m=jQuery.noConflict();//将变量&符的控制权交出去,然后自定义一个$m来代替

       $m(function(){//在这里直接使用JQuery代替$符

              $m("p").click(function(){

                     alert($m(this).html());

              })

       })

       $("prototypepp").style.display="none";//因JQuery已将$符让出,故在此可使用prototype库了

</script>

</body>

</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18826.html
标签
评论
发布的文章

JSON:API Normalizer 项目教程

2024-10-30 21:10:43

json2html 项目教程

2024-10-30 21:10:41

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!