Tutorialspoint.dev

jQuery | :contains() Selector

The :contains() selector in jQuery is used to select elements containing the specified string.

Syntax:

$(":contains(text)")

Parameters: This selector contains single parameter text which is mandatory and used to specify the text to find.

Example 1: This example uses :contains() selector to select element.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery :contains() Selector</title>
        
      <script src=
      </script>
        
      <!-- Script to use :contains selector -->
      <script>
         $(document).ready(function(){
           $("h3:contains(is)").css("background-color", "green");
         });
      </script>
   </head>
     
   <body>
      <center>
         <h1 id="geeks1" style = "color:green;">GeeksForGeeks</h1>
         <h2 id="geeks2">jQuery :contains() Selector</h2>
         <h3>Who is your favourite Geek:</h3>
           
         <div id="choose">
             <h3>Geek 1</h3>
             <h3>Geek 2</h3>
             <h3>Geek 3</h3>
         </div>
      </center>
   </body>
</html>

Output:

Example 2: This example use :contains() selector to select element.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery :contains() Selector</title>
        
      <script src=
      </script>
        
      <!-- Script to use :contains selector -->
      <script>
         $(document).ready(function(){
           $("h3:contains(Geek)").css("background-color", "green");
         });
      </script>
   </head>
   <body>
      <center>
         <h1 id="geeks1" style = "color:green;">GeeksForGeeks</h1>
         <h2 id="geeks2">jQuery :contains() Selector</h2>
         <h3>Who is your favourite candidate:</h3>
           
         <div id="choose">
             <h3>Geek 1</h3>
             <h3>Geek 2</h3>
             <h3>Geek 3</h3>
         </div>
      </center>
   </body>
</html>

Output:



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter