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

Saat ini saya bekerja melalui 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 menggunakan $(ini) untuk menambahkan beberapa teks dalam masing-masing li elemen. Pada contoh kedua kita menggunakan ini langsung ketika ulang formulir.

$(ini) tampaknya akan digunakan jauh lebih sering daripada ini.

Saya kira dalam contoh pertama, $() adalah mengkonversi masing-masing li elemen ke objek jQuery yang memahami append() fungsi sedangkan pada contoh kedua reset() dapat dipanggil secara langsung pada form.

Pada dasarnya kita perlu $() khusus untuk jQuery-satunya fungsi.

Apakah hal ini benar?

Mengomentari pertanyaan (2)
Larutan

Ya, anda hanya perlu $() ketika anda're menggunakan jQuery. Jika anda ingin jQuery's bantuan untuk melakukan DOM hal-hal yang hanya menjaga ini dalam pikiran.

$(this)[0] === this

Pada dasarnya setiap kali anda mendapatkan satu set unsur-unsur jQuery mengubahnya menjadi objek jQuery. Jika anda tahu bahwa anda hanya memiliki satu hasilnya, it's akan menjadi elemen pertama.

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

Dan sebagainya...

Komentar (3)

$() adalah jQuery fungsi constructor.

ini adalah referensi ke elemen DOM doa.

Jadi pada dasarnya, dalam $(ini), anda hanya melewati ini di $() sebagai parameter sehingga anda bisa memanggil jQuery metode dan fungsi.

Komentar (0)

Ya, anda perlu $(ini) untuk fungsi jQuery, tetapi ketika anda ingin mengakses javascript dasar metode elemen yang don't menggunakan jQuery, anda hanya dapat menggunakan ini.

Komentar (0)

Ketika menggunakan jQuery, disarankan untuk menggunakan $(ini) biasanya. Tapi jika anda tahu (anda harus belajar dan tahu) perbedaan, kadang-kadang lebih mudah dan lebih cepat untuk menggunakan hanya ini. Misalnya:

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

lebih mudah dan lebih murni daripada

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

ini adalah elemen, $(ini) adalah objek jQuery dibangun dengan elemen

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

Melihat lebih dalam

thisMDN yang terkandung dalam eksekusi konteks

Ruang lingkup mengacu pada saat ini Eksekusi KonteksECMA. Dalam rangka untuk memahami ini, hal ini penting untuk memahami cara pelaksanaan konteks yang beroperasi di JavaScript.

eksekusi konteks yang mengikat ini

Ketika kontrol memasuki eksekusi konteks (kode sedang dijalankan dalam lingkup) lingkungan untuk variabel setup (Leksikal dan Variabel Lingkungan - pada dasarnya ini set up area untuk variabel untuk memasukkan yang sudah dapat diakses, dan area untuk variabel lokal untuk disimpan), dan mengikat ini terjadi.

jQuery mengikat ini

Eksekusi konteks bentuk logis stack. Hasilnya adalah bahwa konteks yang lebih dalam stack memiliki akses ke sebelumnya variabel, tetapi mereka mungkin binding telah diubah. Setiap kali jQuery memanggil fungsi callback, itu mengubah ini mengikat dengan menggunakan applyMDN.

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

Hasil memanggil terapkan adalah bahwa di dalam jQuery callback fungsi, ini menunjuk pada elemen saat ini digunakan oleh fungsi callback.

Misalnya, dalam .masing-masing, callback function yang umum digunakan memungkinkan untuk .masing-masing(fungsi(indeks,element){/*lingkup*/}). Dalam lingkup yang, ini == elemen adalah benar.

jQuery callback gunakan menerapkan fungsi untuk mengikat fungsi yang disebut dengan elemen saat ini. Elemen ini berasal dari objek jQuery's elemen array. Masing-masing objek jQuery dibangun berisi array dari elemen-elemen yang sesuai dengan selectorjQuery API yang digunakan untuk menginstansiasi objek jQuery.

$(selector) panggilan fungsi jQuery (ingat bahwa $ adalah referensi ke jQuery, kode: jendela.jQuery = window.$ = jQuery;). Secara internal, fungsi jQuery instantiates fungsi objek. Jadi sementara ini mungkin tidak segera jelas, menggunakan $() secara internal menggunakan baru jQuery(). Bagian dari konstruksi jQuery ini tujuannya adalah untuk menemukan semua pertandingan pemilih. Konstruktor juga akan menerima html string dan unsur-unsur. Ketika anda melewati ini dengan jQuery constructor, anda melewati elemen saat ini untuk objek jQuery yang akan dibangun dengan. Objek jQuery kemudian berisi array-seperti struktur dari elemen DOM yang cocok dengan pemilih (atau hanya elemen tunggal dalam kasus ini).

Setelah jQuery objek dibangun, jQuery API sekarang terkena. Ketika jQuery fungsi api yang disebut, itu akan secara internal iterate atas array ini-seperti struktur. Untuk setiap item dalam array, itu memanggil fungsi callback untuk api, mengikat callback's ini untuk elemen saat ini. Panggilan ini dapat dilihat pada potongan kode di atas di mana obj adalah array-seperti struktur, dan aku adalah iterator digunakan untuk posisi dalam array dari elemen saat ini.

Komentar (0)

Ya, dengan menggunakan $(ini), anda diaktifkan jQuery fungsi untuk objek. Dengan hanya menggunakan ini, itu hanya memiliki generik fungsi Javascript.

Komentar (0)

ini referensi objek javascript dan $(ini) 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')
Komentar (0)