Is JQuery Still Relevant For 2023?

As someone who has been studying front-end development for less than a year, I have mostly been exposed to JS and React. However, when I tried to teach myself jQuery, I found that there were not as many new resources available compared to a few years ago. Additionally, many developers in the community suggest that learning jQuery is not as useful since its overall logic is different from the popular frameworks like React, Vue.js, and Angular that have gained popularity in recent years.

The situation that I encountered triggered me to consider whether jQuery is still relevant for 2023. After reading through various articles and posts, I discovered that this topic is quite controversial. People who do not recommend studying jQuery often cite the following reasons:

• Most companies are currently using React.js and Vue.js to build their websites, so learning jQuery might not help you become more competitive in terms of job opportunities.
• If used for complex websites, jQuery can be hard to maintain since it changes the DOM directly. This can lead to issues like memory leaks and poor performance.

On the other hand, many people still encourage beginners to learn jQuery because it can be helpful in understanding the DOM. It is still widely used in many legacy web applications and remains compatible with other frameworks like Bootstrap and Vue.js. Ultimately, it can be difficult to decide whether or not to use jQuery, as the choice of tools will depend on a developer’s specific needs and goals.

Personally, I found that the process of learning jQuery was relatively easy and helped me to better understand the concept of the DOM. If you’re interested in learning jQuery quickly, you can continue reading and try some basic syntax. By dedicating just 10 minutes to learning the basics of jQuery, you can gain valuable insights into how it can simplify your front-end web development process.

What & Why jQuery

jQuery is a Javascript library that makes code writing easier. You can use it to perform common web development tasks, such as selecting and manipulating HTML elements, handling events, and making AJAX requests to the server (jQuery, n.d.).

How to use jQuery?

• Download jQuery using npm: npm install jquery
• Insert this into your HTML head:

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

jQuery Syntax vs. JavaScript Syntax

jQuery uses a dollar sign ($) to represent the jQuery object, which can select and manipulate HTML elements.

// Javascript
document.querySelector('#button').addEventListener("clicked", () => {
 alert("Button clicked!");
}

//jQuery
$("#button").on("click", () => {
 alert("Button clicked!");
} )

Effects & Animations

• animate(): You can create custom animations using this method. It takes CSS properties and the duration as parameters (jQuery, n.d.).

// If there is a box on the website with a width of 300px and a height of 180px
// this can animate the box to enlarge to 500x300px in one second.

$("#box").on("click", () => {
 $("#box").animate({
  width: '500px',            //CSS
  height: '300px'            //CSS
 }, 1000);                  //Duration
})

• fadeIn(), fadeOut(): These methods can create fade-in or fade-out effect.
• fadeToggle(): Toggles between the fadeIn() and fadeOut() methods (W3Schools., n.d.).

const fadeTrigger = false;

$("button").on("click", () => {
 if (!fadeTrigger) {
   $("div").fadeIn(1000);
   fadeTrigger = true;
 }
 else if (fadeTrigger){
   $("div").fadeOut(1000);
   fadeTrigger = false;
 }
});

// Or we can use fadeToggle(), which is much easier
$("button").on("click", () => {
        $("div").fadeToggle();
});

jQuery ajax()

ajax(): perform an AJAX (asynchronous HTTP) request (W3Schools., n.d.).

Need to specify:

• URL to which the request is sent
• The type of request (e.g. GET or POST)
• Any data that needs to be sent along with the request

// if you remember the getYesNo function we did in practice midterm 2.
// This is an example using jQuery .ajax to write the same function

const getYesNos = () => {
    $.ajax({
      url: 'https://yesno.wtf/api',
      method: 'GET',
      dataType: 'json',
      success: (json) => {
        setYesOrNo(json);
        if (json.answer === 'yes') {
          setYesCount(yesCount + 1)
        }
        if (json.answer === 'no') {
          setNoCount(noCount + 1)
        }
      }
    });
  }

Checkout this code sample to see learn more about how to apply these basic syntaxs!

Works Cited

jQuery. (n.d.). Home. Retrieved from https://jquery.com/

W3Schools. (n.d.). jQuery fadeToggle() Method. Retrieved March 31, 2023, from https://www.w3schools.com/jquery/eff_fadetoggle.asp