jQuery - Then, Dequeue, and Descendants

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.

deferred.then()

The deferred.then() lets us add handlers that are called when the deferred object is resolved, rejected, or still in progress.

For example, we can write:

$.get("https://jsonplaceholder.typicode.com/posts/1")
  .then(
    function() {
      alert("$.get succeeded");
    },
    function() {
      alert("$.get failed!");
    }
  );

We make a request with $.get , which returns a deferred object.

Then we call then with the success callback as the first argument and the failure callback as the 2nd argument.

.delay()

The .delay() method sets a timer to delay the execution of subsequent items in the queue.

For example, if we have the following HTML:

<div id="foo"></div>

and CSS:

#foo {
  width: 200px;
  height: 200px;
  min-height: 100px;
  background-color: green
}

We can add a slide up effect, then show the fade-in effect after a delay by writing:

$("#foo").slideUp(300).delay(800).fadeIn(400);

delay(800) adds a 800ms delay.

.dequeue()

The .dequeue() method runs the next function on the queue with the matched elements.

For example, if we have the following HTML:

<button>Start</button>
<div></div>

and CSS:

div {
   margin: 3px;
   width: 50px;
   position: absolute;
   height: 50px;
   left: 10px;
   top: 30px;
   background-color: yellow;
 }

div.red {
   background-color: red;
}

We can make the div slide around and turn red by writing:

$("button").click(function() {
  $("div")
    .animate({
      left: "+=200px"
    }, 2000)
    .animate({
      top: "0px"
    }, 600)
    .queue(function() {
      $(this).toggleClass("red").dequeue();
    })
    .animate({
      left: "10px",
      top: "30px"
    }, 700);
});

In the queue callback, we call:

$(this).toggleClass("red").dequeue();

to add the red class on the div.

Descendant Selector

We can select all elements that are descendants of a given selector.

For example, if we have the following HTML:

<form>
  <div>Form is surrounded by the green border.</div>
  <label for="name">Child of form:</label>
  <input name="name" id="name">

  <fieldset>
    <label for="newsletter">Newsletter</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>

Then we can get the input elements in the form element by writing:

$("form input").css("border", "2px dotted blue");

.detach()

The .detach() remove the set of matched elements from the DOM.

For example, if we have the following HTML:

<p>Hello</p>
how are
<p>you?</p>
<button>Attach/detach paragraphs</button>

Then we can attach or detach the paragraphs when we click the button by writing:

let p;
$("button").click(function() {
  if (p) {
    p.appendTo("body");
    p = null;
  } else {
    p = $("p").detach();
  }
});

In the click handler, we check if there’s any p elements.

If there are any, then we call detach to remove them. The remove elements are returned by detach .

If there isn’t then we attach the p elements to the body and set p to null .

.die()

The die method removes event handlers previous attached using the live method.

For example, we can write:

$("p").die();

to unbind all event handlers bound to p elements.

We can also unbind only click event handlers by writing:

$("p").die('click');

Also, we can unbind a single event handler by writing:

const foo = function() {

};
$("p").live("click", foo);
$("p").die("click", foo);

We remove the foo click handler with the die method.

Conclusion

We can work with deferred objects with various methods.

Also, we can do various things with event handlers and descendant elements.