ЧУДО "САИКТ"

Зачем нам jQuery?

В арсенале современного web-программиста – множество инструментов, которыми нужно уметь пользоваться. Это всевозможные библиотеки, фреймворки, плагины, утилиты, системы управления контентом. Одно из самых популярных средств – небольшая, но богатая возможностями библиотека jQuery (jQ), написанная на языке JavaScript (JS). Если говорить проще, jQuery – это набор полезных функций, упрощающий манипулирование элементами HTML и стилями CSS, создание AJAX-запросов, обработку событий (например, клик мыши), управление анимацией – словом, того, что называется «интерактивность», взаимодействие с пользователями сайта.

 

Какие задачи помогает решить эта библиотека? Обязательно ли ее изучать? Какие преимущества имеет jQuery перед «чистым» JavaScript? Об этом и не только – в нашей статье.

 

Навигация по тексту:

Что такое jQuery?

Преимущества jQuery

Недостатки jQuery

Зачем программисту jQuery?

Как изучать jQuery?

Что такое jQuery?

 

Сравни 2 участка кода:
 

var element = document.getElementById('header');

 

var element = $('#header');

 

Даже для человека, не изучавшего курс JavaScript, ясно, что второй пример более понятный и лаконичный, чем первый. Между тем в обоих скриптах происходит одно и то же: выборка HTML-элемента с идентификатором «header». Просто в первом случае используется чистый, нативный JavaScript, а во втором – jQuery.

 

Однако возможности jQ не исчерпываются банальной выборкой элементов. С помощью этой библиотеки программист может быстро получить доступ к структуре web-документа и его отдельным узлам, удалить или добавить элемент (видели когда-нибудь всплывающую подсказку при наведении на текст или изображение?), создать на сайте стильную анимацию, организовать фотогалерею и многое другое.

 

Итак, jQuery позволяет быстро и легко взаимодействовать с HTML, каскадными таблицами стилей (CSS) и существенно упрощает написание кода на JavaScript.

 

Преимущества jQuery

 

plusКроссбраузерность. Синтаксис jQ поддерживается всеми современными web-обозревателями, и ты можешь быть уверен, что стильный слайдер, который ты создашь на jQuery и CSS, увидит каждый из посетителей сайта, каким бы браузером он ни пользовался.

 

plusКомпактность кода. Выше мы привели лишь небольшой пример, но даже он вполне показателен. То, что на JavaScript приходится писать в отдельных функциях, на jQ реализуется буквально в паре строк кода. Причем такой код обладает стройностью, логикой и ясностью, так что программировать на jQuery – одно удовольствие.

 

plusУдобная работа с событиями и визуальными эффектами. Нужно создать всплывающую подсказку при наведении мыши? Запустить анимацию при клике? Создать эффект падающего снега сразу после загрузки страницы? Запросить у пользователя его данные? Все это легко реализуется на jQuery. JS с этими задачами тоже справляется, но в этом случае код получается более громоздкий и менее гибкий.

 

plus«Внятная» документация. На официальном русскоязычном ресурсе ты можешь ознакомиться не просто с возможностями библиотеки, но и со всеми ее функциями, удобно разбитыми на категории. Читай и внедряй.

 

plusПожалуй, главное преимущество – тысячи готовых плагинов. Не хочешь писать фотогалерею с нуля? В сети масса готовых вариантов! Нужен тултип? Слайд-шоу? Проверка форм HTML? jQuery умеет все, нужно только найти плагин.

 

Фотогалерея на jQuery
Одно из главных достоинств jQuery – множество готовых плагинов (фотогалерей, слайдеров и т. д.)

 

Недостатки jQuery

 

Будем объективными и постараемся выделить несколько минусов библиотеки jQ:

 

minusПроизводительность. Профессионалы утверждают, что код на чистом JavaScript работает быстрее, чем на jQuery. Но есть проблема – сегодня проверить этот тезис практически невозможно, что связано, во-первых, с увеличением быстродействия самой библиотеки (разработчики без дела не сидят), а во-вторых, с ростом производительности компьютеров, через которые пользователи выходят в сеть. Да и скорость интернета увеличивается с каждым годом.

 

minusРазмер библиотеки. jQuery весит около 19 Кб, что теоретически может отразиться на скорости загрузки web-страницы, особенно на старых компьютерах и при нестабильном подключении к сети. Однако и здесь мы возвращаемся к первому «недостатку» – большинство современных провайдеров предоставляют приемлемый по скорости интернет, поэтому подавляющее число пользователей не увидит никаких проблем при загрузке страницы с кодом jQuery вместо JS.

 

Итак, недостатки jQ оказались неубедительными – эта библиотека представляет собой действительно полезный и гибкий инструмент для web-разработки.

Зачем программисту jQuery?

 

Безусловно, без этой библиотеки можно обойтись. Скажем по-другому: программисту необязательно проходить курс jQuery, если «по долгу службы» ему лишь изредка требуется взаимодействие c HTML-элементами – для этих целей вполне подойдут те самые нативные методы, то есть «чистый» JavaScript. Если же web-разработчик часто имеет дело не с поверхностным «jQuery-HTML скриптингом», а с необходимостью «погружаться» в код для поиска, выборки, изменения и удаления HTML-элементов и CSS-свойств, то здесь знание jQ будет очень кстати. Это поможет избежать ненужной сложности и необходимости изобретать велосипед в виде громоздкого и неудобочитаемого кода.

 

Таким образом, использование jQuery поможет упростить выполнение сложных задач и ускорить разработку проекта, и в этом – главная ценность библиотеки.

 

 

JQuery помогает ускорить разработку проекта
jQuery помогает ускорить разработку проекта

 

Как изучать jQuery?

 

Чтобы научиться пользоваться возможностями этой библиотеки, сначала следует пройти курс HTML + CSS, так как jQ не существует сама по себе, а работает только «в связке» с узлами web-сайта и их свойствами. Нужен пример? Представь, что тебе требуется сделать плавное затухание и появление заголовка на сайте. С помощью jQuery это можно реализовать так:

 

$("#main-heading").fadeOut(3000).fadeIn(2000);

 

Здесь мы обращаемся к заголовку с идентификатором «main-heading» и сначала приказываем ему исчезнуть, а затем снова проявиться. Цифры в скобках определяют скорость выполнения эффектов (в миллисекундах). Вот и все J. Действительно просто, не так ли?

 

Кроме HTML, jQuery отлично взаимодействует с CSS. Например, следующий код изменяет CSS-свойства элемента с идентификатором block:

 

$(document).ready(function(){

$("#go").click(function(){

$("#block").animate({

width: "70%",

opacity: 0.4,

marginLeft: "0.6in",

fontSize: "3em",

borderWidth: "10px"

}, 1500 );

});

});

 

По сути, здесь меняется 5 свойств: ширина элемента, непрозрачность, отступ слева, размер шрифта и толщина рамки.

 

Итак, первым шагом на пути к изучению jQuery JS должно стать освоение языков HTML и CSS. На втором этапе можно пройти обучение JavaScript либо сразу приступить к освоению библиотеки jQuery – и та, и другая технология самодостаточны и вполне могут изучаться отдельно друг от друга. Главное – все тестировать на практике. Лучше всего сразу браться за решение реальных задач – создание анимации, фотогалереи, всплывающих элементов и пр.

 

В нашей Академии обучение jQuery проходит в творческой, непринужденной атмосфере. 
На занятиях даются «боевые» задачи и разбираются реальные примеры из практики.
 
Хочешь стать крутым web-разработчиком? Оставляй заявку!
Яндекс.Метрика