If you have been reading any of my blogs, you probably are catching on(or will) the theme of my love for Javascript. Yes, I do know other languages but Javascript is my favorite, hands down, deal with it!
But this blog is not about wether Javascript or Python or Java is better than the other. Today we are talking about JQuery.
While in bootcamp, we started off learning Vanilla Javascript.(Which is the best way to start in my opinion.) But once I graduated, I began to build my own projects and then I spent time teaching/tutoring kids to code. It was then I discovered JQuery. Here’ s what you need to know to start using JQuery TODAY!
Soooooo what’ s JQuery:
- It’s a library for Javascript.
- It gives you the ability to write shorter lines of code without compromising functionality.
- JQuery has a few different libraries to meet your needs such as JQuery, JQueryUI, & JQueryMobile.
How do I add it to my project?
There are a few ways to incorporate JQuery into your project. You can download it locally or you can use a CDN that supports JQuery. If you are just wanting to hit the ground running and play around with it I’d recommend the CDN option.
Here’s one from the Google CDN:
And here’s another from Microsoft CDN:
- * While I’m sure there are some differences between the two CDNs, for the purposes of testing (and this article) I’ll be using the Google version.
(Here is a Stack Overflow answer to the differences between the two 👉🏿 Click Me. )
The script tags with the url for JQuery will go in between the head tags of your html document like this:
After that…..It’s game time Let’s Gooooo! Let’s start coding!
So if you are a user of Javascript, then you are familiar with document.getElementById().
This line of code will take an element(which is a tag) based on the value given to the id. Then, we cann decide what we want to do with that particular tag. We can change the content inside of it OR simply grab the content inside of it and store it in a variable.
Annnnnnd if you are a user of Javascript you have also ran into the typos of using document.getElementbyID(). 😩😩😩😩😩😩😩😩😩😩😩😩😩😩😩😩
Well that’s where JQuery can save the day!!!! Let’s take a look……
If you take a look at the code above, line 19 & line 20 look very different in syntax and length but they are doing the EXACT SAME THING!!!
We are manipulating both h3 tags but I think we can all agree that line 20 is easier to understand and shorter to write. Also, on line 20 we use a method called .text() to add the content to the h3 tag with the id of “guac”.
When using JQuery, you can you this syntax $( ), to grab tags by their name, id value or class value. This is often referred to as the “JQuery Selector”. The one thing to remember is that when we are using the selector we have to specify if the name is an id or a class using the # or the . notation.
Example:
- $(‘#idname’)
- $(‘.classname’)
- $(‘tagname’)
***(Psst….Don’t forget to wrap them in quotes! Very important!)
Along with JQuery ,there are special methods that you get access to like .hide(), .show(), .play(), .pause(), .text(). Just to name a few. And we can attach these methods to the JQuery Selector using the . notation.
And for my last act(demonstration) I’m going to make the h1 tag contents disappear…
Again, using that handy shortcut, the JQuery selector, we were able to hide the h1 tag by simply referring to the name of the tag inside of the selector (wrapped in quotes)and then adding on the .hide() method.
There are waaaaay more golden nuggets and really cool reasons to use JQuery (Other than tossing the “document.getElementById()”out the window) that we won’t cover here just to keep this blog short.
***But I will in the future!
Hopefully this gives you a reason to give JQuery a shot for your own projects.Until next time….Happy coding Ya’ll 😜!
