JQuery filters are used to find elements from group of selected elements based on filter criteria.
JQuery provides three types of filters.
1). Basic Filter
2). Child Filter
3). Content filter
In this article we will learn about Basic Filters.
1). Basic Filters
Basic filters are used to find subset of select elements collection based on criteria like first, last, even, odd, animated, focus, index less than, index greater than etc. as explain one by one with example below.
1) JQuery(":animated")
Used to select all elements which are animating.
Following example will change the color of animating elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<style>
.bar { display: inline-block; min-height: 100px; min-width: 100px; background-color: lightblue; }
.colored { background-color:aquamarine; }
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<div class="col-md-3"><span class="bar"></span></div>
<div class="col-md-3 mover"><span class="bar"></span></div>
<div class="col-md-3"><span class="bar"></span></div>
<div class="col-md-3 mover"><span class="bar"></span></div>
</div>
<div class="row">
<button id="btns" type="submit" class="btn btn-primary btn-sm">Change</button>
</div>
</div>
<script>
var Animate = function Animate() {
$(".mover").slideToggle("slow", Animate);
}
$(function () {
Animate();
$('#btns').click(function () {
$("div:animated span").toggleClass("colored");
});
})
</script>
</body>
</html>
2) JQuery(":eq(index)")
:eq filter is used to filter elements from selected set of elements with index number passing as an argument.
Here index initiates with zero like in array index.
:eq() filter is used with index selectors. like listing, table etc. index 0 will returns first element of the selection.
Following example will create a table and change the color of its corner elements using its index.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<style>
.colored {color:red; }
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<table class="table">
<tr><td>TD 0</td><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 3</td><td>TD 4</td><td>TD 5</td></tr>
<tr><td>TD 6</td><td>TD 7</td><td>TD 8</td></tr>
</table>
</div>
</div>
<script>
$(function () {
$("td:eq(0)").addClass("colored");
$("td:eq(2),td:eq(6),td:eq(8)").addClass("colored");
})
</script>
</body>
</html>
3) :gt() Filter
Select All the elements from selection having index greater than given index.
Following example will change the color of td having index greater than 2. It will effect second and third row.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<style>
.colored {color:red; }
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<table class="table">
<tr><td>TD 0</td><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 3</td><td>TD 4</td><td>TD 5</td></tr>
<tr><td>TD 6</td><td>TD 7</td><td>TD 8</td></tr>
</table>
</div>
</div>
<script>
$(function () {
$("td:gt(2)").addClass("colored");
})
</script>
</body>
</html>
4) :lt() Filter
Select All the elements from selection having index less than given index.
Following example will change the color of td having index less than 3. It will effect first row only.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<style>
.colored {color:red; }
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<table class="table">
<tr><td>TD 0</td><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 3</td><td>TD 4</td><td>TD 5</td></tr>
<tr><td>TD 6</td><td>TD 7</td><td>TD 8</td></tr>
</table>
</div>
</div>
<script>
$(function () {
$("td:lt(3)").addClass("colored");
})
</script>
</body>
</html>
5) :first Filter
It will select first index of selected elements.
Following example will change the color of first td to red i.e. TD 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<style>
.colored {color:red; }
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<table class="table">
<tr><td>TD 0</td><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 3</td><td>TD 4</td><td>TD 5</td></tr>
<tr><td>TD 6</td><td>TD 7</td><td>TD 8</td></tr>
</table>
</div>
</div>
<script>
$(function () {
$("td:first").addClass("colored");
})
</script>
</body>
</html>
6) :last Filter
It will select last index of selected elements.
Following example will change the color of last td to red i.e. TD 8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<style>
.colored {color:red; }
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<table class="table">
<tr><td>TD 0</td><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 3</td><td>TD 4</td><td>TD 5</td></tr>
<tr><td>TD 6</td><td>TD 7</td><td>TD 8</td></tr>
</table>
</div>
</div>
<script>
$(function () {
$("td:last").addClass("colored");
})
</script>
</body>
</html>
7) :even Filter
It will select all even index of selected elements.
Following example will change the color of all even td to red.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<style>
.colored {color:red; }
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<table class="table">
<tr><td>TD 0</td><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 3</td><td>TD 4</td><td>TD 5</td></tr>
<tr><td>TD 6</td><td>TD 7</td><td>TD 8</td></tr>
</table>
</div>
</div>
<script>
$(function () {
$("td:even").addClass("colored");
})
</script>
</body>
</html>
8) :odd Filter
It will select all odd index of selected elements.
Following example will change the color of all odd td to red.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<style>
.colored {color:red; }
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<table class="table">
<tr><td>TD 0</td><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 3</td><td>TD 4</td><td>TD 5</td></tr>
<tr><td>TD 6</td><td>TD 7</td><td>TD 8</td></tr>
</table>
</div>
</div>
<script>
$(function () {
$("td:odd").addClass("colored");
})
</script>
</body>
</html>
9) JQuery(":root")
Select all elements under the root of document object. It will return entire html of the document as follows.
Press F12 for Developer tools of browser.
Open console and type
$(':root')[0]
press Enter.
It will return entire html of document.
Moreover, you can get root tag by
$(':root')[0].nodeName
It will always return "HTML" i.e. the root tag.
10) jQuery(":not(selector)")
This filter returns all the elements, which will not match with given selector filter.
Following example will retrun all td, which are not odd and change color to red. It will make color to red of all even td of selection.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<style>
.colored {color:red; }
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<table class="table">
<tr><td>TD 0</td><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 3</td><td>TD 4</td><td>TD 5</td></tr>
<tr><td>TD 6</td><td>TD 7</td><td>TD 8</td></tr>
</table>
</div>
</div>
<script>
$(function () {
$("td:not(:odd)").addClass("colored");
})
</script>
</body>
</html>
11) jQuery(":focus")
It will select element, which is currently focus.
In below example, we will create an delegate for focus and blur event. which will change the background-color when we click on any input text box.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<style>
.colored { background-color: #808080!important }
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
</div>
</div>
<script>
$(function () {
$('.container').delegate("*", "focus blur", function () {
var e = $(this);
setTimeout(function () {
e.toggleClass("colored", e.is(":focus"));
}, 500);
});
});
</script>
</body>
</html>
12) jQuery(":header")
The header filter will select all the headers like h1,h2,h3,h4 and so on.
As shown in below example, We will add background-color and make all heading element of same font-size.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<style>
.heads { background-color: #808080 !important; font-size:12px!important; color:white!important }
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<div class="col-md-12">
<p>Normal text</p>
<h1>Header 1</h1>
<p>Normal text</p>
<h2>Header 2</h2>
<p>Normal text</p>
<h3>Header 3</h3>
<p>Normal text</p>
<h4>Header 4</h4>
<p>Normal text</p>
<h5>Header 5</h5>
<p>Normal text</p>
<h6>Header 6</h6>
</div>
</div>
</div>
<script>
$(function () {
$(":header").addClass("heads");
});
</script>
</body>
</html>
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.