JQuery $(this) ключевое слово

Ответ 1

Когда вы выполняете запрос DOM через jQuery, например $('class-name'), он активно ищет этот элемент в DOM и возвращает этот элемент со всеми прикрепленными методами-прототипами jQuery.

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

$('.class-name').on('click', (evt) => {
    $(this).hide(); // does not run a DOM query
    $('.class-name').hide() // runs a DOM query
}); 

$(this) будет содержать элемент, который вы первоначально запросили. Он снова присоединит все методы-прототипы jQuery, но ему не придется снова искать DOM.

Еще немного информации:

Веб-производительность с селекторами jQuery

Цитата из веб-блога, который больше не существует, но я оставлю его здесь ради истории:

На мой взгляд, один из лучших советов по производительности jQuery - свести к минимуму использование jQuery. То есть найдите баланс между использованием jQuery и обычного JavaScript, и для начала лучше всего воспользоваться этим. Многие разработчики используют $ (this) исключительно как молоток внутри обратных вызовов и забывают об этом, но разница очевидна:

Когда внутри jQuery методы анонимная функция обратного вызова, это ссылка на текущий элемент DOM. $ (this) превращает это в jQuery объект и предоставляет методы jQuerys. Объект JQuery больше ничего чем расширенный массив элементов DOM.

Ответ 2

$(document).ready(function(){
   $('.somediv').click(function(){
   $(this).addClass('newDiv'); // this means the div which is clicked
   });                         // so instead of using a selector again $('.somediv');
});                           // you use $(this) which much better and neater:=)

Ответ 3

Посмотрите на этот код:

HTML:

<div class="multiple-elements" data-bgcol="red"></div>
<div class="multiple-elements" data-bgcol="blue"></div>

JS:

$('.multiple-elements').each(
    function(index, element) {
        $(this).css('background-color', $(this).data('bgcol')); // Get value of HTML attribute data-bgcol="" and set it as CSS color
    }
);

this относится к текущему элементу, в котором движок DOM работает или ссылается на.

Другой пример:

<a href="#" onclick="$(this).css('display', 'none')">Hide me!</a>

Надеюсь, ты сейчас поймешь. Ключевое слово this встречается при работе с объектно-ориентированными системами или, как в нашем случае, в элементарных системах:)

Ответ 4

с использованием $(this) улучшает производительность, так как класс/любой контент, используемый для поиска, не нужно искать несколько раз во всем содержимом веб-страницы.

Ответ 5

$(this) возвращает версию элемента cached, что повышает производительность, поскольку jQuery не должен снова выполнять полный поиск в DOM элемента.