Home
Jquery Select By ID and Class
Blog Date 23 February 2022
The Code
<p>
In urna velit, eleifend at maximus non, tristique at elit. Nulla imperdiet nec purus ac volutpat. Praesent nec semper nibh. Mauris vestibulum euismod nunc a tristique. Nam vulputate interdum pellentesque. Pellentesque placerat turpis ut nunc mollis, ac vulputate tellus aliquet. Proin ut nulla ornare, hendrerit nunc eget, aliquam massa. Cras congue sem at suscipit efficitur.
</p>
<p class="MyClass">
Duis ac faucibus magna, eget pellentesque elit. Sed ut dui sodales mi vestibulum semper. Vestibulum eu pretium sapien, vitae tincidunt sapien. Proin sapien orci, ultricies vel diam sed, suscipit tincidunt erat. Nullam vitae lorem facilisis, dignissim sem eu, congue ipsum. In dictum sapien nunc, at elementum turpis vestibulum et. Aliquam tincidunt magna vel elit posuere, id lacinia tellus ultricies. Morbi convallis ante sit amet mi consectetur, non euismod nulla vestibulum. Donec sapien eros, facilisis in eleifend in, tristique nec nisi. Sed non fringilla felis. Morbi elementum tellus et volutpat sollicitudin. Integer ut justo ac justo condimentum vestibulum. Pellentesque luctus feugiat malesuada. Nullam lorem mauris, viverra a lectus non, sagittis lacinia erat.
</p>
<p id="MyID">
Integer metus tellus, blandit sed quam in, pulvinar volutpat leo. Quisque placerat nisi quam, at finibus dui sagittis ut. Duis aliquam odio odio, nec ultricies lectus hendrerit non. Nam luctus erat nulla. Morbi placerat sollicitudin pretium. Integer vel justo tellus. Nam vel sollicitudin arcu.
</p>
<button id="ShowID">Show Via ID</button>
<br />
<button id="HideID">Hide Via ID</button>
<br />
<button class="ShowClass">Show Via Class</button>
<br />
<button class="HideClass">Hide Via Class</button>
<script>
$(document).ready(function () {
$("#HideID").click(function () {
$("#MyID").hide()
})
$("#ShowID").click(function () {
$("#MyID").show()
})
$(".ShowClass").click(function () {
$(".MyClass").show()
})
$(".HideClass").click(function () {
$(".MyClass").hide()
})
})
</script>
The Explanation
Jquery is, as far as I can tell so far, aimed at overly experienced Javascript coders who can't be arsed typing things out longhand. Pffft. But it's here so we might as well use it.
We start out by adding this in the <head> section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Why? Because browsers don't speak Jquery that's why. So to use JQuery we have to get this script. The above is ONE EXAMPLE! You can check for yourself the latest versions available from a wide range of hosts. You can also download and host the script yourself... but why would you?
We have a paragraph class named "MyClass" and 2 buttons with class names of "ShowClass" and "HideClass". These are "found" by using the syntax
$(".ShowClass")
$(".HideClass")
$(".MyClass")
We also have a paragraph ID named "MyID" and 2 buttons with ID names of "ShowID" and "HideID". These are found by using the syntax
$("#ShowID")
$("#HideID")
$("#MyID")
Reader's Comments
Name
Comment
Add a RELEVANT link (not required)
Upload an image (not required)
Uploading...
Home