TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com

Bagian 7. Menggunakan JQuery Traversing

1

Bagian 7. Menggunakan JQuery Traversing Traversing digunakan untuk mencari dan mengakses elemen HTML yang masih satu parent (family/keluarga)? Berfungsi untuk memberikan effect, event, ataupun manipulation kepada elemen yang satu (family/keluarga). Misalkan kita akan memberikan suatu effect kepada hanya anak pertama pada suatu div.

Menggunakan JQuery Parent Jquery parent di gunakan untuk memberikan penderitaan kepada orang tua langsungnya. Contoh sederhana menggunakan JQuery Parent adalah sebagai berikut : <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ $("span").parent().css({"color":"red","border":"2px solid red"}); });

2

Contoh yang lebih kompleks adalah seperti dibawah ini <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ $("span").parent().css({"color":"red","border":"2px solid red"}); }); <style> .ancestors *{ display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; }

3

Menggunakan JQuery Parents Jika parent itu hanya berlaku kepada orang tua langsungnya, maka parents itu berlaku kepada orangtua-orangtua di atasnya. Contohnya adalah seperti dibawah ini : <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ $("em").parents().css({"color":"red","border":"2px solid red"}); });

Menggunakan JQuery ParentsUntil ParentsUntil digunakan untuk memberikan effect kepada orang-orang tua diatasnya sampai batas yang tertulis di bagian parameter dalam parentsUntilnya. Misalkan seperti ini : $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); Ini artinya “orang tua dari span sampai bertemu dengan div” akan diberikan effect.

4

Kode lengkapnya adalah seperti ini <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> <script> $(document).ready(function(){ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); }); body (great-great-grandparent)

5

Menggunakan JQuery Children JQuery children digunakan semua anak orang tuanya. Misalkan seperti ini $("div").children().css({"color":"red","border":"2px solid red"}); Ini artinya, berikan css terkait yakni warna text merah, dan border ukuran 2px berwarna merah kepada anak-anak dari div. Kode lengkapnya adalah seperti di bawah ini :

<style> .descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } <script src="jquery-1.11.1.min.js"> <script> $(document).ready(function(){ $("div").children().css({"color":"red","border":"2px solid red"}); });

Menggunakan JQuery Siblings Jika pada materi-materi sebelumnya kita telah bersinggungan dengan Orang Tua dan Anak, parent dan children, maka kali ini kita akan bersinggungan dengan saudara kandung, yakni siblings( ). Sebagai contohnya kita akan membuat 4 buah div, yang jika di klik salah satunya maka akan diperlihatkan detil isinya, namun saudara-saudaranya menutup. Begitu juga ketika kita mengklik saudaranya, maka dia akan memperlihatkan detil isi, sedangkan saudara-saudaranya menutup. <style> div{

float:left; padding:10px; width:200px; height:auto; margin:0 20px 0 0; background:#eee;

} h3{

margin:0;

} h3:hover{ cursor:pointer; }

7

p{

margin:0; display:none;

} <script src="jquery-1.11.1.min.js"> <script> $(document).ready(function(){ $('h3').click(function(){ /* saudara dari h3 diberikan effect slidedown */ $(this).siblings('p').slideDown(); /* orang tua dari h3 yakni div, saudara-saudaranya si div, anak si div yakni p di berikan effect slideUp */ $(this).parent('div').siblings().children('p').slideUp(); }); }); Yang terjadi adalah ketika satu, dua, tiga, empat diklik maka akan muncul detil dari keterangannya, namun saudara-saudara dari orang tua h3, yakni div, yang memiliki anak 'p' itu diberikan effect slideUp. Silahkan dicoba.

8