Cara Memulai dengan jQuery: Jadikan Pemrograman JavaScript Lebih Mudah

Penyingkapan: Dukungan Anda membantu menjaga situs tetap berjalan! Kami mendapatkan biaya referensi untuk beberapa layanan yang kami rekomendasikan pada halaman ini.


Pada hitungan terakhir, lebih dari 90% dari semua situs web menjalankan JavaScript. Sebagai perpustakaan JavaScript paling populer, jQuery digunakan oleh sebagian besar situs web modern, dan sekitar 65% dari 10 juta situs paling populer di web.

Artinya, jika Anda ingin menjadi pengembang web, perancang situs web, atau webmaster, Anda perlu tahu cara bekerja dengan jQuery.

Pengantar jQuery

Apa itu jQuery??

JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan interaktivitas ke situs web. jQuery adalah pustaka fungsi JavaScript pra-bangun yang menangani tugas-tugas yang biasanya dikelola dengan JavaScript. Intinya, jQuery mempermudah dan lebih cepat menggunakan JavaScript.

jQuery adalah pustaka perintah yang membuatnya mudah untuk menemukan, memilih, dan memanipulasi elemen HTML pada halaman web sebagai respons terhadap aktivitas pengunjung. Misalnya, menggunakan jQuery Anda dapat memilih elemen tertentu, seperti semua

elemen tajuk, dan menyebabkannya dimanipulasi dalam beberapa cara berdasarkan aktivitas pengunjung – seperti mengubah ukuran font saat mouse melayang di atasnya.

Kekuatan jQuery adalah kemampuannya untuk dengan mudah menemukan dan memilih elemen HTML tanpa mengharuskan atribut tambahan diterapkan ke elemen HTML.

jQuery Membuat Hal-Hal Sulit Mudah

Apa pun yang dapat Anda lakukan dengan jQuery, Anda juga dapat melakukannya dengan JavaScript. Perbedaannya adalah bahwa banyak hal yang bisa sangat rumit untuk diselesaikan dengan JavaScript sangat mudah dilakukan dengan jQuery. Mari kita lihat dua contoh: beralih dan memicu.

Sembunyikan atau Tampilkan Elemen Halaman Dengan Beralih

Properti tampilan CSS dapat digunakan untuk menyembunyikan elemen HTML. Pilih elemen HTML apa saja dengan pemilih CSS dan terapkan nilai tidak ada pada properti tampilan, dan elemen tersebut akan disembunyikan dari tampilan. Jika Anda ingin menyembunyikan elemen HTML pada perintah, properti tampilan CSS adalah bagaimana Anda dapat mewujudkannya.

Tidak sulit menggunakan JavaScript untuk menyembunyikan atau menampilkan elemen HTML dengan mengontrol properti tampilan CSS. Namun, metode toggle () jQuery mencakup banyak opsi bawaan yang membuatnya mudah untuk menghasilkan efek toggle yang kuat yang akan sangat sulit untuk diduplikasi dengan JavaScript. Jika Anda menyertakan jQuery UI sebagai tambahan untuk memplate jQuery dalam dokumen HTML Anda, Anda juga dapat menggunakan sejumlah efek jQuery UI untuk mengontrol bagaimana elemen-elemen yang disembunyikan disembunyikan dan ditampilkan.

Jika Anda ingin mempelajari cara menggunakan metode toggle () jQuery, ada banyak tempat untuk memulai:

  • Pelajari jQuery: sumber daya pendidikan gratis dari jQuery Foundation. Tutorial jQuery lengkap layak untuk diselesaikan dan kami tautkan ke sumber daya di akhir dokumen ini. Namun, gunakan tautan ini jika Anda ingin langsung ke bagian yang menjelaskan metode sakelar.
  • Dokumentasi API jQuery: ikhtisar metode sakelar dan semua opsi yang dapat digunakan di sampingnya.
  • Efek dan Toggle UI jQuery: UI jQuery memperluas metode sakelar dengan sejumlah efek. Selain itu, ia memiliki demo langsung tentang bagaimana efeknya melengkapi metode sakelar.
  • Metode jQuery toggle () di W3Schools: pengantar cepat untuk metode toggle dan kode sandbox di mana Anda dapat mencobanya.
  • jQuery Toggle Effect Tutorial oleh Akshay Jaiswal dan jQuery Toggle effect oleh Harry Finn adalah dua tutorial video YouTube yang secara singkat menunjukkan cara membuat dokumen HTML yang menyertakan jQuery dan menggunakan metode toggle untuk menyembunyikan atau menampilkan elemen HTML..

Jalankan Script Dengan Pemicu Event Trigger

Tugas lain yang membuat jQuery sangat mudah adalah untuk memicu event handler bahkan jika peristiwa sebenarnya belum terjadi. Misalnya, katakanlah Anda memiliki skrip yang dijalankan setiap kali tombol tertentu diklik menggunakan acara onclick JavaScript. Sekarang, bagaimana jika Anda juga ingin agar skrip yang sama berjalan kapan saja tindakan yang berbeda terjadi seolah-olah tombol itu sendiri telah diklik? Pemicu () event handler adalah jawabannya.

Penggunaan dasar metode pemicu melibatkan penerapan metode pemicu untuk peristiwa tertentu, dan menggunakannya untuk memicu peristiwa kedua ketika peristiwa pertama terjadi. Itu mungkin terdengar rumit, tetapi penggunaan dasar metode pemicu sangat mudah. Gunakan sumber daya berikut untuk mencakup dasar-dasarnya dan juga lihat beberapa penggunaan metode yang lebih maju.

  • Memicu Penangan Kejadian: gunakan tautan ini untuk langsung ke bab tentang pemicu penangan peristiwa dalam tutorial Pelajari jQuery.
  • Dokumentasi API jQuery: ikhtisar metode pemicu dan semua parameter serta opsi yang dapat digunakan dengannya.
  • Metode jQuery trigger () di W3Schools: pengantar metode trigger jQuery dan kode sandbox untuk menguji kode.
  • Cara Membuat Acara Kustom di jQuery: tutorial Sitepoint yang menjelaskan cara membuat acara jQuery kustom sehingga Anda dapat menggunakan metode pemicu dengan acara khusus daripada acara jQuery bawaan.
  • Jangan Picu Nama Acara Nyata Dengan jQuery! Banyak pengembang menggunakan acara jQuery standar seperti "klik" sebagai jenis acara untuk memicu suatu acara. Namun, ini dapat membuat masalah dan David Walsh merekomendasikan penggunaan acara khusus dengan metode pemicu.

Keuntungan Menggunakan jQuery

Jika jQuery hanya membuatnya lebih mudah untuk menggunakan JavaScript, mengapa kita menggunakan jQuery sama sekali? Mengapa tidak tetap menggunakan JavaScript dan menghindari keharusan mempelajari serangkaian perintah dan implementasi yang sama sekali baru?

Menurut Wikipedia, setidaknya ada empat keunggulan yang ditawarkan oleh jQuery.

  1. jQuery mendorong pemisahan skrip dan HTML. Sementara skrip dapat ditulis langsung ke dalam dokumen HTML, pemikiran saat ini dalam komunitas desain web dan pengembangan adalah bahwa HTML, CSS, dan JavaScript semua harus dikelola secara terpisah. Ini rumit oleh kenyataan bahwa harus ada cara untuk menghubungkan skrip dengan elemen dan acara HTML tertentu. Tanpa jQuery, cara termudah untuk melakukan ini adalah menambahkan atribut acara ke dokumen HTML yang memanggil fungsi JavaScript. Namun, jQuery mengatasi kebutuhan untuk melakukan ini dengan memberikan sintaksis sederhana untuk menambahkan event handler secara dinamis menggunakan JavaScript. Ini memungkinkan pemisahan total JavaScript dari dokumen HTML.
  2. jQuery mendorong pembuat kode untuk menulis skrip yang lebih pendek dan lebih jelas. jQuery dirancang untuk singkatnya. Apa pun yang dapat Anda lakukan dengan jQuery, Anda juga dapat melakukannya dengan JavaScript biasa. Namun, kode jQuery biasanya akan jauh lebih pendek dan lebih jelas daripada kode JavaScript untuk menyelesaikan tugas yang sama.
  3. Menggunakan jQuery menghilangkan ketidakkonsistenan antar browser. Sementara JavaScript dirender agak berbeda oleh mesin peramban yang berbeda, jQuery telah dikembangkan untuk menangani perbedaan lintas-peramban dan memberikan pengalaman yang konsisten di seluruh peramban.
  4. jQuery bisa dikembangkan. Pustaka jQuery telah dirancang agar mudah dilengkapi dengan elemen, acara, dan metode baru. Setelah item-item baru ditambahkan ke perpustakaan jQuery lokal, mereka dapat dengan mudah digunakan kembali di situs web sebagai plugin.

Memulai dengan jQuery

Jika Anda siap untuk mulai mempelajari cara menggunakan jQuery, dan Anda belum terbiasa dengan JavaScript, langkah pertama untuk mempelajari jQuery adalah mempelajari JavaScript.

Seperti yang kami sebutkan, jQuery adalah pustaka dari perintah JavaScript. Akibatnya, jQuery mengikuti sintaks dasar dan struktur yang sama dengan JavaScript. Memiliki pemahaman yang kuat tentang sintaksis, struktur, dan fungsi dasar JavaScript sangat penting untuk menguasai jQuery. Menurut Yayasan jQuery:

Semua kekuatan jQuery diakses melalui JavaScript, jadi memiliki pemahaman yang kuat tentang JavaScript sangat penting untuk memahami, menyusun, dan men-debug kode Anda. Saat bekerja dengan jQuery secara teratur, seiring waktu, dapat meningkatkan kemampuan Anda dengan JavaScript, mungkin sulit untuk memulai menulis jQuery tanpa pengetahuan tentang konstruksi dan sintaks bawaan JavaScript..

Lingkungan Pengembangan Anda

Sebelum mulai membuat kode, Anda harus menyiapkan lingkungan pengembangan Anda. Berita baiknya adalah semua yang Anda perlukan untuk memulai menulis jQuery adalah browser web, editor teks, dan salinan jQuery.

Sementara browser web mana pun akan melakukannya, pengembang menggunakan Mozilla Firefox atau Google Chrome. Meskipun Anda juga harus menyediakan Internet Explorer atau Edge, Opera, dan Safari untuk menguji kode Anda di banyak browser, jika Anda belum menggunakan Firefox atau Chrome, unduh dan instal versi terbaru dari satu atau kedua aplikasi gratis ini dan gunakan untuk tujuan pengembangan.

Tentu, Anda bisa menggunakan Notepad untuk menulis kode, tetapi mengapa Anda melakukannya? Ada banyak editor teks hebat yang tersedia secara gratis atau biaya yang sangat masuk akal yang menyediakan banyak fitur yang dirancang untuk membuat pengkodean lebih mudah dan lebih sedikit rawan kesalahan. Beberapa favorit kami adalah Atom, TextMate untuk komputer Apple, Notepad ++ untuk komputer Windows, dan kurung.

