jQuery — Queues and Serialized Data

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.merge()

The jQuery.merge() method merges the contents of 2 arrays together into the first array.

For example, we can use it by writing:

const arr = $.merge([0, 1, 2], [2, 3, 4])
console.log(arr);

Then arr is:

[0, 1, 2, 2, 3, 4]

jQuery.noConflict()

The jQuery.noConflict() method relinquishes jQuery’s control of the $ variables.

We can use it by writing:

jQuery.noConflict();
jQuery( "div p" ).hide();

We call noConflict .

Then we can invoke jQuery with jQuery instead of $ .

jQuery.noop()

The jQuery.noop() method returns an empty function.

jQuery.param()

The jQuery.param() method converts an object’s key-value pairs into a query string.

For example, we can write:

const params = {
  width: 1680,
  height: 1050
};
const str = jQuery.param(params);
console.log(str)

Then str is ‘width=1680&height=1050’ .

jQuery.parseHTML()

The jQuery.parseHTML() method lets us parse a string into an array of DOM nodes.

For example, if we have:

<div id="log">
  <h3>Content:</h3>
</div>

Then we can append the parsed HTML into the div with ID log by writing:

const str = "hello, <b>my name is</b> jQuery.";
const html = $.parseHTML(str);
$("#log").append(html);

We parse the HTML string with $.parseHTML and then call append to append the item.

jQuery.parseJSON()

We can parse JSON string into an object with the jQuery.parseJSON() the method.

For example, if we have:

const obj = jQuery.parseJSON('{ "name": "John" }');
console.log(obj.name === "John");

Then we parse the string into the obj object.

The obj.name value is 'John' .

So the console log logs true .

jQuery.parseXML()

The jQuery.parseXML() method lets us parse XML into an object.

For example, we can use it by writing:

const xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>",
  xmlDoc = $.parseXML(xml),
  $xml = $(xmlDoc),
  title = $xml.find("title");
console.log(title.text())

We call parseXML with the XML string.

Then we put that into the $ function so that we can call find to find the element we want.

Then we can get the text of the matched element with the text method.

jQuery.post()

The jQuery.post() method lets us make a POST request to a given URL.

For example, we can write:

const jqxhr = $.post("https://jsonplaceholder.typicode.com/posts", {
    title: "title",
    body: "body"
  }, function() {
    console.log("success");
  }, "json")
  .done(function() {
    console.log("second success");
  })
  .fail(function() {
    console.log("error");
  })
  .always(function() {
    console.log("finished");
  });

jqxhr.always(function() {
  console.log("second finished");
});

to make a POST request.

The 2nd argument is the form data keys and values we want to send with the request.

The done callback is called when the request is successful.

The fail callback is called when the request failed.

always callback is called when the request is finished regardless of the result.

jQuery.queue()

The jQuery.queue() method show or manipulate the queue of functions to be run on the matched element.

For example, if we have the following HTML:

<div></div>

and CSS:

div {
  margin: 3px;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 30px;
  background: green;
  display: none;
}

div.newcolor {
  background: blue;
}

span {
  color: red;
}

Then we can animate the div by writing:

$("div")
  .show("slow")
  .animate({
    left: "+=200"
  }, 2000)
  .slideToggle(1000)
  .slideToggle("fast")
  .animate({
    left: "-=200"
  }, 1500)
  .hide("slow")
  .show(1200)

console.log(jQuery.queue($("div")[0], "fx"))

We get the div and use that as the argument of jQuery.queue to check the items that are queued.

Conclusion

We can parse JSON and XML and queue actions with jQuery.