Яка різниця між "$ (цим)" і "цим"?

Зараз я працюю над цим підручником: Початок роботи з jQuery

Для двох прикладів нижче:

$("#orderedlist").find("li").each(function (i) {
    $(this).append(" BAM! " + i);
});
$("#reset").click(function () {
    $("form").each(function () {
        this.reset();
    });
});

Зауважте у першому прикладі, ми використовуємо $(this)для додавання деякого тексту всередині кожного liелемента. У другому прикладі ми використовуємо thisбезпосередньо під час скидання форми.

$(this)здається, використовується набагато частіше, ніж this.

Я здогадуюсь у першому прикладі - $()це перетворення кожного liелемента в об'єкт jQuery, який розуміє append()функцію, тоді як у другому прикладі reset()можна викликати безпосередньо форму.

В основному нам потрібні $()спеціальні функції, які відповідають лише jQuery.

Це правильно?

Так, вам потрібно лише $()тоді, коли ви використовуєте jQuery. Якщо ви хочете допомогти jQuery робити DOM речі, просто пам’ятайте про це.

$(this)[0] === this

В основному кожен раз, коли ви повертаєтесь набір елементів, jQuery перетворює його в об’єкт jQuery . Якщо ви знаєте, що у вас є лише один результат, це буде в першому елементі.

$("#myDiv")[0] === document.getElementById("myDiv");

І так далі...

$() - функція конструктора jQuery.

this є посиланням на елемент DOM виклику.

Таким чином, в $(this), ви просто передаєте thisв $()якості параметра, щоб ви могли викликати методи і функції jQuery.

Так, вам потрібні $(this)функції jQuery, але коли ви хочете отримати доступ до основних методів JavaScript елемента, який не використовує jQuery, ви можете просто використовувати this.

Під час використання jQueryрекомендується використовувати $(this)зазвичай. Але якщо ви знаєте (ви повинні навчитися і знати) різницю, іноді це зручніше і швидше використовувати просто this. Наприклад:

$(".myCheckboxes").change(function(){ 
    if(this.checked) 
       alert("checked"); 
});

легше і чистіше, ніж

$(".myCheckboxes").change(function(){ 
      if($(this).is(":checked")) 
         alert("checked"); 
});

this- це елемент, $(this)об'єкт jQuery, побудований з цим елементом

$(".class").each(function(){
 //the iterations current html element 
 //the classic JavaScript API is exposed here (such as .innerHTML and .appendChild)
 var HTMLElement = this;

 //the current HTML element is passed to the jQuery constructor
 //the jQuery API is exposed here (such as .html() and .append())
 var jQueryObject = $(this);
});

Глибший погляд

this^MDN міститься у контексті виконання

Область стосується поточного контексту виконання ^ECMA . Аби зрозумітиthis , важливо зрозуміти спосіб роботи контекстів виконання в JavaScript.

Контексти виконання це пов'язують це

Коли управління входить у контекст виконання (код виконується в цій області), середовище для змінних встановлюється (Lexical and Variable Environment - по суті, це встановлює область для змінних, які вже були доступні, і область для локальних змінних зберігається), і відбувається зв’язування this.

jQuery пов'язує це

Контексти виконання утворюють логічний стек. Результат полягає в тому, що контексти, розташовані глибше в стеку, мають доступ до попередніх змінних, але їх прив'язки, можливо, були змінені. Кожен раз, коли jQuery викликає функцію зворотного дзвінка, вона змінює цю прив'язку за допомогою apply^MDN .

callback.apply( obj[ i ] )//where obj[i] is the current element

Результатом виклику applyє те, що всередині функцій зворотного виклику jQuery thisпосилається на поточний елемент, який використовується функцією зворотного виклику.

Наприклад, у .each, звичайно використовується функція зворотного виклику .each(function(index,element){/*scope*/}). У цьому обсязі this == elementце правда.

Відклики jQuery використовують функцію застосувати для прив'язки функції, що викликається, з поточним елементом. Цей елемент походить з масиву елементів об’єкта jQuery. Кожен побудований об’єкт jQuery містить масив елементів, які відповідають ^API селектора ^jQuery, який використовувався для інстанцізації об'єкта jQuery.

$(selector)викликає функцію jQuery (пам'ятайте, що $це посилання на jQueryкод window.jQuery = window.$ = jQuery;:). Внутрішньо функція jQuery створює об'єкт функції. Тож, хоча це може бути не відразу очевидним, використовуючи $()внутрішнє використання new jQuery(). Частина конструкції цього об'єкта jQuery полягає у пошуку всіх збігів селектора. Конструктор також прийме HTML-рядки та елементи . Коли ви переходите thisдо конструктора jQuery, ви передаєте поточний елемент для об'єкта jQuery, з яким потрібно побудувати . Потім об'єкт jQuery містить структуру, схожу на масив елементів DOM, що відповідає селектору (або лише окремому елементу у випадку this).

Після того, як об’єкт jQuery побудований, API jQuery тепер відкритий. Коли викликається функція jQuery api, вона буде внутрішньо повторюватися над цією структурою, подібною до масиву. Для кожного елемента в масиві він викликає функцію зворотного виклику для api, прив'язуючи зворотний виклик thisдо поточного елемента. Цей виклик можна побачити в фрагменті коду вище, де objє структура, схожа на масив, і iє ітератором, який використовується для позиції в масиві поточного елемента.

Так, використовуючи $(this), ви включили функцію jQuery для об'єкта. Просто використовуючи this, він має лише загальну функціональність Javascript.

thisпосилання на об’єкт javascript і $(this)використовується для інкапсуляції з jQuery.

Приклад =>

// Getting Name and modify css property of dom object through jQuery
var name = $(this).attr('name');
$(this).css('background-color','white')

// Getting form object and its data and work on..
this = document.getElementsByName("new_photo")[0]
formData = new FormData(this)

// Calling blur method on find input field with help of both as below
$(this).find('input[type=text]')[0].blur()

//Above is equivalent to
this = $(this).find('input[type=text]')[0]
this.blur()

//Find value of a text field with id "index-number"
this = document.getElementById("index-number");
this.value

or 

this = $('#index-number');
$(this).val(); // Equivalent to $('#index-number').val()
$(this).css('color','#000000')