это против $(это)

Часто в функции вы захотите сослаться на объект, вызвавший функцию. Например, в функции обработчика кликов jQuery вы захотите легко получить доступ к элементу DOM, который был нажат, например:

<ul>
    <li>Item1</li>
    <li>Item2</li>
</ul>
<script>
    $('li').click(function() {
        // Add a class to the specific li that was clicked.
    });
</script>

Вы можете использовать ключевое слово Javascript this, которое в случае обратного вызова обработчика событий является ссылкой на элемент DOM, с которого началось событие, например.

<ul>
    <li>Item1</li>
    <li>Item2</li>
</ul>
<script>
    $('li').click(function() {
        $(this).toggleClass('active');
    });
</script>

Этот код добавит «активный» класс к конкретному элементу li, который был нажат.

Но подождите, почему мы используем $(this), а не просто this?

это и $(это)

Когда вы создаете экземпляр jQuery, вы делаете это следующим образом: $( … ), где «…» — некоторый параметр. Вы можете передать строку в качестве параметра, например. $(‘li’). Или вы можете передать ссылку на узел DOM, например.

// 'divs' is a collection of DOM node references
var divs = document.getElementById('div');
// $divs is a jQuery object referencing all the divs. Note the parameter is the variable 'divs', not a string
var $divs = $(divs);

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

Или, если вам не нужно использовать какой-либо метод jQuery, вы, конечно, можете просто использовать чистый JS, например.

// Pure JS
this.classList.toggle('active');
// jQuery
$(this).toggleClass('active')

TL;DR: если this является ссылкой на элемент DOM, разница между this и $(this) заключается в том, что во-первых, это просто ссылка, во-вторых, к ссылке добавляется библиотека jQuery.

Остались вопросы? Мы предоставляем больше демонстраций в видео ниже:

JS Dojo: учебные пособия по Javascript с поддержкой в ​​режиме реального времени

Поднимите свои навыки до профессионального уровня в живой интерактивной среде кодирования с отраслевым экспертом, который заглядывает вам через плечо.

Чтобы узнать больше о JS Dojo и присоединиться к нашей закрытой бета-программе, посетите нас здесь: https://getjsdojo.com