How to select elements by attribute in jQuery ?
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
Syntax |
Example |
Selection |
* |
$(“*”) |
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:
Last Updated :
20 Sep, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...