jQuery для начинающих. часть 0
by Вредный • 07.12.2009 • 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.
До новых встреч =)
