jQuery Tutorial

jQuery Selectors

What is jQuery selectors ?

jQuery selectors are used to find one or more HTML element(s) based on their name, id, class, type, attributes, attribute values and etc.
jQuery Selectors start with dollar sign and parentheses: $().
We can perform required operations on selected element(s) once an element(s) are selected.

HTML Element Selector

jQuery element selector finds html elements using element name.

$("div")

HTML Element Selector Example

insert html content "welcome to 'jQuery'!" in HTML body element.

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        $(document).ready(function(){
         $("body").html("welcome to 'jQuery'!");
        });
      </script>		
   </head>	
   <body></body>
</html>

Output:

Adding css style backgroud color and color for all div elements in html document.

One div element in HTML document

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        $(document).ready(function(){
         $("div").css("background-color", "blue");
         $("div").css("color", "white");
        });
      </script>		
   </head>	
   <body><div>This is main div content.</div></body>
</html>

Output:

Multiple div element in HTML document

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        $(document).ready(function(){
         $("div").css("background-color", "blue");
         $("div").css("color", "white");
        });
      </script>		
   </head>	
   <body>
     <div>This is first div content.</div>
     <br/>  
     <div>This is second div content.</div>
   </body>
</html>

Output:

jQuery id Selector

jQuery element selector finds html elements using html element id.

$("#id")
$('#id')

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        $(document).ready(function(){
         $("#divFirst").css("text-decoration", "line-through");
         $("#divFirst").css("color", "brown");
        });
      </script>		
   </head>	
   <body>
     <div id="divFirst">This is first div content.</div>
     <br/>  
     <div>This is second div content.</div>
   </body>
</html>

Output:

Alternate way of using id selector

       $(document).ready(function(){
         $("[id=divFirst]").css("text-decoration", "line-through");
         $("[id=divFirst]").css("color", "brown");
        });

Find html elements using partial html element id either starts with or ends with string

        $(document).ready(function(){
         // Finds element using starting with 'divF' string
         $("[id^=divF]").css("text-decoration", "line-through");
         // Finds element using ending with 'First' string
         $("[id$=First]").css("color", "brown");
        });

Applies style only to first matching html element:

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        $(document).ready(function(){
         $("#first").css("text-decoration", "line-through");
         $("#first").css("color", "brown");
        });
      </script>		
   </head>	
   <body>
     <div id="first">This is first div content.</div>
     <br/>  
     <div>This is second div content.</div>
  <p id="first">This is paragraph content.</p>
   </body>
</html>

Output:

Different HTML elements but same id

We can use html element name with id in jQuery selector.

        $(document).ready(function(){
         // applies style to p element with id as 'first'
         $("p[id=first]").css("text-decoration", "line-through");
         $("p[id=first]").css("color", "brown");
        });

Output:

jQuery Class Selectors

jQuery class selector finds html elements with class name.

$(".class-name")

jQuery Class Selector Example

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        $(document).ready(function(){
         $(".text-content").css("text-decoration", "line-through");
         $(".text-content").css("color", "brown");
        });
      </script>		
   </head>	
   <body>
     <div>This is first div content.</div>
     <br/>  
     <div>This is second div content.</div>
  <p class="text-content">This is paragraph content.</p>
   </body>
</html>

Output:

jQuery Class Selector with element name

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        $(document).ready(function(){
         $("div.text-content").css("text-decoration", "line-through");
         $("div.text-content").css("color", "brown");
        });
      </script>		
   </head>	
   <body>
     <div class="text-content">This is first div content.</div>
     <br/>  
     <div>This is second div content.</div>
  <p class="text-content">This is paragraph content.</p>
   </body>
</html>

Output:

All html elements selector

Applies css styles to all html elements in the HTML document.

        $(document).ready(function(){
         $("*").css("text-decoration", "line-through");
         $("*").css("color", "brown");
        });

jQuery this selector

$(this)

Applies css styles to 'p' html element on clicking in HTML document.

        $(document).ready(function(){
          $("p").click(function(){
           $(this).css("text-decoration", "line-through");
           $(this).css("color", "brown");
	  });
        });

jQuery first element selector

Finds first div element in HTML document for manipulation.

$("div:first")

Selects first matching div element in html document

        $(document).ready(function(){
           $("div:first").css("text-decoration", "line-through");
           $("div:first").css("color", "brown");
        });

First matching li element of first ul element selector

$("ul li:first")

Selects first matching li element of first matching ul element.

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        $(document).ready(function(){
           $("ul li:first").css("text-decoration", "line-through");
           $("ul li:first").css("color", "brown");
        });

      </script>		
   </head>	
   <body>
   <ul>
    <li>This is first line in first ul content.</li>
    <li>This is second line in first ul content.</li>
   </ul>
   <ul>
    <li>This is first line in second ul content.</li>
    <li>This is second line in second ul content.</li>
   </ul>
   </body>
</html>

Output:

First li element of all ul element selector

$("ul li:first-child")

Selects first matching li element of all ul element in html document.

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        $(document).ready(function(){
           $("ul li:first-child").css("text-decoration", "line-through");
           $("ul li:first-child").css("color", "brown");
        });

      </script>		
   </head>	
   <body>
   <ul>
    <li>This is first line in first ul content.</li>
    <li>This is second line in first ul content.</li>
   </ul>
   <ul>
    <li>This is first line in second ul content.</li>
    <li>This is second line in second ul content.</li>
   </ul>
   </body>
</html>

Output:

Selects all elements which are having href attribute

$("[href]")

Selects all button elements

$(":button")

Selects all element based on property value codition

$("a[target='_blank']")	
$("a[target!='_blank']")

HTML table row odd or even selectors

$("tr:even")
$("tr:odd")

« Previous Next »

jQuery Programming Examples

Simple Filter HTML Table Rows in jquery

jQuery ui datepicker with disabled date ranges

jQuery ui datepicker change event to submit the form

Getting screen coordinates in jQuery

Getting mouse positions in jQuery

Getting pressed key code in jQuery

Getting multiple elements using tag, id and class in jQuery

Checking element tag in jQuery

Getting element by index in jQuery

Highlights the odd and even rows in different colors in jQuery

Simple Filter HTML Paragraph Tags in jquery

Enable / disable HTML input fields in jQuery

Remove leading and trailing space in text of HTML element using jQuery

jQuery Adding HTML Table Row Dynamically

jQuery Deleting HTML Table Row Dynamically

jQuery Deleting Selected Multiple HTML Table Rows

jQuery Getting Selected Checkbox Values

Update page title using jquery

print objects

jQuery Tutorial