El noConflict() es una función incorporada en jQuery y jQuery generalmente usa el signo «$» como identificador de acceso directo. Hay muchas bibliotecas de JavaScript como Angular Js, Ember, Knockout y más. Ahora, si otros marcos de JavaScript con jQuery comienzan a usar el signo «$» como acceso directo, entonces habrá un conflicto y uno de los marcos puede dejar de funcionar. Por lo tanto, se implementa el método noConflict.
Sintaxis:
$.noConflict();
Parámetros: No acepta ningún parámetro.
Valor devuelto: No devuelve nada.
¿Cómo surge el conflicto?
Ejemplo:
src="prototype.js" src="jquery.js"
En el ejemplo anterior, se usan dos bibliotecas de JavaScript en el mismo archivo y ambas usan el mismo signo «$» para seleccionar elementos. Ahora surge el conflicto y es posible que una de las bibliotecas no pueda acceder al elemento usando el signo «$».
El método noConflict() libera el bloqueo del identificador de acceso directo «$», para que otros scripts puedan usarlo.
código jQuery que produce conflicto:
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/ jquery/3.3.1/jquery.min.js"></script> <script> jq(document).ready(function() { jq("button").click(function() { jq("p").text("jQuery is still working!"); }); }); </script> </head> <body> <p style="color:green">This will show how to save reference and use them.</p> <button>Click Me.!</button> </body> </html>
Salida:
antes de hacer clic en el
botón, después de hacer clic en el botón,
aquí la salida es la misma antes y después de hacer clic en el botón y, por lo tanto, existe un conflicto.
Código jQuery para superar dicho conflicto usando la función noConflict():
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> //Here noConflict() reference is saved to a variable var jq = $.noConflict(); jq(document).ready(function() { jq("button").click(function() { jq("p").text("jQuery is still working!"); }); }); </script> </head> <body> <p style="color:green">This will show how to save reference and use them.</p> <button>Click Me.!</button> </body> </html>
Salida:
Antes de hacer clic en el botón-
Después de hacer clic en el botón-
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA