肉渣教程

jQuery noConflict方法

上一节 下一节

其他JavaScript库与jQuery也许会有冲突

jQuery中使用$这个符号作为jQuery的简写。虽然jQuery老仙法力无边,神功盖世;但是这世上还是存在其他一些很优秀的JS前端库,诸如:Angularjs、BackBone、Knockout、Ember等。

那么如果其他的JS前端库也使用$这个符号作为简写呢?

两种不同的JS库都使用$作为简写符号,那就很可能会引起冲突,从而可能会出现一些神Bug;因此,jQuery老仙为避免冲突而设计了一种方法,就是noConflict()方法。

jQuery noConflict()方法

noConflict()方法的使用方式如下,在开始处预先声明$.noConflict();,之后就可以使用jQuery来之前经常用到的$


案例1:用jQuery代替$

$.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("反清复明");
    });
});

运行一下


案例2:用自定义变量fanqingfu_ming来代替$

var fan_qing_fu_ming = $.noConflict();
fan_qing_fu_ming(document).ready(function(){
    fan_qing_fu_ming("button").click(function(){
        fan_qing_fu_ming("p").text("反清复明");
    });
});

运行一下


案例3:在方法内部依然保持使用$

$.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
        $("p").text("反清复明");
    });
});

运行一下


jQuery noConflict方法

上一节 下一节