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?
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
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
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
... in 2011