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 | $(“#Beginner”) | Elements with id=”Beginner” |
.class | $(“.Beginner”) | All elements with class=”Beginner” |
: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 = "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 >w3wiki</ 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" >w3wiki</ 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 >w3wiki</ h1 > < p >jQuery</ p > < p >JavaScript</ p > < p >PHP</ p > </ body > </ html > |
Output:
Contact Us