JQUERY

JQuery
jQuery is a lightweight, "write less, do more", JavaScript library.
• jQuery is free, open-source software using the permissive MIT License. The MIT
License is a permissive free software license originating at the Massachusetts Institute
of Technology (MIT) in the late 1980s.
• jQuery's syntax is designed to make it easier to navigate a document, select DOM
elements, create animations, handle events, and develop Ajax applications.
• This enables developers to create abstractions for low-level interaction and animation,
advanced effects and high-level, theme-able widgets.
• jQuery is a fast, small, cross-platform and feature-rich JavaScript library. It is designed to
simplify the client-side scripting of HTML.
The main purpose of jQuery is to provide an easy way to use JavaScript on your
website to make it more interactive and attractive. It is also used to add animation.
• JQuery is also very useful to simplify a lot of the complicated things from JavaScript,
like AJAX calls and DOM manipulation.
 Features supported by jQuery:

1. Lightweight: The jQuery is very lightweight library - about 19KB in size

2. DOM Manipulation: The jQuery made it easy to select DOM elements, negotiate them and
modifying their content by using cross-browser open source selector engine called Sizzle.
3. Event Handling: The jQuery offers an elegant way to capture a wide variety of events, such as a user
clicking on a link, without the need to clutter the HTML code itself with event handlers.
4. Latest Technology: The jQuery supports CSS3 selectors and basic XPath syntax.
5. AJAX Support: The jQuery helps us, a lot to develop a responsive and feature rich site using AJAX
technology.
6. Animations: The jQuery comes with plenty of built-in animation effects which we can use in the
websites.
7. Cross Browser Support: The jQuery has cross-browser support and works well in IE 6.0+, FF 2.0+,
Safari 3.0+, Chrome and Opera 9.0+.
 Advantages of jQuery:

1. Simple and Easy: JavaScript have predefined methods using we can perform any

task easily compare to JavaScript. jQuery is easy to learn.

2. Cross browser support: jQuery support all modern web-browser.

3. Lightweight: jQuery is very lightweight library.

4. CSS Manipulation: jQuery have predefined css() method for manipulate style for

any HTML elements.

5. HTML Manipulation: The jQuery made it easy to select DOM elements, traverse

them and modifying their content.

6. Extendibility: We start out with a core library and extend its functionality per our

needs with plugins.

 Disadvantages of jQuery:

1. jQuery Not built for larger and complex applications.

2. For larger and more complicated applications we will need to extend way beyond

core with additional libraries and Plugins.

3. jQuery is easy to install and learn, initially. But it’s not that easy if we compare it

with CSS.
 JQUERY LIBRARIES

• jQuery was first released in January 2006 by John Resig.

• jQuery is a JavaScript Library. JavaScript libraries contain various functions, methods, or
objects to perform practical tasks on a webpage or JS-based application.
• jQuery is a lightweight, open-source JavaScript library that helps us build interactive web
pages with animations, visual effects, and advanced functionality.
• jQuery is the most popular JavaScript library, used by around 70 million websites worldwide.
• The jQuery motto is “write less, do more”, because it reduces many lines of raw
JavaScript code into a single line with its simple interface.
• The jQuery library is made up of selectors, event handlers and DOM traversal helpers. Along
with Ajax, jQuery does just about everything we need JavaScript to do for the Web page.
Elements of jQuery :
1. $() or jQuery(): The $() exists for the sole purpose of making it so you don’t have to
write out jQuery() every single time you would like to use a selector.
2. selector: This is how we select our DOM (Document Object Model) element. It’s the
element we want to make changes to when the page loads.
3. action(): This is the function that will tell the DOM what to do. It could be an event
listener, it could be an effect depending on use case.
• Together, a simple basic jQuery syntax is written as:
$(selector).action()

o A $ sign to define/access jQuery.

o A (selector) to "query (or find)" HTML elements.
o A jQuery action() to be performed on the element(s).
The principles of developing with jQuery are:
1. Separation of JavaScript and HTML: The jQuery library provides simple syntax
for adding event handlers to the DOM using JavaScript, rather than adding HTML
event attributes to call JavaScript functions. Thus, it encourages developers to
completely separate JavaScript code from HTML markup.

2. Brevity and Clarity: jQuery promotes brevity and clarity with features like
"chainable" functions and shorthand function names.

3. Elimination of Cross-browser Incompatibilities: The JavaScript engines of

different browsers differ slightly so JavaScript code that works for one browser
may not work for another. Like other JavaScript toolkits, jQuery handles all these
cross-browser inconsistencies and provides a consistent interface that works
across different browsers.

4. Extensibility: New events, elements, and methods can be easily added and then
reused as a plug-in.
The jQuery uses the Document Object Model (DOM) to manipulate, traverse, and select
elements.
• The HTML document is loaded onto the DOM, where the browser creates a node tree
when the page loads.
• A familial, hierarchical relationship is formed with the elements on the tree where
elements are parents, children and siblings of each other.
 INCLUDING JQUERY LIBRARY IN PAGE

• jQuery is a widely used JavaScript library. It simplifies client-side scripting of HTML.

• With the help of an easy-to-use API that works across a multitude of browsers, jQuery
makes things like HTML document traversal and manipulation, event handling,
animation and Ajax much simpler and easier.
• jQuery is embedded into the <script> tag of HTML file between the <head> tag and the
<title> tag.
• There are following two ways to use jQuery:
1. Local Installation: In this method, we have to download the jQuery js file and
include it using a simple <script > tag within the HTML code. We can download
jQuery library on the local machine and include it in the HTML code.
2. CDN Based Version: Another method to include the jQuery to HTML is including
the jQuery by CDN (Content Delivery Network). We can include jQuery library into
the HTML code directly from CDN.
Local Installation of JQuery:
• Go to the https://jquery.com/download/ to download the latest version available. Now
put downloaded jquery-2.1.3.min.js file in a directory of the website, e.g. /jquery. Then
we can include jQuery library in the HTML file as follows :

