jQuery - это очень просто! Часть 1

Фото автора =) 11.11.2008 от ROM 1 Комментарий »

Источник: JQuery, the very very basics - Lesson 1

jQuery - это звезда среди остальных библиотек. Её достоинства - это: легкость, кросс-браузерность и простота. Задача, которая потребовала бы 10 строк кода на javascript, решается одной строкой на jQuery. Например, Вы хотите раскрасить табличку с id=”mytable”, чтобы каждый ряд имел свой цвет.

$function() {
 $("table#mytable tr:nth-child(even)".addclass("even");
$("div.test").add("p.quote").html("мааааленький тест").fadeout();
});

Волшебный знак $ и цепочки операторов

В jQuery наиболее важный символ - это символ $. Функция $() возвращает объекты, следующие в цепочке операторов. Например:

$("div.test").add("p.quote").html("a little test").fadeOut();

Эта цепочка делает следующее:
1) Выбирает див с классом test
2) Вставляет параграф с именем класса quote
3) Добавляет текст в параграф
4) Оперирует дивом, используя fadeOut

Селекторы

CSS селекторы
Мы формируем оформление страниц с помощью CSS. CSS работает с элементами в DOM в следующем порядке: body, table, p, input или с помощью ID элемента (пока ID уникальный) или именами классов.

jQuery использует такие же методы, чтобы найти один элемент или группу. Например:
$(“p.note”) вернет все элементы, у которых имя класса = note $(“p#note”) вернет элемент

чей id = note
$(“p”) вернет все p элементы

Дочерние селекторы
Чтобы выбрать дочерний селектор, нам надо использовать “>”. Например, $(“p > a”) вернет все ссылки в p элементе.

Чтобы выбрать элемент или элементы с заданным атрибутом, надо использовать []. Например, input[type=text] вернет все элементы ввода, которые имеют тип text.

Чтобы выбрать контейнер с другими элементами, мы должны использовать has. Например, $(“p:has(a)”) вернет

<p>

.

Позиционные селекторы
jQuery позволяет Вам выбрать элементы в зависимости от их порядка.
$(“p:first”) вернет первый элемент.
Существующие позиции:
first, last, first-child, only-child, nth-child(n), nth-child(even), nth-child(odd)

Собственные селекторы
Эти селекторы позволяют делать всё, что нам нужно.
animated, button, checkbox, checked, disabled, enabled, header, hidden, image, input, not(filter), parent, password, radio, reset, selected, submit, text, visible


Популярность: 98%

Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: jQuery - это очень просто, Переводы |

Один комментарий

  1. showblogs.ru пишет:

    jQuery - это очень просто! Часть 1…

    Query - это звезда среди остальных библиотек. Её достоинства - это: легкость, кросс-браузерность и простота. Задача, которая потребовала бы 10 …

Оставить комментарий

Подпишитесь, пожалуйста:

XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Заметьте: Включена проверка комментариев. Нет смысла повторно отправлять комментарий.


Рубрики:

Управление:




Рейтинг блогов
Рейтинг блогов
Рейтинг блогов
Яндекс цитирования
Каталог блогов Blogdir.ru
количество читателей онлайн и всего


Я - на Карте
Пожертвовать
Каждому своё…
Блог о jQuery, Linux и немного программировании