jQuery — Thenables and Keydown

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.

jQuery.ready

The jQuery.ready is a thenable object that resolves when the document is ready.

For example, we can write:

(async () => {
  const data = await $.when(
    $.getJSON("https://jsonplaceholder.typicode.com/posts/1"),
    $.ready
  )
  console.log(data);
})()

We call getJSON to get JSON data.

Then we call $.ready to wait for the document to be ready.

Then we get the data after both operations are done.

jQuery.readyException()

The jQuery.readyException method handles errors that are thrown synchronously in functions wrapped in jQuery.

For example, we can write:

jQuery.readyException = function(error) {
  console.error(error);
};

to pass the error object into the console.error method and log it.

jQuery.removeData()

The jQuery.removeData() method lets us remove data from an element.

For example, if we have:

<div></div>

Then we can use removeData to remove data from the div:

const div = $("div")[0];
jQuery.data(div, "test1", "value");
console.log(jQuery.data(div, "test1"))
jQuery.removeData(div, "test1");
console.log(jQuery.data(div, "test1"))

We get the div and then call jQuery.data to get the data.

Then we call removeData to remove the data.

So the first console log logs ‘value’ and the 2nd one logs undefined .

jQuery.support

The jQuery.support property has an object that shows what browser features are supported.

jQuery.uniqueSort()

The jQuery.uniqueSort() method sorts an array of DOM elements in place with the duplicates removed.

For example, if we have:

<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>

Then we can use it as follows:

let divs = $("div").get();
divs = divs.concat($(".dup").get());
console.log(divs.length)
divs = jQuery.uniqueSort(divs);
console.log(divs.length)

We get the divs. Then we add the divs with class dup into the divs element list.

Then we call uniqueSort to sort them and remove the duplicates.

Therefore, the first console log logs 8 and the 2nd one logs 5.

jQuery.when()

We can use the jQuery.when() method to run callback functions based on 0 or more thenable objects.

For example, we can write:

(async () => {
  const data = await $.when($.ajax("https://jsonplaceholder.typicode.com/posts"))
  console.log(data);
})()

to make a GET request and then log the data.

.keydown()

The .keydown() method lets us listen to the keydown event on an element.

For example, if we have:

<form>
  <input id="target" type="text" value="Hello there">
</form>
<div id="other">
  Trigger the handler
</div>

Then we can use it to listen to the keydown events on the input element by writing:

$("#target").keydown(function() {
  console.log("Handler for .keydown() called.");
});

We can also use it to trigger a keydown event on another element.

For example, if we have the same HTML, then we can write:

$("#target").keydown(function() {
  console.log("Handler for .keydown() called.");
});

$("#other").click(function() {
  $("#target").keydown();
});

to trigger the keydown event on the input when we click on the div with ID other .

Conclusion

We can run thenable code and then wait for the result with jQuery.

Also, we can listen or trigger keydown events.