Scribd
Upload
406 views

Jquery Presentation

This document provides an overview of jQuery including what it is, what it can do, how to use it, syntax, selectors, events, effects, HTML manipulation, and AJAX. jQuery is a JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and AJAX easier. It works across browsers using CSS selector syntax. Key features covered include selecting elements, running actions on events like clicks, common effects like hide/show, and loading data asynchronously with AJAX.

Uploaded by

Hanif Sudira
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
406 views

Jquery Presentation

This document provides an overview of jQuery including what it is, what it can do, how to use it, syntax, selectors, events, effects, HTML manipulation, and AJAX. jQuery is a JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and AJAX easier. It works across browsers using CSS selector syntax. Key features covered include selecting elements, running actions on events like clicks, common effects like hide/show, and loading data asynchronously with AJAX.

Uploaded by

Hanif Sudira
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 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 !

You might also like