Pengantar jQuery (Bagian 2): Metode & Fungsi

Iklan

Ini adalah bagian dari pengenalan pemula yang sedang berjalan untuk seri pemrograman web jQuery. Bagian 1 membahas dasar-dasar jQuery jQuery Tutorial - Memulai: Dasar-Dasar & PenyeleksiMinggu lalu, saya berbicara tentang betapa pentingnya jQuery bagi pengembang web modern dan mengapa itu mengagumkan. Minggu ini, saya pikir sudah saatnya kita membuat tangan kita kotor dengan beberapa kode dan belajar bagaimana ... Baca lebih banyak tentang bagaimana memasukkannya ke dalam proyek Anda, dan penyeleksi. Di bagian 2, kami akan melanjutkan penggunaan dasar karena kami melihat beberapa metode yang dapat Anda lakukan pada elemen DOM tersebut, dan beberapa dasar bahasa lainnya.

$(pemilih).metode();

Jika Anda ingat dari pelajaran 1, ini adalah struktur dasar manipulasi DOM di jQuery. Manipulasi DOM bukan satu-satunya hal yang dapat Anda lakukan dengan jQuery tentu saja, tetapi ini adalah tempat termudah untuk memulai dan yang paling umum, jadi itu sebabnya kami memilihnya.

Untuk rekap cepat, tombol

pemilih bagian dari pernyataan ini memungkinkan Anda untuk menggunakan nama elemen, kelas, atau ID seperti CSS untuk menemukan bagian-bagian DOM. Misalnya, untuk mengambil semua dengan nama kelas .tersembunyi, kami akan menggunakan:

$ ('div.hidden')

Bagian kedua dari persamaan ini adalah metode untuk melakukan DIV ini setelah kami menemukannya (jika ada sama sekali; atau mereka mungkin hanya satu "cocok" item). Ingat, jQuery hanya akan mengembalikan satu elemen untuk pemilihan ID, karena ID harus merujuk ke item unik. Jika Anda akan memiliki lebih dari satu hal, itu harus didefinisikan sebagai kelas di CSS.

Aktif untuk metode itu; apa yang bisa Anda lakukan dengan elemen DOM?

Pertama, saya kenalkan Anda pada .css Metode terakhir kali sehingga Anda bisa menggunakannya untuk pengujian. Formatnya sederhana:

.css ('properti', 'nilai');

Karena itu, apa pun yang dapat didefinisikan oleh CSS dapat disesuaikan dengan jQuery - warna, transparansi, lokasi, ukuran - untuk menyebutkan beberapa. Perubahannya langsung.

Jika Anda lebih suka menghidupkan perubahan CSS, maka saya punya berita bagus untuk Anda; ada juga metode yang disebut .menghidupkan(). Ini sedikit lebih rumit:

.animate ({'properti': 'value'}, kecepatan);

Sebagai contoh:

.animate ({'opacity': '0,25', 'height': '100px'}, 'fast');

Pada titik ini, Anda mungkin bertanya-tanya untuk apa kurung kurawal itu; mereka disebut "objek literal", dan biasanya digunakan untuk membuat daftar nilai properti pasangan, semacam seperti array yang diindeks jika Anda berasal dari bahasa lain. Anda akan sering menggunakannya di jQuery, jadi saya akan mengatakan ini lagi - biasakan memeriksa dengan benar tanda kurung dan kurung kurawal!

Periksa halaman ini untuk banyak contoh kerja metode bernyawa.

Selain memanipulasi properti CSS dari sesuatu, Anda dapat menyesuaikan kontennya dengan .metode text (), .html (), dan .val () juga (val untuk isi elemen bentuk). Metode-metode ini bertindak sebagai keduanya setters dan Dapatkanters; jika Anda tidak menentukan nilai, mereka akan mendapatkan nilai saat ini. Jika Anda menentukan nilai, mereka akan mengganti nilai saat ini.

Berikut ini beberapa contoh cepat:

Dapatkan nilai saat ini dari bidang nama di formulir komentar dan tetapkan ke variabel comment_name:

var commenter_name = $ (# comment-form #name) .val ();

Tetapkan nilai untuk nilai yang diambil dari commenter_name:

$ ('span.name'). text (commenter_name);

Kemudian kami memiliki banyak pilihan metode untuk kloning, bergerak, memasukkan atau menghapus bagian DOM. Imajinasi Anda adalah batasnya, sungguh.

Katakanlah Anda ingin secara dinamis menyisipkan blok gambar iklan setelah setiap tanggal 3 paragraf di kolom konten, tetapi Anda melakukannya dalam Javascript sehingga memuat halaman awal bisa tetap bersih. Kedengarannya cukup rumit, bukan? Hampir tidak ...

$('konten div #hal: nth-child (3n)').setelah('');

Untuk mengatasinya, kami telah meminta jQuery ke:

1. Temukan div dengan ID "konten"
2. Temukan p yang terkandung dalam div itu
3. Saring ke setiap 3 hal menggunakan pemilih semu n-child (lebih lanjut tentang itu di sini)
4. Masukkan img sewenang-wenang setelah setiap elemen yang cocok

Saya tidak mungkin mendaftar semua metode di sini dan Anda juga tidak ingin membacanya. Intinya adalah, ada metode untuk melakukan apa pun yang dapat Anda pikirkan ketika melakukan manipulasi periksa API untuk yang bisa kamu gunakan.

Juga, ingatlah bahwa mungkin ada lebih dari satu cara untuk melakukan sesuatu. Misalnya, Anda tidak dapat mempersempit objek yang benar insertAfter (), mungkin berpikir tentang menemukan lanjut anak turun dan menggunakan insertBefore () sebagai gantinya.

Metode Chaining

Terakhir hari ini, mari kita bicara sebentar tentang metode chaining, pada dasarnya hanya karena itu mengagumkan. Pertama, mari pertimbangkan baris kode berikut:

$ ('nav # menu'). fadeIn ('fast'); $ ('nav # menu'). addClass ('beingShown'); $ ('nav # menu'). css ('margin-right', '10px');

Kedengarannya cukup masuk akal, bukan? Tetapi Anda dapat melakukan hal yang sama hanya dalam satu baris:

$ ('nav # menu'). fadeIn ('fast'). addClass ('beingShown'). css ('margin-right', '10px');

Itu melakukan hal yang persis sama, dan disebut metode chaining. Karena hampir semua metode jQuery mengembalikan objek jQuery sendiri, masing-masing dapat dimasukkan ke yang berikutnya. Ini berarti lebih sedikit kode - yang selalu merupakan hal yang baik - tetapi sebenarnya juga berjalan lebih cepat.

Mengapa? Nah, setiap kali Anda memanggil jQuery dasar $ perintah dan pemilih, Anda memintanya untuk mencari melalui pohon DOM mencari elemen yang cocok. Saat Anda memadukan metode, Anda tidak perlu terus merujuk kembali ke DOM, karena ia tahu di mana mereka sekarang, dan dapat melakukan metode itu secara instan.

Itu saja untuk hari ini, dan saya pikir kita mungkin sudah membahas cukup banyak. Anda sekarang harus dipersenjatai dengan kemampuan untuk melakukan beberapa manipulasi DOM yang cukup berat, jadi pergilah, rangkai metode Anda bersama-sama dan buat halaman menjadi berantakan. Untuk saat ini, Anda ingin menempatkan skrip Anda di footer untuk memberikan waktu halaman yang lain untuk dimuat. Minggu depan kita akan menangani masalah membuat jQuery melakukan hal-hal hanya ketika semuanya telah dimuat dengan benar dengan acara, dan kasus aneh dari fungsi anonim.

Jika Anda baru saja menemukan posting ini, Anda mungkin adalah semacam pengembang web dan mungkin ingin memeriksa semua dari kami WordPress dan blogging artikel, atau bahkan artikel kami Plugin WordPress Terbaik Plugin WordPress Terbaik Baca lebih banyak halaman.