В настоящее время я работаю над этим уроком: Начало работы с jQuery
Для двух примеров ниже:
$("#orderedlist").find("li").each(function (i) {
$(this).append(" BAM! " + i);
});
$("#reset").click(function () {
$("form").each(function () {
this.reset();
});
});
Обратите внимание, что в первом примере мы используем $ (this)
, чтобы добавить текст внутри каждого элемента li
. Во втором примере мы используем this
непосредственно при сбросе формы.
$ (это)
, кажется, используется намного чаще, чемэто
.
Я предполагаю, что в первом примере $ ()
преобразует каждый элемент li
в объект jQuery, который понимает функцию append ()
, тогда как во втором примере reset ()
можно вызвать непосредственно на форма.
В основном нам нужен $ ()
для специальных функций только для jQuery.
Это правильно?
Да, вам нужен только $ ()
, когда вы используете jQuery. Если вы хотите, чтобы jQuery помогал делать DOM-вещи, просто имейте это в виду.
$(this)[0] === this
В основном каждый раз, когда вы получаете набор элементов назад, jQuery превращает его в объект jQuery. Если вы знаете, что у вас есть только один результат, он будет в первом элементе.
$("#myDiv")[0] === document.getElementById("myDiv");
И так далее...
$ ()
- это функция конструктора jQuery.
это
является ссылкой на элемент вызова DOM.
Таким образом, в основном, в $ (this)
вы просто передаете this
в $ ()
в качестве параметра, чтобы вы могли вызывать методы и функции jQuery.
При использовании jQuery
рекомендуется обычно использовать $ (this)
. Но если вы знаете (вы должны узнать и знать) разницу, иногда удобнее и быстрее использовать просто «это». Например:
$(".myCheckboxes").change(function(){
if(this.checked)
alert("checked");
});
легче и чище, чем
$(".myCheckboxes").change(function(){
if($(this).is(":checked"))
alert("checked");
});
это
элемент, $ (это)
является объектом 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 < / sup > содержится в контекст выполнения
Область действия относится к текущему ** Execution Context ECMA < / sup >***. Чтобы понять «это», важно понимать, как контексты выполнения работают в JavaScript.
Когда контроль входит в контекст выполнения (код выполняется в этой области) среда для переменных настраивается (Лексическая и переменная среды - по сути, это создает область для ввода переменных, которые уже были доступны, и область для локальных переменных, которые будут сохранены) и происходит связывание this
.
Контексты выполнения образуют логический стек. В результате контексты глубже в стеке имеют доступ к предыдущим переменным, но их привязки могут быть изменены. Каждый раз, когда jQuery вызывает функцию обратного вызова, она изменяет эту привязку , используя [apply
MDN < / sup >](https://developer.mozilla.org/en-US / docs / Веб / JavaScript / Ссылка / Global_Objects / Функция / Apply) .
callback.apply( obj[ i ] )//where obj[i] is the current element
Результатом вызова apply
является то, что внутри функций обратного вызова jQuery, это
относится к текущему элементу , используемому функцией обратного вызова.
Например, в .each
обычно используемая функция обратного вызова допускает .each (функция (index, element) {/ * scope * /})
. В этой области this == element
является true.
Обратные вызовы jQuery используют функцию application для связывания вызываемой функции с текущим элементом. Этот элемент взят из массива элементов объекта jQuery. Каждый построенный объект jQuery содержит массив элементов, которые соответствуют selector jQuery API < / sup > , который использовался для создания объекта jQuery.
$ (селектор)
вызывает функцию 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')