Hello guys! Welcome to my new tutorial post on jQuery. From my previous tutorial, we discussed about all the basics of jQuery, so i believe that by now you all have the basic knowledge needed to proceed further in this tutorial.
In this tutorial post, i will be discussing about the various Selectors available to jQuery. Read through carefully and ask your questions where necessary.
The jQuery library controls and makes use of the power of Cascading Style Sheets(CSS) selectors to let users quickly and easily access elements or group of elements in the 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 put it this way, that selectors are used to select one or more HTML elements making use of jQuery. Once an element is selected then we can perform various operations on it.
In this tutorial post, i will be discussing about the various Selectors available to jQuery. Read through carefully and ask your questions where necessary.
The jQuery library controls and makes use of the power of Cascading Style Sheets(CSS) selectors to let users quickly and easily access elements or group of elements in the 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 put it this way, that selectors are used to select one or more HTML elements making use of jQuery. Once an element is selected then we can perform various operations on it.
You can also read our tutorial post on: An Introduction to jQuery
The $( ) Factory Function
jQuery selectors starts with the dollar sign and parenthesis. The factory function $() makes use of the following three building blocks while the elements in a given document are selected -
| Sr.No. | Selector & Description |
|---|---|
| 1 |
Tag Name
Represents a tag name available in the DOM. For example $('p')selects all paragraphs <p> in the document.
|
| 2 |
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.
|
| 3 |
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.
|
All the above items can be used either on their own or in combination with other selectors. All the jQuery selectors are based on the same set of principles.
Note - The factory function $( ) is a synonym of jQuery function. So in case you are making use of any other JavaScript library where the $ sign is conflicting with some thing else, then you can replace $ sign with jQuary name and you make use of function jQuery( ) instead of $( ).
Note - The factory function $( ) is a synonym of jQuery function. So in case you are making use of any other JavaScript library where the $ sign is conflicting with some thing else, then you can replace $ sign with jQuary name and you make use of function jQuery( ) instead of $( ).
Example
Below is a simple example which makes use of Tag Selector. This would select all the elements with tag name p.
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "p" ).css( "background-color", "grey" );
} );
</script>
</head>
<body>
<div>
<p class = "myclass">This is a Paragraph.</p>
<p id = "myid">This is the second Paragraph.</p>
<p>This is the third Paragraph.</p>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "p" ).css( "background-color", "grey" );
} );
</script>
</head>
<body>
<div>
<p class = "myclass">This is a Paragraph.</p>
<p id = "myid">This is the second Paragraph.</p>
<p>This is the third Paragraph.</p>
</div>
</body>
</html>
Output
Below is the output of the above example.
This is a Paragraph.
This is the second Paragraph.
This is the third Paragraph.
You can also read our tutorial on: Client-side Form Validation in JavaScript
How to Use jQuery Selectors?
The selectors are very useful and would also be required at every step while using jQuery. They get the exact element that you want from your HTML document.
The table below lists down few basic selectors with their description along side with them-
The table below lists down few basic selectors with their description along side with them-
| Sr.No. | Selector & Description |
|---|---|
| 1 | Name
Selects all elements which match with the given element Name.
|
| 2 | #ID
Selects a single element which matches with the given ID.
|
| 3 | .Class
Selects all elements which match with the given Class.
|
| 4 | Universal (*)
Selects all elements available in a DOM.
|
| 5 | Multiple Elements E, F, G
Selects the combined results of all the specified selectors E, F or G.
|
In my next tutorial post, i will be using series of examples to explain the above listed selectors in details.
Other Useful Selectors in jQuery
Similar to the above listed selectors, below is the list of other useful selectors in jQuery.
| Sr.No. | Selector & Description |
|---|---|
| 1 |
$('*')
This selector selects all elements in the document.
|
| 2 |
$("p > *")
This selector selects all elements that are children of a paragraph element.
|
| 3 |
$("#specialID")
This selector function gets the element with id="specialID".
|
| 4 |
$(".specialClass")
This selector gets all the elements that have the class of specialClass.
|
| 5 |
$("li:not(.myclass)")
Selects all elements matched by <li> that do not have class = "myclass".
|
| 6 |
$("a#specialID.specialClass")
This selector matches links with an id of specialID and a class of specialClass.
|
| 7 |
$("p a.specialClass")
This selector matches links with a class of specialClass declared within <p> elements.
|
| 8 |
$("ul li:first")
This selector gets only the first <li> element of the <ul>.
|
| 9 |
$("#container p")
Selects all elements matched by <p> that are descendants of an element that has an id of container.
|
| 10 |
$("li > ul")
Selects all elements matched by <ul> that are children of an element matched by <li>
|
| 11 |
$("strong + em")
Selects all elements matched by <em> that immediately follow a sibling element matched by <strong>.
|
| 12 |
$("p ~ ul")
Selects all elements matched by <ul> that follow a sibling element matched by <p>.
|
| 13 |
$("code, em, strong")
Selects all elements matched by <code> or <em> or <strong>.
|
| 14 |
$("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 myclass.
|
| 15 |
$(":empty")
Selects all elements that have no children.
|
| 16 |
$("p:empty")
Selects all elements matched by <p> that have no children.
|
| 17 |
$("div[p]")
Selects all elements matched by <div> that contain an element matched by <p>.
|
| 18 |
$("p[.myclass]")
Selects all elements matched by <p> that contain an element with a class of myclass.
|
| 19 |
$("a[@rel]")
Selects all elements matched by <a> that have a rel attribute.
|
| 20 |
$("input[@name = myname]")
Selects all elements matched by <input> that have a name value exactly equal to myname.
|
| 21 |
$("input[@name^=myname]")
Selects all elements matched by <input> that have a name value beginning with myname.
|
| 22 |
$("a[@rel$=self]")
Selects all elements matched by <a> that have rel attribute value ending with self.
|
| 23 |
$("a[@href*=domain.com]")
Selects all elements matched by <a> that have an href value containing domain.com.
|
| 24 |
$("li:even")
Selects all elements matched by <li> that have an even index value.
|
| 25 |
$("tr:odd")
Selects all elements matched by <tr> that have an odd index value.
|
| 26 |
$("li:first")
Selects the first <li> element.
|
| 27 |
$("li:last")
Selects the last <li> element.
|
| 28 |
$("li:visible")
Selects all elements matched by <li> that are visible.
|
| 29 |
$("li:hidden")
Selects all elements matched by <li> that are hidden.
|
| 30 |
$(":radio")
Selects all radio buttons in the form.
|
| 31 |
$(":checked")
Selects all checked box in the form.
|
| 32 |
$(":input")
Selects only form elements (input, select, textarea, button).
|
| 33 |
$(":text")
Selects only text elements (input[type = text]).
|
| 34 |
$("li:eq(2)")
Selects the third <li> element.
|
| 35 |
$("li:eq(4)")
Selects the fifth <li> element.
|
| 36 |
$("li:lt(2)")
Selects all elements matched by <li> element before the third one; in other words, the first two <li> elements.
|
| 37 |
$("p:lt(3)")
selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements.
|
| 38 |
$("li:gt(1)")
Selects all elements matched by <li> after the second one.
|
| 39 |
$("p:gt(2)")
Selects all elements matched by <p> after the third one.
|
| 40 |
$("div/p")
Selects all elements matched by <p> that are children of an element matched by <div>.
|
| 41 |
$("div//code")
Selects all elements matched by <code>that are descendants of an element matched by <div>.
|
| 42 |
$("//p//a")
Selects all elements matched by <a> that are descendants of an element matched by <p>
|
| 43 |
$("li:first-child")
Selects all elements matched by <li> that are the first child of their parent.
|
| 44 |
$("li:last-child")
Selects all elements matched by <li> that are the last child of their parent.
|
| 45 |
$(":parent")
Selects all elements that are the parent of another element, including text.
|
| 46 |
$("li:contains(second)")
Selects all elements matched by <li> that contain the text second.
|
You can make use of all the above selectors with HTML/XML elements in a generic way. For example if selector $("li:first") works for the <li> element, then selector $("p:first") would also work for the <p> element.
Alright guys! We have come to the end of this tutorial post on jQuery Selectors. In my next tutorial, i will be using few examples to explain some of the above listed selectors.
Thanks for reading and bye for now.
Alright guys! We have come to the end of this tutorial post on jQuery Selectors. In my next tutorial, i will be using few examples to explain some of the above listed selectors.
Thanks for reading and bye for now.