penggunaan selector kombinator

Hai teman-teman semuanya, gimana kabarnya? semoga tetap dalam keadaan sehat, kita lanjut lagi belajarnya, kali ini kita masih belajar tentang selector pada jquery, kali ini kita akan belajar penggunaan selector kombinator > pada jquery.

fungsi dari kombinator > pada jquery adalah memilih semua element yang merupakan anak langsung dari element yang kita tentaukan, untuk lebih jelasnya kita langsung saja praktek, pertama silahkan teman-teman buat sebuah file dan ketikan script berikut ini:

<!DOCTYPE html>
<html>
<head>
</head>
<body>    

<div style="border:1px solid black;padding:10px;">
  <p>Dumet School.</p>
  <span>Dumet School.</span>
</div>

<hr>

<div style="border:1px solid black;padding:10px;">
  <p>Dumet School. <span>terbaik dan nomor satu.</span></p>
</div>

</body>
</html>

Pertama saya membuat sebuah div dimana didalam div yang pertama saya meletakan element p dan span secara sejajar, dan div yang kedua saya meletakan element p yang dimana didalam element p tersebut terdapat element span,

nah jika disave mana hasilnya akan seperti berikut ini:

nah sekarang coba tambahkan script jquery berikut ini:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div > span").css("background-color", "red");
});
</script>

Seperti biasa saya memanggil library dari jquery, lalu saya membuat sebuah selector kombinator div > span yang berarti element span yang merupakan anak langsung dari element div akan mengalami background red, jika di save maka hasilnya akan seperti berikut ini:

mengapa span yang ada di div kedua tidak kena style background merah, karena span di div yang kedua bukan merupakan anak langsung dari element div,

Gimana teman-teman? cukup mudah bukan? untuk tutorial kali ini tentang penggunaan selector kombinator > pada jquery saya rasa cukup sampai disini dulu,Â semoga tutorial kali ini dapat bermanfaat untuk teman-teman semuanya, samapai bertemu lagi pada tutorial berikutnya,

Terima kasih.

Penggunaan Selector Kombinator > Pada Jquery

Kategori