Terakhir, karena jQuery adalah pustaka perintah yang dibangun dengan JavaScript, Anda harus memanggil pustaka jQuery dari dokumen apa pun yang menggunakan jQuery. Untuk melakukan ini, Anda harus mengunduh jQuery, atau menautkan ke perpustakaan jQuery yang dihosting online.

Sumber daya

Kami telah menjelajahi web untuk mendapatkan tutorial, ebook, dan kursus interaktif jQuery terbaik. Rekomendasi kami adalah agar Anda menggunakan beberapa sumber daya ini dan bekerja melalui sumber daya yang paling sesuai dengan gaya belajar Anda.

Kemajuan pelatihan yang kami sarankan dimulai dengan beberapa tutorial interaktif dasar yang akan menunjukkan kepada Anda kekuatan jQuery dan menunjukkan apa yang mungkin terjadi dengan perpustakaan JavaScript paling populer di dunia. Selanjutnya, selami lebih dalam jQuery dengan meninjau tutorial mendalam yang ditawarkan oleh beberapa nama paling dihormati dalam pengembangan web termasuk Mozilla Developer Network dan jQuery Foundation. Akhirnya, kuasai jQuery dengan mengerjakan jalan Anda melalui ebook atau teks paperback.

Kursus Interaktif Gratis

Hanya ada begitu banyak hal yang bisa dilakukan oleh dokumen tertulis untuk menjelaskan cara kerja bahasa pemrograman dan apa yang bisa dilakukannya. Untuk benar-benar menguasai kekuatan bahasa, Anda harus melihatnya dalam tindakan. Kursus interaktif gratis adalah salah satu cara terbaik untuk mendapatkan pegangan cepat tentang sintaks dasar bahasa pemrograman sambil juga mempelajari apa yang sebenarnya bisa dilakukan.

Karena Yayasan jQuery merekomendasikan belajar JavaScript sebelum Anda masuk ke jQuery, kami sarankan Anda melakukan hal yang sama. Kursus gratis ini akan membuat Anda menulis JavaScipt dasar dalam waktu singkat:

  • JavaScript Road Trip Bagian 1 dari CodeSchool: Hanya bagian 1 dari perjalanan ini yang gratis. Sisa perjalanan disembunyikan di balik dinding bayar. Jalankan melalui konten gratis dan kemudian pergi ke Codecademy untuk terus belajar.
  • JavaScript oleh Codecademy: Konten ini dalam kursus online lengkap ini gratis. Akses ke kuis adalah opsional dan membawa label harga. Kursus ini akan memakan waktu sekitar sepuluh jam untuk diselesaikan, dan akan membuat Anda mampu menulis kode JavaScript dasar. Dengan kursus ini di bawah ikat pinggang Anda, Anda akan siap untuk menangani beberapa jQuery.

Ada dua kursus jQuery interaktif yang harus Anda ambil untuk mendapatkan pemahaman dasar yang baik tentang apa yang mungkin dilakukan dengan jQuery. Kursus-kursus ini meliputi:

  • Coba jQuery: Pengantar gratis jQuery yang dikumpulkan oleh Yayasan jQuery dalam kemitraan dengan CodeSchool.
  • jQuery oleh Codecademy: Kursus ini akan memakan waktu sekitar tiga jam untuk menyelesaikannya. Seperti halnya dengan kursus JavaScript, konten kursus ini gratis tetapi jika Anda ingin mengikuti kuis, Anda harus membayarnya. Rekomendasi kami adalah bekerja melalui konten gratis dan kemudian beralih ke sumber daya tambahan. Pada saat Anda selesai, Anda akan tahu cara menggunakan jQuery untuk memilih elemen HTML, cara mendesain elemen-elemen itu, dan bagaimana cara mengikat tindakan pengunjung situs web ke kode jQuery sehingga situs web merespons secara interaktif.

Tutorial Mendalam dan Panduan Belajar dari Pemimpin Industri

Mempelajari JavaScript dan jQuery harus berjalan seiring. Jika Anda siap untuk melangkah lebih jauh dengan jQuery, Anda juga perlu memperluas pengetahuan Anda tentang JavaScript. Salah satu tempat terbaik untuk belajar tentang JavaScript adalah Mozilla Developer Network (MDN). Lihatlah sumber daya hebat ini:

  • Dasar-dasar JavaScript: Meskipun Anda mungkin telah mempelajari dasar-dasar cara menggunakan JavaScript melalui kursus interaktif yang kami rekomendasikan, di MDN Anda akan belajar bagaimana para pengembang profesional memikirkan dan menggunakan JavaScript. Jika Anda membaca dengan seksama, dokumen ini akan memakan waktu beberapa jam untuk sepenuhnya dicerna.
  • Panduan JavaScript: Panduan dan tutorial lengkap ini akan memandu Anda menelusuri semua topik mendasar bahasa JavaScript termasuk fungsi, penanganan kesalahan, loop, tata bahasa, ekspresi, dan banyak lagi. Buatlah melalui panduan ini dan Anda akan tahu lebih banyak JavaScript bahwa rata-rata desainer web.

Jika Anda membuatnya melalui sumber daya JavaScript di MDN, Anda akan sepenuhnya siap untuk menangani pelatihan yang ditawarkan oleh Yayasan jQuery. Di situs web Yayasan jQuery, Anda akan menemukan Pusat Pembelajaran yang luas yang diorganisasi ke dalam beberapa bab. Setiap bab didedikasikan untuk topik tertentu seperti About jQuery, Effects, Ajax, Plugins, dan lainnya. Sumber daya otorisasi ini terperinci dan teknis – hal yang Anda perlukan jika Anda ingin menguasai jQuery.

Ebooks dan Paperback

