DEV Community

Simon Pfeiffer for Codesphere Inc.

Posted on • Edited on

10 2

The Beginner’s Guide to JQuery

With all the talk of the hottest new Javascript libraries and frameworks, it seems the most important and most popular one often gets swept under the rug. I’m talking of course about JQuery

In fact, with JQuery being used in 73% of the top 10 Million sites, it is arguably more important for you to learn than React, Angular, Vue, Svelte, or any of the other 20 frameworks you’re being told are essential for web development.

Lucky for you, getting started working with JQuery is an easy feat. Today, we’re going to build a simple webpage with JQuery that can interact with the DOM dynamically.

But what actually is JQuery?

JQuery is a lightweight and concise library to manipulate the DOM(AKA the elements on your HTML page). While libraries like React will use Javascript to inject HTML, JQuery allows your Javascript to live independently from your HTML.

To use JQuery to give life to an HTML element, you write a query from your javascript file to access a certain element and then can use Javascript to assign events, change styling, or change content.


What we’ll be making

We’ll be making a simple webpage that takes a text input, button input, and uses p tags to allow the user to square a number. Our JQuery will first attach a button event to the button, then read the input, and then update the content and styling of the p tags accordingly.

The Code(Yep this is literally all it takes)

Check out the following code:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
<input id = "numInp"></input>
<button>Calculate Square</button>
<p class = "output">Enter a number</p>
</body>
<script>
// We want to wait for the document to be ready before running any queries
$(document).ready(() => {
// Query Button and add click event
$("button").click(() => {
// Pull input and square it
let num = $("#numInp").val()
let square = num * num
// If it is an invalid number give error message, else display square
if(isNaN(num)) {
$(".output").css('color', 'red')
$(".output").html("Invalid Input: " + num)
}else {
$(".output").css('color', 'black')
$(".output").html(num + " times " + num + " = " + square)
}
})
})
</script>
</html>
view raw JQDemo.html hosted with ❤ by GitHub

This should yield the following:

Image description

Note the following:

  • We have to import JQuery to our webpage(I used a CDN)
  • All JQuery that we want to run after the page loads in we nest within “$(document).ready()”
  • We write queries with a dollar sign, followed by what we are accessing. In this example, we’ve queried tags by their element name, class name, and id name. All of these are valid
  • We used .click() to add a click event, and then passed in a function that we want to run when our button is clicked
  • .val() gave us the input value from our input tag
  • .css() allowed us to edit a style attribute for a tag
  • .html() allowed us to inject text. Note that this function edits the HTML between the queried tags — Which means we could pass in additional tags, but for simplicity, we just added text

Next Steps

If you can build your project with just some static HTML and JQuery — You probably should. High-level libraries like React and Angular tend to be overkill for a lot of the projects they are used for. While this may feel harmless, the reality is that it makes it more computationally expensive for your users to visit the web, and adds a general unnecessary computational burden to the internet

Additionally, most high-level libraries have a relatively limited life space — They might cease to be supported within a couple of years. In contrast, JQuery has been a staple of javascript development for the past 15 years and it is showing no signs of letting up.

Anyway, when you’re ready to deploy your webpage, but want to avoid the headache, look no further than Codesphere, the world’s most intuitive cloud provider.

Until next time, happy coding!

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (1)

Collapse
 
dannyengelman profile image
Danny Engelman

To be fair, we have to make the comparison NOT using a HUGE jQuery library.
Below code works in all Browsers since IE started supporting querySelector

... in 2011

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay