Mengungkapkan jQuery 3:17 Fitur Baru yang Kuat &Cara Memanfaatkannya
Sudah lebih dari 10 tahun sejak jQuery mulai mengguncang web dan tetap bertahan karena alasan yang bagus. Pada bulan Juli 2015, jQuery mengumumkan alpha pertama versi 3.0 – pembaruan besar setelah sekian lama. Mereka telah mengerjakan ini selama hampir 2 tahun. Versi baru ini menjanjikan jQuery yang lebih ramping dan cepat dengan mempertimbangkan kompatibilitas ke belakang.
versi saat ini 3.1.1 memperbaiki banyak bug, menambahkan metode baru, menghapus beberapa fungsi, dan mengubah perilaku beberapa fungsi. Mari kita lihat fitur baru apa saja yang telah mereka tambahkan dan cara menggunakannya.
17. Sembunyikan dan Tampilkan Metode
Untuk meningkatkan kompatibilitas dengan desain responsif, jQuery 3 telah ditingkatkan untuk menyembunyikan banyak elemen. Pengujian yang dilakukan terhadap 54 sampel menunjukkan bahwa versi baru ini 2 persen lebih cepat dibandingkan versi sebelumnya.
Selain itu, metode .hide(), .show(), dan .toggle() akan berfokus pada gaya sebaris, bukan gaya yang dihitung. Dengan cara ini mereka akan lebih menghormati nilai tampilan stylesheet bila memungkinkan, yang berarti aturan CSS dapat berubah secara dinamis saat terjadi peristiwa seperti perubahan ukuran jendela atau reorientasi perangkat.
<script>
$( "#showr" ).click(function() {
$( "div" ).first().show( "fast", function showNext() {
$( this ).next( "div" ).show( "fast", showNext );
});
});
$( "#hidr" ).click(function() {
$( "div" ).hide( 1000 );
});
</script>
Baca:28 Efek CSS3 Menakjubkan Untuk Memberikan Tampilan Modern pada Website Anda
16. Fungsi WrapAll() dan Unwrap()
Di jQuery 2, metode .wrapAll() berperilaku seperti .wrap() ketika suatu fungsi diteruskan. Ini telah diubah sekarang – .wrapAll(function) memanggil fungsinya satu kali, menggunakan hasil string dari pemanggilan fungsi untuk membungkus seluruh koleksi.
jQuery( "div" ).wrapAll(function( /* No index argument, since the function would be executed only once */ ) {
// context is equal to the first found element
return "<h4></h4>";
});
Di jQuery 3, ada parameter pemilih opsional untuk metode unwarp(). Tanda tangan baru dari metode ini adalah:
unwrap([selector])
Ini memungkinkan Anda meneruskan string yang berisi ekspresi pemilih untuk dicocokkan dengan elemen induk. Jika ada kecocokan, elemen turunan yang cocok akan dibuka, jika tidak maka tidak akan terjadi.
15. Lebar/Tinggi Scrollbar Diperhitungkan
Di jQuery 2, panggilan ke $(window).width() akan mengembalikan 'lebar konten' yang mengecualikan scrollbar apa pun yang telah ditambahkan browser jika konten melebihi dimensi elemen. Untuk memberikan ukuran yang setara dengan kueri media CSS, $(window).outerWidth() dan $(window).outerHeight() sekarang mengembalikan lebar dan tinggi termasuk lebar dan tinggi scrollbar. Ini setara dengan properti DOM window.innerWidth.
14. Perilaku data()
Di jQuery 3, perilaku metode data() telah sedikit diubah untuk menyelaraskan metode dengan spesifikasi Dataset API. Sekarang akan mengubah semua kunci properti menjadi camel case.
var $elem = $('#container');
$elem.data({
'custom-property': 'Hello World'
});
console.log($elem.data());
Jika Anda menggunakan versi lama, Anda akan mendapatkan hasil berikut di konsol:
{custom-property: "Hello World"}
Di jQuery 3, Anda akan mendapatkan:
{customProperty: "Hello World"}
Seperti yang Anda lihat, nama properti menggunakan huruf unta tanpa tanda hubung, sedangkan pada versi lama tetap menggunakan huruf kecil dan tetap menggunakan tanda hubung.
13. Dukungan Operasi Kelas SVG
jQuery masih belum sepenuhnya mendukung SVG, namun metode yang memanipulasi nama kelas CSS seperti .hasClass() atau .addClass(), dapat digunakan untuk menargetkan dokumen SVG. Anda dapat mengubah (menambah, mengalihkan, menghapus) atau menemukan kelas dengan jQuery di SVG, lalu menata gaya kelas menggunakan CSS.
12. Filter Terlihat dan Tersembunyi
jQuery 3 mengubah arti filter :visible dan :hidden. Ini menganggap elemen :visible jika mereka memiliki kotak tata letak, termasuk yang lebar dan tingginya nol. Misalnya, elemen br dan elemen sebaris tanpa konten akan dipilih oleh filter :visible.
Jika Anda memiliki halaman HTML berikut:
<section></section>
<div></div>
<br />
dan Anda menjalankan pernyataan:
console.log($('body :visible').length);
Di jQuery 1 dan 2, Anda akan mendapatkan hasil 0, tetapi di versi ini, hasilnya adalah 3.
11. Tidak Ada Lagi Pembulatan untuk Lebar dan Tinggi
jQuery sekarang mengembalikan nilai .width(), dan .height() dalam angka mengambang, bukan bilangan bulat, kapan pun browser mendukungnya. Bagi pengguna yang mencari presisi subpiksel untuk mendesain halaman web, ini mungkin merupakan kabar baik.
Misalnya, jika Anda memiliki 3 elemen dengan lebar sepertiga (33,3333333%) di dalam elemen container yang memiliki lebar 100 piksel:
<div class="container">
<div>The car is </div>
<div>black</div>
<div>Audi</div>
</div>
Jika Anda mencoba mendapatkan lebar elemen turunan:
$('.container div').width();
Anda akan mendapatkan nilai 33.3333333, hasil yang lebih akurat.
10. Lapisan Keamanan Ekstra
Lapisan keamanan tambahan telah diintegrasikan terhadap serangan Cross-Site Scripting (XSS). Hal ini mengharuskan pengembang untuk menentukan dataType:”script” dalam opsi metode $.ajax() dan $.get(). Hal ini mencegah kemungkinan serangan ketika situs jarak jauh mengirimkan konten non-skrip namun selanjutnya memutuskan untuk menayangkan skrip berbahaya. Karena jQuery.getScript() secara eksplisit menetapkan tipe data:”script”, maka tidak terpengaruh oleh perubahan ini.
$.ajax({
accepts: {
mynewcustomtype: 'application/abc-some-custom-type'
},
// how to deserialize a `mynewcustomtype`
converters: {
'text mynewcustomtype': function(result) {
// do things
return newresult;
}
},
// Expect a `mynewcustomtype` back from server
dataType: 'mynewcustomtype'
}); 9. Tanda Hash Tidak Valid
jQuery 3 memunculkan kesalahan sintaksis jika string pemilih hanya terdiri dari tanda pagar, seperti jQuery("#") dan .find("#"). Di versi yang lebih lama, $(“#”) mengembalikan koleksi kosong dan .find(“#”) menimbulkan kesalahan.
8. Metode Baru Untuk Melarikan Diri dari String
Metode jQuery.escapeSelector() yang baru memungkinkan Anda untuk keluar dari string atau karakter apa pun yang memiliki arti khusus dalam pemilih CSS. Ini berguna jika ID atau karakter nama kelas memiliki arti khusus dalam CSS, seperti titik koma atau titik.
Misalnya, jika sebuah elemen pada halaman memiliki id “abc.xyz”, elemen tersebut tidak dapat dipilih dengan $(“abc.xyz”) karena pemilih diurai sebagai elemen dengan id 'abc', yang juga memiliki kelas 'xyz'. Namun, dapat dipilih dengan metode baru $(“#” + $.escapeSelector(“abc.xyz”)).
7. jQuery.when() Argumen
Di jQuery 3, jika Anda menambahkan argumen input dengan metode kemudian() ke $.when(), argumen tersebut akan ditafsirkan sebagai "thenable" yang kompatibel dengan Promise. Hal ini memungkinkan rentang masukan yang lebih luas, termasuk janji Bluebird dan janji ES6, sehingga memungkinkan penulisan callback asinkron yang lebih canggih.
$.when($.ajax("test.apx")).then(function(data,textStatus,jqHXR) {
alert (jqHXR.status); //alerts 200
});
Panggilan jQuery.when multi-argumen berperilaku seperti Promise.all, menggabungkan nilai pemenuhan ke dalam array pemenuhan, atau sebagai alternatif menolak dengan nilai penolakan pertama. Panggilan argumen tunggal dan nol berperilaku seperti Promise.resolve, mengembalikan Deferred yang menyelesaikan secara identik ke kemudian dapat, atau dipenuhi dengan input non-Promise.
Selain itu, metode jQuery.when() tidak lagi meneruskan notifikasi kemajuan dari input Deferreds ke output Deferred.
6. Hash Dalam URL Dipertahankan
Metode jQuery.ajax() sekarang mengirimkan URL lengkap ke transport (skrip, xhr, jsonp, atau transport khusus). Itu tidak lagi menghapus hash di URL jika ada. Namun, Anda harus menghapusnya secara manual sebelum mengirim permintaan jika server di ujung koneksi yang lain tidak dapat menangani hash pada URL.
5. Objek yang Ditangguhkan Kompatibel dengan janji JS
Ditangguhkan adalah objek yang dapat dirantai yang memungkinkan pembuatan antrean panggilan balik. jQuery 3 telah membuat objek yang ditangguhkan kompatibel dengan standar Promises/A+ yang baru. Ada perubahan penting dalam metode .then(). Pengecualian apa pun yang dilemparkan dalam panggilan balik .then() kini ditangkap dan diubah menjadi nilai penolakan. Nilai yang tidak dapat dikembalikan dari penangan penolakan berubah menjadi nilai pemenuhan.
Metode Ditunda gaya lama:
$.ajax("/stat")
.done(function(data) {
whoops();
// console displays: "whoops is not a function"
// no further execution
})
.fail(function(arg) {
// doesn't execute since the was not caught
});
Perilaku Janji/A+ standar baru
$.ajax("/stat")
.then(function(data) {
whoops();
// console displays "jQuery.Deferred exception: whoops is not a function"
// no further execution
})
.catch(function(arg) {
// arg is an Error object - "whoops is not a function"
}); 4. API baru untuk Animasi
jQuery 3 menggunakan API requestAnimationFrame() untuk mengeksekusi animasi. API baru ini menjalankan animasi dengan lebih lancar dan cepat, sehingga menghabiskan lebih sedikit waktu CPU. Ini hanya digunakan di browser yang mendukungnya. Untuk browser lama seperti Internet Explorer 9, jQuery menggunakan API lamanya sebagai metode cadangan.
Baca:24 Alat Animasi CSS3 dan HTML5 untuk Desainer
3. jQuery 3 Berjalan Dalam Mode Ketat
Sebagian besar browser yang mendukung jQuery 3 menggunakan mode ketat, dan versi baru dibuat dengan mempertimbangkan arahan ini. Meskipun jQuery 3 telah ditulis dalam mode ketat, kode Anda tidak diharuskan untuk dijalankan dalam mode ketat, jadi Anda tidak perlu menulis ulang kode yang ada jika ingin bermigrasi ke versi saat ini. Namun, ada satu pengecualian – beberapa versi ASP.net tidak kompatibel karena mode ketat.
Jika Anda menjalankan ASP.net 4.0 yang menggunakan arguments.caller.callee untuk mencoba menelusuri tumpukan panggilan dalam metode doPostBack(), sebaiknya tetap gunakan jQuery 2.x atau versi sebelumnya. Saat ini browser mendukung pelacakan tumpukan melalui error.stack, jadi tidak perlu memeriksa argument.caller.callee.
2. Tanda Tangan Baru untuk Metode Dapatkan dan Posting
jQuery memiliki tanda tangan baru untuk fungsi utilitas $.get() dan $.post() untuk menyelaraskannya dengan $.ajax(). Tanda tangan baru adalah parameter pengaturan.
$.get([settings])
$.post([settings])
Pengaturan objek dapat memiliki banyak properti. Itu adalah objek yang sama yang dapat Anda berikan ke $.ajax(). Satu-satunya perbedaan ketika meneruskan objek ke $.get() dan $.post() dibandingkan dengan $.ajax() adalah properti metode selalu diabaikan, karena $.get() dan $.post() memiliki metode HTTP preset untuk melakukan permintaan Ajax (GET dan POST).
Pertimbangkan kode:
$.get({
url: 'https://www.rankred.com',
method: 'POST' // property is ignored
});
Terlepas dari properti metode, pernyataan tersebut tidak akan mengirimkan permintaan POST tetapi permintaan GET.
1. Untuk…dari Loop
jQuery 3 mendukung for…of loop yang diperkenalkan dalam spesifikasi ECMAScript 6. Ini memungkinkan Anda untuk mengulang objek yang dapat diubah seperti Peta, Set, Array, dan sebagainya. Saat menggunakan loop ini, nilai yang diperoleh adalah elemen DOM dari koleksi jQuery, satu per satu.
Baca:26 Plugin jQuery Modern Untuk Membuat Website Anda Lebih Baik
Perulangan for…of dapat digunakan untuk menggantikan sintaks $.each() sebelumnya, dan membuatnya lebih mudah untuk mengulang elemen-elemen koleksi jQuery. Anggaplah Anda ingin memberi nama pada setiap elemen masukan halaman.
Kode jQuery 2 akan terlihat seperti…
var $inputs = $('input');
for(var j = 0; j < $inputs.length; j++) {
$inputs[j].id = 'input - ' + j;
}
Kode jQuery 3 akan mirip dengan…
var $inputs = $('input');
var j = 0;
for(var input of $inputs) {
input.id = 'input - ' + j++;
}
