The Complete Reference of SELECTORS in JQUERY

In jQuery, selectors are used to choose and control HTML tags. We can choose HTML tags individually or in groups using jQuery. We’ll go over the various methods for picking HTML tags in the sections below.

This selector contains all HTML tags.

1 $ (‘*’)
If combined with another element, the whole subset (children) contains the main element.

1 $ (‘body *’)
#
Sharp selector is used to select an HTML element with a specific ID.
Consider the following div tag:

<div id='logo'> </div>  

Using the following selector, we can access this tag:

1 $ (‘# logo’)
.
Selector. (dot) is used to select an HTML tag with a specific class.

Selector. (Dot) is used to select a custom HTML class tag.

1<div class='header'></div>
2
3$('.header') 
HTML tag name

Using the direct name of an HTML tag, we can access the tag in jQuery.

1
 $('p') 

The above command contains all available p tags.

: first

This selector is mostly used with other selectors. This means that it contains the first element.

1
 <html>
2
 <head>
3
 <script type = "text / javascript" src = "jquery.js"> </script>
4
 <script type = "text / javascript">
5
 $ (document) .ready (function () {
6
 $ ("p: first"). css ("background-color", "red");
7
 });
8
 </script>
9
 </head>
10
 <body>
11
 <h1> Welcome to My Homepage </h1>
12
 <p> My name is Donald </p>
13
 <p> I live in Duckburg </p>
14
 <p> My best friend is Mickey </p>
15
 Who is your favorite:
16
 <ul id = "choose">
17
 <li> Goofy </li>
18
 <li> Mickey </li>
19
 <li> Pluto </li>
20
 </ul>
21
 </body>
22
 </html>

After executing the above code, the first p tag will have a red background.

last

This selector selects the last element of the subset.

1
 <html>
2
 <head>
3
 <script type="text/javascript" src="jquery.js"></script>
4
 <script type="text/javascript">
5
 $(document).ready(function(){
6
 $("p:last").css("background-color","red");
7
 });
8
 </script>
9
 </head>
10
 <body>
11
 <h1>Welcome to My Homepage</h1>
12
 <p>My name is Donald</p>
13
 <p>I live in Duckburg</p>
14
 <p>My best friend is Mickey</p>
15
 Who is your favourite:
16
 <ul id="choose">
17
 <li>Goofy</li>
18
 <li>Mickey</li>
19
 <li>Pluto</li>
20
 </ul>
21
 </body>
22
 </html>

:even

This selector selects each element with an even index (0, 2, 4, and 3).

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:even").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>
</body>
</html>

In the table above, all even rows will have a red background color.

😮 dd

This selector selects each element with an individual index.

$("tr:odd").css("background-color","blue");

:eq()

This selector selects an element with a specific index.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:eq(1)").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>

In the example above, the value in parentheses eq is set to 1. This means that it selects the second p tag and gives it a red background.

:gt()

This selector selects elements whose index is greater than the number in parentheses.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:gt(3)").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>
</body>
</html>

In the example above, from the fourth row to the end of the background table, they will turn red.

: lt

This selector selects small elements from a specific index.

$("tr:lt(4)").css("background-color","red");

:not

This selector does not select all elements except one specific element.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:not(.intro)").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>

In the example above, all p tags except the existing p tag will have a red background.

:header

h1 to h6

$(":header").css("background-color","red");

: animated

Using this selector, you can select all the elements that you moved with the animat command.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function aniDiv(){
$("div:eq(0)").animate({width:"50%"},"slow");
$("div:eq(0)").animate({width:"100%"},"slow",aniDiv);
}
aniDiv();
$(".btn1").click(function(){
$(":animated").css("background-color","red");
});
});
</script>
</head>
<body>
<button>Change color of animated element</button>
<div style="background:blue;">Div 1</div>
<div style="background:green;">Div 2</div>
<div style="background:yellow;">Div 3</div>
</body>
</html>

: contains

(text) This selector selects elements that contain a specific text

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:contains(is)").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>  

In the example above, two lines containing the word is get a red background.

: empty

Selects elements that have no children or text.

$(":empty").css("background-color","red");  

: visible
Selects the elements that are being displayed.

1 $ (“p: visible”). css (“background-color”, “red”);

[Adjective]

Elements are selected that have the properties specified in the bracket.

  $("[id]").css("background-color","red");

[attribute = value]

Elements whose property specified in the bracket is equal to a certain value are selected.

$('[href=http://phpro.ir]') .css("background-color","red");

[attribute! = value]

Elements whose property specified in the bracket is not equal to a certain value are selected.

1 $ (‘[href! = http: //phpro.ir]’) .css (“background-color”, “red”);

[attribute $ = value]

Contains elements that end the property specified in the bracket with a specific text.

1 $ (“a: [href $ =. org]”)
In the example above, all the a tags whose href ends with .org are selected.

: input
Selects the input tag in the form.

: text
Selects the input tag, which is of type text.

: password
Selects the input tag of the password type.

: radio
Selects the input tag of type rasio.

: checkbox
Selects the input tag of checkbox type.

: submit
Selects the input tag of the submit type.

: reset
Selects the input tag of the reset type.

: button
Selects the input tag of the button type.

: image
Selects the input tag of the image type.

: file
Selects the input tag of the file type.

: enabled
Do not select all active elements in the form.

: disabled
Do not select all inactive elements in the form.

: selected

Do not select the selected value in the select tag.

1 $ (“: selected”). css (“background-color”, “red”);
: checked
Selects the selected checkboxes or radio buttons.

1 $ (“: checked”). wrap (“”);

THANKS FOR COMPLETE READ THIS ARTICLE ABOUT

The Complete Reference of SELECTORS in JQUERY

%d bloggers like this: