jQuery примеры
В последние пару лет jQuery стал очень популярным. Этот javascript framework легко изучается,
производительность и большой спектр его возможностей очень радуют.
Селекторы jQuery позволяют производить выборку элементов по разным критериям. Селекторы являются одной из главных частей фреймворка, поэтому необходимо уметь грамотно ими пользоваться. Учиться лучше всего на примерах. Поэтому я хочу поделиться с Вами информацией о методах работы с конткретными HTML элементами при помощи jQuery.
Первая заметка – о работе с HTML элементом <select>
Работа с выпадающим списком в jQuery
Основными дейсвиями, которые производятся над выпадающим списком является получение выбранного значения, добавление/удаление элементов из списка, изменение их атрибутов.
Рассмотрим эти действия по порядку. Например, у нас есть select с id=”sel”:
1 2 3 4 5 6 |
<span style="color: #a65700;"><</span><span style="font-weight: bold; color: #800000;">select</span><span style="color: #274796;"> </span><span style="color: #074726;">id</span><span style="color: #808030;">=</span><span style="color: #0000e6;">"sel"</span><span style="color: #274796;"> </span><span style="color: #074726;">name</span><span style="color: #808030;">=</span><span style="color: #0000e6;">"sel"</span><span style="color: #a65700;">></span> <span style="color: #a65700;"><</span><span style="font-weight: bold; color: #800000;">option</span><span style="color: #274796;"> </span><span style="color: #074726;">value</span><span style="color: #808030;">=</span><span style="color: #0000e6;">"0"</span><span style="color: #a65700;">></span>zero<span style="color: #a65700;"></</span><span style="font-weight: bold; color: #800000;">option</span><span style="color: #a65700;">></span> <span style="color: #a65700;"><</span><span style="font-weight: bold; color: #800000;">option</span><span style="color: #274796;"> </span><span style="color: #074726;">value</span><span style="color: #808030;">=</span><span style="color: #0000e6;">"1"</span><span style="color: #a65700;">></span>one<span style="color: #a65700;"></</span><span style="font-weight: bold; color: #800000;">option</span><span style="color: #a65700;">></span> <span style="color: #a65700;"><</span><span style="font-weight: bold; color: #800000;">option</span><span style="color: #274796;"> </span><span style="color: #074726;">value</span><span style="color: #808030;">=</span><span style="color: #0000e6;">"2"</span><span style="color: #a65700;">></span>two<span style="color: #a65700;"></</span><span style="font-weight: bold; color: #800000;">option</span><span style="color: #a65700;">></span> <span style="color: #a65700;"><</span><span style="font-weight: bold; color: #800000;">option</span><span style="color: #274796;"> </span><span style="color: #074726;">value</span><span style="color: #808030;">=</span><span style="color: #0000e6;">"3"</span><span style="color: #a65700;">></span>three<span style="color: #a65700;"></</span><span style="font-weight: bold; color: #800000;">option</span><span style="color: #a65700;">></span> <span style="color: #a65700;"></</span><span style="font-weight: bold; color: #800000;">select</span><span style="color: #a65700;">></span> |
- Получение значения выбранного элемента
1$<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'#sel option:selected'</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>val<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span> - Получить текст выбранного элемента
1$<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'#sel option:selected'</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>html<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> - Добавить элемент в конец списка
1$<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'#sel'</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>append<span style='color:#808030; '>(</span> $<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'<option value="4">four</option>'</span><span style='color:#808030; '>)</span> <span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> - Добавить элемент в начало списка
1$<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'#sel'</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>prepend<span style='color:#808030; '>(</span> $<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'<option value="-1">minus</option>'</span><span style='color:#808030; '>)</span> <span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> - Вставить элемент после заданного элемента (после второго)
1$<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'#sel option:nth-child(2)'</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>after<span style='color:#808030; '>(</span>$<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'<option value="7">inserted</option>'</span><span style='color:#808030; '>)</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> - Удалить элемент (выбранный)
1$<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'#sel option:selected'</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>remove<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> - Очистить select
1$<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'#sel'</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>empty<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> - Сделать элемент выбранным (последний)
1$<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'#sel option:last'</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>attr<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'selected'</span><span style='color:#808030; '>,</span> <span style='color:#0000e6; '>'selected'</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> - Сделать элемент недоступным (первый)
1$<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'#sel option:nth-child(3)'</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>attr<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'disabled'</span><span style='color:#808030; '>,</span> <span style='color:#0000e6; '>'disabled'</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> - И немного экзотики 🙂 Изменить цвет текста всех элементов, кроме выбранного
1$<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'#sel :not(option:selected)'</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>css<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'color'</span><span style='color:#808030; '>,</span> <span style='color:#0000e6; '>'red'</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
Как видите, ничего сложного здесь нет. В седующих постах будет рассмотрена информация
о работе с другими HTML элементами на jQuery.
Pingback: progg.ru()