Pemrograman Web 6 - jQuery

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>



$("#tes").hide();

});

});

</script>

<p>Paragraf ga bisa ngilang</p>

<p id="tes">ini yang bisa ngilang kalo di klik</p>

Contoh Class Selector<script>



$(“.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>


$("#pgrf1").mouseenter(function(){

alert(“anda memasuki bagian paragraf");

});

});

</script>

Contoh Form Events<script>


$("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>


$("p").on("click", function(){

$(this).hide();

});

});

</script>

Attach Multiple Event Handlers<script>


$("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>


$("#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>


$("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>



$("#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>



$("#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>



$("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>



$("div").animate({

height: 'toggle'

});

});

});

</script>

<button>Start Animation</button>

<div style="background:green;height:100px;width:100px;position:absolute;"></div>

Contoh Queue Animation<script>



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>


$("#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>



$("#p1").css("color", "red")

.slideUp(2000)

.slideDown(2000);

});

});

</script>

<p id="p1">Contoh jQuery Chaining</p>

<button>Klik Disini</button>

Pemrograman Web 6 - jQuery

Software

Transcript of Pemrograman Web 6 - jQuery