Deskripsi tag jquery

jQuery adalah perpustakaan Javascript, juga berpikir tentang menambahkan tag Javascript. jQuery adalah pustaka JavaScript lintas-peramban populer yang memfasilitasi jalannya Document Object Model (DOM), penanganan acara, animasi, dan interaksi AJAX, meminimalkan perbedaan antar browser. Pertanyaan dengan tag jquery harus dikaitkan dengan jquery, jadi jquery harus digunakan dalam kode yang dimaksud, dan pertanyaan tersebut harus menyertakan setidaknya elemen yang terkait dengan penggunaan jquery.

Tentang

jQuery (Core) adalah pustaka JavaScript lintas-browser (dibuat oleh John Resig ) yang menyediakan abstraksi untuk tugas-tugas klien yang umum, seperti traversal DOM, manipulasi DOM, penanganan acara, animasi, dan AJAX .

jQuery memudahkan untuk merayapi dan menangani dokumen HTML, penanganan acara, animasi, dan AJAX karena API-nya, yang berfungsi di banyak browser.

jQuery menyediakan platform untuk membuat plugin yang memperluas kemampuan, selain yang sudah disediakan oleh perpustakaan. Pengembangan jQuery dan proyek terkait dikoordinasikan oleh JQuery Foundation .

Fitur khusus

jQuery mencakup fungsi-fungsi berikut:

  • Memilih elemen DOM menggunakan mekanisme pemilih sumber terbuka multi-server Sizzle, menyoroti proyek jQuery
  • Lewati dan modifikasi DOM (termasuk dukungan untuk CSS 1-3)
  • Manipulasi DOM berdasarkan pemilih CSS yang menggunakan nama dan atribut simpul (misalnya, ID dan class ) sebagai kriteria untuk membuat pemilih
  • Acara
  • Efek dan animasi
  • AJAX
  • Penguraian JSON (untuk browser lama)
  • Ekstensibilitas melalui plugin
  • Utilitas, seperti informasi agen pengguna, deteksi fitur
  • Metode kompatibilitas yang awalnya tersedia di browser modern, tetapi memerlukan cadangan inArray() untuk yang lebih lama - misalnya, fungsi inArray() dan each() - each() dan each() - each()
  • Multi-browser (jangan bingung dengan cross-browser)

Dukungan browser

jQuery mendukung versi stabil saat ini dan versi sebelumnya atau "versi saat ini 1" dari Chrome, Edge, Firefox dan Safari. Ini juga mendukung versi stabil Opera saat ini.

Selain itu, jQuery 1.x mendukung Internet Explorer versi 6 atau lebih tinggi. Namun, dukungan untuk IE 6-8 telah dinonaktifkan untuk jQuery 2.x dan jQuery 3.x , yang hanya mendukung IE 9 atau lebih tinggi.

Akhirnya, jQuery mendukung browser seluler di Android 4.0 dan di atasnya, dan Safari di iOS 7 dan di atasnya.

Versi JQuery

jQuery sering diperbarui, jadi perpustakaan harus digunakan dengan hati-hati. Beberapa fungsi menjadi usang dengan versi jQuery yang lebih baru. Perhatikan catatan rilis untuk melacak fitur.

CDN jQuery menyediakan tautan unduhan untuk semua versi jQuery , termasuk versi stabil terbaru dari setiap cabang .

Saat mengajukan pertanyaan terkait jQuery, Anda harus:

  1. Baca dokumentasi API jQuery dengan hati-hati dan cobalah Stack Overflow untuk duplikat.
  2. Isolasikan kode masalah dan memperbanyaknya dalam lingkungan online seperti JSFiddle , JSBin, atau CodePen . Anda juga dapat menggunakan LiveWeave untuk Live Connect. Namun, pastikan untuk memasukkan kode masalah dalam pertanyaan Anda - bukan hanya tautan ke lingkungan online. Anda juga dapat menggunakan fragmen tumpukan untuk memasukkan kode yang dapat dieksekusi dalam pertanyaan itu sendiri.
  3. Tandai pertanyaan yang sesuai; selalu sertakan dan gunakan tag pengembangan web lainnya ( , , ), jika berlaku. Plugin jQuery paling populer juga memiliki tag mereka sendiri, seperti , dan ; Untuk setiap plugin lain ada tag .
  4. Tentukan versi perpustakaan jQuery yang digunakan, sehingga jawaban apa pun dapat memberikan solusi yang cocok untuk versi tersebut.
  5. Sebutkan di mana browser kode muncul, dan pesan kesalahan mana, jika ada, dilemparkan oleh browser. Jika masalah konsisten di lintas-browser, maka ini adalah informasi yang berharga juga.

Pertanyaan yang Sering Diajukan

Halo dunia

Ini menunjukkan "Halo dunia!". Di jendela peringatan untuk setiap tautan, klik setelah DOM ( JSFiddle ) siap :

 // callback for document load $(function () { // select anchors and set click handler $("a").click(function (event) { // prevent link default action (redirecting to another page) event.preventDefault(); // show the message alert("Hello world!"); }); }); 

Sumber daya

Video tutorial

Plugin populer

Proyek Yayasan JQuery lainnya

Praktik terbaik dan sering membuat kesalahan

Masalah terkait: jQuery traps yang harus dihindari

Jangan lupa untuk menggunakan penangan yang siap pakai.

Jika kode Anda entah bagaimana mengelola DOM, Anda perlu memastikan bahwa kode itu berjalan setelah unduhan DOM selesai.

