jQuery: полезные примеры, при работе с DOM

Дорогие друзья, от лица авторов этого блога, я поздравляю вас с Днём Победы!

В этой статье я собрал небольшую подборку, полезных примеров, которые помогут вам, при работе с jQuery и Document Object Model.


Добавление класса определенному элементу
Очень часто при каком-либо, событии (неправильно заполненные поля, проверка логина и др.), появляется необходимость изменить внешний вид элемента. Легче всего это сделать, добавив новый класс элементу.

$('#myelement').addClass('myclass');

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

$('#myelement').removeClass('myclass');

Проверка. Установлен класс или нет
Если вы часто добавляете или удаляете классы у элементов, то вам будет полезно узнать, установлен нужный класс или нет.

$('#myelement').hasClass(class);

Изменение значения в текстовом поле, при клике по ссылке
Иногда, при определенных действиях пользователя, появляется необходимость записать информацию в текстовое или скрытое поле. Приведенный ниже пример, показывает, как добавить значение в поле, при клике по ссылке:

<script>
$(function() {
			$('#changeValue').click(function() {
			   $("#name").attr({value: "2coders.ru"});
			});
		});
</script>
<a href="#" id="changeValue">Click me</a>
<input type='text' id="name" name='name' value=''>

Переключение CSS с помощью jQuery
Как вы уже могли увидеть из прошлых примеров, с помощью jQuery можно легко добавить или удалить CSS стиль. Так же просто подключить другой файл стилей.

$('link[media='screen']').attr('href', 'newstyle.css');

Добавление HTML-кода в элемент
Если вам надо добавить новый элемент в уже существуещий, то метод append(), как раз, то, что вам нужно.

$('#placeHolder').append('<div style="color:red">test</div>');

Проверка. Существует элемент или нет
Иногда работая с JavaScript появляется необходимость проверить существует элемент или нет. Если, length == 0, то элемент не существует.

if ($('img').length) {
    alert('image exists');
} else {
    alert("image don't exists");
}

Узнать родительский элемент
Работая с DOM, у вас может возникнуть необходимость найти родительский элемент. Метод closest() прекрасно с этим справится, в результате мы получим id родительского элемента.

var id = $("#myelement").closest("div").attr("id");

Удалить вариант из выпадающего списка
Когда вы работаете со списками, у вас может возникнуть необходимость, удалить из списка вариант с определенным значением. Приведенный ниже пример, покажет, как это сделать.

$("#selectList option[value='2']").remove();

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

$('#selectList :selected').text();

Проверить сколько дочерних элементов
Проверяем, сколько div элементов происходит от #myelement.

$("#myelement > div").length;

Проверка чекбоксов
Рассмотрим способы проверки состояния чекбоксов с помощью jQuery.

$(elem).is(":checked");
$(elem).prop('checked'); 
$(elem).attr("checked");

Последний вариант (attr(«checked»);) не будет работать в последних версиях.

• Выделение всех элементов checkbox с помощью jQuery
• jQuery: делаем формы интерактивными
• jQuery JSON: получаем данные из твиттера
• jQuery прелоадер
• Обфускатор javascript-кода

Теги: JavaScript, jQuery