pemrograman web 6 - jquery
TRANSCRIPT
Apaan tuh?• jQuery adalah javascript library, seperti bootstrap tapi
untuk javascript
• Cara penggunaannya sama seperti bootstrap, yaitu
dengan pemanggilan library yang terdapat di dalam
javascript
LanjutjQuery berisi :
• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities
jQuery SyntaxPenggunaan jQuery yaitu kita memilih salah satu HTML elemen dan
kemudian memberikan action (akan melakukan sesuatu) ke dalam elemen
tersebut.
Syntax dasarnya : $(selector).action()
• $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)
Contoh<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
<p>Jika di klik akan ngilang</p>
<p>Klik ini juga</p>
<p>Hei, ane juga</p>
jQuery Selector• Element Selector – kita memilih element HTML yang
akan diberikan action script, contoh element <p>
• ID Selector – Untuk memberikan action script kepada
ID, kita harus mendeklarasikan ID ke dalam element HTML, contoh #tes
• Class Selector – mirip seperti ID selector, tetapi
deklarasi awal dengan menggunakan class, contoh.tes
Contoh ID Selector<script>
$(document).ready(function(){
$("p").click(function(){
$("#tes").hide();
});
});
</script>
<p>Paragraf ga bisa ngilang</p>
<p id="tes">ini yang bisa ngilang kalo di klik</p>
Contoh Class Selector<script>
$(document).ready(function(){
$("p").click(function(){
$(“.tes").hide();
});
});
</script>
<p>Paragraf ga bisa ngilang</p>
<p class=“.tes">ini yang bisa ngilang kalo di klik</p>
jQuery EventsEvents merupakan kondisi dimana kita memberikan input-an melalui device
yang akan direspon oleh script, kemudian script melakukan action sesuai
coding yang kita berikan. Contoh diatas, jika kita meng-klik (input device),
maka elemen <p> akan di hide (action).
Ada beberapa contoh event di dalam JS :
• Gerakan mouse di sekitar atau di dalam element html
• Memilih radio button
• Meng-klik elemen
DOM Events
Mouse Events Keyboard Events Form EventsDocument/Window
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
Contoh Mouse Events<script>
$(document).ready(function(){
$("#pgrf1").mouseenter(function(){
alert(“anda memasuki bagian paragraf");
});
});
</script>
Contoh Form Events<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#aaaaaa");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
Nama: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
on() MethodMethod on() digunakan untuk memasukkan lebih dari satu event handler kedalam elemen html yang dipilih.
<script>
$(document).ready(function(){
$("p").on("click", function(){
$(this).hide();
});
});
</script>
Attach Multiple Event Handlers<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", “red");
},
mouseleave: function(){
$(this).css("background-color", “green");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
<p>Click or move the mouse pointer over this paragraph.</p>
jQuery Hide & Show EffectsEfek ini berfungsi untuk menyembunyikan dan menampilkan elemen (baca slide 4).
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
<p>ini depe paragraph</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
Toggle EffectsToggle digunakan untuk menampilkan hide dan show dalam satu button, istilah kerennya di fusion xD
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
<button>Tombol Toggle untuk menampilkan dan menyembunyikan</button>
<p>Paragraf 1.</p>
<p>Paragraf 2.</p>
jQuery Fading EffectAda 4 jenis fading effects :
• fadeIn() – efek fade masuk
• fadeOut() – efek fade keluar
• fadeToggle() – efek fade masuk dan keluar
• fadeTo() – efek fade dengan memberikan opacity pada objek
Syntax Fade EffectUntuk fadeIn(), fadeOut(), dan fadeToggle()
$(selector).fadeX(speed,callback);
X = fadeIn(), fadeOut(), dan fadeToggle()
Untuk fadeTo()
$(selector).fadeTo(speed,opacity,callback);
Contoh<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(1000);
$("#div4").fadeToggle(2000);
});
});
</script>
<button>Klik untuk mulai efek fade toggle</button><br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
<p id="div4" style="display:none;">Paragraph Fade.</p>
Contoh fadeTo()<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
});
});
</script>
<button>Klik untuk menampilkan FadeTo</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:yellow;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:blue;"></div><br>
jQuery AnimationDigunakan untuk membuat animasi kustom untuk halamanHTML, syntax yang digunakan :
$(selector).animate({params},speed,callback);
• Params adalah CSS properti yang akan di animasikan
• Speed adalah nilai kecepatan dalam “fast”, “slow” ataumiliseconds
• Callback adalah fungsi yang akan dieksekusi setelah animasiselesai
Contoh<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.7',
height: '-=50px',
width: '+=150px'
});
});
});
</script>
<button>Mulai Animasi</button>
<div style="background:green; height:100px; width:100px; position:absolute;"></div>
Other events handler• Toggle – untuk menampilkan atau menyembunyikan elemen HTML
• Queue Animation – untuk mengurutkan animasi yang akan dilakukandengan mendeklarasikan variable untuk masing-masing animasi.
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
});
</script>
<button>Start Animation</button>
<div style="background:green;height:100px;width:100px;position:absolute;"></div>
Contoh Queue Animation<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height: ‘500px', opacity: '0.4'}, "slow");
div.animate({width: ‘500px', opacity: '0.8'}, "slow");
div.animate({height: ‘150px', opacity: '0.4'}, "slow");
div.animate({width: '150px', opacity: '0.8'}, "slow");
});
});
</script>
<button>Start Animation</button>
<div style="background:green;height:100px;width:100px;position:absolute;"></div>
jQuery Slide EffectsDigunakan untuk menampilkan animasi slide, dengan arah keatas, kebawah ataupun keduanya
$(selector).slideX(speed,callback);
X adalah method = Down, Top, Toggle
• slideDown()
• slideUp()
• slideToggle()
Contoh<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #f0f0f0;
border: solid 1px grey;
}
#panel {
padding: 50px;
display: none;
}
</style>
<div id="flip">Klik untuk membuka
panel</div>
<div id="panel">Taruh paragraf atau isi
konten anda disini</div>
jQuery ChainingChaining digunakan untuk memanggil lebih dari satu command
dalam satu statement. Untuk menambahkan action command,
cukup menambahkan dot (.) kemudian action command-nya.
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
Contoh Chaining<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
<p id="p1">Contoh jQuery Chaining</p>
<button>Klik Disini</button>