Дорогие друзья, от лица авторов этого блога, я поздравляю вас с Днём Победы!
В этой статье я собрал небольшую подборку, полезных примеров, которые помогут вам, при работе с 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
$(«#name»).attr({value: «2coders.ru»});
==
$(«#name»).val( «2coders.ru»);
Reply
спасибо за пост, про closest -даже не знал))
Reply
СЧпасибо,тоже за клозест,А то _я цепочки парентов наставлял.И за подключение сиэсэс-ов тоже,отдельное ОГРОМНОЕ СПАСИБО!!!
Reply
Спасибо, что выделили самое нужное, среди множества методов jQuery.
Reply
Метод closest() похож на parents(), если что 🙂 (не путать с parent())
Reply