01 – Basic selectors in jQuery

jQuery is all about manipulating HTML elements. In order to manipulate the HTML elements you have to select them. You can select them in different ways.

The All (Universal) selector

The All selector allows you to select all the elements of the page (all DOM elements of a page). It is represented by an asterisk, *.
Let’s consider a simple HTML page with different elements in it.

<!DOCTYPE html>
<html>
<head>
	<title>My site</title>
	<script src="jquery-3.2.1.min.js"></script>
</head>
<body>

<div class="main-div">
	<h3>I am a header</h3>
	<p>I'm a paragraph</p>
	<img id='my-img' src='dan.jpg' alt="Dan pic">
</div>

<script>
	var $allElements = $('*');
</script>

</body>
</html>

The code is self explanatory since it is mainly HTML.
The line <script src="jquery-3.2.1.min.js"></script> is the link to the jQuery file.
The var $allElements = $('*'); selects all the elements in the page. It is passed to the jQuery() function (which is written as $().
The All selector is very slow and its use is discouraged!

Note:
The $ in front of the variable name is not compulsory. It is just a convention! A variable that saves a selection made with jQuery starts with $. Just a convention!

The id selector

The id selector is the most commonly used selector (both JavaScript and jQuery). The id selector selects an element by its id. We have one element that has the id set to id='my-img' which is the image from our page. You can retrieve this element in jQuery using the following code:

$('#my-img');

Note:
If there is more that one element with the same id then only the first one in the page is selected. The id should be unique and you shouldn’t have more than one element with the same id.

Notice the # sign in front of ‘my-img’. That sign is used to represent an id (in CSS as well).

The class selector

The class selector in jQuery is used just as the id selector is used. The difference is that instead of # sign (which represents an id), the . (dot) is used (which represents a class of elements). It is very likely to have more elements in your page that have the same CSS class and share the same style. In our example we have a single element that have a class attached to it. It is the <div class="main-div">. You might have more divs (with the same class) in your page in the future. The jQuery class selector selects all of them by using the following code:

$('.main-div');

Now, let’s modify our page code and add one more p element. Our page code will look like shown below:

<!DOCTYPE html>
<html>
<head>
	<title>My site</title>
	<script src="jquery-3.2.1.min.js"></script>
	<style>
		.conclusion {
			font-size: 0.7em;
		}
		.red {
			color: red;
		}
	</style>
</head>
<body>

<div class="main-div">
	<h3>I am a header</h3>
	<p>I'm a paragraph</p>
	<p class="conclusion">This is a conclusion</p>
	<p class="conclusion red">This paragraph is a red conclusion</p>
	<img id='my-img' src='dan.jpg' alt="Dan pic">
</div>

<script>
	var $allElements = $('*');
</script>

</body>
</html>

Let’s say now that you want to select the elements that have the class="conclusion". As you noticed, we have two of them.

$('.conclusion');

The result of the above statement is an object (also known as “jQuery collection”). Notice that the third paragraph has two classes. It is selected as well because one of the classes matches with the selection criteria.

You can also select more classes at the same time:

$('.conclusion.red');

The class selector is definitely very flexible and very used by developers!

The element selector

The element selector allows you to select an element based on its tag name. If you want to select all paragraphs from the page then you will use the following code:

var $allParagraphs = $('p');

The element selector of jQuery is commonly used in combination with other selectors. Let’s say you want to select all paragraphs that have the class “red” (you might have the class “red” assigned to other elements not only paragraphs, but you need only paragraphs with the class “red”). You can select them using the code below:

var $allRedParagraphs = $('p.red');

You may also want to select all paragraphs and all images in your page. You can do that as shown below:

var $allParagraphsAndImages = $('p, img');

Leave a Reply