jQuery - Итерация, запросы и объекты

jQuery - популярный JavaScript для создания динамических веб-страниц.

В этой статье мы рассмотрим, как использовать jQuery в наших веб-приложениях.

jQuery.each ()

Мы можем перебирать объекты, массивы и подобные массиву объекты с помощью свойства length с помощью метода each.

Например, если у нас есть:

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

Затем мы регистрируем index и value для каждой записи в массиве.

jQuery.escapeSelector ()

Мы можем экранировать любой символ, имеющий особое значение в селекторе CSS, с помощью метода escapeSelector.

Например, мы можем написать:

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

чтобы вернуть экранированную строку.

Итак, мы видим:

'\#target'

зарегистрирован.

jQuery.extend ()

Метод jQuery.extend() позволяет нам объединить 2 или более объекта вместе в первый объект.

Например, мы можем написать:

const object1 = {
  apple: 0,
  banana: {
    weight: 52,
    price: 100
  },
  cherry: 97
};
const object2 = {
  banana: {
    price: 200
  },
  durian: 100
};
$.extend(object1, object2);
console.log(object1)

Тогда получаем:

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

как значение object1.

jQuery.fn.extend ()

Метод jQuery.fn.extend() позволяет нам объединить содержимое объекта с прототипом jQuery для добавления новых методов экземпляра jQuery.

Например, если у нас есть:

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

Затем мы можем добавить методы экземпляра check и uncheck, написав:

jQuery.fn.extend({
  check() {
    return this.each(function() {
      this.checked = true;
    });
  },
  uncheck() {
    return this.each(function() {
      this.checked = false;
    });
  }
});
$("input[type='checkbox']").check();

Они устанавливают свойство checked на true и false соответственно.

Теперь мы можем вызвать его, как в последней строке, чтобы получить проверку и снять флажки.

jQuery.fx.off

Метод jQuery.fx.off глобально отключает все анимации.

Например, если у нас есть следующий HTML:

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

и CSS:

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

Затем мы можем переключить эффект анимации для записи div bu:

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

Метод toggleFx переключает анимацию.

Затем мы запускаем метод toggle, когда нажимаем кнопку.

jQuery.get ()

Метод jQuery.get() позволяет нам сделать запрос GET.

Например, мы можем написать:

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

чтобы сделать запрос GET с заданным URL.

Параметр обратного вызова data содержит данные из ответа.

jQuery.getJSON ()

Метод jQuery.getJSON() позволяет нам сделать запрос и получить от него ответ JHSON.

Например, мы можем написать:

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

сделать запрос, как мы делаем с методом get.

jQuery.getScript ()

Метод jQuery.getScript() позволяет нам получить скрипт с сервера /

Например, мы можем использовать его, написав:

$.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);
});

Затем мы получаем textStatus и jqxhr.status, чтобы получить статус запроса.

data содержит данные ответа.

Заключение

Мы можем вызывать различные статические методы jQuery для выполнения HTTP-запросов или добавлять методы экземпляра в jQuery.

Кроме того, мы можем управлять объектами с помощью статических методов jQuery.