<html>
<head>
<title>First jQuery Example</title>
<script type = "text/javascript"
src = "/jquery/jquery-2.1.3.min.js">
</script>
<script type = "text/javascript">
$(document).ready(function()
{
document.write("Hello, jQuery World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
CDN Based Version of JQuery:
• We can include jQuery library into the HTML code directly from Content Delivery
Network (CDN).
• Google and Microsoft provides content deliver for the latest version. Now let us
rewrite above example using jQuery library from Google CDN.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/
jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript">
$(document).ready(function()
{
document.write("Hello, jQuery World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
We might have noticed that all jQuery methods in our
examples, are 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).
 JQUERY SELECTORS
• jQuery selectors are one of the most important parts of the jQuery library. jQuery
Selectors are used to select and manipulate HTML elements.
• 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 own custom selectors.
• A jQuery Selector is a function which makes use of expressions to find out matching
elements from a DOM based on the given criteria.
• Simply we can say, selectors are used to select one or more HTML elements using
jQuery. Once, an element is selected then we can perform various operations on that
selected element.
• All jQuery selectors start with a dollor sign and parenthesis e.g. $(). It is known as the
factory function.
• The factory function $() makes use of following three building blocks while selecting
elements in a given document:

1. Tag Name represents a tag name available in the DOM. For example $('p') selects
all paragraphs <p> in the document.
2. Tag ID represents a tag available with the given ID in the DOM. For example
$('#some-id') selects the single element in the document that has an ID of some-id.
3. Tag Class represents a tag available with the given class in the DOM. For example
$('.some-class') selects all elements in the document that have a class of some-class.
Following is an example which makes use of Tag Selector. This would select all the
elements with a tag name p.
<html><head>
<title>jQuery Example</title>
<script type = "text/javascript"
src ="https://ajax.googleapis.com/ajax/libs/
jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript"
language = "javascript">
$(document).ready(function()
{
$("p").css("background-color", "red");
});
</script>
</head>
<body>
<div>
<p class = "myclass">This is a 1st paragraph...</p>
<p id = "myid">This is 2nd paragraph...</p>
<p>This is 3rd paragraph...</p>
</div>
</body></html>
How to Use Selectors?
• The selectors in JQuery are very useful and would be required
at every step while
using jQuery. They get the exact element that we want from
the HTML document.
• Few basic selectors in JQuery are explained below:
o Name selector selects all elements which match with the
given element Name.
o #ID selector selects a single element which matches with the
given ID.
o .Class selector selects all elements which match with the
given Class.
o Universal (*) selector selects all elements available in a DOM.
1. The element Selector in jQuery:
• The jQuery element selector selects elements based on the element name.
• The syntax is, $('tagname')
• Example, $("p")

In following example, when a user clicks on a button, all <p> elements will be hidden:
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This program shows Hiding of paragraph</h2>
<p>This is a first paragraph.</p>
<p>This is another paragraph.</p>
<button>Click this button to hide above paragraphs</button>
</body></html>
2. The #id Selector in jQuery:
• 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 we should use the #id selector when we want
to find a single, unique element.
• The syntax is, $('elementid').
• Example, to find an element with a specific id, write a hash character, followed by the
id of the HTML element such as, $("#test").
• In following example, when a user clicks on a button, the element with id="test" will
be hidden:
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
}); });
</script></head>
<body>
<h2>Example of Jquery using id</h2>
<p>This is a first paragraph code.</p>
<p id="test">This is another paragraph code.</p>
<p>This is a Third paragraph code.</p>
<button>Click this Button</button>
</body></html>
3. The .class Selector in jQuery:
• The jQuery .class selector finds elements with a specific class.
• The syntax is, $('.classid')
• Example, to find an element with a specific class, write a period character, followed by
the name of the class such as, $(".test")
• In following example, when a user clicks on a button, the elements with class="test"
will be hidden:
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".tmp").hide();
}); });
</script>
</head>
<body>
<h2 class="tmp">This is a JQuery heading</h2>
<p class="tmp">This is a First Line.</p>
<p>This is Last Line.</p>
<button>Click this Button</button>
</body></html>
 DOCUMENT OBJECT MODEL (DOM) MANIPULATION

• JQuery provides methods like such as .attr(), .html() etc., to manipulate DOM in efficient way.

Definition of DOM:
“The Document Object Model (DOM) is an application programming interface (API) for HTML and XML documents.
It defines the logical structure of documents and the way a document is accessed and manipulated.”

• DOM defines the objects and properties and methods (interface) to access all XML elements.
It is separated into following three different parts / levels:

1. Core DOM: It is the standard model for any structured document.

2. XML DOM: It is the standard model for XML documents.
3. HTML DOM: It is the standard model for HTML documents.
The Document Object Model (DOM) is a tree structure of
various elements of HTML as follows:
<html>
<head>
<title>The jQuery Example</title>
</head>
<body>
<div>
<p>This is Line one .</p>
<p>This is Line two.</p>
<p>This is Line three.</p>
</div>
</body>
</html>

Output:
This is Line one .
This is Line two.
This is Line three.
• jQuery provides various methods to add, edit or delete DOM element(s) in the HTML page.
• jQuery provides methods to manipulate DOM in efficient way. We do not need to write
big code to modify the value of any element's attribute or to extract HTML code from a
paragraph or division.
• jQuery provides methods such as .attr(), .html() and .val() which act as getters, retrieving
information from DOM elements for later use.
• jQuery attr() method is used to get or set the value of specified attribute of DOM
element. jQuery html() method sets or returns the content of selected elements
(including HTML markup).
• jQuery val() method sets or returns the value of form fields. jQuery text() method sets
or returns the text content of selected elements.
Adding New HTML Content:
1. append() method inserts content at the end of the selected elements.
2. prepend() method inserts content at the beginning of the selected elements.
3. after() method inserts content after the selected elements.
4. before() method inserts content before the selected elements.

