Introduction to jQuery

Perancangan dan Pemrograman Web2014

Sumber: www.w3schools.com, www. jquery.com

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 is a lightweight, "write less, do more", JavaScript library.

● jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

Installing jQuery

● Download the library from jquery.com● Insert a reference in the HTML page

such below:

Installing jQuery (via jQuery, Microsoft,

and Google)● Beside downloading the library, JQuery

can be included from CDN (Conten Delivery Network).

● JQuery, Microsoft and Google host JQuery javascript.

Installing jQuery (via jQuery, Microsoft,

and Google)Google CDN

Microsoft CDN

Installing jQuery (via jQuery, Microsoft,

and Google)JQuery CDN

jQuery Syntax

● Basic syntax : $(selector).action()– A $ sign to define/access jQuery

– A (selector) to "query (or find)" HTML elements

– A jQuery action() to be performed on the element(s)

jQuery Syntax

● All jQuery methods are written inside a document ready event.

● This is to prevent any jQuery code from running before the document is finished loading (is ready).

jQuery Syntax

Example

jQuery Example

jQuery Selectors

● jQuery selectors allow you to select and manipulate HTML element(s).

● jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more.

jQuery Selectors

jQuery Selectors

jQuery #id Selector

● The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

● An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

jQuery #id Selector

jQuery #class Selector

● The jQuery class selector finds elements with a specific class.

● To find elements with a specific class, write a period character, followed by the name of the class

jQuery #class Selector

jQuery Events

● All the different visitor's actions that a web page can respond

● The precise moment when something happens

jQuery Events

jQuery Effects

● Hide/Show (Demo)● Fade● Slide● Animate (Demo)● Stop● Callback● Chaining

jQuery HTML

● One very important part of jQuery is the possibility to manipulate the DOM.

● jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes.

jQuery HTML

● jQuery Get● jQuery Set● jQuery Add● jQuery Remove● jQuery CSS Clases● jQuery css()● jQuery Dimensions

jQuery Get and Set

● Three simple, but useful, jQuery methods for DOM manipulation are:

– text() : Sets or returns the text content of selected elements

– html() : Sets or returns the content of selected elements (including HTML markup)

– Val() : Sets or returns the value of form fields

jQuery Add

● jQuery has 4 methods to add new content:

– append() - Inserts content at the end of the selected elements

– prepend() - Inserts content at the beginning of the selected elements

– after() - Inserts content after the selected elements

– before() - Inserts content before the selected elements

jQuery Remove

● jQuery has two methods to remove elements and contents:

– remove() - Removes the selected element (and its child elements)

– empty() - Removes the child elements from the selected element

jQuery Traversing

● jQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements

jQuery Traversing

● jQuery Ancestors● jQuery Descendants● jQuery Siblings● jQuery Filtering

jQuery UI

● jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

jQuery UI

● Interactions● Widgets● Effects● Utilities

How to Use jQuery UI

● You'll need to include three files on your HTML page.

jQuery UI Getting Started

● Download the latest jQuery UI library from : http://jqueryui.com/download/

● Using library from jQuery CND (code.jquery.com)

jQuery UI Implementation

Example (Demo)