jQuery примеры

В последние пару лет jQuery стал очень популярным. Этот javascript framework легко изучается,
производительность и большой спектр его возможностей очень радуют.
Селекторы jQuery позволяют производить выборку элементов по разным критериям. Селекторы являются одной из главных частей фреймворка, поэтому необходимо уметь грамотно ими пользоваться. Учиться лучше всего на примерах. Поэтому я хочу поделиться с Вами информацией о методах работы с конткретными HTML элементами при помощи jQuery.

Первая заметка – о работе с HTML элементом <select>

Работа с выпадающим списком в jQuery

Основными дейсвиями, которые производятся над выпадающим списком является получение выбранного значения, добавление/удаление элементов из списка, изменение их атрибутов.

Рассмотрим эти действия по порядку. Например, у нас есть select с id=”sel”:

  1. Получение значения выбранного элемента
  2. Получить текст выбранного элемента
  3. Добавить элемент в конец списка
  4. Добавить элемент в начало списка
  5. Вставить элемент после заданного элемента (после второго)
  6. Удалить элемент (выбранный)
  7. Очистить select
  8. Сделать элемент выбранным (последний)
  9. Сделать элемент недоступным (первый)
  10. И немного экзотики 🙂 Изменить цвет текста всех элементов, кроме выбранного

Как видите, ничего сложного здесь нет. В седующих постах будет рассмотрена информация
о работе с другими HTML элементами на jQuery.

  • Мм, интересно, но мало) Хотелось более развернутого. И не только про селекты. Жду продолжения)

  • ЗЫ: под эксплорером у меня верстка съезжает

  • Надо будет на jQuery глянуть.
    А у меня и под FF3 верстка слетает )

  • Header немного вниз опускается – следствие постоянной борьбы с вирусами на нашем “надежном” хостинге 🙂

  • admin

    Надо будет движок обновить

  • Интересные методы борьбы с вирусами )))

  • Я имел ввиду то, что вирус мне файлики чуток подправил… а из-за этого и верстка полезла…

  • в прошлом каменте попортился html, дублирую!

    в третем пример

    $(‘#sel’).append( $(‘four’) );

    можно упростить до

    $(‘#sel’).append(‘four’);

    это же относится к 4 и 5

    Абсолютно во всех селекторах излишне слово option
    $(‘#sel :not(:selected)’)

  • admin

    @CTAPbIu_MABP:
    с Вами согласен, просто с ‘option’ более нагляднее…

  • Pingback: progg.ru()

  • Andrey

    Спасибо , статья пригодилась , очень подробно и наглядно !

  • А как получить ID элемента на основе его сlass’а?
    Более подробно:
    Есть несколько select’ов одного класса например cldss=”myclass”.
    Так:
    $(document).ready(function() {
    $(“.myclass”).change(function() {
    var Test = $(“# option:selected”).val();
    alert(Test);
    });
    });
    Вот как определить в котором что-то изменили?

  • Разобрался:
    $(document).ready(function() {
    $(“.myclass”).change(function() {
    alert($(this).attr(“id”));
    });
    });
    Дальше проще, но стоило бы в статейке и про эти выкрутасы написать )))

  • В полном обьеме так:
    $(document).ready(function() {
    $(“.myclass”).change(function() {
    var objTest = $(this).attr(“id”);
    var objVal = $(“#” + objTest).val();
    alert(objVal);
    });
    });