Setelah Anda menelusuri sumber daya yang telah kami bahas, Anda akan siap menggunakan jQuery untuk menangani skenario desain web umum apa pun. Selain itu, Anda akan cukup berpengetahuan untuk menemukan bantuan yang Anda butuhkan untuk mengatasi masalah yang lebih kompleks menggunakan API jQuery.

Setelah Anda siap menjadi pengembang jQuery tingkat lanjut, ada beberapa teks yang dapat membantu Anda dalam perjalanan.

Ebook gratis

Kami menemukan dua ebook gratis yang memiliki reputasi sangat baik di dalam komunitas jQuery. Dengan beberapa pengalaman pengkodean jQuery di bawah ikat pinggang Anda, kembangkan tingkat pemahaman baru tentang pustaka JavaScript paling populer dengan menggarap salah satu atau kedua teks berkualitas tinggi ini:

  • jQuery Fundamentals oleh BoCoup, LLC .: Bagian ebook dan bagian tutorial interaktif, teks ini mencakup jQuery baik dalam format tertulis maupun dengan contoh-contoh praktis.
  • jQuery Singkatnya, ditulis oleh Cody Lindley dan di-host oleh Syncfusion: Seratus halaman teks yang mencakup konsep-konsep penting untuk pengembangan jQuery lanjutan. Jika Anda baru memulai, ini bukan teks untuk Anda, tetapi jika Anda seorang pengembang JavaScript atau jQuery yang cukup kompeten siap untuk mengambil langkah berikutnya, teks ini adalah pilihan yang sangat baik.

Teks Paperback

Jika Anda lebih suka teks fisik, berikut adalah beberapa teks jQuery terbaik yang tersedia saat ini:

  • Mempelajari jQuery: Karl Swedberg, anggota Dewan Penasihat Yayasan jQuery saat ini, bersama dengan Jonathan Chaffer, seorang pengembang web dan programmer Drupal yang berpengaruh, merancang teks ini agar sesuai untuk pemula JavaScript atau pengembang berpengalaman. Teks ini juga tersedia untuk Kindle.
  • JavaScript dan JQuery, Pengembangan Web Front-End Interaktif: Teks ini oleh Jon Duckett melengkapi teks utamanya tentang HTML dan CSS, dan mungkin teks JavaScript dan jQuery paling populer yang tersedia saat ini.
  • jQuery in Action oleh Bear Bibeault, Yehuda Katz, dan Aurelio De Rosa: Katz dan De Rosa adalah anggota aktif dari jQuery Foundation – Katz sebagai anggota Dewan Penasihat dan De Rosa sebagai anggota tim Konten. Teks otoritatif ini adalah tampilan cepat di jQuery yang cocok untuk para pengembang JavaScript awal.

Merancang Dengan jQuery

Di bagian ini, kita akan melihat cara menggunakan jQuery untuk merancang situs web yang berinteraksi luar biasa. Pada akhirnya, Anda akan tahu alat yang tersedia untuk Anda, dan memiliki semua pengetahuan, sumber daya, dan alat yang Anda butuhkan.

JavaScript

JavaScript adalah bahasa pemrograman yang ada di setiap browser web modern. Seiring dengan HTML dan CSS, ini adalah leg ketiga dalam triad teknologi web modern.

JavaScript adalah bahasa pemrograman umum tingkat tinggi yang dapat digunakan untuk berbagai tugas skrip baik di dalam maupun di luar web. Cara utama desainer menggunakan JavaScript adalah untuk memberi kekuatan interaksi pengguna. Perubahan gaya dan panggilan AJAX adalah dua contoh interaksi pengguna yang dapat diberdayakan dengan JavaScript. Mari kita lihat masing-masing secara singkat.

Tapi pertama-tama, kita akan mundur dan membahas beberapa aspek JavaScript.

Mengubah Gaya dengan JavaScript

Sementara gaya laman web umumnya adalah domain lembar gaya kaskade (CSS), JavaScript dapat digunakan untuk memanipulasi CSS. Gaya dapat dimanipulasi secara langsung dengan memilih elemen dan menggunakan properti gaya, seperti ini:

Isi dari Div Saya

document.getElementById ("my-div") .style.backgroundColor = "biru";

Sedikit JavaScript itu mengambil elemen dengan id dari my-div dan menerapkan warna latar belakang biru. Meskipun secara langsung memanipulasi CSS dengan JavaScript berguna, jika Anda ingin mengubah banyak gaya sekaligus, itu jauh lebih mudah untuk memasukkan gaya-gaya itu di CSS situs Anda, dan kemudian menerapkan gaya menggunakan JavaScript. Ini satu cara untuk melakukannya:

.negara-pertama {
warna latar: # 303030;
warna: #fff;
perbatasan: 3px solid #ddd;
lebar: 200px;
tinggi: 200px;
}
.kondisi kedua {
warna latar: #ddd;
warna: # 333;
perbatasan: 3px solid # 333;
lebar: 300px;
tinggi: 300px;
}

Isi dari Div Saya

document.getElementById ("my-div") .onclick = function () {
this.className = "negara kedua";
}

Sekarang, ketika elemen div dengan atribut id dari my-div diklik, kelas state pertama akan dihapus dan diganti dengan kelas state kedua, dan CSS kelas kedua state akan diterapkan.

Tambahkan Animasi Kelas

Memperbarui Konten Saat Terbang dengan AJAX

AJAX, yang merupakan singkatan dari Asynchronous JavaScript and XML, adalah teknik yang digunakan untuk menambahkan konten ke halaman web tanpa menyegarkan halaman. Ide dasarnya adalah bahwa JavaScript mengirim data ke server web di belakang layar, menerima respons dari server, dan menyesuaikan konten halaman web berdasarkan respons tersebut.

