Почему важно использовать $(this) вместо повторного выбора класса?
Я использую много анимации и редактирования css в своем коде, и я знаю, что могу упростить его, используя $(this).
Почему важно использовать $(this) вместо повторного выбора класса?
Я использую много анимации и редактирования css в своем коде, и я знаю, что могу упростить его, используя $(this).
Когда вы выполняете запрос 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.
$(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:=)
Посмотрите на этот код:
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
встречается при работе с объектно-ориентированными системами или, как в нашем случае, в элементарных системах:)
с использованием $(this) улучшает производительность, так как класс/любой контент, используемый для поиска, не нужно искать несколько раз во всем содержимом веб-страницы.
$(this)
возвращает версию элемента cached
, что повышает производительность, поскольку jQuery не должен снова выполнять полный поиск в DOM элемента.