Dalam pengembangan suatu web / aplikasi terkadang kita mengalami kondisi dimana kita diharuskan untuk memanipulasi element atau tag HTML untuk menyesuaikan dengan program yang kita buat. Sebagai contoh kasus, kita ingin merubah setiap element "p" ditulis dengan huruf tebal, atau kita ingin menambah class diselector dengan id tertentu. Dengan menggunakan jquery selector ini akan mudah untuk menyelesaikan kasus tersebut.
Apa si Jquery Selector itu ??
Jquery selector adalah fungsi utama pada jQuery. semua fungsi lainnya di jQuery dapat
diakses melalui selector. Penggunaan paling dasarnya adalah
mempassingkan sebuah ekspressi (biasanya ekspressi css) yang kemudian
selanjutnya jQuery akan mencari elemen yang cocok. pada intinya ini
adalah fungsi untuk memilih elemen-elemen pad halaman web.
Fungsi selector adalah $(‘ekspressi’). untuk penggunaan $() yang aman sebaiknya dilakukan setelah semua page DOM selesai terbaca semua. jadi webpagenya sudah lengkap baru script di eksekusi. kita dapat melakukannya dengan pada fungsi $(document).ready().
Adapun parameter yang bisa digunakan pada jquery adalah Id element, class element dan element itu sendiri. Selector juga bisa mengenali hirarki sebagai parameter inputnya dan bisa memfilternya langsung dari ekspressi.
Element Selector
Pada selector ini memilih element berdasarkan tag HTML nya, misalkan kita ambil contoh <p>
contoh penulisannya
$("p")
contoh penggunannya
$(document).ready(function(){Perlu diingat dalam penggunaan element selector ini berarti semua element dalam halaman tersebut yang kita definisikan terpilih, misalkan contoh diatas berarti semua element yang mempunyai tag <p> terpilih dalam halaman tersebut.
$("button").click(function(){
$("p").hide();
});
});
#id Selector
Pada selector ini kita mengambil id tertentu dalam suatu halaman yang akan kita manipulasi.
contoh penulisannya
$("#test")
contoh penggunannya
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
.Class Selector
Pada selector ini kita mengambil class tertentu dalam suatu halaman yang akan kita manipulasi.
contoh penulisannya
$(".test")
contoh penggunannya
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Dalam penggunaan selector ini yang perlu diingat element yang akan kita manipulasi harus berada dalam satu halaman.
Oke sekian pembahasan kita kali ini tentang penggunaan selector di Jquery , pada pembahasan selanjutnya kita akan membahas tentang jquery event. Selamat mencoba, semoga bermanfaat.
Belum ada tanggapan untuk "Manipulasi HTML dengan Jquery Selector"
Post a Comment