Minggu lalu, saya berbicara tentang betapa pentingnya jQuery bagi setiap pengembang web modern dan mengapa itu mengagumkan. Minggu ini, saya pikir sudah waktunya kita mengotori tangan kita dengan beberapa kode dan belajar bagaimana benar-benar menggunakan jQuery dalam proyek kita.

Saya akan mengatakan ini sekarang - Anda tidak perlu mempelajari Javascript untuk menggunakan jQuery. Mungkin lebih baik jika Anda menganggap jQuery sebagai evolusi Javascript - cara yang lebih baik untuk melakukannya - daripada sekadar perpustakaan yang menambahkan fungsionalitas. Javascript apa pun yang Anda butuhkan akan diambil di jalan. Namun diasumsikan bahwa sebagai pengembang web Anda memiliki pengetahuan yang cukup baik tentang HTML dan CSS (dan inilah panduan xHTML gratis yang bermanfaat jika tidak!).

---

---

Model Objek Dokumen

jQuery adalah semua tentang traversal dan manipulasi dari PERTIMBANGAN - NS D ocument ATAU objek M model. DOM adalah representasi hierarki hierarki halaman, yang dibuat oleh browser setelah membaca semua kode HTML. Di jQuery, kami akan menggunakan terminologi seperti induk , anak-anak , dan saudara cukup sering, jadi Anda harus memiliki gagasan tentang apa artinya ini dalam kaitannya dengan DOM.

Diagram sederhana ini dariw3schoolsmenjelaskan konsep dengan cukup baik. Anda harus dapat melihat bahwa induk dari elemen tersebut adalah , sedangkan elemen memiliki segera

saudara.

Memulai: Menambahkan jQuery

Versi terbaru jQuery adalah sekitar 91KB saat dikompresi, sehingga menambah berat halaman yang sama dengan foto atau tangkapan layar kecil. Cara termudah untuk memasukkan jQuery dalam proyek Anda adalah dengan menempelkan referensi ke versi host terbaru ke bagian header situs Anda:

Namun perhatikan bahwa jika Anda menjalankan Wordpress, ini dapat menyebabkan masalah karena sudah memiliki salinan perpustakaan jQuery sendiri. Plugin dapat meminta agar ini dimuat, dan Wordpress dengan cerdas hanya akan memuat jQuery sekali terlepas dari berapa banyak plugin yang memintanya.

Jika Anda menambahkan baris berikut ke Anda function.php file tema, Anda akan menambahkan permintaan lain untuk disertakan. Wordpress kemudian akan tahu untuk selalu memuatnya jika tema Anda aktif.

---

---

itu mint mobile gsm atau cdma

wp_enqueue_script('jquery');

Hal kedua yang perlu diingat adalah bahwa ketika jQuery ditambahkan menggunakan metode standar, itu akan dimuat sebagai $ . Apa pun yang Anda lakukan dengan jQuery akan didahului oleh $ ini, seperti:

$.ajax

atau

---

---

$('#header')

Namun, ketika jQuery dimuat melalui Wordpress, semuanya dilakukan menggunakan variabel jQuery alih-alih $, jadi misalnya:

jQuery('#header')

Meskipun ini bukan masalah besar saat menulis kode Anda sendiri, itu berarti memotong dan menempelkan potongan jQuery yang Anda temukan di web perlu diterjemahkan untuk menggunakan jQuery alih-alih $ - itu saja.

Salah satu cara mengatasinya adalah dengan membungkus kode $-style yang Anda temukan seperti:

(function($) {
// paste $ code in here
})(jQuery);

Ini membutuhkan jQuery variabel dan meneruskannya ke fungsi anonim sebagai $ . Saya akan menjelaskan fungsi anonim lain kali - untuk saat ini, mari kita pelajari struktur dasar dari sedikit kode jQuery.

Untuk menambahkan kode Anda ke halaman HTML atau PHP, sertakan semua yang ada di dalam tag, seperti:


// jQuery code codes here


$('pemilih').metode();

Itu saja, dalam judul di atas sana. Itulah struktur dasar dari satu bagian kode jQuery untuk memanipulasi DOM. Mudah, kan?

NSpemilihmemberitahu jQuery untuk menemukan hal-hal yang cocok dengan aturan ini, dan sama dengan pemilih CSS (dan kemudian beberapa lagi di atas). Jadi, sama seperti di CSS Anda akan menata semua tautan dengan

a { }

Hal yang sama akan dilakukan di jQuery sebagai

$('a')

Ini dapat dilakukan untuk elemen HTML apa pun - div, h1, span - apa pun. Anda juga dapat menggunakan kelas dan ID CSS untuk lebih spesifik.

Misalnya, untuk menemukan semua tautan dengan kelas 'findme', Anda akan menggunakan:

$('a.findme')

Anda tidak perlu menentukan jenis elemen setiap kali - tetapi jika Anda melakukannya, itu hanya membuat aturan lebih spesifik. Anda bisa saja mengatakan

$('.findme')

yang akan cocok dengan semuanya dengan kelas Temukan aku , apakah itu tautan atau bukan.

Untuk menggunakan elemen ID bernama, gunakan # tanda tangan sebagai gantinya. Perbedaan utama di sini adalah bahwa pemilih ID hanya akan memilih satu objek, sementara pemilih kelas dapat menemukan lebih dari satu.

cara download video streaming chrome

$('#something')

Pada dasarnya jika Anda bisa melakukannya di CSS maka jQuery juga akan melakukannya. Bahkan, Anda juga dapat beberapa penyeleksi semu gaya CSS3 yang cukup rumit seperti: pertama

$('body p:first')

Yang akan mengambil paragraf halaman. Anda juga menemukan elemen dengan atribut tertentu. Pertimbangkan contoh ini; kami ingin menemukan semua tautan di halaman yang mengarah ke internal menggunakan dan sorot mereka dalam beberapa cara. Inilah cara kami menemukannya:

$('a[href*='makeuseof']')

Bukankah itu keren? Yah, saya pikir itu.

Pelabuhan panggilan Anda berikutnya seharusnya adalah dokumentasi jQuery API untuk penyeleksi . Ini adalah daftar besar dari semua jenis penyeleksi yang tersedia untuk digunakan, dan tidak ada yang mengharapkan Anda mempelajari semuanya.

Bagian selanjutnya dari persamaan adalahmetode- apa yang harus dilakukan dengan hal-hal itu setelah Anda menemukan semuanya - tetapi kita akan meninggalkannya untuk pelajaran berikutnya. Jika Anda ingin mulai mencoba berbagai penyeleksi sekarang, saya sarankan Anda tetap menggunakan metode css berikut. Ini membutuhkan dua parameter - sebuah CSS Nama properti , dan yang baru nilai untuk menetapkan ke properti itu. Jadi, untuk memberi semua tautan warna latar belakang merah, Anda akan melakukan:

$('a').css('background-color','red');

Cukup sederhana! Meskipun ini mungkin tidak berguna secara praktis, ini akan memungkinkan Anda dengan mudah melihat elemen apa pun yang terletak menggunakan penyeleksi Anda. Sekarang maju, dan pilih - DOM menanti Anda.

Saya harap tutorial ini bermanfaat bagi Anda; Saya sudah mencoba membuatnya sesederhana mungkin untuk dipahami. Jangan ragu untuk mengajukan pertanyaan apa pun yang Anda miliki atau tinggalkan umpan balik, tetapi ketahuilah bahwa saya jelas bukan ninja jQuery elit.

Membagikan Membagikan Menciak Surel 5 Tips untuk Meningkatkan Mesin VirtualBox Linux Anda

Bosan dengan kinerja buruk yang ditawarkan oleh mesin virtual? Inilah yang harus Anda lakukan untuk meningkatkan kinerja VirtualBox Anda.

Baca Selanjutnya Topik-topik yang berkaitan

• Budaya Web
• Pengembangan web
• JavaScript
• Pemrograman
• jQuery

Tentang Penulis James Bruce(707 Artikel Diterbitkan)

James memiliki gelar BSc dalam Artificial Intelligence dan bersertifikat CompTIA A+ dan Network+. Ketika dia tidak sibuk sebagai Editor Ulasan Perangkat Keras, dia menikmati LEGO, VR, dan permainan papan. Sebelum bergabung dengan MakeUseOf, ia adalah seorang teknisi pencahayaan, guru bahasa Inggris, dan insinyur pusat data.

More From James Bruce

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan