jQuery — Iteration, Requests, and Objects

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

We can iterate over objects, arrays, and array-like objects with the length property with the each method.

For example, if we have:

$.each([52, 97], function(index, value) {
  console.log(index, value);
});

Then we log the index and value for each entry in the array.

jQuery.escapeSelector()

We can escape any character that has special meaning in a CSS selector with the escapeSelector method.

For example, we can write:

console.log($.escapeSelector( "#target" ))

to return the escaped string.

So we see:

'#target'

logged.

jQuery.extend()

The jQuery.extend() method lets us merge 2 or more objects together into the first object.

For example, we can write:

const object1 = {
  apple: 0,
  banana: {
    weight: 52,
    price: 100
  },
  cherry: 97
};
const object2 = {
  banana: {
    price: 200
  },
  durian: 100
};

$.extend(object1, object2);
console.log(object1)

Then we get:

{
  "apple": 0,
  "banana": {
    "price": 200
  },
  "cherry": 97,
  "durian": 100
}

as the value of object1 .

jQuery.fn.extend()

The jQuery.fn.extend() method lets us merge the content of an object into the jQuery prototype to add new jQuery instance methods.

For instance, if we have:

<label><input type="checkbox" name="foo"> Foo</label>
<label><input type="checkbox" name="bar"> Bar</label>

Then we can add the check and uncheck instance methods by writing:

jQuery.fn.extend({
  check() {
    return this.each(function() {
      this.checked = true;
    });
  },
  uncheck() {
    return this.each(function() {
      this.checked = false;
    });
  }
});

$("input[type='checkbox']").check();

They set the checked property to true and false respectively.

Now we can call it as we do in the last line to get check and uncheck the checkboxes.

jQuery.fx.off

The jQuery.fx.off method globally disables all animations.

For example, if we have the following HTML:

<input type="button" value="Run">
<button>Toggle fx</button>
<div></div>

and CSS:

div {
  width: 50px;
  height: 30px;
  margin: 5px;
  float: left;
  background: green;
}

Then we can toggle the animation effect for the div bu writing:

const toggleFx = function() {
  $.fx.off = !$.fx.off;
};
toggleFx();
$("button").click(toggleFx);
$("input").click(function() {
  $("div").toggle("slow");
});

The toggleFx method toggles the animation.

Then we run the toggle method when we click the button.

jQuery.get()

The jQuery.get() method lets us make a GET request.

For example, we can write:

$.get("https://jsonplaceholder.typicode.com/posts/1", function(data) {
  console.log(data)
});

to make a GET request with the given URL.

The callback’s data parameter has the data from the response.

jQuery.getJSON()

The jQuery.getJSON() method lets us make a request and get the JHSON response from it.

For example, we can write:

$.getJSON("https://jsonplaceholder.typicode.com/posts/1", function(data) {
  console.log(data)
});

to make a request as we do with the get method.

jQuery.getScript()

The jQuery.getScript() method lets us get a script from a server/

For example, we can use it by writing:

$.getScript("https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js", function(data, textStatus, jqxhr) {
  console.log(data);
  console.log(textStatus);
  console.log(jqxhr.status);
});

Then we get the textStatus and jqxhr.status to get the request status.

data has the response data.

Conclusion

We can call various jQuery static methods to make HTTP requests or add instance methods to jQuery.

Also, we can manipulate objects with jQuery static methods.