Cara Menggunakan Parent Child Selector Pada Jquery

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, kali ini saya akan mencoba membagi Cara Menggunakan Parent Child Selector Pada Jquery.

Sebelum kita memulai tutorial kali ini saya akan mencoba menjelaskan tentang jquery sedikit saja. jQuery adalah sebuah library JavaScript. Dalam dunia pemrograman, dimana library adalah kumpulan dari berbagai fungsi siap pakai untuk memudahkan pembuatan sebuah aplikasi. Selector parent >child sendiri adalah selector dari jQuery itu sendiri dan berfungsi untuk memilih semua elemen yang merupakan anak langsung dari elemen tertentu.

Nah, Sekarang saya akan memberi contoh tentang bagaimana Cara Menggunakan Parent Child Selector Pada Jquery:

-Pertama teman-teman ketikan tag html di bawah ini :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Child Selector Pada jQuery</title>
  <style>
  body {
    font-size: 14px;
  }
  	</style>

</head>
<body>

<h1>Dumetschool</h1>

<ul class="topnav">
  <li>Web Design</li>
  <li>Web Master
    <ul>
      <li>Web Master Premium</li>
      <li>Web Master Profesional</li>
      <li>Web Master Ultimate</li>
    </ul>
  </li>
  <li>Web Programming</li>
</ul>
 

 
</body>
</html>

Setelah teman-teman save coba teman-teman bika file html yang telah kita buat di browser teman-teman, maka tampilannya akan menjadi seperti gambar di bawah ini:

Pada kasus ini saya akan meberikan contoh dimana tag <ul> sebagai parent yang memiliki elemen child yaitu tag <li> akan di beri style list-style: none sedangkan untuk tag <li> yang berada dalam tag <ul> ke dua akan di beri style warna aqua, untuk bisa menjalankanya perintah seperti itu kita membutuhkan selector parent>child maka dari itu teman-teman buka file html yang telah di buat tadi dan ketikan script di bawah ini:

<script>
$( "ul.topnav > li" ).css( "list-style", "none");
$( "ul.topnav > li > ul > li" ).css( "color", "aqua");
</script>

posisikan di atas penutup body yah teman-teman dang jangan lupa untuk membuat link ke jQuery library-nya:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

di tempatkan di dalam tag head yah teman-teman. Setelah selesai disave lalu refresh browser teman-teman dan hasilnya akan menjadi seperti gambar di bawah ini:

Bagaimana teman-teman cukup mudahkan Cara Menggunakan Parent Child Selector Pada Jquery.

Sekian tutorial saya untuk kali ini tentang Cara Menggunakan Parent Child Selector Pada Jquery. Maaf bila ada kesalahan dalam tutorialnya.

Sehat selalu ya teman-teman, selamat mencoba.

Cara Menggunakan Parent Child Selector Pada Jquery

Kategori