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?
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...
$()
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.
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");
});
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
this
MDN 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 apply
MDN.
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.
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')