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.