'$ (This)' ve 'this' arasındaki fark nedir?

Şu anda bu öğretici ile çalışıyorum: jQuery ile Başlarken

Aşağıdaki iki örnek için:

$("#orderedlist").find("li").each(function (i) {
    $(this).append(" BAM! " + i);
});
$("#reset").click(function () {
    $("form").each(function () {
        this.reset();
    });
});

İlk örnekte, $(this)her liöğenin içine bazı metinler eklemek için kullandığımıza dikkat edin . İkinci örnekte thisformu sıfırlarken doğrudan kullanıyoruz .

$(this)daha sık kullanılıyor gibi görünüyor this.

Benim tahminim ilk örnekte, $()her liöğeyi append()işlevi anlayan bir jQuery nesnesine dönüştürürken , ikinci örnekte reset()doğrudan form üzerinde çağrılabilir.

Temel olarak $()sadece özel jQuery işlevlerine ihtiyacımız var.

Bu doğru mu?

Evet, sadece $()jQuery kullanırken ihtiyacınız var . JQuery'nin DOM işlerinde yardım etmesini istiyorsanız bunu aklınızda bulundurun.

$(this)[0] === this

Temelde öğeleri bir dizi geri almak her zaman jQuery bunu bir jQuery nesnesine dönüştürür . Sadece bir sonucun olduğunu biliyorsan, ilk unsurda olacak.

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

Ve bunun gibi...

$() jQuery yapıcı işlevidir.

this , invokasyonun DOM öğesine bir referanstır.

Yani temel olarak, içinde $(this), sadece geçiyoruz thisiçinde $()jQuery yöntem ve işlevleri çağırmak diye bir parametre olarak.

Evet, $(this)jQuery işlevlerine ihtiyacınız vardır , ancak jQuery kullanmayan öğenin temel javascript yöntemlerine erişmek istediğinizde, yalnızca kullanabilirsiniz this.

Kullanırken jQuery, $(this)genellikle kullanılması tavsiye edilir . Ancak farkı biliyorsanız (öğrenmeli ve bilmelisiniz), bazen sadece kullanmak daha uygun ve daha hızlıdır this. Örneğin:

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

daha kolay ve daha saf

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

thisöğedir, $(this)bu öğeyle oluşturulmuş jQuery nesnesidir

$(".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);
});

Daha derin bir bakış

this^MDN bir yürütme bağlamında bulunur

Kapsam, geçerli Yürütme Bağlamı ^ECMA'yı ifade eder . Anlamak için this, yürütme bağlamlarının JavaScript'te nasıl çalıştığını anlamak önemlidir.

yürütme bağlamları bunu bağlar

Denetim bir yürütme bağlamına girdiğinde (kod bu kapsamda yürütülür) değişkenler için ortam ayarlanır (Sözlüksel ve Değişken Ortamlar - esas olarak bu, girilebilen değişkenler için bir alan ve yerel değişkenler için bir alan oluşturur. saklanır) ve bağlanması thismeydana gelir.

jQuery bunu bağlar

Yürütme bağlamları mantıksal bir yığın oluşturur. Sonuç, yığının derinliklerindeki bağlamların önceki değişkenlere erişebilmesidir, ancak bağları değişmiş olabilir. JQuery her geri çağırma işlevi çağırdığında, apply^MDN kullanarak bu bağlamayı değiştirir .

callback.apply( obj[ i ] )//where obj[i] is the current element

Arama sonucu applyolduğunu jQuery geri arama fonksiyonların içinde thismevcut element anlamına gelir geri arama fonksiyonu tarafından kullanılır.

Örneğin, içinde .each, yaygın olarak kullanılan geri arama işlevi izin verir .each(function(index,element){/*scope*/}). Bu kapsamda this == elementdoğrudur.

jQuery geri çağrıları, çağrılan işlevi geçerli öğeyle bağlamak için uygula işlevini kullanır. Bu öğe, jQuery nesnesinin element dizisinden gelir. Oluşturulan her jQuery nesnesi , jQuery nesnesini örneklemek için kullanılan seçici ^{jQuery API'siyle} eşleşen bir dizi öğe içerir .

$(selector)jQuery işlevini çağırır (unutmayın , kod: $için bir başvurudır ). Dahili olarak, jQuery işlevi bir işlev nesnesini başlatır. Bu yüzden dahili kullanımları kullanarak hemen belli olmasa da . Bu jQuery nesnesinin yapısının bir kısmı, seçicinin tüm eşleşmelerini bulmaktır. Yapıcı ayrıca html dizelerini ve öğelerini de kabul edecektir . JQuery yapıcısına ilettiğinizde, oluşturulacak bir jQuery nesnesinin geçerli öğesini geçirirsiniz . JQuery nesnesi daha sonra seçiciyle eşleşen DOM öğelerinin dizi benzeri bir yapısını içerir (veya yalnızca bu durumda tek bir öğe ).jQuerywindow.jQuery = window.$ = jQuery;$()new jQuery()thisthis

JQuery nesnesi oluşturulduktan sonra, jQuery API'si artık gösterilmektedir. Bir jQuery api işlevi çağrıldığında, bu dizi benzeri yapı üzerinde dahili olarak yinelenir. Dizideki her öğe için, API'nin geri arama işlevini çağırır ve geri aramaları thisgeçerli öğeye bağlar . Bu çağrı obj, dizi benzeri yapının ibulunduğu ve geçerli öğenin dizisindeki konum için kullanılan yineleyici olan yukarıdaki kod snippet'inde görülebilir .

Evet, $(this)nesneyi kullanarak jQuery işlevini etkinleştirdiniz. Sadece kullanarak this, sadece genel Javascript işlevselliğine sahiptir.

thisbir javascript nesnesine başvuruda bulunur ve $(this)jQuery ile kapsüllemek için kullanılır.

Örnek =>

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