jQuery Selectors

Selectors : Selecting Elements with jQuery

  • They are used to manipulate HTML elements as a group or a single element.
  • Selectors get the exact element/attribute from the HTML document.
  • The selectors always start with a dollar sign and parentheses: $().
  • It is also called as a factory function.
It uses one of the building blocks while selecting an html element:

Building blocks of $()Description
Tag NameRepresents a tag name available in DOM.
Example: $('p') will select all the paragraphs in the document.
Tag IDRepresents a tag ID available in DOM.
Example: $('#my-id') will select the single element in the document that has an ID of my-id.
Tag ClassRepresents a tag class available in DOM.
Example: $('.my-class') will select all the elements in the html document that has a class of my-class.
UniversalSelects all elements available in DOM.
Multiple Elements A,B,CSelects all the combined results of all the specified selectors A,B,C.

Example : Demonstrating the use of selector tags

<html>
<head>
<title> The Example </title>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">      </script>
<script type="text/javascript" language ="javascript">
$(document).ready(function()
{
     var para =$("p"); //tag name
     for(i=0; i<para.length; i++)
     {
          alert("Paragraph No: " +para[i].innerHTML);
     }
});
</script>
</head>
     <body>
          <div>
               <p class="myclass">First Para. </p><!--tag class-->
               <p id="myid">Second Para </p> <!--tag id-->
               <p> Third Para. </p> <!--tag name-->
          </div>
     </body>
</html>


Output:
By clicking on the 'OK' button you will get the next screen.

inner html 1

The following screen appears when the OK button is clicked and if we select the “Prevent this page from creating additional dialogs” the alert box will not appear.

inner html 2

Various types of Selectors

TypesDescription
$(“*”)Selects all elements.
$(“p”)Selects all the <p> paragraph elements.
$(“p>*”)Selects all the elements that are children of <p> element.
$(“.myclass”)Selects all elements with class= “myclass”.
$(“p.myclass”)Selects all paragraph <p> elements with class= “myclass”.
$(“p:not(.myclass)”)Selects all the <p> elements that do not have a class= “myclass”.
$(“p#myID.myclass”)This selector matches the paragraphs with an id of myID and a class of myClass.
$(“:empty”)Selects all the elements that have no children.
$(“p:empty”)Selects all <p> elements that have no children.
$(“:animated”)Selects all the elements that are animated currently.
$(“:button”)Selects all <button> and <input> elements of type=“button”.
$(“:even”)Selects all the even elements.
$(“li:even”)Selects all <li> elements that have an even index value.
$(“:odd”)Selects all the odd elements.
$(“p:visible”)Selects all the <p> elements that are visible.
$(“p:hidden”)Selects all the <p> elements that are hidden.
$(this)Selects the current HTML element.
$(“div[p]”)Selects all the elements matched by <div> that contain an element matched by <p>.
$(“p:first”)Selects the first <p> element.
$(“p#myID:first”)Selects the first <p> element with id= “myID”.
$(“#myID”)Selects the first element with id= “myID”.
$(“ul li:first-child”)Selects the first <li> element of every <ul>.
$(“[href]”)Selects all the elements with the href attribute.
$(“a[@rel]”)Selects all the elements matched by <a> that have a 'rel' attribute.
$(“input[@name=txtname]”)Selects all the elements matched by the <input> tag that have a name value exactly equal to the txtname.
$(“input[@name^=txt]”)Selects all the elements matched by the <input> tag that have a name value beginning with txt.
$(“[href='abc.asp]”)Selects all elements with an href value equal to “abc.asp”.
$(“[href!='abc.asp]”)Selects all elements with an href value NOT equal to “abc.asp”.
$(“div#myID.head”)Selects all elements with class = “head” inside a <div> element with id = “myID”.
▲