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


567

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?


2
@ Reigel, mengapa ini dilindungi? OP mempertanyakan dan menebak jawaban yang benar.
vol7ron

21
@ Reigel: Saya pikir saya harus menanyakan ini dalam meta, tetapi jika hanya itu yang diperlukan untuk perlindungan, seharusnya semua pertanyaan tidak dilindungi
vol7ron

Jawaban:


516

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...


3
Apakah ada alasan untuk menggunakan $(this)[0]lebih thisjika mereka selalu sama?
Jay

2
@ Jay Jika Anda lebih suka mengetik panjang daripada hanya menggunakan 'ini' maka ya. $ () adalah fungsi konstruktor jQuery. "'ini' adalah referensi ke elemen doa DOM. jadi pada dasarnya, dalam $ (ini), Anda hanya meneruskan ini dalam $ () sebagai parameter sehingga Anda bisa memanggil metode dan fungsi jQuery".
Juliver Galleto

2
@ Jay - Tidak ada alasan yang baik untuk menggunakan $(this)[0]saya hanya menggunakannya untuk menggambarkan konsep. :) Saya menggunakan $("#myDiv")[0]lebih dari itu document.getElementById("myDiv").
Spencer Ruport

369

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


92

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


74

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

9
Saya suka contohnya. Terima kasih!
Ammar

46

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

thisMDN 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 applyMDN .

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.


39

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


-1

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')
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.