Эта статья является чуть-чуть вольным переводом аналогичного раздела на сайте разработчиков библиотеки jQuery. Речь пойдет о казалось бы совсем простых вещах, но не всегда очевидных с первого взгляда, поэтому эта информация наверняка может кому-то пригодится.
Как выбирать элементы, используя class или id?Этот код выбирает элемент с id «myDivId». Поскольку id является уникальным, это выражение всегда выбирает один элемент.
Или ничего не выбирает, если элемента с таким id не существует. Следующий код выбирает элемент(ы) с классом «myCssClass». Поскольку любое количество элементов может иметь этот класс, это выражение будет выбирать любое количество элементов. Выбранный элемент может быть присвоен переменной javascript, например так: Code var myDivElement = $('#myDivId');
Обычно выбранные элементы задействуются другими функциями jQuery: Code
var myValue = $('#myDivId').val();
$('#myDivId').val("hello world");
Выбирая элементы по имени класса, лучше использовать составной селектор.
Если отбор идет по id, то логично использовать именно id. Code $('#myDivId');
$('div#myDivId');
$('span.myCssClass');
$('.myCssClass');
Как проверить имеет ли элемент специфический класс?Вы можете использовать метод is() (см. jQuery API: Traversing - обход DOM) вместе с подходящим селектором. Code if ( $('#myDiv').is('.pretty') )
$('#myDiv').show();
Заметьте, что этот метод позволяет Вам проверять также и другие вещи. Например Вы можете проверить, скрыт ли элемент (при использовании :hidden селектора). Code if ( $('#myDiv').is(':hidden') )
$('#myDiv').show();
Иногда также бывает вопрос: имеет ли jQuery hasClass (см. jQuery API: Attributes - атрибуты) метод? Заметьте, что hasClass был добавлен начиная с версии 1.2, чтобы обрабатывать наиболее распространенное использование метода is(). Code $("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, возвращенного селектором. Code if ( $('#myDiv').length )
$('#myDiv').show();
Заметьте, что вовсе не всегда необходимо проверять, существует ли элемент.
Следующий код показал бы элемент, если он существует, и не сделал бы ничего (и никакой ошибки бы не возникло), если это неверно.
Как определить состояние переключаемого элемента?Вы можете проверить состояние, используя селекторы :visible или :hidden (см. jQuery API: Selectors - селекторы jQuery: фильтры контента, visibility-фильтры, фильтры атрибутов, child-фильтры). Code var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
Если Вы хотите воздейстовать на элемент, основываясь на его видимости, просто включите «:visible» или «:hidden» в выражение селектора. Например: Code $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
Как выбирать элементы, которые имеют специфические символы в id?Например, это может быть обычным для некоторых фреймворков, генерирующих уникальные id, которые имеют специальные символы в них (такие как '.' или '[..]'). Проблема состоит в том, что эти символы имеют специальное значение в CSS. Как поступать в таких случаях, смотрите на следующих примерах: Code $("#some.id")
$("#some\\.id")
$("#some[id]")
$("#some\\[id\\]")
Как разрешать/запрещать использование элемента?Вы можете разрешать/запрещать элемент, устанавливая атрибут 'disabled' в значение 'disabled' (чтобы запретить использование элемента) или присвоить тому же атрибуту пустое значение », или же просто удалить атрибут 'disabled' (чтобы разрешить использование элемента).
Код может выглядеть примерно следующим образом: Code
$("#x").attr("disabled","disabled");
$("#x").attr("disabled","");
$("#x").removeAttr("disabled");
Вы можете попробовать следующий пример: Code <select id="x" style="width:200px;">
<option>Один</option>
<option>Два</option>
<option>Три</option>
</select>
<input type="button" value="Disable" onclick="$('#x').attr('disabled','disabled')"/>
<input type="button" value="Enable" onclick="$('#x').r
Как отметить/снять отметку с элемента checkbox?* Вы можете отметить/снять отметку c элемента checkbox, устанавливая атрибуту 'checked' значение 'checked' (чтобы отметить элемент) или установить атрибуту 'checked' пустое значение «»(чтобы снять отметку). Пример кода приведен ниже: Code
$("#c").attr("checked", "checked");
$("#c").attr("checked","");
Вы можете попробовать следующий пример: Code <label><input type="checkbox" id="c"/>это подопытный checkbox</label>
<input type="button" value="Check" onclick='$("#c").attr("checked","checked")'/>
<input type="button" value="Uncheck" onclick='$("#c").attr("checked","")'/>
Как получать значения выбранной опции элемента select?Элементы select обычно имеют два значения, к которым нужно обратиться.
Это значение атрибута value соответствующего элемента option и его текстовое значение. Для примера возьмем следующий код: Code <select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
Вот так можно получить значение атрибута value, выбранной опции: Code $("select#myselect").val();
А вот так можно получить текст выбранной опции: Code $("#myselect option:selected").text();
Вы можете попробовать следующий пример:
и посмотреть его исходный код: Code <select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
<input type="button" value="Get Value" onclick="alert($('#myselect').val())"/>
<input type="button" value="Get Text Value" onclick="aler
|