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