Itu mungkin terdengar terlalu teoretis, jadi mari kita bersikap praktis. AJAX memungkinkan hal-hal seperti fitur pelengkapan otomatis, pengguliran tak terbatas, dan hasil pencarian instan. Dalam setiap kasus, halaman web mengirim data ke server web dan memuat respons ke halaman web tanpa menyegarkan.

Menerapkan panggilan AJAX adalah tugas yang menantang, dan melampaui pemrograman JavaScript dasar. Namun, sebagai pengembang atau desainer front-end, AJAX adalah salah satu fitur JavaScript yang hampir tidak dapat Anda lakukan tanpanya. Di bagian selanjutnya, kami akan menyoroti sumber daya AJAX yang hebat.

Sumber Daya JavaScript

Jika keterampilan JavaScript Anda sedikit berkarat, berikut adalah tiga sumber yang bagus yang akan mempercepat Anda:

  • Kursus JavaScript CodeCademy memperkenalkan sintaksis, loop, aliran kontrol, struktur data, dan objek dalam kursus interaktif berbasis browser.
  • Tutorial Dasar-Dasar JavaScript Mozilla Developer Network (MDN) adalah pengantar sintaksis JavaScript, variabel, operator, kondisional, fungsi, dan peristiwa.
  • Memulai MDN AJAX adalah tutorial singkat yang mencakup panggilan dasar AJAX. Artikel tambahan juga tersedia di MDN yang mencakup teknik AJAX tingkat lanjut.

Sementara JavaScript kuat, jQuery memungkinkan Anda melakukan lebih banyak hal dengan sedikit usaha.

jQuery: Bersiap untuk Menggoyang Dunia

Pikirkan jQuery sebagai sekelompok blok bangunan JavaScript yang sudah dibangun sebelumnya. Mari kita lihat contoh dasar. Beginilah cara Anda memilih elemen dengan id my-div pertama kali dalam JavaScript dan selanjutnya di jQuery.

// JavaScript
document.getElementById (‘my-div’);

