Mengenal Istilah Paren dan Child Pada Jquery dan langkah-langkahnya

Halo teman-teman, berjumpa lagi dengan saya. Pada artikel ini saya akan menjelaskan tentang Mengenal Istilah Paren dan Child Pada Jquery , sebelumnya kita juga sudah mempraktekkan fungsi-fungsi yang ada di Jquery. Oke kita akan membahas apa itu Paren dan Child, paren dalam istilah pemograman yaitu induknya dan child sebagai anaknya. Bukan hanya di html saja, di dalam jquery paren dan child juga bisa di implementasikan dan di gabungkan dengan css. Baik langsung saja teman-teman buka kode editornya lalu copy script di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Parent Child</title>
</head>
<body>
<div class="container">
    <p>Ini adalah paragraf</p>
    <b>Ini adalah paragraf</b><br/>
    <i>Ini adalah paragraf</i><br/>
    <strong>Ini adalah paragraf</strong>
</div>
</body>
</html>

Kemudian pastekan di dalam code editornya, lalu save dengan index.html dan run pada browsernya. Maka output akan menghasilkan seperti gambar di bawah ini.

Langkah berikutnya kita akan menggunakan Jquerynya untuk melakukan perintah yang akan kita berikan. Teman-teman jangan lupa memberikan library Jquerynya di dalam tag <head> nya.

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

Langkah berikutnya kita panggil paren nya, pada script di atas yang menjadi paren adalah class:=”container”, maka pemanggilannya juga harus sama. Berikutnya kita berikan fungsi Jquery nya

<script>
$( ".container > p" ).css({ "color": "red","text-decoration":"underline"});
</script>

Nah teman-teman tambahkan script di atas ini ya di code editornya. Perhatikan pada script di atas, untuk pemanggilan child nya yaitu pertama panggil dahulu parennya yaitu container kemudian childnya. Berikut urutan pemanggilannya (“paren”.container > “child” p) jika sudah ditambah kan di save dan refreas pada browsernya.

Maka child akan berubah sesuai pemanggilannya yang mana didalam Jquery nya mempunyai value

Output akan menghasilkan warna merah dan text Underline(garis bawah), berikutnya saya akan memanggil semua childnya agar semua terlihat sama dengan child pertama

Lihat gambar di atas ini di dalam class atau paren container terdapat 4 child yaitu <p> <b> <i> dan <strong>, maka untuk mengaktifkan semuanya kita tinggal menambahkan saja child nya

Teman-teman tambahkan childnya seperti gambar di atas ini, jika sudah ditambahkan di save dan refreas pada browsernya. Hasilnya seperti gambar di bawah ini

Sangat mudah bukan,,?!? Oke sekian dulu di artikel ini tentang Mengenal Istilah Paren dan Child Pada Jquery semoga bermanfat dan menambah wawasan kalian untuk mempelajari fungsi-fungsi yang ada pad Jquery. Sampai jumpa di artikel berikutnya dan terimakasih 🙂

Mengenal Istilah Paren dan Child Pada Jquery

Kategori