11/19/2011

Tutorial Website Jquery

Dasar Jquery Bagian 1 (Hide and show)

Mengenal Selector :

$("#id") tag ini akan mencari tag yang menggunakan atribut id=id sama juga dengan getElementById().
$(".id") tag ini akan mencari tag yang menggunakan atribut class=id sama juga dengan getElementByClassName().
$("div") tag ini akan mencari tag yang menggunakan atribut div ,<div></div> atau sama dengan getElementByTagName("div").

Animasi :

1. Hide and Show :

HTML(jquery.html)

<!DOCTYPE html>
<html>
<head>
<style>
.anim { background:#000; padding:3px; float:left; color:#FFF; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script> // Ini adalah plugin jquery yang membuat pergerakan animasi menjadi lebih halus
</head>
<body>
<button id="hidr">Hide</button>
<button id="showr">Show</button>
<div>
<span class="anim">Suatu saat nanti saya akan menjadi programmer hebat</span>
</div>
<script>
$("#hidr").click(function () {
$(".anim").hide("slow")});
$("#showr").click(function () {
$(".anim").show(1000);
});
</script>
</body>
</html>

Example :


Suatu saat nanti saya akan menjadi programmer hebat

 

 

Dasar Jquery bagian 2 (Fade in fade out animation)

 

HTML (Fade.html)
<!DOCTYPE html>
<html>
<head>
<style>
.box,
#btn1,#btn2 { float:left; margin:5px 10px 5px 0; }
.box { width:80px; background:#090; text-align:center; padding:20px 0 20px 0; color:#FFF; font-family:Arial, Helvetica, sans-serif; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="btn1">fade out</button>
<button id="btn2">show</button>
<br>
<br>
<div id="box1" class="box">box1</div>
<script>
$("#btn1").click(function() {
  function complete() {
    $("<div/>").text(this.id);
}
  $("#box1").fadeOut(1600, "linear", complete);
});
$("#btn2").click(function() {
  $("#box1").fadeIn(1600);
});
</script>
</body>
</html>

Example :

Dasar Jquery bagian 3 (Slide in and Slide out) 

 

HTML (slide.html)
<!DOCTYPE html>
<html>
<head>
  <style>
.box,
#btn1,#btn2 { float:left; margin:5px 10px 5px 0; }
.box { width:80px; background:#090; text-align:center; padding:20px 0 20px 0; color:#FFF; font-family:Arial, Helvetica, sans-serif; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script></head>
<body>
<button id="btn1">slide out</button>
<button id="btn2">slide in</button>
<br>
<br>
<div id="box1" class="box">box1</div>
<script>
 $(document).ready(function() {
    $("#btn2").click(function () {
      $("#box1").show("slide", { direction: "down" }, 1000);
});
$("#btn1").click(function () {
      $("#box1").hide("slide", { direction: "down" }, 1000);
});
  });
</script>
</body>
</html>

 Jquery Bagian 4 Moving Element. appendTo() 

 

  Script html biasa (html.html)
<!DOCTYPE html>
<html>
<head>
<style>
p { background:#999; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Kata terakhir saya: </p>
</body>
</html>
Hasil :

Kata terakhir saya:

Setelah html ditambah jquery append
<!DOCTYPE html>
<html>
<head>
<style>
p { background:#ff0000; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Kata terakhir : </p>
<script>
$("p").append(document.createTextNode("Hai"));
</script>
</body>
</html>

Hasil:

Kata terakhir saya: Hai

Kesimpulan : append() jquery digunakan untuk menambah property pada sebuah tag, dalam script di atas tag <p> ditambah dengan text Hai.

 Jquery Bagian 5 Moving Element. appendTo()

 

HTML (jquery.html)
<!DOCTYPE html>
<html>
<head>
<style>#append { background:#333;
color:#FFF;
width:270px; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span class="append">sedang tidak melakukan apa apa...</span>
<div id="append">SAYA </div>
<script>$(".append").appendTo("#append"); </script>
</body>
</html>
Hasil :

SAYA sedang tidak melakukan apa apa...

Kesimpulan :
Jquery appendTo() digunakan untuk menggabungkan semua properti (style, text) kedua tag .
Pada contoh diatas tag <span class="append"> dengan style kosong dan text
"sedang tidak melakukan apa apa..."
digabungkan dengan tag <div id="append"> dengan style
{background:#333; color:#FFF; width:270px;}
dan text "SAYA" menjadi :

SAYA sedang tidak melakukan apa apa...

Jquery bagian 6 Moving Element .before() dan .after()

 

Script HTML biasa (jquery.html)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Saya halim...</p><b>Halo</b>
</body>
</html>
Hasil :
Saya halim...
Halo

Setelah diberi jquery before (jquery.html)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Saya halim...</p><b>Halo</b>
<script>$("p").before( $("b") );</script>
</body>
</html>

Hasil :
Halo
Saya halim...


Kesimpulan : Tag jquery before() membuat tag <b>Halo</b> diletakkan sebelum tag <p>Saya halim...</p>.


Setelah diberi jquery before (jquery.html)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>Halo</b><p>Saya halim...</p>
<script>$("p").after( $("b") );</script>
</body>
</html>
Hasil :
Saya halim...
Halo




Kesimpulan : Tag jquery before() membuat tag <b>Halo</b> diletakkan sesudah tag <p>Saya halim...</p>.

Jquery bagian 7 Attributes .attr()

 

HTML ( jquery.html )
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<img title="cake.jpg"/>
<script>
$("img").attr("src", function() {
return this.title;
});
</script>
</body>
</html>
Hasil :















Kesimpulan : jquery attr() digunakan untuk manambahkan atribut pada sebuah tag, contoh di atas tag <img title="cake.jpg"/> di beri script berikut :

<script>
$("img").attr("src", function() {
return this.title;
});
</script>

Maka tag Image akan menjadi seperti ini <img src="cake.jpg" title="cake.jpg">.




Download script


Jquery bagian 8 Attributes .css() 

 

HTML (jquery.html)
<!DOCTYPE html>
<html>
<head>
<style>
p { color:green; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Move the mouse over a paragraph.</p>
<p>Like this one or the one above.</p>
<script>
$("p").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$(this).css(cssObj);
});
</script>
</body>
</html>
Hasil :

Move the mouse over a paragraph.
Like this one or the one above.


Kesimpulan : Jquery css() digunakan untuk menambah atau mengganti style css suatu tag , contoh di atas tag <p> dengan style p{ color :green }. Ditambah fungsi hover dengan style :
'background-color' : 'yellow', 'font-weight' : 'bolder'
dan lain lain.


Jquery bagian 9 Attributes .addClass()

 

 

HTML (jquery.html)

<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<script>
$("p").addClass("selected highlight");
</script>
</body>
</html>
Hasil : 
Hello


Kesimpulan : Jquery addClass() digunakan untuk menggabungkan style css dalam suatu tag, contoh diatas tag <p> dengan style p { margin: 8px; font-size:16px; }
digabung dengan .selected { color:red; } .highlight { background:yellow; }.
Posted By In

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
Switcheroo
My Blog Sitcheroo

Beberapa kunci sukses menjadi Programmer

1. Kuasai bahasa Inggris, paling tidak bisa membaca dokumen, kalau masih belum bisa belajar secara bertahap, gunakan kamus online, gunakan translate online seperti google translate, semua gratis dan dengan mudah anda dapatkan di internet.

1.2. Segera beli Komputer atau notebook, sebagai alat wajib yang harus dimiliki, kalau tidak ada duit jadi operator warnet yang pemiliknya baik hati.

1.3. Sambung dengan koneksi internet, baik lewat HP, atau ke Warnet, kabar bagus kalau anda punya notebook WIFI, anda bisa dapat akses gratis pake fasilitas HOTSPOT. yang tersebar di seluruh penjuru.

2. Pelajari Materi Pokok, atau mata kuliah pokok yaitu Belajar coding, mulai dari logika sederhana yaitu menampilkan kata “Hello Word”, baik untuk program dekstop maupun untuk web programming.

3. Mulai praktek, jangan banyak terori, nanti gak kelar-kelar.

4. Saat ini ada 2 kelompok programming dari segi tampilan atau output yaitu Web Programming, seperti PHP, Java, JSP dan ASP. Dan desktop programming seperti C, Visual Basic, Delphi, Java desktop.

4.2. Pelajari sesuai target Kalau ingin buat website terprogram kuasai saja PHP. di internet materi ini tersedia melimpah ruah. Buat program sederhana dulu, dan semua ada contoh, ikuti dan coba praktekkan.

4.3. Untuk desktop gunakan Visual C, Visual Basic, Delphi, atau Java, saya anjurkan Visual basic atau delphi, tapi jika ingin jago kuasai C++.

5. Pelajari dan kuasai Database SQL, contoh Mysql, Oracle, Interbase, Microsoft SQL, Postgre SQL dan pulihan SQL lainnya. Yang populer Mysql dan Postgree terutama aplikasi web base.

6. Pelajari dan Kuasai jaringan Komputer dan Internet

7. Pelajari dan Kuasai Desain seperti photoshop, meskipun anda tidak suka.

8. Untuk mengusai minimal satu bidang dibutuhkan minimal 1 tahun, dan master 4 tahun, dan jika kita serius maka semakin lama semakin mantap, dan semakin banyak orang yang menawari anda.

9. Agar lebih PD kontrak atau kos di deket anak kuliah Jurusan IT

10. Kalau Ingin jadi Programer handal jangan lupa nanti pelajari: UML, ER, CRUD, DFD, Flowchart and Mind Map.

A.Ayo Raih Prestasi, meskipun anda tidak kuliah

B.Bangun komunitas online yang banyak tersedia di internet.

C.Fokus pada satu tujuan, yakin bahwa kita bisa, tanpa harus kuliah.

D. Praktek, praktek dan praktek, Coba, coba dan coba. Masihkan menyalahkan Pemerintah, Orang tua, keadaan, nasip, saya rasa saatnya menyalahkan diri sendiri, dimana peluang begitu banyak,kesempatan begitu terbuka tapi kita tidak melakukan apa apa. Ayo……semangat, kerja keras, kerja cerdas, kerja untuk masa depan yang gemilang, tanpa menjadi beban orang orang lain dan beban bagi diri sendiri...

Popular Posts

  • Cara membuka situs yang diblokir
    Cara membuka situs yang diblokir Oke disini saya hanya ingin memberikan sedikit ilmu yang saya punya yaitu cara membuka situs yang di blok...
  • Tutorial Website Javascript
    Javascript onLoad() HTML(javascript.html) <html> <head> <script type="text/javascript"> function getCookie(c_nam...
  • Tutorial Website PHP Session
    Session PHP Session merupakan script yang berfungsi menyimpan data sementara dari website. Contoh Pengguna an Session : 1. Memulai...
  • Tutorial Website PHP
    Membuat Kode Transaksi Unik Otomatis Berdasarkan Tanggal   Selengkapnya Click Here Fungsi...
  • New Ganti Nama Facebook
    Assalamualaikum Wr.Wb Cara ganti nama facebook terbaru ,  Caranya : login faebook masing masing .. kalau suda...
  • Tutorial Website PHP Function
    PHP Fungsi Contoh fungsi yang sederhana : PHP (fungsi.php) <html> <body> <?php function tulisnama() { echo "Muhammad Nur...
  • Blue Screen Pada Windows
    "Blue screen" ialah sebuah pesan error yang terjadi pada komputer anda terutama kalau anda memakai windows, yang bisa dijadik...
  • Cara bwt status FB kosong atau blank and Komentar Kosong
    saya mau share tentang cara buat status facebook kosong atau blank dan juga komentar nya, komentar kosong , hehheh .. buat yang udah tau ...
  • Pasang Password Di Flash Disk Tanpa Software
    Pasang Password Di Flash Disk Tanpa Software Okeh Kita Langsung aja ke TKP Cekibrottt... 1. Buka Notepad lalu masukkan scrip...
  • Prosesor Intel Core i7
    Core i7 resmi diluncurkan dalam tiga versi quad-core. Ditilik dari harganya, Core i7 memang tidak murah. Namun jika Anda ingin merakit ...