Apa perbedaan antara '$ (ini)' dan 'ini'?

Saat ini saya sedang mengerjakan tutorial ini: Memulai dengan jQuery

Untuk dua contoh di bawah ini:

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

Perhatikan pada contoh pertama, kita gunakan $(this)untuk menambahkan beberapa teks di dalam setiap lielemen. Dalam contoh kedua, kami menggunakan thislangsung saat mengatur ulang formulir.

$(this)tampaknya lebih sering digunakan daripada this.

Dugaan saya adalah dalam contoh pertama, $()adalah mengkonversi setiap lielemen menjadi objek jQuery yang memahami append()fungsi sedangkan dalam contoh kedua reset()dapat dipanggil langsung pada formulir.

Pada dasarnya kita membutuhkan $()fungsi khusus jQuery saja.

Apakah ini benar?

Ya, Anda hanya perlu $()saat menggunakan jQuery. Jika Anda ingin bantuan jQuery untuk melakukan hal-hal DOM, ingatlah ini.

$(this)[0] === this

Pada dasarnya setiap kali Anda mendapatkan satu set elemen kembali jQuery mengubahnya menjadi objek jQuery . Jika Anda tahu Anda hanya memiliki satu hasil, itu akan berada di elemen pertama.

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

Dan seterusnya...

$() adalah fungsi konstruktor jQuery.

this adalah referensi ke elemen doa DOM.

Jadi pada dasarnya, di $(this), Anda hanya melewati thisdi $()sebagai parameter sehingga Anda bisa memanggil metode jQuery dan fungsi.

Ya, Anda memerlukan $(this)fungsi jQuery, tetapi ketika Anda ingin mengakses metode javascript dasar dari elemen yang tidak menggunakan jQuery, Anda bisa menggunakannya this.

Saat menggunakan jQuery, disarankan untuk menggunakan $(this)biasanya. Tetapi jika Anda tahu (Anda harus belajar dan tahu) perbedaannya, kadang-kadang lebih mudah dan cepat untuk digunakan saja this. Contohnya:

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

lebih mudah dan lebih murni daripada

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

thisadalah elemen, $(this)adalah objek jQuery yang dibangun dengan elemen itu

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

Pandangan yang lebih dalam

this^MDN terkandung dalam konteks eksekusi

Ruang lingkup mengacu pada ^ECMA Konteks Eksekusi saat ini . Untuk memahami this, penting untuk memahami cara konteks eksekusi beroperasi dalam JavaScript.

konteks eksekusi mengikat ini

Ketika kontrol memasuki konteks eksekusi (kode dieksekusi dalam lingkup itu) lingkungan untuk variabel diatur (Lingkungan Leksikal dan Variabel - pada dasarnya ini mengatur area untuk memasukkan variabel yang sudah dapat diakses, dan area untuk variabel lokal menjadi disimpan), dan pengikatan thisterjadi.

jQuery mengikat ini

Konteks eksekusi membentuk tumpukan logis. Hasilnya adalah bahwa konteks yang lebih dalam di stack memiliki akses ke variabel sebelumnya, tetapi binding mereka mungkin telah diubah. Setiap kali jQuery memanggil fungsi panggilan balik, ia mengubah pengikatan ini dengan menggunakan apply^MDN .

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

Hasil dari panggilan applyadalah bahwa di dalam fungsi panggilan balik jQuery, thismerujuk pada elemen saat ini yang digunakan oleh fungsi panggilan balik.

Misalnya, dalam .each, fungsi panggilan balik yang umum digunakan memungkinkan untuk .each(function(index,element){/*scope*/}). Dalam lingkup itu, this == elementmemang benar.

panggilan balik jQuery menggunakan fungsi terapkan untuk mengikat fungsi yang dipanggil dengan elemen saat ini. Elemen ini berasal dari array elemen objek jQuery. Setiap objek jQuery yang dibangun berisi array elemen yang cocok dengan pemilih ^{jQuery API} yang digunakan untuk instantiate objek jQuery.

$(selector)memanggil fungsi jQuery (ingat itu $referensi ke jQuery, kode:) window.jQuery = window.$ = jQuery;. Secara internal, fungsi jQuery instantiates objek fungsi. Jadi sementara itu mungkin tidak segera jelas, menggunakan $()penggunaan internal new jQuery(). Bagian dari konstruksi objek jQuery ini adalah untuk menemukan semua kecocokan pemilih. Konstruktor juga akan menerima string dan elemen html . Ketika Anda meneruskan thiske konstruktor jQuery, Anda melewati elemen saat ini untuk objek jQuery yang akan dibangun . Objek jQuery kemudian berisi struktur mirip array dari elemen DOM yang cocok dengan pemilih (atau hanya elemen tunggal dalam kasus this).

Setelah objek jQuery dibuat, API jQuery sekarang terbuka. Ketika fungsi api jQuery dipanggil, itu akan secara internal beralih di atas struktur seperti array ini. Untuk setiap item dalam array, ia memanggil fungsi panggilan balik untuk api, yang mengikat panggilan balik thiske elemen saat ini. Panggilan ini dapat dilihat pada potongan kode di atas di mana objstruktur mirip array, dan imerupakan iterator yang digunakan untuk posisi dalam array elemen saat ini.

Ya, dengan menggunakan $(this), Anda mengaktifkan fungsionalitas jQuery untuk objek. Dengan hanya menggunakan this, itu hanya memiliki fungsi Javascript generik.

thisreferensi objek javascript dan $(this)digunakan untuk merangkum dengan jQuery.

Contoh =>

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