Селекторы jQuery

Селекторы jQuery – это одна из важнейших частей библиотеки jQuery.

Селекторы jQuery позволяют делать выборки и манипулировать элементами HTML.

Селекторы jQuery используются, чтобы "найти" (или выбрать) элементы HTML, основываясь на их имени, идентификаторе, классах, типах, атрибутах, значениях атрибутов и т.д. В их основе лежат существующие селекторы CSS, плюс некоторые собственные селекторы библиотеки.

Все селекторы в jQuery начинаются с символа доллара и круглых скобок: $().

Селектор элемента

jQuery селектор элемента выбирает элемент по его имени.

Вы можете выбрать все элементы <p> на странице следующем образом:


$("p")

В следующем примере, когда пользователь нажмет на кнопку, все элементы <p> будут скрыты:


$(document).ready(function(){
  $("button").click(function(){
     $("p").hide();
  });
}); 

Селектор по идентификатору

jQuery селектор по идентификатору использует идентификатор (атрибут id) тега HTML, чтобы найти заданный элемент.

Идентификатор должен быть уникальным на странице, поэтому селектор по идентификатору обычно используется тогда, когда необходимо найти один уникальный элемент.

Чтобы найти элемент с определенным идентификатором, напишите символ решетки (#), за которым следует имя идентификатора HTML элемента:


$("#test") 

В следующем примере, когда пользователь нажимает на кнопку, элемент с атрибутом id="test" скрывается:


$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
   });
}); 

Селектор по классу

jQuery селектор по классу ищет элементы с заданным классом (атрибут class).

Чтобы найти элементы с определенным классом, напишите точку (.), за которой следует имя класса:


$(".test") 

В следующем примере, когда пользователь нажимает на кнопку, элементы с атрибутом class="test" скрываются:


$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
}); 

Еще примеры jQuery селекторов

СинтаксисОписание
$("*")Выбирает все элементы
$(this)Выбирает текущий HTML элемент
$("p.intro")Выбирает все элементы <p> с атрибутом class="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, то для простоты их обслуживания можно разместить их в отдельном .js файле.

В нашем учебнике для демонстрации jQuery код добавляется непосредственно в тег <head>. Тем не менее, иногда предпочтительнее размещать их в отдельном файле (для этого используйте атрибут src тега <script>).

Пример:


<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="//msiter.ru/my_jquery_functions.js"></script>
</head>