Выбираем элемент с id «myDivId». Поскольку id является уникальным, это выражение всегда выбирает один элемент. Или ничего не выбирает, если элемента с таким id не существует.

$('#myDivId');

Выбираем элемент(ы) с классом «myCssClass». Поскольку любое количество элементов может иметь этот класс, это выражение будет выбирать любое количество элементов.

$('.myCssClass');

Выбранный элемент может быть присвоен переменной javascript, например, так:

var myDivElement = $('#myDivId');

В выбранном элементе есть возможность задействовать другие функции JQuery

// получаем значение элемента
var myValue = $('#myDivId').val();
// устанавливаем значение элемента
$('#myDivId').val("hello world");

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

$('#myDivId'); // хорошо
$('div#myDivId'); // плохо
$('span.myCssClass'); // хорошо
$('.myCssClass'); // плохо

Как проверить имеет ли элемент специфический класс?

Можно использовать метод is() вместе с подходящим селектором.

if ( $('#myDiv').is('.pretty') )
$('#myDiv').show();

Заметьте, что этот метод позволяет проверять также и другие вещи. Например можно проверить, скрыт ли элемент (при использовании селектора :hidden).

if ( $('#myDiv').is(':hidden') )
$('#myDiv').show();

Начиная с версии 1.2 был добавлен hasClass.

$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});

В этом коде добавляется некая анимация для элемента(ов) с классом protected. Обратите внимание, что имя класса тут записывается без точки.

Как проверить существование элемента?

Вы можете использовать свойство length набора jQuery, возвращенного селектором.

if ( $('#myDiv').length )
$('#myDiv').show();

Не всегда необходимо проверять, существует ли элемент. Следующий код показал бы элемент, если он существует, и не сделал бы ничего (и никакой ошибки не возникло бы), при его отсутствии.

$('#myDiv').show();

Как определить состояние переключаемого элемента?

Можно проверить состояние, используя селекторы:visible или:hidden.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Можно воздейстовать на элемент, основываясь на его видимости, просто включите «:visible» или «:hidden» в выражение селектора.

$('#myDiv:visible').animate({left: '+=200px'}, 'slow');

Как выбирать элементы, которые имеют спец. символы в id?

Некоторые фреймворки могут генерить уникальные id, которые содержат в себе спец. символы (например, ‘.’ или ‘[..]‘). Проблема состоит в том, что эти символы имеют специальное значение в CSS. Что делать? Смотрим ниже:

$("#some.id") // не работает
$("#some\\.id") // работает
$("#some[id]") // не работает
$("#some\\[id\\]") // работает

Как разрешать/запрещать использование элемента?

Можно разрешать/запрещать элемент, устанавливая атрибут ‘disabled’ в значение ‘disabled’ (чтобы запретить использование элемента) или присвоить тому же атрибуту пустое значение «, или же просто удалить атрибут ‘disabled’ (чтобы разрешить использование элемента). Как это сделать? Смотрим ниже:

// запрещаем использование элемента #x
$("#x").attr("disabled","disabled");
// разрешаем использование элемента #x
$("#x").attr("disabled","");
// разрешаем использование элемента #x
$("#x").removeAttr("disabled");

HTML код для тестов:

Как отметить/снять отметку с элемента checkbox?

Можно отметить/снять отметку c элемента checkbox, устанавливая атрибуту ‘checked’ значение ‘checked’ (чтобы отметить элемент) или установить атрибуту ‘checked’ пустое значение »« (чтобы снять отметку).

// отмечаем checkbox с id="c"
$("#c").attr("checked", "checked");
// снимаем отметку checkbox'а с id="c"
$("#c").attr("checked","");

HTML код для теста:

<label><input id="c" type="checkbox" />это подопытный checkbox</label>

Как получать значения выбранной опции элемента select?

Элементы select обычно имеют два значения, к которым нужно обратиться. Это значение атрибута value соответствующего элемента option и его текстовое значение.

HTML для примера:

Из него можно получить значение атрибута value, выбранной опции:

$("select#myselect").val();

Или получить текст выбранной опции:

$("#myselect option:selected").text();

Как заменить текст в третьем элементе в списке из десяти элементов?

Селектор:eq() или метод .eq() позволяют выбрать необходимый элемент. Для того что бы заменить текст, сначала его нужно получить, например, методом .text(), а потом отдать куда необходимо. Пример ниже:

// не работает
$(this).find('li a').eq(2).text().replace('foo','bar');

// работает
var $thirdLink = $(this).find('li a').eq(2);
var linkText = $thirdLink.text().replace('foo','bar');
$thirdLink.text(linkText);

jquery, FAQ, селекторы

31 марта 2009, 15:29

igorok

Логин:
Пароль: