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.