Метод $() и его варианты

Метод $() является основным инструментом библиотеки Dom7 для работы с DOM-элементами в JavaScript. Он предоставляет удобный и компактный способ выбора элементов, добавления обработчиков событий, изменения атрибутов и стилей, а также выполнения других операций над элементами страницы.

Основы работы с $()

Метод $() принимает строку селектора или DOM-элемент и возвращает объект Dom7 — коллекцию элементов с набором методов для манипуляций.

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

// Выбор элементов по селектору CSS
var items = $('.item');

// Выбор элемента по ID
var header = $('#header');

// Превращение обычного DOM-элемента в объект Dom7
var element = $(document.querySelector('.content'));

Ключевой особенностью является то, что объект Dom7 ведет себя как массив, поддерживая индексированный доступ к элементам (items[0]) и методы итерации (each).

Варианты вызова $()

  1. С CSS-селектором Метод возвращает коллекцию всех элементов, подходящих под селектор.
var buttons = $('button'); // все кнопки на странице
buttons.each(function(index, el) {
  console.log(el);
});
  1. С HTML-строкой Позволяет создавать новые элементы. Строка должна содержать корректный HTML.
var newDiv = $('<div class="box">Контент</div>');
$('body').append(newDiv);
  1. С DOM-объектом Если передать реальный DOM-элемент, $() обернет его в объект Dom7.
var container = $(document.getElementById('container'));
container.addClass('active');
  1. С массивом DOM-элементов Можно передавать сразу несколько элементов в виде массива или NodeList:
var nodes = document.querySelectorAll('.item');
var items = $(nodes);
items.css('color', 'red');

Основные методы, доступные после $()

Объект Dom7 предоставляет богатый набор методов для работы с выбранными элементами:

  • Manipulation

    • addClass(className) — добавление CSS-класса
    • removeClass(className) — удаление CSS-класса
    • toggleClass(className) — переключение класса
    • attr(name, value) — получение или установка атрибута
    • css(property, value) — установка стиля

  • Traversal

    • find(selector) — поиск потомков
    • parent() — получение родительского элемента
    • children(selector) — выбор детей с опциональным фильтром
    • siblings() — выбор соседних элементов

  • Events

    • on(event, handler) — привязка обработчика
    • off(event, handler) — удаление обработчика
    • once(event, handler) — однократный обработчик
    • trigger(event, data) — вызов события

  • DOM Manipulation

    • append(element) — добавление в конец
    • prepend(element) — добавление в начало
    • remove() — удаление элемента
    • html(content) — получение или установка HTML
    • text(content) — получение или установка текста

Примеры сложных комбинаций

// Добавление класса всем кнопкам внутри контейнера
$('#container').find('button').addClass('highlight');

// Создание нового блока и добавление его в конец body
var block = $('<div class="new-block">Новый блок</div>');
$('body').append(block);

// Установка обработчика на все элементы с классом .item
$('.item').on('click', function(e) {
  $(this).toggleClass('selected');
});

Особенности поведения $()

  • Метод $() всегда возвращает объект Dom7, даже если найден только один элемент или его нет. Пустой результат все равно является коллекцией Dom7, что позволяет безопасно вызывать методы без проверки на null.
  • Коллекции Dom7 поддерживают цепочку методов:
$('.item').addClass('active').css('color', 'blue').on('click', function() {
  $(this).toggleClass('clicked');
});
  • При использовании HTML-строк $() создает элементы в памяти, они не добавляются в DOM до явного вызова методов append, prepend или других манипуляций.

Отличия от jQuery

Dom7 похож на jQuery, но имеет более компактный и легковесный набор функций. Он ориентирован на современные браузеры и не поддерживает устаревшие методы, такие как live() или delegate(). Основное преимущество — высокая скорость и малый размер библиотеки.

Советы по эффективному использованию

  • Для больших коллекций элементов лучше использовать селекторы по классам, так как querySelectorAll работает быстрее, чем по тегу.
  • Для динамически создаваемых элементов обработчики событий можно назначать сразу после создания, используя цепочку методов.
  • При частых манипуляциях с DOM рекомендуется сначала собирать элементы в объект Dom7 и выполнять операции на этом объекте, а не каждый раз искать элементы заново.

Метод $() и его варианты обеспечивают удобную, гибкую и эффективную работу с DOM, делая код лаконичным и читаемым.

Оглавление