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>

 

posted on 2017-04-20 15:02  I_noname  阅读(189)  评论(0)  编辑  收藏  举报

导航