How to select elements by attribute in jQuery ? - GeeksforGeeks

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
#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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     </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:
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
jQuery | ajax() Method
How to prevent Body from scrolling when a modal is opened using jQuery ?
How to get a DOM Element from a jQuery Selector ?
How to get the value in an input text box using jQuery ?
How to generate a simple popup using jQuery ?
Express.js express.Router() Function
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript