jQuery Presentation.pptx

Pemrograman Web B

5113100113 Muhamad Luthfie La Roeha

5113100145 Daniel Bintar

5113100171 Nugroho Wicaksono

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 :

• click

• Dblclick

• mouseenter

• mouseleave

Keyboard :

• keypress

• Keydown

• keyup

Form Events :

• Submit

• Change

• Focus

• blur

Documents :

• load

• rezise

• scroll

• unload

• ready

jQuery Events - Mouse

• click ()

syntax : $(selector).click()

Example :

$('div').click(function()

{

alert("You clicked me.");

});


• mouseenter ()

syntax : $(selector).mouseenter()

Example :

$('div').mouseenter(function()

{

alert("You entered me");

});


• 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 :


$("#red").hide("slow", function(){

alert("Red Box is now hidden");

});

});

jQuery Effect - Chaining

• chaining

Example :


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


alert("Text: " + $("#panel").text());

alert("HTML: " + $("#panel").html());

});

jQuery HTML - Set Content and Attributes• Text ()

• Html ()

• Val ()


Example :


$("#flip").text("Created By : ");

});

jQuery HTML - Add Elements

• Append ()

• Prepend ()

• After ()

• Before ()


Example :


$("#flip").append(" Kelompok 4 ,");

});

jQuery HTML - Remove Elements

• Remove

• Empty

Syntax : $(selector).remove(); $(selector).empty();

Example :


$("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("background-color"));

});

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

yang berarti "bergerak melalui“ digunakan untuk memilih elemen HTML berdasarkan hubungan mereka dengan elemen yang lainnya.

jQuery Traversing

Intro

Elemen <div> adalah parent dari <ul> dan ancestor dari semua yang berada di dalamnya.

…. Kedua elemen <li> adalah siblings Elemen <b> adalah child dari <li> kanan dan descendant dari <ul> dan <div>

• Traversing Up• parent()• parents() / parents("ul“)• parentsUntil(“div”)

Macam-macam Traversing

• Traversing Down• children() / children(“p.1”)• find(“span”) / find(“*”)


• Traversing Sideaways• siblings()• next()• nextAll()• nextUntil(selector)• prev()• prevAll()• prevUntil(selector)


• Traversing Filtering• first()• last()• eq() *eq(0) == first()• filter(".intro")• not(".intro")

Penggunaan filter dan not terlihat saat chaining.


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.

jQuery 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); }

);

Macam-macam AJAX

Live Coding !

jQuery Presentation.pptx

Documents

Transcript of jQuery Presentation.pptx