Fungsi First pada Jquery

Jquery adalah salah satu framework Javascript yang sangat populer dikalangan web developer. Tugas Jquery adalah dapat memanipulasi tampilan website kita dengan secara langsung. Sehingga website kita akan terlihat dinamis sekali karena perubahan yang dapat langsung dirasakan tanpa perlu mereload tampilan website. Pada pembahasan kita kali ini, kita akan membahas salah satu fungsi yang ada di jquery, salah satunya adalah fungsi first(). Ya, kita akan belajar bagaimana cara kerja fungsi first() pada Jquery.

Fungsi first() ini adalah perintah untuk memberikan suatu aksi pada suatu objek untuk urutan yang pertama kali saja. Jadi urutan kedua, ketiga dan selanjutnya tidak akan kena dampak dari fungsi first() ini. Untuk lebih detailnya kalian bisa ikuti contoh code berikut ini.

first.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div").first().css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Selamat datang halaman beranda</h1>

<p>Ini adalah paragraf.</p>

<div style="border: 1px solid black;">
  <p>Paragraf dalam div</p>
  <p>Paragraf dalam div</p>
</div>
<br>

<div style="border: 1px solid black;">
  <p>Paragraf dalam div</p>
  <p>Paragraf dalam div</p>
</div>
<br>

<div style="border: 1px solid black;">
  <p>Paragraf dalam div</p>
  <p>Paragraf dalam div</p>
</div>
<br>

</body>
</html>

Setelah sudah kalian simpan file tersebut dengan format .html . Untuk melihat hasilnya kalian bisa buka file tersebut pada browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti ini.

fungsi-first-pada-jquery-rangga1-150917

Pada tampilan hanya div pertama saja yang berubah warnanya menjadi kuning. Itu karena pada perintah Jquery kita masukan fungsi first() dimana fungsi ini kita buat untuk selector div sehingga yang terjadi hanya div pertama saja yang akan berubah sesuai perintah apa yang kita berikan. Pada contoh kali ini kita berikan perintah css yaitu background-color dengan value yellow. Dan hasilnya seperti bisa kalian lihat pada gambar diatas.

Tentunya dengan perintah fungsi first() ini kalian bisa kembangkan lagi sesuai dengan kebutuhan website kalian. Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara kerja fungsi first() pada Jquery. Semoga pembahasan kali ini bermanfaat dan menjadi inspirasi bagi kalian semua. Sampai jumpa pada artikel menarik lainnya.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *