Skip to content
Related Articles

Related Articles

How to select elements by attribute in jQuery ?
  • Last Updated : 20 Sep, 2019

jQuery is a lightweight JavaScript library. In the vanilla JavaScript language, the getElementById method is used to select an element. However, jQuery provides a much lighter alternative for the same purpose. The ‘jQuery Selector’ allows the user to manipulate HTML elements and the data inside it(DOM manipulation).

Syntax

$("[attribute=value]")

Here, attribute and value are mandatory.

Some of the most commonly used jQuery selectors

SyntaxExampleSelection
*$(“*”)All elements on the webpage
#id$(“#geeks”)Elements with id=”geeks”.class$(“.geeks”)All elements with class=”geeks”:first$(“p:first”)First ‘p’ element of the webpage:header$(“:header”)All the header elements like h1, h2, h3, h4 etc:empty$(“:empty”)All the empty elements:input$(“:input”)All the input elements like text, password etc:text$(“:text”)Input elements with type=”text”:last-child$(“p:last-child”)Those ‘p’ elements that are the last child of their parents:animated$(“:animated”)All the animated elements on the webpage

#id Selector: The #id selector specifies an id for an element to be selected. It should not begin with a number and the id attribute must be unique within a document which means it can be used only one time.



Syntax:

$("#example")

The id selector must be used only when the user wants to find a unique element.

Example:




<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to select elements from
        attribute in jQuery ?
    </title>
      
    <script src=
    </script>
          
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("#para").hide();
            });
        });
    </script>
</head>
  
<body>
    <h2>GeeksforGeeks</h2>
   
    <p>This is a constant paragraph.</p>
      
    <p id="para">
        This paragraph will get hidden once
        the button is clicked.
    </p>
   
    <button>Click me</button>
</body>
  
</html>

Output:

  • Before Click on the Button:
  • After Click on the Button:

.class selector: The .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements.

$(".example")

Example:




<!DOCTYPE html>
<html>
      
<head>
    <script src=
    </script>
  
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $(".test").hide();
            });
        });
    </script>
</head>
  
<body>
    <h2 class="heading">GeeksForGeeks</h2>
   
    <p class="test">This is a paragraph.</p>
    <p class="test">This is another paragraph.</p>
   
    <button>Click me</button>
</body>
  
</html>

Output:

  • Before Click on the Button:
  • After Click on the Button:

:first Selector: It is a jQuery Selector that is used to select the first element of the specified type.

Syntax:

$(":first")

Example:




<!DOCTYPE html> 
<html
  
<head
    <title>jQuery :first selector</title>
      
    <script src
    </script
      
    <script
        $(document).ready(function() { 
            $("p:first").css( 
            "background-color", "green"); 
        }); 
    </script
</head
  
<body
    <h1>GeeksforGeeks</h1>
    <p>jQuery</p
    <p>JavaScript</p
    <p>PHP</p
</body
  
</html

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :