Hi Programmers!
Today we will be discussing and exploring jQuery! Have you ever heard of it? Whether you said yes or no, you have arrived at the right article because we will be going through the fundamentals of jQuery and deciding whether or not we should use it.
Let's get started.
Outline
We will be breaking jQuery down into a few components:
What is jQuery?
jQuery is a fast, small, feature-filled JavaScript library. It makes things like HTML manipulation, CSS manipulation and event handling simple and readable.
jQuery is used alongside JavaScript and can be downloaded from here OR you can include the script tag below in the head section of your application's HTML file:
<script src=”https://code.jquery.com/jquery-3.1.1.js”></script>
Notice how the source attribute has a .js extension!
Syntax
Here is the base formula for jQuery syntax:
$("selector").action()
- The $ represents access to jQuery.
- The selector finds a part of HTML either by class name, id or HTML element type.
- The action() is the action performed on the part of the HTML. Thus, the action() is a jQuery method.
Selectors
Like I mentioned previously, the selector finds a part of the HTML based on either class name, id or HTML element type.
Let's take a look at some examples:
$("div") // => selects all div elements
$(".menu") // => selects element with class name of "menu"
$("#header") // => selects element with id of "header"
$("form.search") // => selects <form> element with class name of "search"
$("p:first") // => selects the first <p> element
$(“div p”) => selects all <p> elements that are children of a <div> element
The main purpose of the selector is to retrieve an HTML element from the HTML file to be referenced or manipulated in the JavaScript file.
If you are familiar with JavaScript, then you may realize this is not too different than using document.querySelector() or document.getElementById(). If you realized this, good job! You are making connections and that is amazing.
Attributes
Since jQuery helps to manipulate both HTML and CSS, jQuery uses various methods to access attributes of an HTML element to make these changes.
The most common attributes we may see include href, src, class, styles, id etc. And using jQuery, we can add, remove or edit these attributes.
This is how we would go about adding a href attribute to an 'a' tag:
$("a").attr("href", "www.google.com")
a represents the 'a' tag; the selector.
-
.attr() is the method to set an attribute; it takes in two (2) parameters:
- the type of attribute
- the value of the attribute
"href" is the type of attribute and "www.google.com" is the value.
Now if we were to inspect our 'a' tag we would see something like this:
`<a href="www.google.com"></a>`
To remove an attribute, we can use removeAttr() which takes in the type of attribute as a parameter.
Let's put what we have learned so far together and try it out:
let x = `
<input id="input"
placeholder="search your saved items">
`
// add a class attribute
$("input").attr("class", "search")
// remove the id attribute
$("input").removeAttr("id")
Try this out in your console! What do you get? Something like this?
<input class="search" placeholder="search your saved items">
Cool! Now we know that a big part of jQuery is the ability to access attributes of a given HTML element to be able to manipulate HTML from our JavaScript file.
Methods
So far, we have seen some methods regarding the attributes of HTML elements. However, there are so many more to discover. Today let's go over a few:
The .html() method is used to retrieve OR change the content of the selected element, including the HTML markup.
The .text() method is used to retrieve OR change the text content of the selected element.
-
The .css() method can be used to get and set CSS properties.
- To set multiple CSS properties, the .css() method uses JSON syntax.
- Example: $(“p”).css({“color”:”red”, “font-size”:”16px”})
The .val() method allows us to get AND set the values of form fields, such as textboxes, dropdowns and inputs.
The .append() method inserts content at the end of the selected element(s).
The .prepend() method inserts content at the beginning of the selected element(s).
The .after() method inserts content with HTML markup after the selected element(s).
The .before() method inserts content before with HTML markup the selected element(s).
-
The .addClass() method adds a class to the element called on.
- When specifying multiple class names, separate them using spaces.
The .removeClass() method removes the class of the element called on.
The .toggleClass() method toggles between adding and removing classes from selected elements. If the specified class exists already, it is then removed. If the specified class does not exist, it is added.
The .width() and .height() methods can be used to get and set the width and height of HTML elements.
** I recommend you try a few of these on your own. Then, I recommend finding other methods used with jQuery and trying those as well. **
Should We Use jQuery?
Now, this may be a VERY simple and understated guide to jQuery, but it is important! We need to understand the base fundamentals of certain languages, libraries, packages... to best understand how to use them, why we use them AND if we should use them.
jQuery is a great library to use if you want to DRY your code and work on readability. It is also a great tool that shows the bridge between multiple files (.html, .css, .js), especially in beginner projects and applications.
However, with the introduction to and the heavy use of JavaScript frameworks such as ReactJS, Vue.js, and AngularJS, jQuery is not totally necessary anymore. Its syntax does not belong within the inner workings of these frameworks.
But let's beg the question: "Should we still use it?"
Yes, it is worth learning jQuery even in 2022: jQuery is used by many existing and efficiently-operating websites! While new web applications created this year may not utilize jQuery, jQuery was once one of the most widely used JavaScript libraries before the introduction to frameworks such as React, Angular and Vue.
Let's continue to learn, grow and teach as we continue on our personal journeys. 🤍🤍
Please feel free to leave comments, questions and suggestions below. And follow me for more content on JavaScript, ReactJS, HTML and CSS. 🤍🤍
Top comments (2)
Thank you Karson ! :):)