Зачем нужна библиотека jQuery?
JQuery — это небольшая по объему библиотека, созданная на основе JavaScript, которая сильно упрощает программирование на языке JavaScript. По словам создателей этой библиотеки, это маленькая, быстрая и расширяемая JS библиотека.
С ее помощью можно намного проще перемещаться по HTML элементам, управлять анимацией, обрабатывать события, работать с Ajax запросами. Все это благодаря API (Прикладной программный интерфейс) и поддержке этой библиотеки практически во всех браузерах.
К слову, Ajax — это технология или подход обмена информацией с сервером и обновления частей веб-страницы без полной перезагрузки HTML документа. Этот обмен данными происходит на фоне, и поэтому название технологии расшифровывается как Asynchronous JavaScript and XML. Об этой технологии вы скоро сможете прочитать в нашей следующей статье.
Благодаря сочетанию универсальности и расширяемости, jQuery изменил способ программирования на JavaScript миллионов людей.
Итак, почему мы должны использовать эту библиотеку или какие преимущества она нам дает?
- jQuery — кросс-браузерная (работает одинаково хорошо и совместимо со множеством популярных браузеров). Нам не нужно беспокоиться о том, как наш код или HTML элементы будут работать в разных браузерах, разработчики сделали это за нас.
- jQuery намного проще использовать, чем нативный JavaScript, вы в этом убедитесь после ее использования.
- Библиотека расширяемая.
- jQuery очень простая и имеет отличную поддержку Ajax технологии.
- jQuery имеет большое сообщество разработчиков и много бесплатных плагинов. Например, https://www.danpalmer.me/jquery-complexify/ плагин измеряет насколько сложный пароль вы набрали. Эти плагины хорошо протестированы и готовы к работе.
- И эта библиотека имеет отличную и подробную документацию, которую можно почитать на сайте разработчиков http://api.jquery.com/.
Давайте на примере рассмотрим, какие же задачи упрощает и решает для нас библиотека Jquery. Для начала мы напишем код на JavaScript без использования библиотеки.
<!DOCTYPE html>
<html>
<head>
<title>What is jQuery</title>
<meta charset='UTF-8'/>
</head>
<body>
<script>
window.onload = function(){
document.getElementById('but').addEventListener('click',function(){
alert("Why we shoud use jQuery");
})
}
</script>
<input type='button' id='but' value="Click"/>
</body>
</html>
Этот код запустится и выполнит то, что в нем прописано, правда только в новых версиях популярных браузеров (Chrome, Opera, Safari, Internet Explorer 11). Но, если мы запустим этот код, например, в Internet Explorer 8, код не выполнится и консоль разработчика (вызов консоли F12 во многих браузерах) выдаст нам ошибку, в которой будет сказано, что IE 8 не поддерживает обработчик событий addEventListener(). Потому, что в IE 8 нет такого метода для обработки событий как addEventListener(), вместо него нужно прописать метод attachEvent() и заменить название события click на onclick.
Чтобы этот код заработал в IE 8, нужно еще дописать проверку и изменить название метода для обработки событий и название события. Допишем к нашему коду вышесказанное.
<!DOCTYPE html>
<html>
<head>
<title>What is jQuery</title>
<meta charset='UTF-8'/>
</head>
<body>
<script>
window.onload = function(){
if(document.addEventListener){
document.getElementById('but').addEventListener('click',function(){
alert("Why we should use jQuery");
});
}else{
document.getElementById('but').attachEvent('onclick', eventHandler);
}
};
function eventHandler(){
alert('Why we should use jQuery');
}
</script>
<input type='button' id='but' value="Click"/>
</body>
</html>
Так что теперь наш код увеличился и усложнился.
А теперь давайте напишем тот же самый код только с использованием jQuery. Как подключить библиотеку и описание методов, вы наедете в нашей статье «Основные приемы работы с jQuery «.
<pre><!DOCTYPE html>
<html>
<head>
<title>What is jQuery</title>
<meta charset='UTF-8'/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('#but').click(function(){
alert('Why we should use jQuery');
});
});
<input type='button' id='but' value="Click"/>
</script>
</body>
</html>
С примера очевидно, что благодаря использованию библиотеки мы можем значительно сократить количество кода, API понятен и прост в использовании, и нам не нужно волноваться и проверять кросс-браузерность нашего кода. За нас уже все сделали разработчики jQuery.
К сказанному можно добавить слоган jQuery «write less, do more». Он очень хорошо описывает эту библиотеку. Чем меньше кода будет в нашем проекте, тем быстрее мы его сможем закончить и меньше времени уйдет на его отладку.
Более подробную информацию про jQuery и как с ним работать читайте в других наших статьях про эту библиотеку.