1. jQuery merupakan library JavaScript yang digunakan untuk manipulasi DOM, animasi, dan AJAX. 2. Sintaks dasar jQuery menggunakan tanda dollar dan selector untuk memilih elemen HTML lalu menjalankan aksi tertentu. 3. jQuery memiliki berbagai metode untuk menangani event seperti klik, geser, dan isi formulir serta efek animasi seperti fade, slide, dan animate.

2. 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

3. Lanjut
jQuery berisi :
• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities

4. jQuery Syntax
Penggunaan 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)

5. 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>

6. 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

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

8. 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>

9. jQuery Events
Events 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

10. DOM Events
Mouse Events Keyboard Events Form Events
Document/Window
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

11. Contoh Mouse Events
<script>
$(document).ready(function(){
$("#pgrf1").mouseenter(function(){
alert(“anda memasuki bagian paragraf");
});
});
</script>

12. 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">

13. on() Method
Method on() digunakan untuk memasukkan lebih dari satu event handler ke
dalam elemen html yang dipilih.
<script>
$(document).ready(function(){
$("p").on("click", function(){
$(this).hide();
});
});
</script>

14. 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>

15. jQuery Hide & Show Effects
Efek 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>

16. Toggle Effects
Toggle 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>

17. jQuery Fading Effect
Ada 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

18. Syntax Fade Effect
Untuk fadeIn(), fadeOut(), dan fadeToggle()
$(selector).fadeX(speed,callback);
X = fadeIn(), fadeOut(), dan fadeToggle()
Untuk fadeTo()
$(selector).fadeTo(speed,opacity,callback);

19. 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>

20. 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>

21. jQuery Animation
Digunakan untuk membuat animasi kustom untuk halaman
HTML, syntax yang digunakan :
$(selector).animate({params},speed,callback);
• Params adalah CSS properti yang akan di animasikan
• Speed adalah nilai kecepatan dalam “fast”, “slow” atau
miliseconds
• Callback adalah fungsi yang akan dieksekusi setelah animasi
selesai

22. 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>

23. Other events handler
• Toggle – untuk menampilkan atau menyembunyikan elemen HTML
• Queue Animation – untuk mengurutkan animasi yang akan dilakukan
dengan 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>

24. 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>

25. jQuery Slide Effects
Digunakan untuk menampilkan animasi slide, dengan arah keatas,
kebawah ataupun keduanya
$(selector).slideX(speed,callback);
X adalah method = Down, Top, Toggle
• slideDown()
• slideUp()
• slideToggle()

26. 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>

27. jQuery Chaining
Chaining 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);

28. 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>