Hallo teman-teman semuanya kembali lagi bersama dengan saya di blog kita bersama, kali ini kita akan membahas menganai selection pada jquery dan melanjutkan seri belajar kita mengenai Belajar Jquery untuk Pemula #selection
Dimana pada pertemuan sebelumnya kita telah membahas mengenai bagaimana cara menginstall Jquery di halaman web teman-teman semuanya, mungkin bagi teman-teman yang belum mengikutinya silahkan klik link Belajar jquery untuk pemula #instalation
oke tanpa berlama-lama langsung saja kita masuk ke dalam pembahasan kita antara lain sebagai berikut
1. Pengertian Selection
Selection ialah salah satu cara jquery untuk menseleksi elemen-elemen pada html, atau di javascript biasa kita sebut dengan DOM ( Documentation Object Model )
2. Selector Pada Jquery
ok sebelum masuk ke dalam penerapanya teman teman harus mengetahui beberapa selector pada jquery antara lain sebagai berikut
( . ) => Digunakan untuk selector class
( # ) => Digunakan untuk selector id
( element ) => digunakan untuk selector elemen pada html
3. Selection Class
selanjutnya kita masuk ke dalam cara memanggil class pada jquery. untuk mempermudah teman-teman semua silahkan siapkan file index.html yang disimpan ke dalam local server teman-teman semuanya, selanjutnya copy source code di bawah ini :
index.html
Jika teman-teman sudah mengcopy source code diatas maka coba teman-teman perhatikan bahwa disitu ada class yang bernama selectionClass nahh sekarang kita akan menseleksi class tersebut dengan menggunakan jquery dan mengubah warnanya menjadi warna merah , untuk mengambil class tersebut kita hanya menggunakan contoh source ini :
<script>
$('document').ready(function(){
//selection class
$('.selectionClass').css('color','red');
})
</script>
Keterangan :
untuk mengambil kelass cukup gunakan selector classnya yakni ( . ) dan di ikuti nama classnya contoh $('.namaClass')
4. Selection Id
nahh untuk menseleksi id itu juga sama seperti cara menseleksi class, yakni sebagai contoh kita akan mengambil elemen id tersebut dan menambahkan tulisan " ini selection id" didalam id tersebut contoh script nya sebagai berikut
<script>
$('document').ready(function(){
//selection class
$('.selectionClass').css('color','red');
//selection id
$('#selectionId').html("ini selection id");
})
</script>
Keterangan
untuk mengambil id cuku anda gunakan selector id dan di ikuti dengan nama id nya contoh $('#selectionId)
5. Selection Elemen
nahh selanjutnya kita akan melakukan selection html menggunakan jquery, untuk menseleksi elemen html maka kita tidak perlu menggunakan selector cukup tulis nama elemen nya saja, contohnya sebagai berikut :
<script>
$('document').ready(function(){
//selection class
$('.selectionClass').css('color','red');
//selection id
$('#selectionId').html("ini selection id");
//selection elemen
$(a).css('font-size','30px')
})
</script>
Keterangan :
untuk menseleksi elemen kita tidak perlu menggunakan selector cukup panggil nama taq nya saja contoh $(a)
6. BONUS
Nah untuk informasi tambahan mungkin jika kita menggunakan selection diatas maka akan kurang maksimal jika nantinya elemen yang ingin kita ambil berada di dalam class atau id, maka untuk menseleksinya cukup gunakan script di bawah ini
<script>
$('document').ready(function(){
//selection class
$('.selectionClass').css('color','red');
//selection id
$('#selectionId').html("ini selection id");
//selection elemen
$(a).css('font-size','30px');
//bonus
$('.a #b strong').html("ini adalah hasil dari selection html bonus");
})
</script>
Keterangan :
untuk menseleksi elemen di dalam class maupun id ataupun sebaliknya bisa menggunakan script dengan mengalurkan alamatnya baik class dan id sampai ke elemen yang di inginkan contoh $('.a #b strong')
Nahh jika teman-teman sudah mengikuti perintah diatas maka kita akan maka tampilan dari hasil praktik kita akan seperti ini
nahh sampai disini mudah bukan cara seleksi elemen html pada jquery selanjutnya jika ada pertanyaan yang mungkin teman-teman kurang pahami maka silahkan meninggalkan pesan di kolom komentar
sekian dan terimakasih .....
0 Komentar