Home > Pemula > Belajar JQuery > Belajar Jquery Yuk: Mengenal Selector Pada Jquery (Pemula Bag. 2)

.

Tidak ada komentar BYAdmin Ilmuwebsite

belajar-jqueryBaiklah, dipertemuan sebelumnya yakni tutorial Belajar JQuery Yuk? (Pemula Bag. 1) , saya telah memperkenalkan sedikit apa itu jquery dan bagaimana mengoperasikannya, meskipun terlihat agak membingungkan dan memusingkan pada awalnya bagi Anda yang pemula sekali di dunia web design.
Di sesi kali ini, kita akan coba kilas balik, dari mana jquery itu bermula. Yang mudah-mudahan membuka mata hati dan pikiran Anda, mengenai Jquery, dan bagaimana seorang web designer asik melakukan pekerjaannya menggunakan jquery.

Selector Pada JQuery
Apa yang membuat para webdesigner yakin menggunakan JQuery sebagai javascript library yang bisa menghandle kegiatan mereka ketika mendevelop halaman web? Padahal terdapat banyak sekali library jquery yang sama handalnya dengan jquery, sebut saja scriptaculous, atau mootools. Jawabannya karena jquery banyak diminati oleh para webdesigner karena supportnya lebih ramai dan dokumentasinya lebih lengkap ketimbang javascript library lainnya, dan ini sangat dibutuhkan sekali ketika Anda kesusahan menghadapi suatu permasalahan yang spesifik dalam ber-jquery ria.

Selector pada JQuery tidak berbeda halnya dengan selector pada CSS, namun ada sedikit tambahan, dan mendefinisikan selector itu sendiri, jika di css Anda ingin menambahkan style pada salah satu class element html, maka cukup bagi Anda untuk mendefinisikan stylenya dengan tanda . (titik) di tambahi dengan nama classnya
misal dibagian html :

 

maka dibagian cssnya :

 

Dan begitu halnya dengan jquery, silahkan dipersiapkan struktur html lengkap seperti di bawah ini :

 

Simpan dengan nama jquerybag2.html letakkan difolder manapun, saya meletakkannya di D:\My Tutorial\JQUERY\bag2

Kemudian silahkan download terlebih dahulu library jquerynya di http://code.jquery.com/jquery-1.11.0.js lalu letakkan di direktori D:\My Tutorial\JQUERY\bag2. Setelah itu tambahkan dibagian head html tersebut dengan …

 

Di sana terdapat barisan kode $(document).ready(function(){ }); yang artinya kurang lebih adalah, jika halamannya sudah diload semua maka jquery sudah bisa digunakan, Anda bisa memasukkan perintah apapun di tengah-tengah tanda kurung kurawal.
Misalnya, kita akan memasukkan selector untuk element body, kita berikan perintah agar background halaman website tersebut berubah menjadi biru, berarti kita manfaatkan selector tag. Seperti ini :

 

Perhatikan

Ini berarti Anda memberikan warna background biru menggunakan fitur css yang ada di jquery, digunakan kepada selector tag body. Begitu halnya jika Anda ingin memberikan perintah kepada element berdasarkan selector id maka penggunaannya adalah seperti ini

begitu juga jika Anda ingin memberikan perintah kepada selector class, maka penggunaannya

 

Seperti inilah contoh lengkapnya penggunaan selector

 

Silahkan di simpan ke dalam file jquerybag2.html , dan buka dengan browser Anda, bagaimana hasilnya?

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0813 1167 5785, atau bisa pesan secara online di sini)



No Responses

You must be logged in to post a comment.

eXTReMe Tracker