Как вы уже знаете, jQuery использует знак доллара ($) в качестве ярлыка или псевдонима для jQuery. Таким образом, если вы используете другую библиотеку JavaScript, которая также использует знак $ в качестве ярлыка, вместе с библиотекой jQuery на той же странице, могут возникнуть конфликты. К счастью, jQuery предоставляет специальный метод noConflict() для решения такой ситуации.

jQuery-метод noConflict()

Метод jQuery.noConflict() возвращает управление идентификатором $ обратно в другие библиотеки. Код jQuery в следующем примере (строка № 10) переведет jQuery в режим без конфликтов сразу после его загрузки на страницу и назначит новую переменную с именем $j вместо $, чтобы избежать конфликта.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/prototype.js"></script>
<script src="js/jquery.js"></script>
<script>
// Опредялем новую переменную для jQuery
var $j = jQuery.noConflict();
$j(document).ready(function(){
    // Отображаем предупреждающее сообщение при нажатии на элемент с id foo
    $j("#foo").click(function(){
        alert("JQuery хорошо работает с Prototype.");
    });
});
 
// Некоторый код фреймворка Prototype 
document.observe("dom:loaded", function(){
    // Отображаем предупреждающее сообщение при нажатии на элемент с id bar
    $("bar").observe("click", function(event){
        alert("Prototype хорошо работает с JQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Запустить код jQuery</button>
    <button type="button" id="bar">Запустить код Prototype</button>
</body> 
</html>

Многие библиотеки JavaScript используют $ как имя функции или переменной, как jQuery. Вот некоторые из них: mootools, prototype, zepto и т.д.

Однако, если вы не хотите определять другую переменную для jQuery, например это может быть связано с тем, что вы не хотите изменять существующий код jQuery или вам действительно нравится использовать $, потому что это экономит время и просто в использовании, тогда вы можете принять другой подход — просто передайте $ в качестве аргумента вашей функции jQuery(document).ready(), например:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/prototype.js"></script>
<script src="js/jquery.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
    // Знак доллара здесь работает как псевдоним jQuery
    $("#foo").click(function(){
        alert("JQuery хорошо работает с Prototype.");
    });
});
 
// Некоторый код фреймворка Prototype 
document.observe("dom:loaded", function(){
    // Знак доллара в документе относится к Prototype
    $("bar").observe("click", function(event){
        alert("Prototype хорошо работает с JQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Запустить код jQuery</button>
    <button type="button" id="bar">Запустить код Prototype</button>
</body> 
</html>

Подключение jQuery перед другими библиотеками

Приведенные выше решения, позволяющие избежать конфликтов, основаны на загрузке jQuery после загрузки prototype.js. Однако, если вы включите jQuery перед другими библиотеками, вы можете использовать полное имя jQuery в своем коде, чтобы избежать конфликтов без вызова jQuery.noConflict(). Но в этом случае $ будет иметь значение, определенное в другой библиотеке.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/jquery.js"></script>
<script src="js/prototype.js"></script>
<script>
jQuery(document).ready(function($){
    // Используем полное имя функции jQuery для ссылки на jQuery
    jQuery("#foo").click(function(){
        alert("JQuery хорошо работает с Prototype.");
    });
});
 
// Некоторый код фреймворка Prototype 
document.observe("dom:loaded", function(){
    // Знак доллара здесь будет иметь значение, определенное в Prototype
    $("bar").observe("click", function(event){
        alert("Prototype хорошо работает с JQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Запустить код jQuery</button>
    <button type="button" id="bar">Запустить код Prototype</button>
</body> 
</html>

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.