Вы находитесь на странице: 1из 43

Pemrograman Web B

5113100113
Roeha

Muhamad

Luthfie

5113100145

Daniel Bintar

5113100171

Nugroho Wicaksono

La

What Is jQuery?
jQuery is a fast, small, and feature-rich JavaScript
library. It makes things like HTML document traversal
and manipulation, event handling, animation, and
Ajax much simpler with an easy-to-use API that works
across a multitude of browsers. With a combination of
versatility and extensibility, jQuery has changed the way
that millions of people write JavaScript.
- jQuery.com

What You Should Already Know

What It Can Do
HTML event methods
Effects and animations
HTML/DOM manipulation
CSS manipulation
AJAX
Utilities
*Tip:In addition, jQuery has plugins for almost any task out
there.

How To Use It
Download the jQuery library from jQuery.com
Include jQuery from a CDN, like Google

Code:
<head>
<script src="jquery.min.js"></script>
</head>

OR
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>

Syntax
Sintaks jQuery dibuat khusus untuk selecting elemen
HTML dan melakukan action pada elemen HTML.
Syntax:
$(selector).action()

$ untuk mendefinisikan/mengakses jQuery


(selector) untuk mencari/memilih elemen HTML
Suatu action() jQuery yang akan dilakukan pada elemen
yang di pilih.

Why Always Document Ready


$(document).ready(function(){
// jQuery methods go here...
});

Terdapat kemungkinan beberapa action gagal untuk


dijalankan
Untuk mencegah suatu kode jQuery berjalan sebelum
halaman berhasil di load/ready.

Selectors
Salah satu bagian paling penting dalam mempelajari
jQuery.
jQuery Selectors = CSS selectors

Note :
$(this) berarti memilih elemen HTML itu sendiri.

Events and Effects

jQuery Events
Mouse :

Keyboard :

Form Events :

Documents :

click

keypress

Submit

load

Dblclick

Keydown

Change

rezise

mouseenter

keyup

Focus

scroll

blur

unload

mouseleave

ready

jQuery Events - Mouse


click ()
syntax : $(selector).click()
Example :
$('div').click(function()
{
alert("You clicked me.");
});

jQuery Events - Mouse


mouseenter ()
syntax : $(selector).mouseenter()
Example :
$('div').mouseenter(function()
{
alert("You entered me");
});

jQuery Events - Mouse


mouseleave ()
syntax : $(selector).mouseleave()
Example :
$('div').mouseleave(function()
{
alert("Bye! You now leave me.");
});

jQuery Events - Keyboard


keypress ()
syntax : $(selector).keypress()
Example :
i=0;
$("input").keypress(function(){
$("span").text(i += 1);
});

jQuery Events - Form


submit ()
syntax : $(selector).submit()
Example :
$("form").submit(function(){
alert("Submitted");
});

jQuery Effect
Hide/show
Fade
Slide
Animate
Stop
Callback
Chaining

jQuery Effect - Hide and Show


Hide () /show ()
syntax : $(selecter).hide(); $(selecter).show();
Example :
$("div").click(function()
{
$(this).hide("fast");
});
$('#action').click(function()
{
$("#red,#yellow,#blue,#green").show(2000);
});

jQuery Effect - Sliding


slideDown()
slideUp()
slideToggle()
syntax : $(selecter).slideDown();
Example :
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});

jQuery Effect - Animation


animate ()
syntax : $(selecter).animate();
Example :
$("div").click(function()
{
$(this).animate(
{
height: '130px',
width: '130px',
opacity : 0.5
});
});

jQuery Effect Stop Animations


stop ()
syntax : $(selector).stop();
Example :
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#action").click(function(){
$("#panel").stop();
});

jQuery Effect : Callback Functions


callback
syntax : $(selector).action(speed,callback);
Example :
$("#action").click(function(){
$("#red").hide("slow", function(){
alert("Red Box is now hidden");
});
});

jQuery Effect - Chaining


chaining
Example :
$("#action").click(function(){
$("#panel").slideDown("slow").slideUp("slow");
});

jQuery HTML
Get
Set
Add
Remove
Css classes
Css
dimensions

jQuery HTML Get Content and


Attributes
Text ()
Html ()
Val ()
Syntax : $(selector).action();
Example :
$("#action").click(function(){
alert("Text: " + $("#panel").text());
alert("HTML: " + $("#panel").html());
});

jQuery HTML - Set Content and


Attributes
Text ()
Html ()
Val ()
Syntax : $(selector).action();
Example :
$("#action").click(function(){
$("#flip").text("Created By : ");
});

jQuery HTML - Add Elements


Append ()
Prepend ()
After ()
Before ()
Syntax : $(selector).action();
Example :
$("#action").click(function(){
$("#flip").append(" Kelompok 4 ,");
});

jQuery HTML - Remove Elements


Remove
Empty
Syntax : $(selector).remove(); $(selector).empty();
Example :
$("#action").click(function(){
$("div").remove();
});

jQuery HTML - Get and Set CSS


Classes
addClass()
removeClass()
toggleClass()
css ()
Example :
$("div").click(function(){
$(this).addClass("blue");
});

jQuery HTML - Get and Set CSS


css()
syntax : $(selector).css();
Example :
$("div").click(function(){
alert("Background color = " + $(this).css("backgroundcolor"));
});

jQuery HTML - Dimensions


Width()
Height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
Example :
$("div").click(function(){var txt = "";
txt += "Width: " + $(this).width();
txt += ", InnerWidth: " + $(this).innerWidth();
txt += ", Height: " + $(this).height();
txt += ", InnerHeight: " + $(this).innerHeight();
alert(txt);
});

Traversing dan AJAX

jQuery Traversing

yang berarti "bergerak melalui digunakan


untuk memilih elemen HTML berdasarkan
hubungan mereka dengan elemen yang lainnya.

Intro

Elemen <div> adalah parent dari <ul> dan ancestordari semua yang berada di
dalamnya.
.
Kedua elemen <li> adalah siblings
Elemen <b> adalah childdari <li> kanan dan descendantdari <ul> dan <div>

Macam-macam Traversing
Traversing Up
parent()
parents() / parents("ul)
parentsUntil(div)

Macam-macam Traversing
Traversing Down
children() / children(p.1)
find(span) / find(*)

Macam-macam Traversing
Traversing Sideaways
siblings()
next()
nextAll()
nextUntil(selector)
prev()
prevAll()
prevUntil(selector)

Macam-macam Traversing
Traversing Filtering
first()
last()
eq()
*eq(0) == first()
filter(".intro")
not(".intro")
Penggunaan filter dan not terlihat saat chaining.

jQuery AJAX
AJAX = Asynchronous JavaScript and XML.
AJAX menload data di background dan menampilkannya di
halaman web tanpa mereload keseluruhan halaman tersebut.
Contoh : Gmail, Google Maps, Youtube dan Facebook tabs.

Macam-macam AJAX
load()
Syntax:
$(selector).load(URL,data,callback);
Macam-macam callback :
responseTxt - contains the resulting content if the call succeeds
statusTxt - contains the status of the call
xhr - contains the XMLHttpRequest object
Contoh :
$("#div1").load("demo_test.txt #p1");
$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr));

Macam-macam AJAX
get()
Syntax :
$(selector).get(URL,callback);
Contoh :
$.get("demo_test.php", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});

Macam-macam AJAX
post()
Syntax:
$(selector).post(URL,data,callback);
Contoh :
$.post("demo_test_post.php",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data, status){
alert("Data: " + data + "\nStatus: " + status);
}
);

Live Coding !