jQuery noConflict() methode

Hoe gebruik je jQuery en andere frames tegelijkertijd op een pagina?

jQuery en andere JavaScript-frames

Net als u al weet, gebruikt jQuery het $-teken als afkorting voor jQuery.

Wat als andere JavaScript-frameworks ook het $-symbool gebruiken als afkorting?

Andere JavaScript-frameworks zijn: MooTools, Backbone, Sammy, Cappuccino, Knockout, JavaScript MVC, Google Web Toolkit, Google Closure, Ember, Batman en Ext JS.

Sommige andere JavaScript-frameworks gebruiken het $-symbool ook als afkorting (zoals jQuery), als je twee verschillende frameworks gebruikt die dezelfde afkorting gebruiken, kan dit leiden tot een script dat niet meer draait.

Het jQuery-team heeft hierover nagedacht en heeft de noConflict()-methode geïmplementeerd.

jQuery noConflict() methode

De noConflict()-methode geeft het controle over het $-symbool vrij, zodat andere scripts het kunnen gebruiken.

Voorbeeld

Natuurlijk, je kunt jQuery nog steeds gebruiken door de afkorting te vervangen door de volledige naam:

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery draait nog steeds!");
  );
);

Probeer het zelf

Voorbeeld

Je kunt ook je eigen afkorting maken. noConflict() retourneert een verwijzing naar jQuery, die je kunt opslaan voor later gebruik. Zie dit voorbeeld:

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery draait nog steeds!");
  );
);

Probeer het zelf

Voorbeeld

Als je jQuery-codeblokken het $-symbool gebruikt en je wilt deze shortcut niet wijzigen, kun je het $-symbool als variabele doorgeven aan de ready-methode. Op deze manier kun je binnen de functie het $-symbool gebruiken - buiten de functie moet je nog steeds "jQuery" gebruiken:

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery draait nog steeds!");
  );
);

Probeer het zelf

jQuery Kernreferentiehandleiding

Voor een volledig overzicht van de jQuery kernmethoden, bezoek onze jQuery Kernreferentiehandleiding.