빠른 가이드: jQuery

jQuery is a fast, small, feature-filled JavaScript library. It makes things like HTML manipulation, CSS manipulation and event handling simple and readable.

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.

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.

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")

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. **

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. 🤍🤍