A Quick Guide To: jQuery

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 why any coder 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 more 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 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:
1. the type of attribute
2. the value of the attribute

In the example's case, "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 on 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 in a simpler way.

Methods

We have seen some methods regarding the attributes of HTML elements. However, there are so many more to discover. Today we will definitely 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. **

Recap

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 AND why we 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.

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

22

Catégories:

JavascriptCss

Tags:

JavascriptHtmlCssJquery