JQuery-селекторы

$(jQuery-селектор) - одно из важнейших переопределений функции $. Оно позволяет искать на странице элементы объектной модели документа, используя jQuery-селекторы. jQuery-селекторы представляют собой своего рода путь к элементу в иерархии HTML-объектов. Они могут использовать все, начиная от CSS-селекторов до синтаксиса языка XPATH (языка обращения к объектам XML).

Пример:

$(function()

{

$("div");

//Находим все элементы div

$("#index");

//Находим все элементы с трибутом id = "index"

$("div.body");

//Находим все элементы div с классом = "body"

$("div > input[foo].text");

/*Находим все элементы input, у которых есть атрибут foo, а также класс "text", находящиеся внутри элемента div*/

});

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

Методы для работы с dom-элементами

Метод	Описание
append(content)/prepend(content)	Добавить переданный элемент или выражение в конец/в начало выбранного элемента.
appendTo(expr)/prependTo(expr)	Добавить выбранный элемент в конец/в начало переданного элемента.
attr(name)	Получить значение атрибута.
attr(params)	Установить значение атрибутов. Атрибуты передаются в виде {ключ1:значение1[, ключ2:значение2[, …]]}
attr(name, value)	Установить значение одного атрибута.
css(name)/css(params)/css(name, value)	Получить/установить значение отдельных параметров CSS. Аналогично функции attr().
text()/text(val)	Получить/задать текст элемента. В случае ввода текста специальные символы HTML заменяются символьными примитивами (entities, например, знак ">" будет заменен >).
empty()	Удалить все подэлементы текущего элемента.

Пример:

$(function()

{

$("body").append("<div></div>")

.css("backgroundColor", "black");

//Добавляем в тело HTML-страницы элемент div

$("<a></a>").appendTo("body div");

//К новому элементу div добавляем элемент a

$("body div a").attr("href", "http://yandex.ru")

.css({"textDecoration": "none", "color": "white"})

.html("Ссылка созданная при помощи jQuery");

/*Элементу a настравиваем css свойсвтва, заполняем атрибут href и пишим сам текст ссылки*/

});

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

Результат в виде массива

Поскольку функция $() возвращает коллекцию элементов в виде массива, поэтому можно обратиться к конкретному элементу, а также пробежаться по всем элементам результата. Для обращения к определенному элементу массива применяется прием аналогичный работе с массивами ключевых индексов. Для полного перебора коллекции необходимо использовать функцию each.

Пример:

("p")[0].addClass = "test";

//Первому элементу из коллекции добавляем класс "test"

$("p").each(function()

{

alert($(this).html());

/*Бежим по всем элементам p

Внутри функции this указывает на текущий DOM-элемент*/

});