JQUERY
Setting up jQuery
There are two ways to use jQuery.
1. Local Installation − You can download jQuery library on your local machine and
include it in your HTML code.
2. CDN Based Installation − You can include jQuery library into your HTML code
directly from Content Delivery Network (CDN).
Syntax:
jQuery Syntax
$(document).ready(function(){
$(selector).action()
});
Any jQuery statement starts with a dollar sign $ and then we put a selector inside
the braces (). This syntax $(selector) is enough to return the selected HTML
elements, but if you have to perform any action on the selected element(s)
then action() part is required.
<!doctype html>
<html>
<head> <title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script> $(document).ready(function() { $("p").hide() }); </script> </head>
<body>
<h1>jQuery Basic Syntax</h1>
<p>This is p tag</p>
<p>This is another p tag</p>
<span>This is span tag</span>
<div>This is div tag</div>
</body>
</html>
jQuery Selectors
jQuery Selectors are used to select HTML element(s) from an HTML document.
Consider an HTML document is given and you need to select all the <div> from
this document.
HTML element Name
Element ID
Element Class
Element attribute name
Element attribute value
jQuery Selector Syntax
Following is the jQuery Selector Syntax for selecting HTML elements:
$(document).ready(function(){
$(selector)
});
A jQuery selector starts with a dollar sign $ and then we put a selector inside the
braces (). Here $() is called factory function, which makes use of following three
building blocks while selecting elements in a given document:
Selector Name Description
The element Selector Represents an HTML element name available in the DOM. For
example $('p') selects all paragraphs <p> in the document.
The #id Selector Represents a HTML element available with the given ID in the DOM. For
example $('#some-id') selects the single element in the document that
has some-id as element Id.
The .class Selector Represents a HTML elements 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.
All the above selectors can be used either on their own or in combination with
other selectors.
The element Selector
The jQuery element selector selects HTML element(s) based on the element
name. Following is a simple syntax of an element selector:
$(document).ready(function(){
$("Html Element Name")
});
Please note while using element name as jQuery Selector, we are not giving
angle braces along with the element. For example, we are giving only
plain p instead of <p>.
Examples
Following is an example to select all the <p> elements from an HTML document
and then change the background color of those paragraphs.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>jQuery element Selector</h1>
<p>This is p tag</p>
<span>This is span tag</span>
<div>This is div tag</div>
</body>
</html>
The #id Selector
The jQuery #id selector selects an HTML element based on the
element id attribute. Following is a simple syntax of a #id selector:
$(document).ready(function(){
$("#id of the element")
});
Examples
Following is an example to select the <p> element whose id is foo and change
the background color of those paragraphs..
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#foo").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>jQuery #id Selector</h1>
<p id="foo">This is foo p tag</p>
<span id="bar">This is bar span tag</span>
<div id="bill">This is bill div tag</div>
</body>
</html>
The .class Selector
The jQuery .class selector selects HTML element(s) based on the
element class attribute. Following is a simple syntax of a .class selector:
$(document).ready(function(){
$(".class of the element")
});
Examples
Following is an example to select all the elements whose class is foo and change
the background color of those elements.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$(".foo").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>jQuery .class Selector</h1>
<p class="foo">This is foo p tag</p>
<p class="foo">This is one more foo p tag</p>
<span class="bar">This is bar span tag</span>
<div class="bill">This is bill div tag</div>
</body>
</html>
