Tutorial Website Lengkap: November 2011

Jquery bagian 11 Attributes .val()

HTML (jquery.html)

<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:8px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" value=""/>
<p></p>
<script>
$("input").keyup(function () {
var value = $(this).val();
$("p").text(value);
}).keyup();
</script>
</body>
</html>

Hasil :

Kesimpulan : jquery val() digunakan untuk mendapatkan nilai value dari suatu tag data input.

Jquery bagian 10 Attributes .html()

HTML (jquery.html)

<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; font-size:18px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
$("div").html("<b>belajar!</b> Dasar jquery...");
$("div b").append(document.createTextNode("!!!"))
.css("color", "red");
</script>
</body>
</html>

Hasil :

belajar!!!! Dasar jquery...

Kesimpulan : jquery html() berfungsi untuk menuliskan tag html biasa, dan juga looping pada script html.

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; }.

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 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 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 5 Moving Element .appendTo()

HTML (jquery.html)

<!DOCTYPE html>

<html>

<head>

color:#FFF;

width:270px; }</style>

</head>

<body>

<span class="append">sedang tidak melakukan apa apa...</span>

</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 4 Moving Element .append()

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.

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>

Download File

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 :

box1

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

Selanjutnya saya akan membuat tutorial tentang jquery fade in and fade out

Output HTML 5

HTML (output.html)

<!DOCTYPE html>
<html>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>
</body>
</html>

Example :

Sumber : W3school

Audio in HTML 5

HTML (audio.html)

<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</body>
</html>

Example :

Sumber : w3schools

Video in HTML5

HTML(video.html)

<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" autoplay="autoplay">
<source src=http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</body>
</html>

example:

Sumber : w3schools

Javascript onLoad()

HTML(javascript.html)

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("Welcome again " + username);
}
else
{
username=prompt("Please enter your name:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>

Jquery show and hide

Example : Show/hide

Isi konten anda di sini hide

HTML (jquery.html)

<html>
<head>
<title>www.qwebsite.blogspot.com</title>
<style>
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});

});
</script>
<a href="#" class="show_hide">Show/hide</a><br />
<div class="slidingDiv">

Isi konten anda di sini <a href="#" class="show_hide">hide</a>
</div>
</div>
</body>
</html>

Onclick event

<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!">
<br />
Field2: <input type="text" id="field2">
<br /><br />
Click the button below to copy the content of Field1 to Field2.
<br />
<button onclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>
</body>
</html>

Example :

Field1:
Field2:

Click the button below to copy the content of Field1 to Field2.

Membuat Kode Transaksi Unik Otomatis Berdasarkan Tanggal

Selengkapnya disini

Fungsi extract array

PHP (array.php)

<html>

<head>

</head>

<body>

<?php

$data=array('kabupaten' => 'Pasuruan',

'kecamatan' => 'Pandaan',

'desa' => 'Karangjati',

'dusun' => 'Jetak');

extract($data, EXTR_PREFIX_SAME, '');

echo "DATA ASAL <br><br> Kabupaten : $kabupaten <br> Kecamatan : $kecamatan <br> Desa : $desa <br> Dusun : $dusun";

</body>

</html>

Preview :

DATA ASAL

Kabupaten : Pasuruan
Kecamatan : Pandaan
Desa : Karangjati
Dusun : Jetak