A jQuery Selector is a function that 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 selecting 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
jQuery selectors start with the dollar sign and parentheses ? $(). The factory function $() makes use of the following three building blocks while selecting elements in a given document ?
- Tag Name: Represents a tag name available in the DOM. For example $(‘p’) selects all paragraphs <p> in the document.
- Tag ID: Represents a tag available with the given ID in the DOM. For example, $(‘#some-id’) selects the single element in the document that has an ID of some-id.
- Tag Class: Represents a tag available with the given class in the DOM. For example $(‘.some-class’) selects all elements in the document that have a class of some-class.
How to Use Selectors?
The selectors are very useful and would be required at every step while using jQuery. They get the exact element that you want from your HTML document.
The following table lists down a few basic selectors and explains them with examples.
- Name:
Selects all elements which match the given element Name.
Description
The element selector selects all the elements that have a tag name of T.
Syntax
Here is the simple syntax to use this selector ?
$(‘tag name)
Parameters
Here is the description of all the parameters used by this selector ?
- tag name ? Any standard HTML tag name like div, p, em, img, li etc.
Example
- $(‘p’) ? Selects all elements with a tag name of p in the document.
- $(‘div’) ? Select all elements with a tag name of div in the document.
The following example would select all the divisions and will apply yellow colour to their background
<script type = “text/javascript” language = “javascript”>
$(document).ready(function() {
/* This would select all the divisions */
$(“div”).css(“background-color”, “yellow”);
});
</script>
- #ID:
Selects a single element that matches the given ID.
Description
The element ID selector selects a single element with the given id attribute.
Syntax
Here is the simple syntax to use this selector ?
$(‘#elementid’)
Parameters
Here is the description of all the parameters used by this selector ?
- elementid ? This would be an element ID. If the id contains any special characters like periods or colons you have to escape those characters with backslashes.
Example
- $(‘#myid’) ? Selects a single element with the given id myid.
- $(‘div#yourid’) ? Selects a single division with the given id yourid.
The following example would select the second division and will apply yellow colour to its background
<script type = “text/javascript” language = “javascript”>
$(document).ready(function() {
/* This would select second division only*/
$(“#div2”).css(“background-color”, “yellow”);
});
</script>
- Universal (*):
Selects all elements available in a DOM.
Description
The universal selector selects all the elements available in the document.
Syntax
Here is the simple syntax to use this selector ?
$(‘*’)
Parameters
Here is the description of all the parameters used by this selector ?
- * ? A symbolic star.
Example
- $(‘*’) selects all the elements available in the document.
<script type = “text/javascript” language = “javascript”>
$(document).ready(function() {
/* This would select all the elements */
$(“*”).css(“background-color”, “yellow”);
});
</script>
- Class:
Selects all elements which match with the given Class.
Description
The element class selector selects all the elements which match with the given class of the elements.
Syntax
Here is the simple syntax to use this selector ?
$(‘.classid’)
Parameters
Here is the description of all the parameters used by this selector ?
- Class id ? This is the class ID available in the document.
Example
- $(‘.big’) ? Selects all the elements with the given class ID big.
- $(‘p.small’) ? Selects all the paragraphs with the given class ID small.
- $(‘.big.small’) ? Selects all the elements with a class of big and small.
<script type = “text/javascript” language = “javascript”>
$(document).ready(function() {
/* This would select second division only*/
$(“.big”).css(“background-color”, “yellow”);
});
</script>
- Multiple Elements E, F, G:
Description
This Multiple Elements selector selects the combined results of all the specified selectors E, F or G.
Syntax
Here is the simple syntax to use this selector ?
$(‘E, F, G,….’)
Parameters
Here is the description of all the parameters used by this selector ?
- E ? Any valid selector
- F ? Any valid selector
- G ? Any valid selector
Example
- $(‘div, p’) ? selects all the elements matched by div or p.
- $(‘p strong, .myclass’) ? selects all elements matched by strong that are descendants of an element matched by p as well as all elements that have a class of my class.
- $(‘p strong, #myid’) ? selects a single element matched by strong that is a descendant of an element matched by p as well as an element whose id is myid.
ID div3 and will apply yellow colour to its background ?
<script type = “text/javascript” language = “javascript”>
$(document).ready(function() {
$(“.big, #div3”).css(“background-color”, “yellow”);
});
</script>
