Селекторы jQuery
Селекторы jQuery - одна из самых важных частей библиотеки jQuery.
Селекторы jQuery
Селекторы jQuery позволяют Вам выбирать и управлять элементом (ами) HTML.
Селекторы jQuery используются, чтобы "найти" (или выбрать) элементы HTML на основе их идентификаторов, классов, типов, атрибутов, значений атрибутов и других признаков. Они основаны на существующих CSS Селекторах, и кроме того, существуют некоторые собственные селекторы.
Все селекторы в jQuery начинаются со знака доллара и круглых скобок: $().
Селектор элемента
jQuery селектор элемента выбирает элементы на основании имени элемента.
Можно выбрать все элементы <p> на странице следующим образом:
Пример
Когда пользователь щелкает по кнопке, все <p> элементы будут скрыты:
#id Селектор
jQuery селектор #id использует атрибут идентификатора HTML-тэга, чтобы найти определенный элемент.
Идентификатор должен быть уникальным в пределах страницы, таким образом, следует использовать #id селектор, когда Вы хотите найти единственный, уникальный элемент.
Чтобы найти элемент с определенным идентификатором, напишите символ хеша, сопровождаемый идентификатором элемента:
Пример
Когда пользователь щелкает по кнопке, элемент с идентификатором "test" будет скрыт:
Селектор .class
jQuery селектор класса находит элементы с определенным классом.
Чтобы найти элементы с определенным классом, напишите символ точки, сопровождаемый именем класса:
Пример
Когда пользователь щелкнет по кнопке, элементы с классом "test" будут скрыты:
Еще Примеры Селекторов jQuery
| Синтаксис | Описание | Пример |
|---|---|---|
| $("*") | Выбрать все элементы | Показать |
| $(this) | Выбрать текущий HTML элемент | Показать |
| $("p.intro") | Выбрать все элементы <p> с классом "intro" | Показать |
| $("p:first") | Выбрать первый элемент <p> | Показать |
| $("ul li:first") | Выбрать первый элемент <li> первого списка <ul> | Показать |
| $("ul li:first-child") | Выбрать первый элемент <li> каждого списка <ul> | Показать |
| $("[href]") | Выбрать все элементы с атрибутом href | Показать |
| $("a[target='_blank']") | Выбрать все элементы <a> со значением атрибута target равным "_blank" | Показать |
| $("a[target!='_blank']") | Выбрать все элементы <a> со значением атрибута target НЕ равным "_blank" | Показать |
| $(":button") | Выбрать все элементы <button> и <input> с типом type="button" | Показать |
| $("tr:even") | Выбрать все четные элементы <tr> | Показать |
| $("tr:odd") | Выбрать все нечетные элементы <tr> | Показать |
Функции в Отдельном Файле
Если Ваш веб-сайт содержит много страниц, и Вы хотите, чтобы Ваши функции jQuery было проще обслуживать, можно вставить Ваши функции jQuery в отдельный .js файл.
Когда jQuery демонстрируется в постах сайта, функции добавляются непосредственно в раздел <head>. Однако, иногда более предпочтительно разместить их в отдельный файл, например так (используйте атрибут src, чтобы сослаться на .js файл):
