"$(this)" или "this" в jQuery: различия и применение

Быстрый ответ

// 'this' — это объект HTML, являющийся источником события, к которому можно обращаться напрямую.
$("button").click(function() {
  console.log(this); // Познакомьтесь с HTMLButtonElement во всей его красе.
});

// '$(this)' — это 'this', обернутый в функциональность jQuery, удобная вещь!
$("button").click(function() {
  console.log($(this).text()); // Болтуня, возвращает текст кнопки без противоречий!
});

this можно сравнить с примитивным инструментом из каменного века: прямой доступ к HTML-элементу в обработчике события. Тогда как $(this) — это швейцарский армейский нож современных web-разработчиков — превращение this в многоцелевой объект jQuery открывает обширные возможности для работы с DOM.

Детальный разбор 'this' и '$(this)'

Магия $(this)

В мире jQuery $(this) играет роль волшебного жезла. Она превращает простое ключевое слово this в объект jQuery, предоставляя доступ ко всему арсеналу удобных jQuery-методов.

Вот пример:

$('.myClass').each(function() {
  // jQuery в действии: благодаря ему элементы растут как грибы после дождя...
  console.log($(this).height()); 
});

Здесь $(this) предоставляет нам управление над элементами: мы можем организовать анимацию, обрабатывать события или манипулировать DOM по своему усмотрению. В jQuery-объектах также удобна массивоподобная структура, что упрощает итерацию, в отличие от чистого this.

Подробнее об этом расскажет наш спикер на видео

Прелесть this

Иногда проще — лучше. Когда вам нужно прямое взаимодействие, без излишеств, просто this предоставит вам такую непосредственную связь:

$('.myClass').each(function() {
  // Стиль ниндзя в изменении CSS: незаметно, но эффективно...
  this.style.opacity = '0.5'; 
});

Здесь this задействован для работы с базовыми JavaScript-возможностями, минуя обертку jQuery в целях чистоты и скорости.

Сравнение jQuery-объекта и DOM-элемента

this связан с DOM-элементом, инициировавшим событие, и внутри функций jQuery this привязывается с помощью apply или call.

Вот краткое сравнение:

Быть простыми или нет?

Важно уметь определить, когда следует использовать $(this), а когда достаточно this. Если требуется выбрать один элемент, например по ID, то this или document.getElementById() вполне хватит:

$("#myDiv").click(function() {
  // Вы получите один и тот же DOM-элемент как используя $("#myDiv")[0], так и this — выбор за вами!
  console.log($("#myDiv")[0]); 
  console.log(this);
});

Визуализация

Представьте `this` как **Папирус** (📜):
- Основа, **базовый элемент** без дополнений.
- Стандартный HTML-элемент напрямую из DOM.

А `$(this)` — как **Роскошное издание** (📚🖋️):
- jQuery-обёртка ($), это **красивая обложка** и **финишная отделка**.
- Наделение папируса всеми возможностями jQuery-**методов** и функций.

Ключ к визуальной метафоре:

this:    [📜]
$(this): [📚🖋️]

Переходя между this (папирус) и $(this) (роскошное издание), вы открываете мир возможностей jQuery.

Практическое использование и распространённые ошибки

Тайна стрелочных функций

$(".button").click(() => {
  console.log($(this)); // Получите ничего. `this` в стрелочных функциях не привязан к текущему элементу!
});

В стрелочных функциях this наследует контекст исполнения, поэтому в jQuery используйте обычные функции для соответствия контексту элемента, с которым вы работаете.

Манипуляции с данными событий

$("input").on('keypress', function(event) {
  if (event.which === 13) { // 'this' здесь подобно Шерлоку Холмсу, проницательно анализирующему улики (в данном случае, данные события)!
    $(this).css("background-color", "green"); // А '$(this)' меняет всё на зелёное, подобно художнику с кистью!
  }
});

Оптимизация производительности

$('img').on('load', function() {
  var imageHeight = this.naturalHeight; // Берём лучшее от базовых возможностей JS и избегаем лишних оберток jQuery.
  console.log("Высота изображения:", imageHeight);
});

Использование свойства naturalHeight напрямую повышает производительность, обеспечивая доступ к данным без дополнительной обвязки jQuery.

Полезные материалы

1. this – JavaScript | MDN — основное руководство по работе с this в JavaScript.
2. В чем разница между $(this) и this? – Stack Overflow — опыт сообщества и примеры использования $(this) и this.
3. Типы данных | jQuery API Documentation — исчерпывающее руководство по внутренней структуре функции $() от разработчиков jQuery.
4. Привязка функций – JavaScript.info — глубокий анализ механизма привязки this в функциях.
5. Понятное объяснение "this" в JavaScript — объяснение различий между this в ES5 и стрелочными функциями в ES6.
6. Обучение jQuery | Codecademy — практический курс для освоения $(this) в jQuery.
7. Функции в ES5 против стрелочных функций в ES6 | автор: Джейсон Арнольд | Medium — сопоставление традиционного this и стрелочных функций нового поколения.