jQuery Basics

#jquery #javascript #beginners

JQuery is quite possibly the most popular JavaScript library out there, and provides a bunch of features still super useful for present day development. It is a lightweight JavaScript library, and its creator has given it the slogan of "write less, do more". The purpose of jQuery is to make it much easier to use JavaScript on websites. The library takes a lot of common tasks that used to require multiple lines of JavaScript code to accomplish, and wraps them into methods that you can easily call with a single line of code.

There are a couple of important steps that need to be taken in order to use jQuery on your website. The first step to take is to actually download the library and link your HTML page to it in a source tag. That should look a little similar to this.

<script src="https://code.jquery.com/jquery-3.3.1.js"</script>

Another thing that has to be done before you can start using jQuery is calling a document.ready function. All of your code will go inside of the function body. This will ensure that everything on the DOM is fully loaded before any jQuery methods will be invoked, since you wouldn't want to manipulate an element before it even loads on the page.

$(document).ready(function() {
    // All your jQuery will go here!
});

Selecting with jQuery

After the last two steps are competed, we can now start using jQuery! To begin, we use jQuery methods calling either jQuery() or just using the bling symbol, like $(). We access the DOM using mostly CSS syntax, and apply an action using one of the given two methods. The basic syntax for doing anything in jQuery is written like so $("selector").method();.

Selectors are essentially how we tell jQuery which elements we want to work on. Let's look at a few of the ways we can select elements.

// Select all image tags and add the class 'profilePic'
$("img").addClass("profilePic");
// Select all elements with the 'custom' class and change to green text
$(".custom").css("color", "green");
// Select all elements with the 'custom' id and set font size to 20px
$("#custom").css("font-size", "20px");
// Select all <a> tags inside of <li>'s and set font to bold
$("li a").css("font-weight","Bold");

For example, running $(“h1”) will select all of your your header 1 tags. You can manipulate DOM elements using css methods by simply using the css keyword. If you wanted to change all of the header elements to have blue font, you'd type $(“h1”).css("color", "blue");.

jQuery methods

After selecting the DOM element that you want to manipulate, the jQuery library has a ton of methods that you can use to work on them. The .css() method takes two parameters, the first one is the css property that you want to change, and the second is the change that you want to make. You can also add and remove classes using the .addClass() or .removeClass() methods. The .keypress() and .on() methods work as event handlers, and can trigger functions when certain events take place on the specified selectors. The .fadeOut() method will hide the matched elements by fading them to transparent, and the .slideUp() method will hide the matched elements with a siding motion. It can also make writing AJAX calls way easier than originally writing it with vanilla javascript.

In conclusion jQuery is a super easy library to use, especially if you already know javascript. Even though it is older in comparison to the newer frameworks coming out, it is still very much in demand, being implemented in more than 80% of websites that use javascript. It can do some of the same things as vanilla javascript in simple, easy to read one liners. Overall jQuery is a perfect beginner library to use that will help you to write less and do more.

Top comments (4)

Darkø Tasevski • Dec 2 '19

Michael Tharrington • Dec 4 '19

All the negativity piling up here is disappointing. If you don't have anything positive to say, why not just go read a different post. I don't see any benefit to leaving a snarky comment.

Appreciate you sharing this post, Ryan!