MODULE-1 10 HOURS

Introduction to jQuery
By
Shivakumara Tuppada
Assistant Professor
Dept. of MCA, BMSIT&M
[email protected]
 Pre-requisites
• Xhtml – Better understanding of tags
• CSS – idea of using css, especially selectors
• JavaScript – Usage of scripting at client-side
• Xml and Xslt – usage in the web development
• Why you should use jQuery – Rich Internet
Applications, built-in library
• What Unobtrusive JavaScript means
• The fundamental elements and concepts of
jQuery
• Using jQuery in conjunction with other
JavaScript libraries
 Introducing jQuery
• Why you should use jQuery
– jQuery is built on top of JavaScript, a rich and
expressive language in its own right.
– The jQuery library makes it easy to manipulate a
page of HTML after it's displayed by the browser.
– It also provides tools that help you listen for a user
to interact with your page, tools that help you
create animations in your page, and tools that let
you communicate with a server without reloading
the page.
 Why jQuery Example

jQuery Code: $("table tr:nth-child(even)").addClass("striped");

Homework-1: Try-out this example using CSS and JavaScript

 Introducing jQuery
• Unobtrusive JavaScript
• (Usually will use, till today)
<button
type="button"
onclick="document.getElementById('xyz').style.color='red';">
Click Me
</button>
• For all the same reasons that it’s desirable to segregate
style from structure within an HTML document, it’s as
beneficial (if not more so) to separate the behavior from
the structure.
• This movement is known as Unobtrusive JavaScript, and the
inventors of jQuery have focused that library on helping
page authors easily achieve this separation in their pages.
• Let’s see example below
 Introducing jQuery
<button type="button" id="testButton">Click Me</button>
<script type="text/javascript">
window.onload = function() {
document.getElementById('testButton').onclick = makeItRed;
};
function makeItRed() {
document.getElementById('xyz').style.color = 'red';
}
</script>
• 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.
• Reference: http://jqfundamentals.com/chapter/jquery-
basics
 The jQuery wrapper
• When CSS was introduced to web technologies in order to
separate design from content, a way was needed to refer to
groups of page elements from external style sheets.
• The method developed was through the use of SELECTORS,
which concisely represent elements based upon their
attributes or position within the HTML document.
For example, the selector
pa
• refers to the group of all links (<a> elements) that are
nested inside a <p> element.
• jQuery makes use of the same selectors, supporting not
only the common selectors currently used in CSS, but also
the more powerful ones not yet fully implemented by most
browsers.
To collect a group of elements, we use
the simple syntax
• $(selector)
Or
• jQuery(selector)
• For example, to retrieve the group of links
nested inside a <p> element, we use the
following
$("p a")
• The $() function (an alias for the jQuery()
function) returns a special Java-Script object
containing an array of the DOM elements that
match the selector.
• This object possesses a large number of useful
predefined methods that can act on the group of
elements.
• This type of construct is termed a wrapper
because it wraps the matching element(s) with
extended functionality.
or to refer to this
set of matched elements that can be operated on
with the methods defined by jQuery.
 jQuery Wrapper or wrapped set
examples
Ex1:-
• $("div.notLongForThisWorld").fadeOut();
Note: jQuery chains can continue indefinitely.
Ex2:-
$("div.notLongForThisWorld").fadeOut().addClass("removed");
• The following two statements produce identical results:
$("#someElement").html("I have added some text to an
element");
or
$("#someElement")[0].innerHTML = "I have added some text
to an element";
• If we want to achieve the same results with a
selector that resulted in multiple matched
elements, the following two fragments would
produce identical results:
$("div.fillMeIn").html("I have added some text to a
group of nodes");
Or
var elements = $("div.fillMeIn");
for(i=0;i<elements.length;i++)
elements[i].innerHTML =
"I have added some text to a group of nodes";
• More advanced selectors—defined as part of the CSS
Specification—and even some custom selectors.
$("p:even");
• This selector selects all even <p> elements.
$("tr:nth-child(1)");
• This selector selects the first row of each table.
$("body > div");
• This selector selects direct <div> children of <body>.
$("a[href$=pdf]");
• This selector selects links to PDF files.
$("body > div:has(a)")
• This selector selects direct <div> children of <body>-
containing links.
 Utility functions
• One of its additional duties is to serve as the
namespace prefix for a handful of general
purpose utility functions.
• for example, the utility function for trimming
strings
$.trim(someString); or jQuery.trim(someString);
 The document ready handler
• We need a way to wait until the DOM
elements of the page are fully loaded before
those operations execute.
• In the zebra-striping example, the entire table
must load before striping can be applied.
window.onload = function() {
$("table tr:nth-child(even)").addClass("even");
};
 jQuery fundamentals
• jQuery focuses on retrieving elements from our HTML
pages and performing operations upon them.
• jQuery places a high priority on ensuring our code will
work in a consistent manner across all major browsers;
many of the more difficult JavaScript problems, such as
waiting until the page is loaded before performing
page operations.

• jQuery  $
• Text Books:
• Bear bibeault, Yehuda Katz: jQuery in Action. 3rd Edn,
DreamTech India, 2008
• RobertW.Sebesta: Programming the World Wide Web, 4th
Edn, Pearson, 2012
• Francis Shanahan: Mashups, WileyIndia, 2012
• Mike Dewar: “Getting Started with D3”: O’Reilly Media,
2012
• Reference Books:
• M. Deitel, P.J.Deitel, A. B. Goldberg: Internet & Internet &
World Wide Web How to program, 3rd Edition, Pearson
Education / PHI, 2004
 MINI Project - Instructions
• DEVELOP A PRODUCT AND IT SHOULD LEADS
TO ONE OF THE FOLLOWING
– PATENTABLE OR
– PUBLICATION (CONFERENCE / JOURNAL}
– SELL IN MARKET
– CREATE AN INTERNSHIP / JOB OPPORTUNITY
 References
• [1]
https://www.slideshare.net/wildan.m/jquery-
bootcamp-creating-the-wrapped-element-set