jQuery Селекторы
Селекторы jQuery позволяют работать с группами HTML-элементов или отдельными элементами.
Селекторы jQuery
Селекторы jQuery позволяют работать с группами HTML-элементов или отдельными элементами.
Селекторы jQuery "находят" (или выбирают) HTML-элементы на основе id элемента, класса, типа, атрибутов, значений атрибутов и т. д. Они основаны на уже существующихселекторах CSS, кроме того, у них также есть некоторые пользовательские селекторы.
Все селекторы в jQuery начинаются со знака доллара: $().
Селектор элемента
Селектор элемента jQuery выбирает элементы по имени элемента.
Выбрать все элементы <p> на странице:
Пример
После того как пользователь нажимает кнопку, все элементы <p> скрываются:
Пример
Попробуйте сами »
Селектор #id
Селектор #id в jQuery выбирает указанный элемент через атрибут id HTML-элемента.
id элемента на странице должен быть уникальным, поэтому для выбора уникального элемента на странице нужно использовать селектор #id.
Синтаксис выбора элементов по id выглядит так:
Пример
После того как пользователь нажмёт кнопку, элемент с атрибутом id="test" будет скрыт:
Пример
Попробуйте сами »
Селектор .class
Селектор класса в jQuery может находить элементы по указанному классу.
Синтаксис выглядит так:
Пример
После того как пользователь нажимает кнопку, все элементы с атрибутом class="test" скрываются:
Пример
Попробуйте сами »
Другие примеры
| Синтаксис | Описание | Пример |
|---|---|---|
| $("*") | Выбрать все элементы | Онлайн-пример |
| $(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") | Выбрать все элементы <input> и элементы <button> с type="button" | Онлайн-пример |
| $("tr:even") | Выбрать элементы <tr> на чётных позициях | Онлайн-пример |
| $("tr:odd") | Выбрать элементы <tr> на нечётных позициях | Онлайн-пример |
Использование функций jQuery в отдельном файле
Если ваш сайт содержит много страниц и вы хотите, чтобы функции jQuery было легко поддерживать, поместите ваши функции jQuery в отдельный файл .js.
Когда мы демонстрируем jQuery в руководстве, мы добавляем функции непосредственно в раздел <head>. Однако лучше поместить их в отдельный файл, вот так (ссылайтесь на файл через атрибут src):