jQuery - Simplifying JavaScript for your convenience

What is jQuery?

jQuery is a JavaScript library designed to simplify the process of making completing common tasks by wrapping the many lines of JavaScript code it takes into a method that can be called with a single line of code. Such common tasks include HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript Development.

Selecting an Element with jQuery

When it comes to selecting elements, there are several ways to access them. Such methods are from an id, a class name, the tag name of the element itself, and accessing them with CSS selectors. When accessing an element from a CSS selector, you are essentially picking the element using either an id, class name, type, attribute, or value of attribute.

//Selecting elements by their tag name

const element = document.getElementsByTagName("p");

//Selecting an element by an id

const idElement = document.getElementById("identify");

//Selecting elements by a class

const classElement = document.getElementsByClassName("classification");

//selecting elements with CSS Selectors

const x = document.querySelectorAll("p.classification");

As you can see from the code above, selecting elements using JavaScript required typing out a long method just to access them. With jQuery selecting an element becomes easier to both type out and read.

//Accessing all the paragraph elements using jQuery

$("p");

//accessing the id of an element using jQuery

$("#identity");

//accessing the elements' class using jQuery

$(".test");

The code above uses jQuery selectors to find the elements based on either their name, id, classes, types, attributes, or values of attributes. The jQuery selectors are based off the CSS selectors.

Manipulating an Element with jQuery

Now that we have learned how to select elements with jQuery, its time we learned how to modify them. With it comes to editing an element with JavaScript, you often have to start off by declaring a variable equal to the selected elements and then use a separate method to make changes.

//Accessing the paragraph elements using JavaScript methods

const element = document.getElementsByTagName("p");

//Adding text to the paragraph elements

element.textContent = "Hello World";

With jQuery it becomes easier to make changes to an element while also selecting that element at the same time. This makes it simpler to set up event listeners on the desired elements.

//Adding text to the paragraph elements using jQuery

$("p").text("Hello World");



//Adding a click event to the paragraph elements

$("p").click(function(){

console.log("You clicked me");

});

Using jQuery I was able to add text to the paragraph elements with very little code. I was even able to apply a click event to the paragraph elements afterwards with a little more code.

Creating an element using jQuery

We have looked at selecting an element and manipulating an element, but what about creating an element? When creating an element with JavaScript, you have to declare the element being created, add values to it, and then append it to the document.

//declaring a paragraph element

const paragraph = document.createElement("p");

//adding text to the paragraph element

paragraph.innerText = "Text added to paragraph";

//appending the paragraph element to the body

document.body.appendChild(paragraph);

If we create an element with jQuery, we can add text right when we create it, saving us a line of code that can be used later.

//declare a paragraph element using jQuery

const para = $("<p></p>").text("Hello there!");

//appending the paragraph element

$("body").append(para);

When creating an element with jQuery you can also attach an id or class to the element that can be called later.

//create a paragraph tag with an id

const idPara = $("<p id="identification"></p>")

//create a paragraph tag with a class

const classPara = $("<p class="classify"></p>");

Sources