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 !
