jQuery
Muhammad Sohaib Akram
Background
Manipulating the web page's structure is essential for creating a highly
responsive UI
Two main approaches:
Manipulate page via plain JS
Manipulate page using JS + library (e.g., jQuery)
Background
DOM: html web page's structure
Web page is basically a tree structure
One node per HTML element
Each node can have attributes
jQuery
A fast, lightweight, and feature-rich JavaScript library that is based on
the principle "write less, do more“.
Simplifies HTML document traversing, event handling, animating, and Ajax
interactions for rapid web development.
With fairly good performance
Free open source JS library
DOM manipulation
Event handling
Animations
Cross Browser Support
AJAX Support
Downside: An extra dependency and need to learn a new library.
jQuery
jQuery functions are accessed via the $ object.
We select/query HTML elements and perform "actions" on them
$(selector).action()
$ sign defines/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
jQuery
It is good practice to wait for the document to be fully loaded and
ready before working with it.
All jQuery methods should be inside a document ready event.
It prevent any jQuery code from running before the document has finished
loading.
jQuery - Selectors
All selectors start with a dollar sign and parentheses: $()
Also known as factory function.
Element Selector
$("p") : selects all <p> elements on a page.
#id Selector
$("#test") : selects the element with id="test“.
.class Selector
$(".test") : selects the elements with class="test“.
jQuery – Manipulate Attributes
attr() : Allows to manipulate an element's attributes.
attr(name, value)
$("#myimg").attr("src", "/images/logo.jpg");
removeAttr(name)
$("table").removeAttr("border");
addClass(classes)
$("#myid").addClass("highlight");
Explore the other similar functions…
jQuery - Events
Actions that can be detected by your Web Application.
jQuery - Callback
JavaScript statements are executed line by line. However, with effects,
the next line of code can be run even if the effect is not finished yet. It
can be avoided using callback functions.
A callback function is executed after the current effect is finished.
$(selector).hide(speed, callback)
jQuery - Ajax
AJAX: Asynchronous Javascript And Xml
Process of exchanging data with a web server asynchronously through
JavaScript, without a full page refresh.
Synchronous (Full page refresh)
Click a link, wait for page to load.
Submit a form, wait for page to load.
Click a link, wait for page….
Asynchronous (Partial refresh)
Click a link, part of page quickly changes.
Fill out a form, page immediately responds while server gets data, etc.
More complicated, but much more usable
jQuery - Ajax
jQuery - Ajax
Ajax requests are triggered by the JavaScript code: code sends a
request to a URL, and when the request completes, a callback
function can be triggered to handle the response.
jQuery offers following methods to implement the Ajax that works
seamlessly across all the browsers.
load()
$.get()
$.post()
jQuery - Ajax
Ajax requests are triggered by the JavaScript code: code sends a
request to a URL, and when the request completes, a callback
function can be triggered to handle the response.
jQuery offers following methods to implement the Ajax that works
seamlessly across all the browsers.
load()
$.get()
$.post()
Ajax - Load
Loads data from the server and place the returned HTML into the
selected element.
$(selector).load(URL, data, complete)
URL: Required parameter, specifies the URL of server-side resource to
which the request is sent.
data: Optional parameter, specifies a set of query string (key/value pairs)
that is sent to the web server along with the request.
Complete: Optional parameter, a callback function that is executed when
the request completes
It is fired once for each selected element.
