jQuery Selector Multiple Classes
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Pragati
In this article we will show you the solution of jQuery selector multiple classes, here we are going to show you example to achieving result with the help of jquery and css() method.
As we know how to specify selector in jquery you need to specify selector more than one with comma then css() method is appended with selectors to apply some style for user clarification. Applying style and specifying selector is your choice.
Step By Step Guide On jQuery Selector Multiple Classes :-
Here we defined html block with heading tag, three paragraph element with different attributes with different texts and button Click Me help you to load major part of code.
In script block we defined ready() method which is automatically starts loading code of within that click() function defined to load main process after button click.
You need to specify multiple selectors then append them with css method. It contain some style to clarify users.
<!DOCTYPE html>
<html>
<head>
<title>Selector Multiple Classes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".intro, .demo, #ph").css("color","red");
})
});
</script>
</head>
<body>
<h2>Welcome To Homepage</h2>
<p class="intro">This is first paragraph</p>
<p class="demo">This is second paragraph</p>
<p id="ph">This is third paragraph</p>
<button>Click Me</button>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() function then click() method defined with button tag by name where we need to define selectors ‘intro, demo, ph’. Those are p elements class and id values, you can specify any type of selector with comma but apply css style is same for all.
- Here we sets all paragraph elements text color to ‘red’ by using css() method.
- In html block we defined h2 tag with text ‘Welcome To Homepage’, three paragraph element with texts ‘This is first paragraph, This is second paragraph, This is third paragraph’, and finally button ‘Click Me’.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how specify multiple selector in jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes in document without any error.
When we executes this program on browser we can see heading ‘Welcome To Homepage’, three paragraph element text ‘This is first paragraph, This is second paragraph, This is third paragraph’ and button ‘Click Me’ now user needs to click on it then we can see paragraph element text color changed to red on webpage.
I hope this article on jQuery selector multiple classes helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
