Изучаем JQuery вместе

Давно и всем известно, что если хочешь в чем-то хорошо разобраться нужно начать объяснять это другому человеку. Именно поэтому, практически ничего не зная о JQuery, я решила  написать серию статей об использовании этого фреймворка, так что будем учиться вместе.

Есть такая замечательная книжка под названием Learning JQuery от авторов Jonathan Chaffer, Karl Swedberg  (не буду даже пытаться произносить по-русски), в которой очень интересно рассказывается о том что такое JQuery, для чего его можно использовать, и многое другое. Книга довольно легко читается, даже с моим (ниже среднего) уровнем английского, а если не хочется читать книгу в оригинале, то читайте мои заметки.

На этом лирическое вступление подошло к концу, пора уже перейти к непосредственному знакомству с JQuery.

Для начала разберемся с терминологией, что же такое JQuery? JQuery это один из самых популярных на сегодняшний день фреймворков. Звучит красиво но все равно не понятно, и по праде сказать я сама некоторое время искренне считала что фреймворк — это программа для удобного написания различного кода (путала со средой разработки).

Так вот, фреймворк — иначе говоря  библиотека, которая содержит в себе все основные функции по взаимодействию java script и html, к которым можно смело обращаться после того как библиотка подключена к html-странице. JQuery был разработан прежде всего для облегчения жизни программистов, но и пользователям, не слишком знакомым с javascript (таким как я), он тоже придется по душе.

Итак, начать нужно с загрузки JQuery отсюда, далее просто сложить в папку с вашей html-кой, и подключить в секции head:

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>

Этой строчки достаточно для того, чтобы начать использовать все возможности, предоставляемые этой библиотекой. Кстати о возможностях. Так чтобы в общем было понятно, основное назначение JQuery, групповая (или одиночная) выборка любых элементов html-страницы и проведения над выбранными элементами различных операций (изменение CSS-стилей, добавление анимации на страницу, обеспечение кроссбраузерности  и еще многое другое).

Главная операция в JQuery это выбор элемента html-страницы, она выполняется конструкцией $(), внутри скобок указывается любой элемент, принадлежащей вашей странице, заключенный в кавычки. К примеру для того чтобы выбрать все ссылки достаточно написать: $(‘a’).

Далее, после того как мы указали что нам нужно выбрать все ссылки, нужно сообщить JQuery, что мы хотим сделать с выбранными ссылками. К примеру мы хотим перекрасить все ссылки в зеленый цвет. Для этого, создадим класс .green в css-файле, в котором пропишем всего одну строчку:

.green{
   color: green;
}

После того, как мы создали класс, содержащий зеленый цвет текста, необходимо применить его к ранее выбранным ссылкам. Для этого, к уже существующей у нас конструкции, нужно добавить следующее .addClass(«green»). В результате у нас должна получиться такая строка: $(‘a’).addClass(«green»), которая как нетрудно догадаться сообщает нам что мы выбрали все ссылки на странице, и методом addClass применили к ним стиль green.

А для того чтобы вся эта конструкция у нас заработала, нужно как-то сообщить браузеру, в понятной форме, что мы собираемся использовать ранее подключенную библиотеку JQuery. Для этого, полученную нами конструкцию нужно записать в следующем виде:

<script type="text/javascript">
$(document).ready(function(){
   $('a').addClass("green");
})
</script>

Строка $(document).ready(function() сообщает браузеру, что скрипт нужно выполнять после тогда как загружены все элементы html-страницы, но не дожидаясь загрузки картинок.

Этот простой пример объясняет принцип действия JQuery. Дальше будет интереснее, но уже в следующих статьях, спасибо за внимание.