Когда дело доходит до библиотек на стороне клиента, jQuery явно идет в ногу со временем. Недавние исследования показывают, что jQuery используется на половине всех веб-сайтов . Существует хорошее объяснение популярности jQuery — его чрезвычайно просто использовать. Эта статья знакомит с основными понятиями, стоящими за jQuery, и поможет начать работу с абсолютным новичком.
Фон
jQuery был создан Джоном Резигом и выпущен в январе 2006 года. jQuery упрощает кросс-браузерное программирование на JavaScript, предоставляя слой абстракции поверх собственных API-интерфейсов браузера. В частности, упрощается навигация по DOM, позволяя выполнять запросы DOM с использованием синтаксиса стиля селектора CSS. Это не обязательно имеет большое значение в современных браузерах, которые поддерживают API селекторов , но более старые браузеры, такие как IE6, могут значительно выиграть от jQuery. jQuery также предоставляет абстракции для многих других популярных функций, таких как AJAX и анимации.
Получение jQuery
jQuery — это обычный файл JavaScript, поэтому вы можете включить его, используя стандартный <script> . jQuery может быть включен со страницы проекта или из различных сетей доставки контента (CDN). В следующем примере показано, как jQuery может быть включен в любой HTML-документ.
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
Если вы хотите, чтобы ваш сайт был полностью автономным, я рекомендую загрузить код и разместить его на своих собственных серверах. jQuery свободно доступен для скачивания на домашней странице проекта. Код удобно доступен как в рабочей (минимизированной), так и в версии для разработки.
Функция $()
Новым разработчикам jQuery, как правило, выделяется распространение знаков доллара, разбросанных по всему коду. По умолчанию пространство имен jQuery размещает все его методы и свойства в переменной $ . Наиболее популярным методом является jQuery() , который обычно называется псевдонимом $() . Этот метод может использоваться различными способами, но обычно он принимает строку селектора стиля CSS, которая используется для запроса DOM. Любые совпадающие узлы затем возвращаются как набор объектов jQuery.
В следующем примере выбираются все гиперссылки класса foo . Затем ссылки итерируются по одной с помощью функции each() . each() , принимает функцию обратного вызова в качестве аргумента. Поскольку каждый соответствующий элемент повторяется, функция обратного вызова вызывается с this ссылкой на текущий элемент. Затем функция attr() используется для получения атрибута href из каждой ссылки.
$("a.foo").each(function() { var link = $(this); var href = link.attr("href"); // Use link here });
Функция ready()
JQuery также очень хорошо абстрагирует события. И, возможно, не может быть никакого события, которое более непоследовательно реализовано, чем событие загрузки страницы. Например, некоторые браузеры поддерживают только событие load окна, которое не запускается, пока не загрузится все, включая изображения. Лучшие браузеры также поддерживают событие DOMContentLoaded которое вызывается после анализа DOM, не ожидая изображений, таблиц стилей и других ресурсов.
С jQuery вам не нужно пытаться различать различные события загрузки страницы. Вместо этого jQuery предоставляет функцию ready() . ready() принимает один аргумент, функцию, которая выполняется после полной загрузки DOM. В следующем примере показано, как ready() используется для реагирования на события загрузки страницы.
$(document).ready(function(){ // Explore jQuery here });
Вывод
В этой статье были изучены самые основы jQuery. Конечно, это только верхушка айсберга. Огромная популярность jQuery породила целую экосистему книг, разработчиков, плагинов и инструментов. Тем не менее, я должен предупредить всех потенциальных разработчиков jQuery. Поскольку jQuery делает сложные задачи настолько простыми, многие разработчики никогда не удосуживаются узнать, как все работает на самом деле. Это может привести к ложному пониманию, которое никогда не бывает полезным для программиста. Я призываю вас прочитать исходный код jQuery — вы никогда не знаете, что вы можете узнать .