В этом посте мы увидим, что такое jQuery без конфликтов и какова важность jQuery без конфликтов. Мы также узнаем, как мы можем использовать разные версии jQuery на одной странице в соответствии с вашими потребностями. jQuery no-конфликта — это опция, предоставленная jQuery для преодоления конфликтов между различными фреймворками или библиотеками js. Когда мы используем бесконфликтный режим jQuery, мы заменяем $ на новую переменную и присваиваем jQuery. Здесь, в этом посте, мы подробно расскажем об этой функции, а также создадим демонстрацию использования различных версий jQuery на одной странице. Я надеюсь, вам понравится это.
Скачать исходный код
Пожалуйста, загрузите исходный код здесь: jQuery noConflict
Вступление
Как вы все знаете, некоторые другие библиотеки JavaScript также используют $ (который является ссылкой по умолчанию для jQuery) в качестве имени функции или переменной, как и в jQuery. И в нашей жизни разработки, мы совсем не строгие только к jQuery, мы также можем использовать множество других библиотек. Не так ли? Я использую разные библиотеки в своих проектах для выполнения разных задач. Так что же произойдет, когда мы будем использовать эти библиотеки? Между этими библиотеками будут конфликты, так как все они используют $ в качестве имени переменной. Ситуация действительно плохая.
Таким образом, у нас есть только один шоколад и большее количество победителей, в реальной жизни мы можем просто разрезать шоколад на количество победителей, верно?
Собаки делятся едой
Но это не будет принято в этом случае, поэтому у нас есть другая опция, эта опция представлена jQuery и она не конфликтует с jQuery.
Фон
Я всегда использую разные библиотеки в своем проекте, поэтому иногда я сталкивался с этими проблемами в своем проекте. Поэтому я подумал поделиться с вами всеми, кто сталкивается с этой проблемой.
Использование кода
Первое, что вы хотите сделать, это создать страницу HTML .
<!DOCTYPE html>
<html>
<head>
<title>JQuery noConflict - Sibeesh Passion</title>
</head>
<body>
JQuery noConflict - Sibeesh Passion
</body>
</html>И что дальше? Добавление ссылки? Да.
<script src="prototype.js"></script>
<script src="JQuery%20Versions/jquery-1.11.1.min.js"></script>Поэтому мы используем прототип самой низкой версии и jquery вместе, в этом случае вы столкнетесь с ошибками конфликта, и, пожалуйста, обратите внимание, что новая версия prototype.js не имеет никакого конфликта с jQuery, так как они обновлены и получили исправление.
Так что делать, если вы нашли какие-либо проблемы? вам просто нужно дать $ прототипу и назначить новую переменную jquery следующим образом.
<script>
// Give $ back to prototype.js; create new alias to jQuery.
var $jq = jQuery.noConflict();
</script>И теперь вы можете использовать $ jq в качестве новой ссылки на jQuery.
<script>
$jq(document).ready(function () {
$jq("#btn").on('click', function () {
alert('Clicked');
});
});
</script>Полный код
<!DOCTYPE html>
<html>
<head>
<title>JQuery noConflict - Sibeesh Passion</title>
<script src="prototype.js"></script>
<script src="JQuery%20Versions/jquery-1.11.1.min.js"></script>
<script>
// Give $ to prototype.js
var $jq = jQuery.noConflict();
</script>
<script>
$jq(document).ready(function () {
$jq("#btn").on('click', function () {
alert('Clicked');
});
});
</script>
</head>
<body>
JQuery noConflict - Sibeesh Passion
<br />
<br />
<br />
<input type="button" value="" id='btn' />
</body>
</html>Иногда мы можем оказаться в ситуации использования другой версии jQuery на одной странице, верно?
Ситуация, с которой я столкнулся
I was working in an old project which was handled by a team few years back, at that time I got a minor work to do in that project, to do the task I was in a need to add the latest version of jQuery since the entire project was using the old reference of jQuery. I was in a situation that I should not remove the old references and update with the new one, if I do that there might be some issues with other functionalities right? Since the project was already in live, I didn’t take that risk. So I added the new version and used jQuery noConflict to avoid the reference issues.
Using the Code
Here I am going to give you a demo of now to use different version of jQuery in one page.
First of all please add the needed reference to your page.
<script src="JQuery%20Versions/jquery-1.9.0.min.js"></script>
<script src="JQuery%20Versions/jquery-1.10.1.min.js"></script>
<script src="JQuery%20Versions/jquery-1.11.0.min.js"></script>
<script src="JQuery%20Versions/jquery-1.11.1.min.js"></script>
<script src="JQuery%20Versions/jquery-1.11.3.min.js"></script>Please be noted that we have added jQuery 1.9.0,1.10.1,1.11.0,1.11.1,1.11.3 in our page.
Now we need to add some buttons in the UI, later we will bind the click events of the same buttons.
<input type="button" value="Use jQuery 1.9.0" id='btn190' />
<input type="button" value="Use jQuery 1.10.1" id='btn1101' />
<input type="button" value="Use jQuery 1.11.0" id='btn1110' />
<input type="button" value="Use jQuery 1.11.1" id='btn1111' />
<input type="button" value="Use jQuery 1.11.3" id='btn1113' />What is next, so we have added the different jQuery versions. Now we will create different variable names for each versions. Is that fine?
<script src="JQuery%20Versions/jquery-1.9.0.min.js"></script>
<script>
var jQuery190 = jQuery.noConflict();
window.jQuery = jQuery190;
</script>
<script src="JQuery%20Versions/jquery-1.10.1.min.js"></script>
<script>
var jQuery1101 = jQuery.noConflict();
window.jQuery = jQuery1101;
</script>
<script src="JQuery%20Versions/jquery-1.11.0.min.js"></script>
<script>
var jQuery1110 = jQuery.noConflict();
window.jQuery = jQuery1110;
</script>
<script src="JQuery%20Versions/jquery-1.11.1.min.js"></script>
<script>
var jQuery1111 = jQuery.noConflict();
window.jQuery = jQuery1111;
</script>
<script src="JQuery%20Versions/jquery-1.11.3.min.js"></script>
<script>
var jQuery1113 = jQuery.noConflict();
window.jQuery = jQuery1113;
</script>So now we have added variable names for all the versions right? The next thing we are going to do is to fire the click events for each versions.
<script>
jQuery190(document).ready(function ($) {
//The codes for jQuery 1-9-0
$("#btn190").on('click', function () {
alert($.fn.jquery);
})
});
jQuery1101(document).ready(function ($) {
//The codes for jQuery 1-10-1
$("#btn1101").on('click', function () {
alert($.fn.jquery);
})
});
jQuery1110(document).ready(function ($) {
//The codes for jQuery 1-11-0
$("#btn1110").on('click', function () {
alert($.fn.jquery);
})
});
jQuery1111(document).ready(function ($) {
//The codes for jQuery 1-11-1
$("#btn1111").on('click', function () {
alert($.fn.jquery);
})
});
jQuery1113(document).ready(function ($) {
//The codes for jQuery 1-11-3
$("#btn1113").on('click', function () {
alert($.fn.jquery);
})
});
</script>So if you run your page and click the buttons, you can find that the related codes only get fired.
jQuery no-conflict And Using Different Versions Of JQuery
jQuery no-conflict And Using Different Versions Of JQuery
Now what if you comment out the variable declaration for jQuery version 1.11.3?
//var jQuery1113 = jQuery.noConflict();
//window.jQuery = jQuery1113;You will get an error says Uncaught ReferenceError: jQuery1113 is not defined in browser console.
jQuery no-conflict And Using Different Versions Of jQuery
Complete Code
<!DOCTYPE html>
<html>
<head>
<title>Use JQuery Different Versions in One Page - Sibeesh Passion</title>
<script src="JQuery%20Versions/jquery-1.9.0.min.js"></script>
<script>
var jQuery190 = jQuery.noConflict();
window.jQuery = jQuery190;
</script>
<script src="JQuery%20Versions/jquery-1.10.1.min.js"></script>
<script>
var jQuery1101 = jQuery.noConflict();
window.jQuery = jQuery1101;
</script>
<script src="JQuery%20Versions/jquery-1.11.0.min.js"></script>
<script>
var jQuery1110 = jQuery.noConflict();
window.jQuery = jQuery1110;
</script>
<script src="JQuery%20Versions/jquery-1.11.1.min.js"></script>
<script>
var jQuery1111 = jQuery.noConflict();
window.jQuery = jQuery1111;
</script>
<script src="JQuery%20Versions/jquery-1.11.3.min.js"></script>
<script>
//var jQuery1113 = jQuery.noConflict();
//window.jQuery = jQuery1113;
</script>
<script>
jQuery190(document).ready(function ($) {
//The codes for jQuery 1-9-0
$("#btn190").on('click', function () {
alert($.fn.jquery);
})
});
jQuery1101(document).ready(function ($) {
//The codes for jQuery 1-10-1
$("#btn1101").on('click', function () {
alert($.fn.jquery);
})
});
jQuery1110(document).ready(function ($) {
//The codes for jQuery 1-11-0
$("#btn1110").on('click', function () {
alert($.fn.jquery);
})
});
jQuery1111(document).ready(function ($) {
//The codes for jQuery 1-11-1
$("#btn1111").on('click', function () {
alert($.fn.jquery);
})
});
jQuery1113(document).ready(function ($) {
//The codes for jQuery 1-11-3
$("#btn1113").on('click', function () {
alert($.fn.jquery);
})
});
</script>
</head>
<body>
Use JQuery Different Versions in One Page
<br />
<br />
<br />
<input type="button" value="Use jQuery 1.9.0" id='btn190' />
<input type="button" value="Use jQuery 1.10.1" id='btn1101' />
<input type="button" value="Use jQuery 1.11.0" id='btn1110' />
<input type="button" value="Use jQuery 1.11.1" id='btn1111' />
<input type="button" value="Use jQuery 1.11.3" id='btn1113' />
</body>
</html>That’s all.
Conclusion
Did I miss anything that you may think which is needed? Have you ever used different versions of jQuery in same page? Have you ever tried jQuery noConflict? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.
Your turn. What do you think?
A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.