JQUERY - TYPES OF SELECTORS

Note : We have explained all the selecors below. You can click here to get the details of all the selectors.

Other than class, ID and element Selectors that we have seen in the previous tutorials, JQuery also provides you with wide variety of Selectors that helps you to manage your code effectively.

Say for example, we have the below HTML code,

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	<p> First Paragraph </p>
    	<p> Second Paragraph </p>
    	<p> Third Paragraph </p>
  	</body>
</html>

And in the above code, there are three elements,

<p> First Paragraph </p>
<p> Second Paragraph </p>
<p> Third Paragraph </p>

Now, we want to change the content of the first element.

<p> First Paragraph </p>

But the problem is, there is no class or id attributes for element. So, how can we access the content of the first element?

To solve this problem, JQuery provides with a selector called first followed by :. Let us modify the above code with JQuery.

Example :

<html>
    <head>
    	<title>My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	<p> First Paragraph </p>
    	<p> Second Paragraph </p>
    	<p> Third Paragraph </p>
 
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('p:first').text("My New First Paragraph");
            
      	</script>    
   </body>
</html>

Output :

So, if you see the above output, we got the output changed to My New First Paragraph.

It happened due to the p:first selector,

$('p:first').text("My New First Paragraph");

That selects the first element,

<p> First Paragraph </p>

Out of the the three elements,

<p> First Paragraph </p>
<p> Second Paragraph </p>
<p> Third Paragraph </p>

So, at first let us look at the widely used Selectors in JQuery :

Note : We have used some cool examples to explain each selector. Click on each selector to get the detail.

Selector	Example	Description
#id	$("#myId")	Used to select the element with id name myId
.class	$(".myClass")	Used to select all the elements with class name myClass
element	$("p")	Used to select all the <p> elements
:first	$("p:first")	Used to select the first <p> element
:last	$("p:last")	Used to select the last <p> element
:first-child	$("p:first-child")	Used to select the <p> elements, who are the first child of their parent
:last-child	$("p:last-child")	Used to select the <p> elements, who are the last child of their parent
*	$("*")	Used to select all the elements
:input	$(":input")	Used to select all the input elements
:empty	$("p:empty")	Used to select all the <p> elements that are empty
:has(selector)	$("div:has(p)")	Used to select all the <div> elements that has a <p> element

Now, let us look at the other selectors provided by JQuery.

It is not that JQuery just lets you select one class or just one element. But you can work with multiple classes or HTML elements.

Selector	Example	Description
.class,.class	$(".myClass1,.myClass2")	Used to select all the elements with class name 'myClass1' and 'myClass2'
element1,element2	$("div,p")	Used to select all the <div> and <p> elements

When we look at the DOM. We can see that there is a close Parent - Child relationship. And JQuery helps us deal with the Parent - Child relationship effortlessly.

Selector	Example	Description
:first-of-type	$("p:first-of-type")	Used to select the <p> elements, who are the first <p> type child of their parent
:last-of-type	$("p:last-of-type")	Used to select the <p> elements, who are the last <p> type child of their parent
:only-child	$("p:only-child ")	Used to select those <p> elements, who are the only child of their parent
:only-of-type	$("p:only-of-type")	Used to select the <p> elements, who are the only child of their parent of <p> type
:nth-child(n)	$("p:nth-child(3)")	Used to select the <p> elements, who are the 3rd child of their parent
:nth-last-child(n)	$("p:nth-last-child(3)")	Used to select the <p> elements, who are the 3rd child of their parent starting from the end
:nth-of-type(n)	$("p:nth-of-type(3)")	Used to select the <p> elements, who are the 3rd child of their parent of type <p>
:nth-last-of-type(n)	$("p:nth-last-of-type(3)")	Used to select the <p> elements, who are the 3rd child of their parent of type <p> from the end
:parent	$("p:parent")	Used to select the <p> elements, that are parent of some text or element
parent child	$("body p")	Used to select the <p> elements, who are the child of parent <body>
parent > child	$("body > p")	Used to select the <p> elements, that is the direct child of parent <body>

Just remember, HTML is a combination of elements and sometimes there are no parent child relationship. Even in such cases JQuery provides some cool selectors to deal with them.

Selector	Example	Description
:even	$("p:even")	Used to select all the even <p> elements
:odd	$("p:odd")	Used to select all the odd <p> elements
element ~ after	$("body ~ p")	Used to select all the <p> elements, who are just after <body>
element + after	$("body + p")	Used to select the <p> elements, who are just after <body>
:not(selector)	$("p:not(p:last)")	Used to select all the <p> elements, except the last element
:eq(index)	$("p:eq(0)")	Used to select the first <p> element.
:lt(number)	$("p:lt(2)")	Used to select the <p> elements, after skipping the last three <p> elements
:gt(number)	$("p:gt(2)")	Used to select the <p> elements, after skipping the first three <p> elements
:header	$(":header")	Used to select all the header elements i.e. <h1>, <h2> e.t.c.
:contains(text)	$("contains("World")")	Used to select all the elements that contains the text World
:visible	$(":visible")	Used to select all the elements that are not hidden
:hidden	$(":hidden")	Used to select all the hidden elements
:root	$(":root")	Used to select the document's root element

An HTML element can have an attribute, like a class or an id. And JQuery provides excellent selectors to deal with HTML attributes.

Selector	Example	Description
[attribute]	$("[class]")	Used to select all the elements with class attribute
[attribute=value]	$("[class="myClass"]")	Used to select all the elements with class name 'myClass'
[attribute$=value]	$("[class$="lass"]")	Used to select all the elements that ends with class name 'lass'
[attribute^=value]	$("[class^="my"]")	Used to select all the elements that begins with class name my
[attribute~=value]	$("[class~="myClass"]")	Used to select all the elements that contains a class name myClass
[attribute!=value]	$("[class!="myClass"]")	Used to select all the elements with class name not equals myClass
[attribute\|=value]	$("[class\|="my"]")	Used to select all the elements that begins with or equals to class name my
[attribute*=value]	$("[class*="yCla"]")	Used to select all the elements that contains a class name that has yCla

Last but not the least, comes the forms. And JQuery selectors comes handy to deal with HTML forms.

Selector	Example	Description
:text	$(":text")	Used to select all the input elements with type="text"
:password	$(":password")	Used to select all the input elements with type="password"
:checkbox	$(":checkbox")	Used to select all the input elements with type="checkbox"
:radio	$(":radio")	Used to select all the input elements with type="radio"
:checked	$(":checked")	Used to select all the input elements that are checked
:reset	$(":reset")	Used to select all the input elements with type="reset"
:button	$(":button")	Used to select all the input elements with type="button"
:submit	$(":submit")	Used to select all the input elements with type="submit"
:image	$(":image")	Used to select all the input elements with type="image"
:enabled	$(":enabled")	Used to select all the input elements that are enabled
:disabled	$(":disabled")	Used to select all the input elements that are disabled

❮❮ PREV NEXT ❯❯