< Jquery Tutorial

Jquery Selectors

← Previous Next →


The jQuery library harnesses the power of Cascading Style Sheets (CSS) selectors to let us quickly and easily access elements or groups of elements in the Document Object Model (DOM).

A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say, selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.

The $() factory function

Every jQuery selector start with thiis sign $(). This sign is known as the factory function. It uses the three basic building blocks while selecting an element in a given document.

S.No Selector  Description
1. Tag Name:  It represents a tag name available in the DOM.
2. Tag ID:  It represents a tag available with a specific ID in the DOM.
For example: $('#real-id') selects a specific element in the document that has an ID of real-id.
3. Tag Class: It represents a tag available with a specific class in the DOM.
For example: $('real-class') selects all elements in the document that have a class of real-class.

Let's take a simple example to see the use of Tag selector. This would select all the elements with a tag name

and the background color is set to "pink".

File: firstjquery.html

 <!DOCTYPE html>
<html>
<head>
<title>First jQuery Example </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() { $("p").css("background-color", "pink"); }); </script>
</head>
<body>
<p>This is first paragraph. </p>
<p>This is second paragraph. </p>
<p>This is third paragraph. </p>
</body>
</html>
← Previous Next →