Jquery Presentation
Jquery Presentation
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 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()
Selectors
Salah satu bagian paling penting dalam mempelajari
jQuery.
jQuery Selectors = CSS selectors
Note :
$(this) berarti memilih elemen HTML itu sendiri.
jQuery Events
Mouse :
Keyboard :
Form Events :
Documents :
click
keypress
Submit
load
Dblclick
Keydown
Change
rezise
mouseenter
keyup
Focus
scroll
blur
unload
mouseleave
ready
jQuery Effect
Hide/show
Fade
Slide
Animate
Stop
Callback
Chaining
jQuery HTML
Get
Set
Add
Remove
Css classes
Css
dimensions
jQuery Traversing
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 !