// jQuery
$ (‘# my-div’);

Memilih elemen dengan id cukup mudah dilakukan di kedua bahasa. Namun, seperti yang Anda lihat, dibutuhkan kira-kira 25 penekanan tombol lebih sedikit untuk melakukannya di jQuery daripada di JavaScript.

Menambahkan jQuery ke Dokumen HTML Anda

Anda harus memuat jQuery sebelum dapat menggunakannya, dan ada dua cara sederhana untuk melakukannya. Anda dapat mengunduh jQuery dan memasukkan salinan lokal atau menggunakan salinan yang di-host seperti Google Hosted Libraries.

Berikut kode yang Anda sertakan dalam dokumen HTML Anda untuk memuat jQuery:

Perhatikan bahwa ketika Anda menulis jQuery, Anda harus memuat kode Anda setelah inti jQuery dimuat.

Menggunakan jQuery Dengan WordPress

Satu pertimbangan khusus untuk diperhatikan adalah bahwa ketika Anda menggunakan jQuery di situs WordPress Anda harus menggunakan jQuery untuk mengawali kode Anda daripada $. Ada solusi yang dapat Anda gunakan untuk mendapatkan $ awalan untuk bekerja, tetapi gagal itu, awali saja kode Anda dengan jQuery, seperti ini:

// jQuery normal
$ (‘# my-div’);

// jQuery untuk WordPress
jQuery (‘# my-div’);

jQuery CSS

Sama seperti Anda dapat menggunakan JavaScript untuk memanipulasi CSS, Anda dapat melakukan hal yang sama dengan jQuery.

Kita dapat memanipulasi kelas dengan cukup efektif dengan jQuery. Script di bawah ini mengamati klik mouse pada elemen dengan id my-div dan kemudian menghapus satu kelas dan menambahkan kelas yang berbeda. Anda dapat menggunakan kode ini untuk bergantian antara dua kelas CSS.

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (function () {
if ($ (‘# my-div’) .hasClass (‘first-state’)) {
$ (‘# my-div’) .removeClass (‘first-state’);
$ (‘# my-div’) .addClass (‘second-state’);
}
lain jika ($ (‘# my-div’) .hasClass (‘second-state’)) {
$ (‘# my-div’) .removeClass (‘second-state’);
$ (‘# my-div’) .addClass (‘first-state’);
}
})

Itu membantu, meskipun, kita bisa melakukan itu lebih mudah dengan menggunakan .toggleClass () sebagai gantinya.

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (function () {
$ (myDiv) .toggleClass (‘first-state’);
$ (myDiv) .toggleClass (‘second-state’);
})

Mari kita lihat transisi itu dalam aksi.

Toggle Class Animation

Ada banyak metode jQuery CSS tambahan. Terutama, metode .css () dapat digunakan untuk memanipulasi CSS dari elemen yang ditargetkan secara langsung. Metode lain, seperti .height () dan .width () dapat digunakan untuk menargetkan nilai CSS tertentu.

Efek jQuery

Berbagai macam efek dibangun ke jQuery. Efek ini dirangkai bersama dengan metode dan fungsi jQuery lainnya untuk mengontrol eksekusi perubahan pada elemen halaman.

Itu suap, jadi mari kita lihat sebuah contoh. Jika kita kembali ke fungsi .toggleClass () kita, kita dapat menambahkan beberapa efek untuk memperlancar transisi.

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (function () {
$ (ini) .fadeOut (‘lambat’, function () {
$ (ini) .toggleClass (‘first-state’);
$ (ini) .toggleClass (‘second-state’);
})
$ (ini) .fadeIn (‘slow’);
})

Apa yang dilakukan kode itu adalah memudar elemen keluar, beralih kelas, dan memudar kembali elemen yang diubah.

Toggle Effect Animation

Efek fadeOut () dan fadeIn () hanyalah dua dari beberapa efek jQuery yang tersedia. Selain itu, semua efek dapat menggunakan sejumlah opsi berbeda untuk menyempurnakan perilaku mereka.

Acara jQuery

Kami telah melihat satu peristiwa jQuery beberapa kali dalam tutorial ini: .click (), yang aktif ketika pengguna mengklik elemen yang ditargetkan. Namun, ada banyak acara tambahan yang tersedia.

Acara yang digunakan untuk menargetkan tindakan pengguna termasuk .click (), .dblclick (), .hover (), .mouseenter (), .mouseleave (), dan .mousemove (), yang semuanya cukup jelas. Ada juga beberapa penangan acara yang memperhatikan perubahan pada elemen halaman:

  • .change () mendeteksi ketika elemen form berubah. Demikian pula, .submit () mendeteksi kapan suatu formulir dikirimkan.
  • .fokus () dipicu ketika elemen yang ditargetkan mendapatkan fokus.
  • .api ready () segera setelah browser membuat halaman web.
  • .resize () memicu kode untuk dijalankan ketika viewport diubah ukurannya.
  • .trigger () mengikat satu peristiwa dengan peristiwa terkait lainnya.

Ada beberapa acara jQuery tambahan yang belum kami bahas dalam panduan singkat ini. Pelajari lebih lanjut dengan merujuk pada dokumentasi jQuery atau sumber daya yang disarankan.

jQuery UI

jQuery UI adalah ekstensi ke jQuery yang mencakup widget dan alat UI yang kuat. Menerapkan fitur UI jQuery, seperti widget akordeon, sangat mudah dibandingkan dengan mengkode fitur yang sama dari awal.

Fitur jQuery UI dapat dibagi menjadi empat kategori: widget, efek, interaksi, dan utilitas. Mari kita lihat masing-masing. Tapi pertama-tama, kita perlu tahu cara menambahkan jQuery UI ke dokumen HTML.

Menambahkan jQuery UI ke Dokumen HTML

Anda memiliki dua opsi untuk memuat jQuery UI: unduh dan sertakan salinan lokal atau sertakan salinan yang di-host CDN.

Selain itu, ingatlah hal-hal ini:

  • Tautan stylesheet CSS harus ada di kepala dokumen.
  • Skrip jQuery UI harus tepat di atas tag penutup.
  • Inti jQuery (jquery.js atau jquery.min.js) harus dimuat sebelum UI jQuery (jquery-ui.js atau jquery-ui.min.js) dimuat.

Tema jQuery UI

Saat Anda mengunduh salinan jQuery UI, pembuat unduhan memungkinkan Anda untuk memasukkan tema. Ini karena widget jQuery UI memerlukan penataan standar. Tema jQuery UI yang Anda pilih menentukan gaya widget default, dan kode yang relevan disertakan dalam jquery-ui.css.

Jika Anda memilih opsi yang dihosting oleh Google, perhatikan bahwa nama tema dijatuhkan tepat sebelum nama file: … / smoothness / jquery-ui.css. Kelancaran adalah tema default jQuery UI. Anda dapat menggunakan tema apa pun dengan mengganti nama tema saat membuat URL.

Selain itu, situs web jQuery UI menawarkan ThemeRoller yang dapat Anda gunakan untuk membangun tema Anda sendiri dan memasukkannya saat Anda mengunduh jQuery UI.

jQuery UI Widgets

Widget membuatnya relatif mudah untuk membuat elemen UI berguna yang akan membawa segunung kode untuk dibuat dengan JavaScript dan CSS murni. Mari kita lihat beberapa widget jQuery yang paling membantu (klik apa saja untuk dibawa ke demo):

  • Accordions memungkinkan Anda untuk menyembunyikan informasi di balik judul dan menampilkannya dengan mengubah setiap bagian menjadi terbuka dan tertutup.
  • Tab adalah alternatif dari akordeon. Mereka adalah cara menghemat tempat untuk menyajikan informasi.
  • Tombol di jQuery UI indah dan disajikan secara konsisten.
  • Datepicker dapat ditambahkan ke formulir untuk memastikan tanggal dipilih dan diformat dengan benar.
  • Progressbars memberikan indikasi visual tentang seberapa banyak kemajuan yang telah dibuat menuju pencapaian tujuan.
  • Slider memungkinkan pengguna untuk memilih nilai tunggal atau rentang nilai saat mengirimkan formulir.
  • Spinner menambahkan panah atas dan bawah untuk memasukkan angka dalam bidang formulir.
  • Tooltips dapat digunakan untuk memberikan informasi khusus bidang untuk membentuk pengguna.

Untuk memberi Anda pemahaman tentang betapa mudahnya widget diterapkan, berikut ini semua kode yang perlu Anda gunakan untuk membuat seperangkat akordeon:

Bagian Akordion 1

Konten akordion. Anda dapat menggunakan paragraf, daftar, tautan, apa pun.

Bagian Akordion 2

Seperti yang saya katakan.

  • Kamu
  • Bisa
  • Menggunakan
  • Daftar

Bagian Akord 3

Itu dia. Sangat mudah.

$ (function () {
$ ( "#akordeon" ).akordeon();
});

Seperti yang Anda lihat, HTML jauh lebih panjang daripada beberapa baris jQuery yang diperlukan untuk mengubah HTML menjadi akordeon.

jQuery UI Accordions Animation

Efek jQuery UI

Sebagian besar metode dalam kategori ini adalah perluasan metode jQuery inti. Misalnya, jika Anda ingin memanipulasi kelas, metode .addClass (), .removeClass (), dan .toggleClass () semuanya tersedia di jQuery UI, bersama dengan metode tambahan, .switchClass (). Perbedaannya adalah bahwa di jQuery UI metode ini menyertakan opsi tambahan, seperti kemampuan untuk menambahkan efek transisi langsung ke metode itu sendiri.

Mari kita lihat sebuah contoh. Ingat ketika kami menggunakan .fadeIn () dan .fadeOut () untuk mengubah tampilan div? Baiklah, kita dapat membuat efek yang jauh lebih bagus dengan kode yang jauh lebih sedikit dengan menggunakan jQuery UI.

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (function () {
$ (ini) .toggleClass (‘second-state’, 1000);
})

Inilah transisi dalam aksi.

jQuery UI Toggle Class Animation

Beberapa metode efek tambahan yang ingin Anda ketahui meliputi:

  • Metode .show () menghapus tampilan: tidak ada; dari elemen yang ditargetkan.
  • Metode .hide () menambahkan tampilan: tidak ada; ke elemen yang ditargetkan.
  • Metode .toggle () akan mengalihkan elemen yang ditargetkan antara keadaan yang terlihat dan tersembunyi.
jQuery UI Effect Animations

Ada 15 efek animasi yang berbeda dengan nama-nama seperti blind, bouncing, clip, drop, dan explode. Mari kita lihat contoh efek slide.

var myDiv = $ (‘# my-div’);
var myButton = $ (‘# my-button’);
$ (myButton) .click (function () {
$ (myDiv) .toggle ( "meluncur" );
})

Dalam hal ini, kami menambahkan tombol untuk menggeser div dan mematikan layar. Mari kita lihat seperti apa div kita saat disembunyikan dengan sedikit jQuery itu.

jQuery UI Sembunyikan Animasi

Efek transisi jQuery ini dapat diterapkan ke metode .show (), .hide (), dan .toggle (). Situs web jQuery UI menyertakan alat pratinjau efek yang dapat Anda gunakan untuk memutuskan efek mana yang paling sesuai dengan implementasi Anda.

Mempermudah Transisi jQuery UI

Inti jQuery hanya mencakup dua kemudahan: swing dan linear. Namun, jQuery UI menambahkan lebih dari 20 kemudahan. Mari kita melihat kembali penerapan metode .toggle () kami, kali ini menambahkan dua kemudahan yang berbeda.

var myButton = $ (‘# my-button’);
$ (myButton) .click (function () {
$ (‘# first-div’) .toggleClass (‘second-state’, 2000, ‘easyInOutQuad’);
$ (‘# second-div’) .toggleClass (‘second-state’, 2000, ‘easyInOutExpo’);
})

Dalam contoh ini, ada dua div. Keduanya akan beralih ke status kedua dalam 2 detik. Namun, masing-masing akan menggunakan pelonggaran yang berbeda. Mari lihat.

jQuery UI Easing Animation

Interaksi jQuery UI

Interaksi adalah seperangkat metode jQuery UI yang memungkinkan pengguna situs web dan aplikasi untuk memilih dan memindahkan elemen halaman. Ada lima interaksi UI jQuery. Mengklik salah satu tautan di bawah ini akan membawa Anda ke demo dari setiap interaksi di situs web jQuery UI.

  • Interaksi Draggable memungkinkan pengguna memposisikan ulang elemen halaman web dengan menyeret dan menjatuhkannya dengan mouse mereka.
  • Interaksi Droppable bekerja bahu-membahu dengan interaksi yang dapat diseret. Untuk menggunakannya, item draggable dan droppable harus tersedia di halaman web. Saat item yang dapat diseret jatuh ke item yang dapat jatuh, suatu tindakan dipicu.
  • Resizable melakukan persis seperti yang Anda pikirkan seharusnya: itu membuat elemen halaman resizable.
  • Dapat dipilih dapat membuat item dalam daftar dapat dipilih dengan mengkliknya satu per satu, atau dengan menekan Ctrl atau mengklik dan menyeret melintasi beberapa item untuk memilih beberapa item sekaligus.
  • Sortable memungkinkan untuk mengatur kembali item daftar dalam urutan apa pun.

Interaksi jQuery UI bukan hal yang Anda harapkan untuk diterapkan di situs web rata-rata. Namun, jika Anda membuat aplikasi web, game, atau formulir kompleks interaktif, interaksi ini akan berguna.

jQuery UI Utilities

UI jQuery dapat diperpanjang dan pabrik widget adalah utilitas yang digunakan untuk melakukannya. Pabrik widget memungkinkan Anda untuk mengemas beberapa metode, gaya, dan fungsi UI jQuery ke dalam satu widget yang dapat digunakan kembali.

Jika Anda terbiasa dengan pemrograman berorientasi objek, mungkin berguna untuk menganggap widget jQuery UI sebagai objek. Jadi, akordeon jQuery UI sebenarnya adalah objek dari kelas akordeon. Apa yang pabrik widget memungkinkan Anda lakukan adalah mendefinisikan kelas widget baru dan kemudian menggunakan kelas itu untuk membuat beberapa objek, banyak dengan cara yang sama seperti Anda membuat kelas dan menggunakannya kembali berulang-ulang di OOP.

Utilitas jQuery UI lain yang bermanfaat adalah metode .position (). Metode ini memungkinkan Anda untuk menentukan posisi elemen apa pun relatif terhadap elemen lain atau tindakan pengguna. Metode ini cukup sederhana setelah Anda terbiasa. Mari kita lihat sebuah contoh.

$ (‘# second-div’) .position ({
saya: ‘kiri atas’,
di: ‘kanan bawah’,
dari: ‘# first-div’
});

Sedikit kode itu mengatakan bahwa sudut kiri atas elemen dengan id div kedua harus diposisikan di sudut kanan bawah elemen dengan id div pertama, seperti ini:

jQuery UI Position Animation

Selain itu, item dapat diposisikan berdasarkan tindakan pengguna. Mari sesuaikan kode untuk menggunakan posisi mouse daripada div pertama untuk menentukan posisi div kedua.

$ (dokumen) .mousemove (fungsi (acara) {
$ (‘# second-div’) .position ({
my: ‘center’,
dari: acara,
tabrakan: ‘fit’
})
})

Kode itu menambahkan pendengar untuk acara .mousemove () yang akan dipicu kapan saja mouse memasuki dokumen. Ketika itu terjadi, .position () dari div yang ditargetkan akan ditentukan berdasarkan posisi mouse.

Mari kita melihatnya beraksi.

jQuery UI Position Mousemove Animation

jQuery Mobile

jQuery Mobile adalah ekstensi lain dari perpustakaan jQuery. Ini digunakan untuk membuat situs web dan aplikasi responsif yang dioptimalkan sentuh.

Saat memikirkan jQuery Mobile, penekanannya harus ditempatkan pada sentuhan yang dioptimalkan. Ada banyak metode dan acara UI jQuery inti dan jQuery yang tidak hanya berlaku untuk perangkat seluler, dan alamat jQuery Mobile yang kekurangannya. Tidak seperti jQuery UI, yang dapat digunakan untuk memberi daya hanya satu atau dua aspek dari sebuah situs web, jQuery Mobile dirancang untuk menjadi solusi semua atau tidak sama sekali untuk situs web dan aplikasi responsif berbasis sentuhan.

Pustaka mencakup sejumlah besar tombol responsif, tombol sentuh yang dioptimalkan, pemegang data, elemen bentuk, kejadian swipe, elemen navigasi, tabel, tab, slider, dan banyak lagi. Selain itu, jQuery Mobile menyertakan ThemeRoller.

Tantangan dengan menggunakan jQuery Mobile adalah pendekatan semua atau tidak sama sekali. Ini dirancang untuk membuat penggantian penuh untuk versi desktop situs web dan aplikasi. Jika Anda lebih suka memiliki satu situs atau aplikasi yang berfungsi di semua perangkat, jQuery Mobile bukan yang Anda cari. Jika Anda benar-benar menggunakan jQuery Mobile untuk aplikasi atau situs web yang berfungsi pada semua perangkat – berkemampuan sentuh dan tidak – Anda perlu menemukan cara untuk menghidupkan dan mematikan jQuery Mobile dengan mendeteksi jenis perangkat, ukuran, dan keberadaan layar sentuh..

Sumber Daya Desain

Kami telah menunjukkan beberapa tempat di mana Anda dapat belajar JavaScript. Jika Anda belum mengetahui JavaScript, kembangkan keterampilan itu sebelum menyelam ke jQuery. Setelah Anda memiliki JavaScript di bawah ikat pinggang Anda, sumber daya berikut akan membuat Anda lebih cepat dengan jQuery, jQuery UI, dan jQuery Mobile.

  • Pusat Pembelajaran jQuery Foundation adalah tempat resmi (dan salah satu yang terbaik) untuk belajar jQuery. Di sini Anda akan menemukan kursus berbasis bab yang mencakup dasar-dasar, peristiwa dan efek, AJAX, plugin, dan banyak lagi. Saat Anda siap, Anda juga dapat mempelajari cara menggunakan jQuery UI dan jQuery Mobile.
  • Belajar jQuery From Scratch adalah tutorial berbasis proyek yang akan membantu Anda mendapatkan kepercayaan diri sebagai programmer jQuery.
  • CodeCademy jQuery Course mengajarkan Anda sintaks jQuery, serta bagaimana menulis fungsi dasar, memodifikasi elemen DOM, menggunakan acara, dan menerapkan efek.
  • jQuery Fundamentals by Bocoup adalah sebuah ebook dengan konsol JavaScript bawaan sehingga Anda dapat mencoba kode tepat di peramban. Ini mencakup dasar-dasar jQuery, melintasi dan memanipulasi elemen DOM, peristiwa, efek, dan AJAX.

Desainer Membutuhkan jQuery

Ekstensi ke jQuery, jQuery UI, dan jQuery Mobile menambah banyak widget, interaksi, metode, efek, dan alat yang dioptimalkan sentuh. Menguasai ini akan membuat Anda menjadi perancang dan pengembang yang lebih baik karena Anda akan dapat membangun aplikasi web yang hebat dan interaktif tanpa harus menekan tombol apa pun..

Hal-hal Menarik Lainnya

Kami memiliki lebih banyak panduan, tutorial, dan infografis terkait dengan pengkodean dan pengembangan situs web:

  • CSS3 – Pengantar, Panduan & Sumber: ini adalah tempat yang bagus untuk mulai belajar tata letak halaman web.
  • Sumber Daya ASP.NET: panduan ini akan membantu Anda menggunakan kerangka kerja .NET untuk membuat halaman web.

Kode apa yang harus Anda pelajari?

Bingung tentang bahasa pemrograman apa yang harus Anda pelajari kode? Lihat infografis kami, Apa Kode Yang Harus Anda Pelajari? Itu tidak hanya membahas berbagai aspek bahasa, itu menjawab pertanyaan-pertanyaan penting seperti, “Berapa banyak uang yang akan saya hasilkan untuk pemrograman Java sebagai mata pencaharian?”

Kode Apa Yang Harus Anda Pelajari?
Kode apa yang harus Anda pelajari?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me