Какая разница между "$ (this)" и "this"?

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

Правильно ли это?

Ответ 1

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

$(this)[0] === this

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

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

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

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

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

проще и чище, чем

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

Ответ 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 содержит массив элементов, которые соответствуют селектору ^{jQuery API}, который использовался для создания экземпляра jQuery объект.

$(selector) вызывает функцию jQuery (помните, что $ является ссылкой на jQuery, code: window.jQuery = window.$ = jQuery;). Внутренне функция jQuery создает объект функции. Поэтому, хотя это может быть не сразу очевидным, использование $() внутренне использует new jQuery(). Часть конструкции этого объекта jQuery состоит в том, чтобы найти все совпадения селектора. Конструктор также примет html строки и элементы. Когда вы передаете this в конструктор jQuery, вы передаете текущий элемент для объекта jQuery, который будет создан с помощью. Затем объект jQuery содержит массив-подобную структуру элементов DOM, соответствующих селектору (или только одному элементу в случае this).

Как только объект jQuery будет создан, теперь будет открыт API jQuery. Когда вызывается функция jQuery api, она будет внутренне перебирать эту массивную структуру. Для каждого элемента массива он вызывает функцию обратного вызова для api, привязывая обратный вызов this к текущему элементу. Этот вызов можно увидеть в фрагменте кода выше, где obj - структура, подобная массиву, и i - это итератор, используемый для позиции в массиве текущего элемента.

Ответ 6

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

Ответ 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')