jQuery selectors are used to select and efficient HTML elements. They are a very important part of the jQuery library.
With jQuery selectors, you can find or select HTML elements based on a lot of things from their IDs, classes, features, types and doom.
In simple words, you can say that selectors are used to select one or more HTML elements using jQuery and once you select the element you can perform various operations on it.
All the jQuery selectors start with a doll mark and bracket eg. $ () It is known as the factory function.
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. For example: $('p') selects all paragraphs'p'in the document. |
| 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. |
<!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>
<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>
How to use Selectors
The jQuery selectors can be used single or with the combination of other selectors. They are required at every steps while using jQuery. They are used to select the exact element that you want from your HTML document.
| S.No. | Selector | Description |
|---|---|---|
| 1) | Name: | It selects all elements that match with the given element name. |
| 2) | #ID: | It selects a single element that matches with the given id. |
| 3) | .Class: | It selects all elements that matches with the given class. |
| 4) | Universal(*) | It selects all elements available in a DOM. |
| 5) | Multiple Elements A,B,C | It selects the combined results of all the specified selectors A,B and C. |
0 comments:
Post a Comment