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:
This should yield the following:
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!
Top comments (1)
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