Minggu lalu, saya membincangkan betapa pentingnya jQuery bagi mana-mana pembangun web moden dan mengapa ia hebat. Minggu ini, saya rasa sudah tiba masanya kita kotor dengan beberapa kod dan belajar bagaimana menggunakan jQuery dalam projek kita.

Saya akan mengatakannya sekarang - anda tidak perlu belajar Javascript untuk menggunakan jQuery. Mungkin terbaik jika anda menganggap jQuery sebagai evolusi Javascript - cara yang lebih baik untuk melakukannya - daripada sekadar perpustakaan yang menambah fungsi. Mana-mana Javascript yang anda perlukan akan diambil dalam perjalanan. Namun diandaikan bahawa sebagai pembangun web anda mempunyai pengetahuan HTML dan CSS yang cukup baik (dan inilah panduan xHTML percuma yang berguna jika tidak!).

Model Objek Dokumen

jQuery adalah mengenai traversal dan manipulasi PENGHAKIMAN - yang D dokumen ATAU bawak M bau. DOM adalah perwakilan hierarki halaman, yang dibina oleh penyemak imbas setelah membaca semua kod HTML. Di jQuery, kami akan menggunakan istilah seperti ibu bapa , kanak-kanak , dan adik beradik cukup kerap, jadi anda semestinya mempunyai idea tentang apa maksudnya dalam hubungan DOM.

Gambarajah ringkas ini dariw3sekolahmenerangkan konsep dengan cukup baik. Anda semestinya dapat melihat bahawa induk elemen tersebut, sementara itu unsur mempunyai segera

jQuery code codes here`

$ ('pemilih').kaedah();

Itu sahaja, dalam tajuk di atas sana. Itulah struktur asas sekeping kod jQuery untuk memanipulasi DOM. Mudah, bukan?

Thepemilihmemberitahu jQuery untuk mencari perkara yang sesuai dengan peraturan ini, dan sama dengan pemilih CSS (dan kemudian beberapa lagi di atas). Jadi, seperti dalam CSS anda akan menggayakan semua pautan

a { }

Perkara yang sama akan dilakukan dalam jQuery sebagai

$('a')

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

Sebagai contoh, untuk mencari semua pautan dengan kelas 'findme', anda akan menggunakan:

$('a.findme')

Anda tidak perlu menentukan jenis elemen setiap kali - tetapi jika anda melakukannya, ini menjadikan peraturan lebih spesifik. Anda boleh katakan

$('.findme')

yang sesuai dengan segalanya dengan kelas cari saya , adakah itu pautan atau tidak.

Untuk menggunakan elemen ID bernama, gunakan # tanda sebaliknya. Perbezaan utama di sini adalah bahawa pemilih ID hanya akan memilih satu objek, sementara pemilih kelas dapat menemukan lebih dari satu.

mengapa penggunaan cakera saya begitu tinggi windows 10

$('#something')

Pada dasarnya jika anda boleh melakukannya dalam CSS maka jQuery juga akan melakukannya. Sebenarnya, anda juga boleh memilih beberapa pemilih pseudo gaya CSS3 yang agak rumit seperti: pertama

$('body p:first')

Yang akan mengambil perenggan halaman. Anda juga menemui unsur dengan atribut tertentu. Pertimbangkan contoh ini; kami ingin mencari semua pautan di halaman yang menunjukkan secara dalaman makeuseof dan menyerlahkannya dalam beberapa cara. Inilah cara kami menjumpainya:

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

Bukankah itu keren? Saya rasa ia.

Pelabuhan panggilan anda yang seterusnya adalah dokumentasi API jQuery untuk pemilih . Ini adalah senarai besar dari semua jenis pemilih yang tersedia untuk digunakan, dan tidak ada yang mengharapkan anda mempelajari semuanya.

Bahagian persamaan seterusnya adalahkaedah- apa yang harus dilakukan dengan perkara-perkara tersebut setelah anda menemui semuanya - tetapi kami akan meninggalkannya untuk pelajaran seterusnya. Sekiranya anda ingin memulakan dengan mencuba pelbagai pemilih sekarang, saya cadangkan anda mengikuti kaedah css berikut. Ini memerlukan dua parameter - CSS nama harta tanah , dan baru nilai untuk menyerahkan harta itu. Jadi, untuk memberi semua pautan warna latar merah, anda perlu melakukan:

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

Cukup sederhana! Walaupun ini mungkin bukan penggunaan praktikal, ini akan membolehkan anda melihat elemen yang terdapat dengan mudah menggunakan pemilih anda. Sekarang keluar, dan pilih - DOM menanti anda.

Saya harap tutorial ini berguna untuk anda; Saya telah berusaha menjadikannya semudah yang mudah difahami. Jangan ragu untuk mengemukakan sebarang pertanyaan yang anda ada atau meninggalkan maklum balas, tetapi ketahuilah bahawa saya pasti bukan ninja jQuery yang elit.

Berkongsi Berkongsi Tweet E-mel 5 Petua untuk Meningkatkan Mesin Linux VirtualBox Anda

Bosan dengan prestasi buruk yang ditawarkan oleh mesin maya? Inilah yang harus anda lakukan untuk meningkatkan prestasi VirtualBox anda.

Baca Seterusnya Topik-topik yang berkaitan

Budaya Web
Pembangunan Web
JavaScript
Pengaturcaraan
jQuery

Mengenai Pengarang James Bruce(707 Artikel Diterbitkan)

James mempunyai BSc dalam Artificial Intelligence dan disahkan CompTIA A + dan Network +. Apabila dia tidak sibuk sebagai Editor Ulasan Perkakasan, dia menikmati permainan LEGO, VR, dan permainan papan. Sebelum menyertai MakeUseOf, dia adalah juruteknik pencahayaan, guru bahasa Inggeris, dan jurutera pusat data.

Lebih Banyak Dari James Bruce

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan