Основные селекторы в jQuery и JavaScript

Основные селекторы в jQuery и JavaScript позволяют выбирать элементы DOM для работы с ними. Вот основные из них:

В JavaScript:

document.getElementById() — выбирает элемент по его идентификатору.

const element = document.getElementById('myId');   

document.getElementsByClassName() — выбирает элементы по имени класса.

const elements = document.getElementsByClassName('myClass');   

const elements = document.getElementsByTagName('div');   

document.querySelector() — выбирает первый элемент, соответствующий CSS-селектору.

const element = document.querySelector('.myClass');   

document.querySelectorAll() — выбирает все элементы, соответствующие CSS-селектору.

const elements = document.querySelectorAll('.myClass');   

Примеры использования основных селекторов в JavaScript:

<div id="myId">Элемент с ID</div>
  <div class="myClass">Элемент с классом</div>
  <div class="myClass">Еще один элемент с классом</div>
  <div>Просто div</div>

  <script>
    // Выбор по ID
    const elementById = document.getElementById('myId');
    elementById.style.color = 'red'; // Сделаем текст красным

    // Выбор по классу
    const elementsByClass = document.getElementsByClassName('myClass');
    for (let i = 0; i < elementsByClass.length; i++) {
      elementsByClass[i].style.fontWeight = 'bold'; // Сделаем текст жирным
    }

    // Выбор по тегу
    const divElements = document.getElementsByTagName('div');
    for (let i = 0; i < divElements.length; i++) {
      divElements[i].style.border = '1px solid black'; // Добавим границу к каждому div
    }

    // querySelector (первый элемент по классу)
    const firstElementByClass = document.querySelector('.myClass');
    firstElementByClass.style.backgroundColor = 'lightblue'; // Изменим цвет фона первого элемента с классом

    // querySelectorAll (все элементы по классу)
    const allElementsByClass = document.querySelectorAll('.myClass');
    allElementsByClass.forEach(el => {
      el.style.padding = '10px'; // Добавим отступы к каждому элементу с классом
    });
  </script>

В jQuery:

$('#myId');   

Выбор по классу:

$('.myClass');   

Выбор по тегу:

$('div');   

Комбинированные селекторы: Можно комбинировать селекторы так же, как в CSS.

$('div.myClass');   

Псевдоклассы:

:first — выбирает первый элемент.

$('div:first');   

:last — выбирает последний элемент.

$('div:last');   

jQuery поддерживает все селекторы CSS, что делает его более гибким для сложных выборок.

Примеры использования основных селекторов в jQuery:

<div id="myId">Элемент с ID</div>
  <div class="myClass">Элемент с классом</div>
  <div class="myClass">Еще один элемент с классом</div>
  <div>Просто div</div>

  <script>
    $(document).ready(function() {
      // Выбор по ID
      $('#myId').css('color', 'red'); // Сделаем текст красным

      // Выбор по классу
      $('.myClass').css('font-weight', 'bold'); // Сделаем текст жирным

      // Выбор по тегу
      $('div').css('border', '1px solid black'); // Добавим границу к каждому div

      // Комбинированные селекторы (div с классом)
      $('div.myClass').css('background-color', 'lightblue'); // Изменим цвет фона для div с классом

      // Псевдоклассы
      $('div:first').css('padding', '10px'); // Добавим отступы первому div
      $('div:last').css('margin', '10px'); // Добавим отступы последнему div
    });
  </script>