2. jQuery Fundamentals
jQuery:
jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a
nice motto: Write less, do more.
jQuery simplifies HTML document traversing, event handling, animating, and Ajax
interactions for rapid web development. jQuery is a JavaScript toolkit designed to simplify
various tasks by writing less code.
Advantages of jQuery:
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.
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.
AJAX Support − The jQuery helps you a lot to develop a responsive and featurerich
site using AJAX technology.
Animations − The jQuery comes with plenty of built-in animation effects which you
can use in your websites.
Lightweight − The jQuery is very lightweight library - about 19KB in size (Minified and
gzipped).
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+
Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.
There are two ways to use jQuery.
Local Installation − You can download jQuery library on your local machine and
include it in your HTML code.
CDN Based Version − You can include jQuery library into your HTML code directly
from Content Delivery Network (CDN).
1 Prepared By:
Prof. Chirag Prajapati – SDJ International College, Vesu, Surat
,Local installation:
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 your website, e.g.
/jquery.
Example:
<html>
<head>
<title>The 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, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
CDN Based Version:
You can include jQuery library into your HTML code directly from Content Delivery
Network (CDN). Google and Microsoft provides content deliver for the latest version.
Example:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src =
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.m
in.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
document.write("Hello, World!");
});
2 Prepared By:
Prof. Chirag Prajapati – SDJ International College, Vesu, Surat
, </script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
jQuery 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 you 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.
jQuery selectors start with the dollar sign and parentheses − $(). The factory function $()
makes use of following three building blocks while selecting elements in a given document
−
Sr.No. Selector & Description
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.
3 Prepared By:
Prof. Chirag Prajapati – SDJ International College, Vesu, Surat
jQuery:
jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a
nice motto: Write less, do more.
jQuery simplifies HTML document traversing, event handling, animating, and Ajax
interactions for rapid web development. jQuery is a JavaScript toolkit designed to simplify
various tasks by writing less code.
Advantages of jQuery:
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.
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.
AJAX Support − The jQuery helps you a lot to develop a responsive and featurerich
site using AJAX technology.
Animations − The jQuery comes with plenty of built-in animation effects which you
can use in your websites.
Lightweight − The jQuery is very lightweight library - about 19KB in size (Minified and
gzipped).
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+
Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.
There are two ways to use jQuery.
Local Installation − You can download jQuery library on your local machine and
include it in your HTML code.
CDN Based Version − You can include jQuery library into your HTML code directly
from Content Delivery Network (CDN).
1 Prepared By:
Prof. Chirag Prajapati – SDJ International College, Vesu, Surat
,Local installation:
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 your website, e.g.
/jquery.
Example:
<html>
<head>
<title>The 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, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
CDN Based Version:
You can include jQuery library into your HTML code directly from Content Delivery
Network (CDN). Google and Microsoft provides content deliver for the latest version.
Example:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src =
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.m
in.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
document.write("Hello, World!");
});
2 Prepared By:
Prof. Chirag Prajapati – SDJ International College, Vesu, Surat
, </script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
jQuery 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 you 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.
jQuery selectors start with the dollar sign and parentheses − $(). The factory function $()
makes use of following three building blocks while selecting elements in a given document
−
Sr.No. Selector & Description
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.
3 Prepared By:
Prof. Chirag Prajapati – SDJ International College, Vesu, Surat
