O que é $.noConflict

Uma função do jQuery para evitar conflitos com outras bibliotecas que usem "$" como variável.

... incluindo o próprio jQuery.

Como funciona?

Quando o jQuery é carregado, ele verifica se "$" já está definido e guarda internamente.

Chamando $.noConflict() restaura o "$" original. "$" deixa de ser um alías para "jQuery".

Como Usar?

... mas antes...


function getVersion(variable) {
    try {
        return variable.fn.jquery;
    } catch (e) {
        return e.toString();
    }
}
                        

$.noConflict();
  • Se havia alguma biblioteca usando "$", ela volta a ser usada com "$".
  • jQuery deixa de ser "$".
  • jQuery ainda está disponível como "jQuery".

$.fn.jquery:

jQuery.fn.jquery: 


<p class='first'>
    $.fn.jquery: <span id='ex-1-1'></span>
</p>

<p class='second'>
    jQuery.fn.jquery: <span id='ex-1-2'></span>
</p>

<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script>$.noConflict();</script>
<script>
    document.getElementById('ex-1-1').innerHTML = getVersion($);
    document.getElementById('ex-1-2').innerHTML = getVersion(jQuery);
</script>
  • Se havia alguma biblioteca usando "$", ela volta a ser usada com "$".
  • jQuery deixa de ser "$".
  • jQuery ainda está disponível como "jQuery" e "$novojQuery".

$.fn.jquery:

jquery.fn.jquery:

novojQuery.fn.jquery: 


<p class='first'>$.fn.jquery: <span id='ex-2-1'></span></p>
<p class='second'>jquery.fn.jquery: <span id='ex-2-2'></span></p>
<p class='third'>novojQuery.fn.jquery: <span id='ex-2-3'></span></p>

<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
<script>
    var novojQuery = $.noConflict();
    document.getElementById('ex-2-1').innerHTML = getVersion($);
    document.getElementById('ex-2-2').innerHTML = getVersion(jQuery);
    document.getElementById('ex-2-3').innerHTML = getVersion(novojQuery);
</script>
  • Na verdade, cria uma função anônima que recebe o parâmetro "$" e chama esta função passando o jQuery.
  • O resultado é que, dentro da função, o jQuery parece ser o mesmo velho jQuery de sempre.

$.fn.jquery:

function ($): 


<p class='first'>$.fn.jquery: <span id='ex-3-1'></span></p>
<p class='second'>function ($): <span id='ex-3-2'></span></p>

<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
<script>
    $.noConflict();
    (function ($) {
        document.getElementById('ex-3-2').innerHTML = getVersion($);
    })(jQuery);
    document.getElementById('ex-3-1').innerHTML = getVersion($);
</script>
                        

<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
<script>
   $.noConflict();
   jQuery(document).ready(function ($) {
      // jQuery está disponível aqui como "$";
   });
   // outra biblioteca disponível como "$" aqui.
</script>
  • jQuery aparece como "$" apenas dentro da função.