JQuery的noConflict()方法

Posted enternallove

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery的noConflict()方法相关的知识,希望对你有一定的参考价值。

1.onConflict()方法的作用

在页面同时使用多个js的框架。

 

2.代码示例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>无</title>
 5     <meta charset="utf-8">
 6     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 7 </script>
 8 <script type="text/javascript">
 9     $.noConflict();
10 
11     jQuery(function(){
12         jQuery("button").click(function(){
13             jQuery("p").text("jQuery仍在工作!");
14         });
15     });
16 </script>
17 
18 </head>
19 <body>
20 <p></p>
21 <button>点击</button>
22         
23 </body>
24 </html>

 

使用变量替换

<!DOCTYPE html>
<html>
<head>
    <title>无</title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
// 使用变量替换
//这里是该代码的主要内容
var jq=$.noConflict();                       
    jq(function(){
        jq("button").click(function(){
            jq("p").text("jQuery仍在工作!");
        });
    });
</script>

</head>
<body>
<p></p>
<button>点击</button>
        
</body>
</html>

 

在函数内部继续使用$

<!DOCTYPE html>
<html>
<head>
    <title>无</title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
// 如果不愿意改变$,那么可以在ready方法中设置$为变量
// jQuery(function(){})就是jQuery(document).ready(function(){})的简写
//这里是该代码的主要内容
$.noConflict();                       
    jQuery(function($){
        $("button").click(function(){
            $("p").text("jQuery仍在工作!");
        });
    });
</script>

</head>
<body>
<p></p>
<button>点击</button>
        
</body>
</html>

 

以上是关于JQuery的noConflict()方法的主要内容,如果未能解决你的问题,请参考以下文章

jQuery的noConflict以及插件扩展

jQuery 核心 - noConflict() 方法

jQuery 核心 - noConflict() 方法

jquery noConflict()方法

window.onload多个共存 - 借鉴jQuery.noConflict的思路

jQuery noConflict() 方法