jQuery.noConflict()

jQuery.noConflict( [removeAll ] )/span> Dönen Değer : JS Nesne

Açıklama : JQuery'nin $ değişkeni üzerindeki hakimiyetini iptal eder.

jQuery.noConflict( [removeAll ] )

removeAll
Tip : Boolean
Tüm jQery değişkenlerinin global scope'tan çıkarılmasını sağlayan boolean değer (jQuery'nin kendisi dahil).

Birçok JavaScript kütüphanesi $ işaretini özel bir değişken adı olarak kullanır. JQuery'ye baktığımızda $ aslında jQuery nesnesinin alias ile adlandırılmasıdır. Yani $ kullanmadan da jQuery kullanılabilir. Eğer başka bir kütüphanenin $ değişkenini kullanmasını istiyorsanız $.noConflict() metodu ile değişkeni diğer kütüphaneye bırakabilirsiniz.

Genel kullanım şekli şöyle :

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Buradan itibaren other_lib '$' değeri geçerlidir.
</script>

Başka bir teknik olarak jQuery ready() metodu içinde $ değişkenini kullanmak isterseniz:

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
  // jQuery'nin $ kullanan kod burada olabilir.
});
// other_lib $ kullanan kod burada olabilir..
</script>

Örnekler:

$ sembolünün diğer kütüphaneye bırakılması.

jQuery.noConflict();
// jQuery ile bir şeyler yaparken
jQuery( "div p" ).hide();
// Diğer kütüphanenin $() değeri ile çalışırken
$( "content" ).style.display = "none";

$ sembolünü jQuery kodu için geri almak amacıyla anında çalışan fonksiyon tanımı kullanılması.

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // Üst satır gibi burada da '$' jQuery nesnesidir
  });
})(jQuery);
 
// Diğer kütüphane $ değeri kullanan kodlar

$ yerine başka bir takma ad kullanmak.

var j = jQuery.noConflict();
 
// jQuery kullanan kod
j( "div p" ).hide();
 
// Diğer kütüphane $() değeri kullanan kod
$( "content" ).style.display = "none";

jQuery nesnesini komple başka bir nesneye taşımak. Bu sayede 2 değişik versiyon jQuery aynı sayfada kullanılabilir.

var dom = {};
dom.query = jQuery.noConflict( true );

Sonuç :

// Yeni jQuery ile bir şeyler yap
dom.query( "div p" ).hide();
 
// Diğer kütüphane $() ile bir şeyler yap
$( "content" ).style.display = "none";
 
// Başka versiyon jQuery ile bir şeyler yap
jQuery( "div > p" ).hide();

İki değişik versiyon jQuery yüklemek (ki kesinlikle önerilmez) ve jQuery global scope değişkenlerini ilk yüklenen jQuery versiyonuna vermek.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery.noConflict demo</title>
        <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    </head>
    <body>
    
        <div id="log">
            <h3>$.noConflict(true) öncesi</h3>
        </div>
        <script src="https://code.jquery.com/jquery-1.6.2.js"></script>
        
        <script>
            var $log = $( "#log" );
            
            $log.append( "2nci yüklenen jQuery versiyon ($): " + $.fn.jquery + "<br>" );
            
            // Global scope jQuery değişkenleri ilk yüklenene devret
            // (daha yeni versiyon)
            
            jq162 = jQuery.noConflict( true );
            
            $log.append( "<h3>$.noConflict(true) sonrası</h3>" );
            $log.append( "İlk yüklenen jQuery versiyon ($): " + $.fn.jquery + "<br>" );
            $log.append( "2nci yüklenen jQuery versiyon (jq162): " + jq162.fn.jquery + "<br>" );
        </script>
    
    </body>
</html>

Demo :