Removing Elements/Content:
• With jQuery, it is easy to remove existing HTML elements. To remove elements and
content, there are following two jQuery methods:
1. remove() method removes the selected element (and its child elements).
2. empty() method removes the child elements from the selected element.
DOM Element Replacement:
• We can replace a complete DOM element with the specified HTML or DOM elements.
The replaceWith(content) method serves this purpose very well.
Syntax:
selector.replaceWith(content)

Following example would replace division element with "<h1>JQuery is </h1>":

<html>
<head>
<title>The jQuery Example for replace division element </title>
<script src ="jquery.js"></script>

<script>
$(document).ready(function()
{
$("div").click(function ()
{
$(this).replaceWith("<h1>PHP using JQuery is Easy</h1>");
});
});
</script>
<style>
#division
{
margin:20px;
padding:22px;
border:12px solid #666;
width:70px;
}
</style>
</head>

<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:pink;">
This is Pink Square!!
</div>
</body>
</html>
Removing DOM Elements:

• There may be a situation/condition when we would like to

remove one or more DOM elements from the document.
jQuery provides two methods to handle the situation
namely, empty() and remove(expr).
• The empty() method remove all child nodes from the set of
matched elements where as the method remove(expr) method
removes all matched elements from the DOM.
• The syntax for this method is, selector.remove([expr])
We can pass optional parameter expr to filter the set of
elements to be removed.
<html><head>
<title>The jQuery Example for removing Element</title>
<script src = “jquery.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function()
{
$("div").click(function ()
{
$(this).remove( );
});
});
</script>
<style>
.div{ margin:20px;padding:22px; border:10px solid #666;
width:80px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:Blue;"></div>
<div class = "div" style = "background-color:orange;"></div>
<div class = "div" style = "background-color:green;"></div>
</body></html>
Inserting DOM Elements:
• There may be a situation/condition when we would like to insert new one or more DOM
elements in the existing document. The jQuery provides various methods like
after(content), before(content) etc. to insert elements at various locations.
• The after(content) method insert content after each of the matched elements where as
the method before(content) method inserts content before each of the matched elements.
• The syntax for these methods are, selector.after(content) and selector.before(content).
Here, content is what you want to insert. This could be HTML or simple text.
<html><head>
<title>The jQuery Example for <div> elements are being inserted</title>
<script src = "jquery.js"></script>
<script>
$(document).ready(function()
{
$("div").click(function () {
$(this).before('<div class="div"></div>' );
});
});
</script>
<style>
.div{ margin:15px;padding:15px; border:8px solid #555;
width:80px;}
</style>
</head>
<body>
<p>Click on any square given below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:yellow;"></div>
<div class = "div" style = "background-color:red;"></div>
<div class = "div" style = "background-color:blue;"></div>
</body>
</html>
DOM Manipulation Methods in jQuery:

• jQuery provides various methods to add, edit or delete DOM element(s) in the HTML page.
1. The width() method sets or returns the width of an element (excludes padding, border and margin).
2. The height() method sets or returns the height of an element (excludes padding,
border and margin).
3. The innerWidth() method returns the width of an element (includes padding).
4. The innerHeight() method returns the height of an element (includes padding).
5. The outerWidth() method returns the width of an element (includes padding and border).
6. The outerHeight() method returns the height of an element (includes padding
and border).
7. The offset() method gets or sets left and top coordinates of the specified
element(s).
8. The position() method gets the current coordinates of the specified element(s).
<html><head>
<script src=“jquery.js"></script> <body>
<script> <div id="div1"></div>
$(document).ready(function(){ <br>
$("button").click(function(){ <button>Display Dimensions of div tag</button>
var tmp = ""; <p>width() - This method gives the width of an
tmp += "Width of div tag: " + $("#div1").width() + "</br>"; element.</p>
tmp += "Height of div tag: " + $("#div1").height();
$("#div1").html(tmp); <p>height() - This method gives the height of an
}); element.</p>
});
</script> </body>
<style> </html>
#div1 {
height: 120px;
width: 350px;
padding: 20px;
margin: 5px;
background-color: orange;
border: 3px solid green;
}
</style></head>