В чем разница между "$(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.

мое предположение в первом примере,$() is преобразование каждого li элемент в объект jQuery, который понимает append() функции, тогда как во втором примере reset() можно вызвать непосредственно на форме.

в основном нам нужны $() для специальных функций jQuery-only.

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

7 523
javascript jquery this

7 ответов:

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

$(this)[0] === this

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

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

и так далее...

484

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

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

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

356

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

88

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

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

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

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

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);
});

более глубокий взгляд

thisMDN содержится в контексте выполнения

область относится к текущему Контекст Исполнения ECMA. Для того, чтобы понять this важно понимать путь контексты выполнения работают в JavaScript.

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

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

в jQuery связывает это

контексты выполнения образуют логический стек. В результате контексты глубже в стеке имеют доступ к предыдущим переменным, но их привязки могут быть изменены. каждый раз, когда jQuery вызывает функцию обратного вызова, он изменяет эту привязку С помощью applyMDN.

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, код: window.jQuery = window.$ = jQuery;). Внутри функция jQuery создает экземпляр объекта функции. Так что пока это может быть не сразу очевидно, используя $() внутренне использует new jQuery(). Частью построения этого объекта jQuery является поиск всех совпадений селектора. Этот конструктор также будет принимать html строки и элементов. при передаче this в конструктор jQuery вы передаете текущий элемент для объекта jQuery, который будет построен с помощью. Объект jQuery содержит массив как структура DOM-элементы, соответствующие селектору (или только один элемент в случае this).

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

42

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

37

этой ссылка на объект javascript и $(этот) используется для инкапсуляции с помощью 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')
-2