Full Stack Development
jQuery Selectors
By
G.Sowmya
Assistant Professor
CSE-AIML Dept
MLR Institute of Technology
Overview of the Presentation
Element selector
#id selector
.class selector
Other examples of jQuery selectors
jQuery Selectors
jQuery Selector:
jQuery selectors are one of the most important parts of the jQuery library.
jQuery selectors are used to "find" (or select) HTML elements based on their
name, id, classes, types, attributes, values of attributes and much more.
jQuery Selectors
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")
Ex: <!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
jQuery Selectors
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
jQuery Selectors
<button>Click me to hide paragraphs</button>
</body>
</html>
Output:
jQuery Selectors
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")
jQuery Selectors
Ex: <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
jQuery Selectors
Output:
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
jQuery Selectors
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")
Ex: <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
jQuery Selectors
Output:
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p
<button>Click me</button>
</body>
</html>
jQuery Selectors
More examples of jQuery Selectors:
Syntax
Syntax Syntax
Description
Descriptio
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$(":button") Selects all <button> elements and <input> elements of
type="button"
jQuery Selectors
Ex: <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("*").hide();
});
});
</script>
</head>
jQuery Selectors
Output:
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
SUMMARY
In this session we discussed about
Different jQuery selectors like element selector, id selector, class
selector and other selectors with example applications .
Full Stack Development
Thank You
