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:
jquery 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:
jquery 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 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:
jquery 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:
jquery 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 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 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:
jquery 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:
jquery 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:
jquery 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")

Java Programming Examples

GCD and Rational Number Java Program

Java Queue Program using exception

Java Stack Program using exception

Addition of three integers java program

Biggest of three integers java program

Fibonacci numbers java program

Arithmetic Operations Menu java program

Second Smallest Element In Array Java Program

Transpose Of A Matrix Java Program

Java Program to Display triangle of stars (*)

Java Programming Prints Product Tables

Java Program to Display triangle of numbers

Java Programming Gets Current Date

Java Programming Finds Character Vowel or Consonent

Java Programming HCF and LCM Computation

Java Programming Sum of Command Line Integer Arguments

Java Programming Multiplication of Command Line Integer Arguments

Java Programming Multiplication of Command Line Floating Point Numeric Arguments

Java Programming String Contains or Not

Java Programming Gets Grade Description using Switch

Java Programming CSV File Reader

Java Programming Character Frequency Count in String using for each

Java Programming Finds Min from Integer Array by Passing Array to Method

Java Programming Linear Search

Java Programming Binary Search

Java Programming Ternary Search

Java Programming Generates Range of Numbers

Java Programming Generates Range of Characters

Java Programming Computes Square Root Value

Java Programming Checks Number is Positive or Negative

Java Programming Checks Number is Odd or Even

Java Programming Computes Plot Area

Java Programming Convert Number of Days into Years

Java Programming Checks a Year is Leap Year, Century Year or Not

Java Programming Checks a Character is Digit, Letter or neither digit nor letter

Java Programming Checks a Number is Palindrome or not

Java Programming Sum of Two Matrix

Java Programming Power Computation

Java Programming Checks Number is an Armstrong Number or not

Java Programming Temperature Unit Conversions

Java Programming Generates Random Numbers in Specified Range

Java Programming Computes Sum of Digits and Product of Digits

Java Programming Computes Reverse Number

Java Programming Computes Factorial Value

Java Programming Checks Prime Number or not

Java Programming Computes Harmonic Series

Java Programming Generates Floyd's Triangle

Java Programming Reverses String

Java Programming Checks Palindrome String or not

Java Programming Opens Notepad

Java Programming Searches String using RegEx Pattern

Java Programming Searches Word in String

Java Programming Gets System Environment Variables

Java Programming Gets IP Address of Server Name

Java Programming Arrays Sort and Reverse using sort method

Java Programming Bubble Sorting

Java Programming Selection Sorting

Java Programming Insertion Sorting

Java Programming Merge Sorting

Java Programming Quick Sorting

Java Programming Counting Sort

Java Programming Radix Sorting

Java Programming Sorting Array of Strings

Java Programming String Characters Sorting

Java Programming Sum of First N Numbers

Java Programming Product of First N Numbers

Python installation

Privacy Policy  |  Copyright@2017 - All Rights Reserved.  |  Contact us   |  Report website issues in Github   |  Facebook page   |  Google+ page

Free online programming tutorials

Email Facebook Google LinkedIn Twitter
^