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

Please download to get full document.

View again

of 8
40 views
PDF
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Document Description
TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif Bagian 7. Menggunakan JQuery Traversing
Document Share
Document Transcript
TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif 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 : title jquery /title script type= text/javascript src= jquery min.js script type= text/javascript $(function( ){ $( span ).parent().css({ color : red , border : 2px solid red div span test Parent /span 2 Contoh yang lebih kompleks adalah seperti dibawah ini title jquery /title script type= text/javascript src= jquery 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; /style div class= ancestors div style= width:500px; div (great-grandparent / buyut - moyang) ul ul (grandparent / kakek) li li (direct parent / parent - orang tua langsung) span span /span /li /ul div style= width:500px; div (grandparent / kakek) p p (direct parent / parent - orang tua langsung) span span /span /p 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 : title jquery /title script type= text/javascript src= jquery min.js script type= text/javascript $(function( ){ $( em ).parents().css({ color : red , border : 2px solid red div div class= article h1 ini Judul Artikel /h1 p ini adalah contoh artikel yang bisa digunakan sebagai contoh dalam belajar JQuery. em contoh EM /em /p 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; /style script src= script $(document).ready(function(){ $( span ).parentsuntil( div ).css({ color : red , border : 2px solid red body class= ancestors body (great-great-grandparent) div style= width:500px; div (great-grandparent) ul ul (grandparent) li li (direct parent) span span /span /li /ul 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; /style script src= jquery min.js script $(document).ready(function(){ $( div ).children().css({ color : red , border : 2px solid red div class= descendants style= width:500px; div (current element) p p (child) span span (grandchild) /span /p p p (child) span span (grandchild) /span 6 /p 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{ h3{ float:left; padding:10px; width:200px; height:auto; margin:0 20px 0 0; background:#eee; margin:0; h3:hover{ cursor:pointer; 7 p{ margin:0; display:none; /style script src= jquery 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(); div h3 satu /h3 p satu dikenal dengan suatu yang istimewa, nomor satu, itu ibaratnya tidak terkalahkan /p div h3 dua /h3 p dua merupakan Angka yang lumrah ditemukan pada anggota tubuh, dua tangan /p div h3 tiga /h3 p ada sebuah desa bernama salatiga, yang dimana penduduknya menyenangi akan dunia web development /p div h3 empat /h3 p empat, dan angka lainnya itu sama-sama bagusnya /p 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
Similar documents
View more...
Search Related
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks