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

Ukuran: px

Mulai penontonan dengan halaman:

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

Farida Irawan
6 tahun lalu
Tontonan:

1 TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif Bagian 7. Menggunakan JQuery Traversing 1

2 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

3 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

4 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

5 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

6 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

7 </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

8 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

dokumen-dokumen yang mirip

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

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