В чем разница между «$ (это)» и «это»?

Question

В настоящее время я работаю над этим учебником: Начало работы с 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.

Это правильно?

Answer 1

Да, вам нужно только $(), когда вы используете jQuery. Если вам нужна помощь jQuery в выполнении DOM, просто помните об этом.

$(this)[0] === this

Обычно каждый раз, когда вы возвращаете набор элементов, jQuery превращает его в объект jQuery . Если вы знаете, что у вас есть только один результат, он будет в первом элементе.

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

И так далее ...

Answer 2

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

this является ссылкой на элемент вызова DOM.

Таким образом, в принципе, в $(this) вы просто передаете this в $() в качестве параметра, чтобы вы могли вызывать методы и функции jQuery.

Answer 3

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

Answer 4

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

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

легче и чище, чем

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

Answer 5

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.

контексты выполнения связывают это

Когда элемент управления входит в контекст выполнения (код выполняется в этой области), среда для переменных настраивается (лексическая и переменная среды - по сути, это устанавливает область для ввода переменных, которые уже были доступны, и область для локальных переменные, которые будут сохранены), и происходит привязка 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 используют функцию apply, чтобы связать функцию, вызываемую с текущим элементом. Этот элемент происходит из массива элементов объекта 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 теперь доступен. Когда вызывается функция API jQuery, она будет внутренне выполнять итерацию по этой массивоподобной структуре. Для каждого элемента в массиве он вызывает функцию обратного вызова для API, связывая this обратного вызова с текущим элементом. Этот вызов можно увидеть в приведенном выше фрагменте кода, где obj - массивоподобная структура, а i - итератор, используемый для позиции в массиве текущего элемента.

Answer 6

Да, используя $(this), вы включили функциональность jQuery для объекта. Просто используя this, он имеет только общие функции Javascript.

Answer 7

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')