Getting Started with jQuery

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

Adding jQuery

We can add jQuery by adding a script tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

We can also install the jquery package by running:

npm install jquery

with NPM or:

yarn add jquery

Also, we can install it with Bower:

bower install jquery

After installing it, we can start using it.

.add()

The .add() method lets us get a child element from a parent.

For example, if we have:

<p>
  <div>
    foo
  </div>
</p>

Then we call:

$("p").add("div").addClass("widget");

to get the div that’s inside the p element.

Then we call addClass to add a class to the div inside the p element.

.addBack()

The .addBack() method lets us get the child elements from the parent element.

For example, if we have the following HTML:

<div class="after-addback">
  <p>First Paragraph</p>
  <p>Second Paragraph</p>
</div>

and the following CSS:

.background {
  background: yellow;
}

Then we get the p elements in the div .

Then we use addBack to get the div again.

And finally, we call addClass to add the background class.

.addClass()

The .addClass() method lets us add one or more classes to an element.

For example, we can write:

$("p").addClass("myClass yourClass");

to add the myClass and yourClass classes to the p element.

.after()

The .after() method inserts content after each element in the set of matched elements.

For example, if we have the following HTML:

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

Then we get the item with the inner class and add the HTML TO it by writing:

$(".inner").after("<p>Test</p>");

.ajaxComplete()

The .ajaxComplete() lets us add a callback that’s called when the Ajax request is completed.

For example, we can write:

$(document).ajaxComplete(function(event, xhr, settings) {
  console.log(event, xhr, settings)
});

$.ajax({
  url: "https://yesno.wtf/api",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});

We called ajaxComplete with the callback that’s called when we make a request with $.ajax .

Then we call $.ajax to make the Ajax request.

settings has the url property with the request URL.

The settings.type property has the request method name.

xhr has the XHR object. The readyState property has the ready state.

.ajaxError()

The .ajaxError() method lets us add a callback that’s called when there’s an error.

For example, we can use it by writing:

$(document).ajaxError(function(event, xhr, settings, thrownError) {
  console.log(event, xhr, settings, thrownError)
});

$.ajax({
  url: "bad-url",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});

We have an invalid URL set as the value of the url property.

Then the ajaxError callback will be called.

It has the thrownError parameter which isn’t in the ajaxComplete callback.

.ajaxSend()

The ajaxSend method lets us add a callback that’s called when the request is sent.

For example, we can write:

$(document).ajaxSend(function(event, xhr, settings) {
  console.log(event, xhr, settings)
});

$.ajax({
  url: "https://yesno.wtf/api",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});

We have the same callback as the other ajax methods.

And the content is the same.

Conclusion

We can add jQuery and call its methods Ajax methods to listen to HTTP requests.

Also, we can use the add and addBack methods to get elements.