jQuery menyediakan cara untuk melakukan ini dengan fungsi anonim:

 $(function () {  }); // Or $(document).ready(function () {  }); 

atau dengan fungsi bernama:

 $(functionName); // Or $(document).ready(functionName); 

Ini adalah alternatif untuk menempatkan kode JavaScript atau tag skrip dalam HTML tepat sebelum </body> penutup.

Di jQuery 3.x, cara yang disarankan untuk menambahkan penangan siap adalah $(function() {}) , sementara bentuk lain, seperti $(document).ready(function() {}) , sudah tidak digunakan lagi. Selain itu, jQuery 3.x menghapus kemampuan untuk menggunakan .on("ready", function() {}) untuk menjalankan fungsi dalam acara "ready".

Hindari konflik dengan noConflict() dan alias lain untuk jQuery

Jika kode jQuery Anda bertentangan dengan pustaka lain yang juga menggunakan tanda $ sebagai alias, gunakan metode noConflict() :

 jQuery.noConflict(); 

Kemudian Anda dapat menggunakan $ sebagai alias untuk pustaka lain dengan aman, menggunakan nama jQuery untuk fungsi jQuery.

Anda juga bisa menelepon

 $jq = jQuery.noConflict(); 

dan gunakan $jq sebagai alias untuk jQuery. Sebagai contoh:

 $jq(function () { $jq("a").click(function (event) { event.preventDefault(); alert("Hello world!"); }); }); 

Anda juga dapat menetapkan jQuery ke $ di area tertentu:

 jQuery(function ($) { // In here, the dollar sign is an alias for jQuery only. }); // Out here, other libraries can use the dollar sign as an alias. 

Kemudian Anda dapat menggunakan $ sebagai alias untuk jQuery di dalam blok fungsi ini, tanpa khawatir tentang konflik dengan perpustakaan lain.

Jika memungkinkan, cache objek dan rantai jQuery

Memanggil fungsi jQuery $() mahal. Seruan beru>sangat tidak efisien . Hindari ini:

 $('.test').addClass('hello'); $('.test').css('color', 'orange'); $('.test').prop('title', 'Hello world'); 

Sebagai gantinya, cache objek jQuery Anda dalam variabel:

 var $test = $('.test'); $test.addClass('hello'); $test.css('color', 'orange'); $test.prop('title', 'Hello world'); 

Atau lebih baik lagi, gunakan rantai untuk mengurangi pengu>

 $('.test').addClass('hello').css('color', 'orange').prop('title', 'Hello world'); 

Juga, ingatlah bahwa banyak fungsi dapat melakukan beberapa perubahan dalam satu panggilan, mengelompokkan semua nilai menjadi suatu objek. Alih-alih:

 $('.test').css('color', 'orange').css('background-color', 'blue'); 

gunakan:

 $('.test').css({ 'color': 'orange', 'background-color': 'blue' }); 

Konvensi penamaan variabel

Variabel jQuery yang terdaftar biasanya disebut dimulai dengan $ untuk membedakannya dari objek JavaScript standar.

 var $this = $(this); 

Ketahui properti dan fungsi DOM Anda

Meskipun salah satu tujuan jQuery adalah untuk abstrak DOM, pengetahuan tentang properti DOM bisa sangat berguna. Salah satu kesalahan paling umum yang dilakukan oleh mereka yang mempelajari jQuery tanpa mempelajari DOM adalah menggunakan jQuery untuk mengakses properti elemen:

 $('img').click(function () { $(this).attr('src'); // Bad! }); 

Dalam kode di atas, this merujuk pada elemen dari mana event handler diluncurkan. Kode di atas lambat dan terperinci; Kode di bawah ini berfungsi sama dan jauh lebih pendek, lebih cepat dan lebih mudah dibaca.

 $('img').click(function () { this.src; // Much, much better }); 

Sintaksis idiomatik untuk membuat elemen

Meskipun dua contoh berikut tampaknya secara fungsional setara dan benar secara sintaksis, contoh pertama lebih disukai:

 $('<p>', { text: 'This is a ' + variable, "class": 'blue slider', title: variable, id: variable + i }).appendTo(obj); 

Sebagai perbandingan, pendekatan penggabungan string jauh lebih mudah dibaca dan jauh lebih rapuh:

 $('<p class="blue slider" id="' + variable + i + '" title="' + variable + '">This is a ' + variable + '</p>').appendTo(obj); 

Sementara contoh pertama akan lebih lambat daripada yang kedua, keuntungan dari kejelasan yang lebih besar cenderung melebihi perbedaan nominal dalam semua kecuali aplikasi yang paling sensitif terhadap kinerja.

Selain itu, sintaksis idiomatik tahan terhadap injeksi karakter khusus. Sebagai contoh, dalam contoh kedua, simbol kutipan dalam variable atribut prematur tertutup. Melakukan pengkodean yang tepat pada Anda sendiri tetap dimungkinkan, meskipun tidak disarankan karena rawan kesalahan.

Obrolan

Mengobrol tentang jQuery dengan pengguna lain:

Alternatif / Pesaing

Pustaka JavaScript terkenal lainnya:

Repositori Publik:

  • cdnjs adalah proyek komunitas berorientasi infrastruktur cloud yang saat ini menggunakan ~ 1.143.000 situs web di seluruh dunia.
  • jsdelivr - CDN sumber bebas dan open source yang sama untuk cdnjs.

Tag terkait