jquery для начинающих

jquery для начинающих

Здравствуйте, уважаемые!

Сегодня я начну цикл статей под общим названием «jQuery для начинающих», который поможет начинающим, а может и не только начинающим, освоить сей замечательный JavaScript фреймворк, набирающий в последнее время все большую популярность из-за своей простоты и богатых возможностей.

Почему jQuery? Каждый ответит на этот вопрос по-своему, начав изучать его и используя его в своих web-проектах. Для себя я отвечаю на этот вопрос так: Зачем писать на «чистом» JavaScript десятки строк, когда можно подключать jQuery-библиотеку и написать всего 1 или 2, которые будут нагляднее демонстрировать логику приложения. И еще, для jQuery написано множество библиотек, расширяющих его возможности, да и самому написать плагин для jQuery не составит большого труда. Дополнения могут в разы уменьшить код и облегчить продумывания логики.

Перед началом скучной теории, хочу показать как легко можно раскрасить каждую вторую строку таблицы средствами jQuery.

Создадим класс для четных строк, который будет инвертировать цвет фона и цвет текста.

1
.even {background-color: #000; color: #fff}

Подключаем саму библиотеку jQuery через Google API (я предпочитаю именно этот вариант), потому как думаю, что даже когда придет конец света, гугл все равно стоять будет и предоставлять свои функции.

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>


А теперь наконец-то напишем эту строчку кода на jQuery, которая и выполняет всю «черную» работу по раскраске таблицы. Для того, чтобы наш код начал выполняться не после того, как загрузится вся страница(метод onload) со всеми картинками, баннерами и внешними iframe’ами, а сразу же после построения дерева DOM, а это происходит за много до того, воспользуемся конструкцией jQuery вида

1
2
3
$(document).ready(function() {
$("table tr:nth-child(even)").addClass("even");
});

Или сокращенной формой записи

1
2
3
$(function() {
$("table tr:nth-child(even)").addClass("even");
});

Если вам сейчас не понятен этот код, не расстраивайтесь, скоро все встанет на места, и вы сами сможете написать конструкции в много раз сложнее. Но наберитесь терпения.

То, что у нас должно было получиться мы можем увидеть на маленьком примере, который я для вас подготовил.

Ну и теперь самое интересное. Для того, чтобы освоить jQuery в первую очередь надо научиться выбирать объекты для последующих с ними манипуляций. jQuery очень богат возможностью выбора элементов на странице: он поддерживает все способы, который предоставляет CSS2, многое из того, что предоставляет CSS3 и, помимо этого, имеет встроенные в ядро богатые возможности.

Итак, начнем.

В первую очередь jQuery конечно же поддерживает выборку по тегам. Например,

1
$("p")

выберет все параграфы, имеющееся на странице.

Потом мы можем выбрать элементы на странице с помощью jQuery при помощи идентификаторов.

1
$("a#external")

Сейчас имеем дело со ссылкой с идентификатором #external.

Чтобы выбрать ссылки, находящиеся внутри параграфа, нужно написать

1
$("p a")

Под это определение попадут все ссылки, которые находятся в теге параграфа, могут также быть обернуты другими тегами, например, списком.

Если нужен непосредственный потомок-ссылка параграфа, то

1
$("p > a")

Этому селектору соответствуют ссылки, которые являются прямыми потомками элемента P (параграф).

Сейчас попробуем выбрать ссылки, которые ведут на другой сайт: по большей части, внешние ссылки имеют начало «http://». Теперь запишем это.

1
$("a[href^=http://]")

Конструкций ^= показывает, что следует сопоставить это выражение с началом, как в регулярных выражениях.

Если нам нужно выбрать все ссылки, которые указывают на архивы, пишем

1
$("a[href$=.rar]")

В этой коллекции окажутся все ссылки, заканчивающиеся на «.rar»

Таких конструкций, облегчающих нам жизнь в CSS очень много, еще хотелось бы сказать об одной. А именно выборке только текстовых полей из всего разнообразий input-элементов.

1
$("input[type=text]")

Также мы можем выбирать элементы по позиции.
Например, a:first – выберет только первую ссылку.
Нечентый элемент p:odd позволит, например, нам сделать красивые отступы абзацев.
Подобных селекторов тоже не мало, мы познакомимся с ними в течение последующих уроков.

Напоследок, я покажу вам простой пример, демонстрирующий лишь малую часть возможностей jQuery, а именно плавное появление картинки. Ссылка на пример jQuery.

До новых встреч =)