Anda di halaman 1dari 7

1/1/2012

STMIK AKAKOM

JQUERY
Oleh | M. Guntara

JQUERY
Referensi : www.w3schools.com jQuery www.jquery.com

OPO KUWI?
Kumpulan fungsi JavaScript Pustaka JS dengan slogan write less , do more

KANGGO OPO ?
Mempermudah, menyederhanakan, dan mempercepat pembuatan script untuk manipulasi halaman web

MATERI YG HARUS SUD AH DI KUASASI


HTML CSS JavaScript

ISO OPO
Buat efek (sembunyi/nampak, gulung, lan liyo liyane) Manipulasi elemen HTML (jQuery HTML) Manipulasi CSS (jQuery CSS) AJAX (jQuery AJAX) Utilitas Lan liyo liyane

SINTAKSIS INISIASI
$(ducument).ready(function() {..Event}

EVENT
$(elemen).event(funtion(){Method/script.})

METHOD
$(selector).action() $ : tanda jQuery

Selector : elemen HTML yang dibutuhkan Action : aksi atau tindakan yang dilakukan

Pada penerapannya , Method merupapan salah satu isi dari script pada Event

LANGKAH KERJA
1. 2. 3. Unduh berkas jQuery.js di www.jQuery.com Tempatkan di folder dimana berkas2 dari script berada Panggil berkas jQuery.js sbb

<html> <head> <script type=text/javascript src=jquery.js></script> <script type=text/javascript> $(ducument).ready(function() { $(elemen).event(funtion() { $(selector).action() atau script lainnya }) }); </script> </head> <body> script </body> </html> 4. Tulis script yang memanfaatkan jQuery seduai keperluan

JQUERY SELECTOR
Selector * #ID .CLASS ELEMENT .CLASS.CLASS :first :last :even :odd $("*") $("#lastname") $(".intro") $("p") $(".intro.demo") $("p:first") $("p:last") $("tr:even") $("tr:odd") Example All elements The element with id=lastname All elements with class="intro" All p elements All elements with the classes "intro" and "demo" The first p element The last p element All even tr elements All odd tr elements Selects

:eq(INDEX) :gt(NO) :lt(NO) :not(SELECTOR) :header :animated :contains(TEXT) :empty :hidden :visible S1,S2,S3 [ATTRIBUTE]

$("ul li:eq(3)") $("ul li:gt(3)") $("ul li:lt(3)") $("input:not(:empty)") $(":header") $(":animated")

The fourth element in a list (index starts at 0) List elements with an index greater than 3 List elements with an index less than 3 All input elements that are not empty All header elements h1, h2 ... All animated elements

$(":contains('W3Schools')") All elements which contains the text $(":empty") $("p:hidden") $("table:visible") $("th,td,.intro") $("[href]") All elements with no child (elements) nodes All hidden p elements All visible tables All elements with matching selectors All elements with a href attribute All elements with a href attribute value equal to "default.htm" All elements with a href attribute value not equal to "default.htm" All elements with a href attribute value ending with ".jpg" All elements with a href attribute value starting with "jquery_" All input elements All input elements with type="text" All input elements with type="password" All input elements with type="radio" All input elements with type="checkbox" All input elements with type="submit" All input elements with type="reset" All input elements with type="button" All input elements with type="image" All input elements with type="file"

[ATTRIBUTE=VALUE] $("[href='default.htm']") [ATTRIBUTE!=VALUE] $("[href!='default.htm']") [ATTRIBUTE$=VALUE] $("[href$='.jpg']") [attribute^=value] :input :text :password :radio :checkbox :submit :reset :button :image :file $("[href^='jquery_']") $(":input") $(":text") $(":password") $(":radio") $(":checkbox") $(":submit") $(":reset") $(":button") $(":image") $(":file")

:enabled :disabled :selected :checked

$(":enabled") $(":disabled") $(":selected") $(":checked")

All enabled input elements All disabled input elements All selected input elements All checked input elements

JQUERY EVENT
Event Method $(document).ready(function) $(selector).click(function) $(selector).dblclick(function) $(selector).focus(function) Description Binds a function to the ready event of a document (when the document is finished loading) Triggers, or binds a function to the click event of selected elements Triggers, or binds a function to the double click event of selected elements Triggers, or binds a function to the focus event of selected elements

$(selector).mouseover(function) Triggers, or binds a function to the mouseover event of selected elements

JQUERY HTML HTML METHOD


Method addClass() after() append() appendTo() attr() before() clone() detach() empty() hasClass() Description Adds one or more classes (for CSS) to selected elements Inserts content after selected elements Inserts content at the end of (but still inside) selected elements Inserts content at the end of (but still inside) selected elements Sets or returns an attribute and value of selected elements Inserts content before selected elements Makes a copy of selected elements Removes (but keeps a copy of) selected elements Removes all child elements and content from selected elements Checks if any of the selected elements have a specified class (for CSS)

html() insertAfter() insertBefore() prepend() prependTo() remove() removeAttr() removeClass() replaceAll() replaceWith() text() toggleClass() unwrap() val() wrap() wrapAll() wrapInner()

Sets or returns the content of selected elements Inserts HTML markup or elements after selected elements Inserts HTML markup or elements before selected elements Inserts content at the beginning of (but still inside) selected elements Inserts content at the beginning of (but still inside) selected elements Removes selected elements Removes an attribute from selected elements Removes one or more classes (for CSS) from selected elements Replaces selected elements with new content Replaces selected elements with new content Sets or returns the text content of selected elements Toggles between adding/removing one or more classes (for CSS) from selected elements Removes the parent element of the selected elements Sets or returns the value attribute of the selected elements (form elements) Wraps specified HTML element(s) around each selected element Wraps specified HTML element(s) around all selected elements Wraps specified HTML element(s) around the content of each selected element

JQUERY AJAX JUERY AJAX METHODS FROM THIS PAGE:


Request $.ajax(options) Description Load remote data into an XMLHttpRequest object $(selector).load(url,data,callback) Load remote data into selected elements