Unit-1: jQuery
What is jQuery?
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
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.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM
manipulation.
The jQuery library features
The jQuery library contains the following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities
Why jQuery?
The following are the main reasons why jQuery is used in so many web applications:
● It provides an intuitive and easy-to-learn API for performing the most common tasks in
website development. For instance, the selection API you will use in this lesson is based on
CSS selectors.
● It provides genuine cross-browser support and hides some of the quirks that exist in the
DOM API implementations of certain browsers (most notably, older versions of IE).
● It is very easy to write plugins to enhance the capabilities of jQuery, and there are
extensive libraries of freely available plugins on the Internet.
● The jQuery website contains extremely good documentation, and there is a wide variety of
help available on the Internet if you encounter problems.
jQuery syntax
The jQuery syntax is made for selecting HTML elements and performing some action on the
element(s).
Basic syntax is: $(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)
Examples:
$(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".
The Document Ready Event
All jQuery methods in our examples, will be inside a document ready event:
$(document).ready(function()
{
// jQuery methods go here…
});
This is to prevent any jQuery code from running before the document is finished loading (is
ready). It is good practice to wait for the document to be fully loaded and ready before working
with it. This also allows you to have your JavaScript code before the body of your document, in
the head section.
Unobtrusive JavaScript
Unobtrusive JavaScript is the way of writing JavaScript language in which we properly separate
Document Content and Script Content thus allowing us to make a clear distinction between
them. This approach is useful in so many ways as it makes our code less error prone, easy to
update and to debug.
Loading jQuery
Before using jQuery, you need to import it into your web pages. There are two ways you can do
this:
● You can download the relevant version of jQuery. Place the downloaded file in the same
directory as the html pages.
<head>
<script src="[Link]"></script>
</head>
● If you don't want to download and host jQuery yourself, you can include it from a CDN
(Content Delivery Network).
<head>
<script
src="[Link]
[Link]"></script>
</head>
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 name, id, classes,
types, attributes, values of attributes and much more. It's based on the existing CSS Selectors,
and in addition, it has some custom selectors. All selectors in jQuery start with the dollar sign
and parentheses: $().
1) The element Selector
The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
$("p")
Example:
Output:
After you click on the button
2) The #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.
To find an element with a specific id, write a hash character, followed by the id of the HTML
element:
$("#test")
Example:
Output
After you click on the button
3) The .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:
$(".test")
Example
Output
After you click on the button
4) Universal selector
Selects all elements
Example
Output
After you click on the button, all the html elements are hidden since we have used “*” selector.
1) $(this): Selects the current HTML element
Output:
2) $("p:first"): Selects the first <p> element
Output:
3) $("ul li:first"): Selects the first <li> element of the first <ul>
Output
4) $("ul li:first-child"): Selects the first <li> element of every <ul>
Output
5) $("[href]"): Selects all elements with an href attribute
Output
6) $("a[target='_blank']"): Selects all <a> elements with a target attribute value equal to
"_blank"
Output:
7) $("a[target!='_blank']"): Selects all <a> elements with a target attribute value NOT equal
to "_blank"
Output:
8) $(":button"): Selects all <button> elements and <input> elements of type="button"
Output:
9) $("tr:even"): Selects all even <tr> elements
10) $("tr:odd"): Selects all odd <tr> elements
<html>
<head>
<script src="[Link]
<script>
$(document).ready(function(){
$("tr:even").css("background-color", "yellow");
$("tr:odd").css("background-color", "pink");
});
</script>
</head>
<body>
<h1>Capital city</h1>
<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>India</td>
<td>New Delhi</td>
</tr>
<tr>
<td>China</td>
<td>Beijing</td>
</tr>
<tr>
<td>Bangladesh</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Italy</td>
<td>Rome</td>
</tr>
<tr>
<td>Japan</td>
<td>Tokyo</td>
</tr>
</table>
</body>
</html>
Output:
The basic CSS selectors supported by jQuery
Positional selectors
We’ll need to select elements by their position on the page or in relation to other elements. We
might want to select the first link on the page, or every other paragraph, or the last list item of
each list. jQuery supports mechanisms for achieving these specific selections.
For example, consider
a:first
This format of selector matches the first <a> element on the page.
p:odd
This selector matches every odd paragraph element. We can also specify that evenly ordered
elements be selected with
p:even
Another form
li:last-child
chooses the last child of parent elements. In this example, the last <li> child of each <ul>
element is matched.
The table below for a list of these positional selectors:
:last
Output:
:last-child
Output:
:only-child
Output:
nth-child
Output:
Advanced positional selectors
eq()
The :eq() selector selects an element with a specific index number.
The index numbers start at 0, so the first element will have the index number 0 (not 1).
This is mostly used together with another selector to select a specifically indexed element in a
group
Example:
Output:
gt()
The :gt() selector selects elements with an index number higher than a specified number.
The index numbers start at 0.
This is mostly used together with another selector to select the last elements in a group.
Example:
Output:
Lt()
The :lt() selector selects elements with an index number less than a specified number. The index
numbers start at 0.
This is mostly used together with another selector to select the first elements in a group.
Example:
Output:
How do you create DOM elements or HTML elements in jQuery?
We can create DOM elements on the fly by passing the $() function a string that contains the
HTML markup for those elements. For example, we can create a new paragraph element as
follows:
Example:
This example establishes an existing HTML paragraph element named followMe (2) in the
document body. In the script element within the section, we establish a ready handler (1) that
uses the following statement to insert a newly created paragraph into the DOM tree after the
existing element:
The output is as shown in figure:
jQuery custom filter selectors
The CSS selectors give us a great deal of power and flexibility to match the desired DOM
elements, but sometimes we’ll want to select elements based on a characteristic that the CSS
specification did not anticipate. For example, we might want to select all checkboxes that have
been checked by the user. Because trying to match by attribute will only check the initial state
of the control as specified in the HTML markup, jQuery offers a custom selector, :checked, that
filters the set of matched elements to those that are in the checked state. For example, whereas
the input selector selects all <input> elements, the input:checked narrows the search to only
<input> elements that are checked. The custom :checked selector works like a CSS attribute
selector.
Here are list of custom filter selectors.
Where and how to use the :not filter? Explain with an example.
If we want to negate a filter, let’s say to match any input element that’s not a check box, we use
the :not filter, which is supported for CSS filters and works with custom jQuery selector filters
too.
Example: In this example, the paragraphs which do not belong to the class :intro are hidden.
Output:
How do you determine the size of the wrapped set? Explain with an example.
The set of jQuery wrapped elements acts a lot like an array. This includes a length property, like
JavaScript arrays, that contains the number of wrapped elements. jQuery defines the size()
method, which returns the number of elements.
The size() method was deprecated in version 1.8 and removed in jQuery version 3.0. We use the
length property instead.
Example:
Output:
How do you obtain elements from the wrapped set? Explain with an example.
jQuery allows us to treat the wrapped set as a JavaScript array; we can use simple array indexing
to obtain any element in the wrapped list by position. For example, to obtain the first element
in the set of all <img> elements with an alt attribute on the page, we can write
Example:
Output:
The syntax of the index() command is as follows:
Example:
Output:
When you click on Milk
How do you add elements to the wrapped set?
Often, we may find ourselves in a situation where we want to add more elements to an existing
wrapped set. This capability is most useful when we want to add more elements after applying
some command to the original set. JQuery chaining makes it possible to perform an enormous
amount of work in a single statement.
Example:
Output:
filter( )
The filter() method returns elements that match a certain criteria. This method lets you specify
a criteria. Elements that do not match the criteria are removed from the selection, and those
that match will be returned. This method is often used to narrow down the search for an
element in a group of selected elements.
Example:
Output:
How do you obtain subsets of the wrapped set? Illustrate with an example.
Sometimes we may wish to obtain a subset of the wrapped set, based on the position of
elements within the set. jQuery provides a method to do that named slice(). This command
creates and returns a new set from any contiguous portion, or a slice, of an original wrapped
set. The syntax for this command follows:
Example:
Output:
Methods to obtain new wrapped set based on relationships
find( )
The find() method lets us search through an existing wrapped set and returns a new set that
contains all elements that match a passed selector expression.
Example:
Output:
contains( )
In addition to finding elements in a wrapped set that match a selector, jQuery also provides a
method to find elements that contain a specified string. The contains() method will return a
new wrapped set that consists of all elements that contain the passed string anywhere within its
body content.
Example:
Output:
is( )
This method tests a wrapped set to see if it contains at least one element that matches a given
selector expression. The is() method returns true if at least one element matches the selector,
and false if not.
Example:
Output: