JQuery — JS: DOM API
В августе 2006 года Джон Резиг выпустил библиотеку JQuery. За короткое время эта библиотека завоевала огромную популярность и стала стандартом в разработке интерактивных элементов на сайтах:
// Знак $ — это функция JQuery, через которую все и делается $(() => // Эта функция выполнится на событии DOMContentLoaded >); Во многом это случилось потому, что JQuery появилась в нужное время в нужном месте. В те годы шел переход к верстке без использования таблиц, и CSS использовался все активнее и разнообразнее. JQuery позволил переиспользовать те же самые селекторы для добавления поведения.
К тому же, в JQuery был реализован CSS3, причем гораздо раньше, чем он появился нативно в самих браузерах. Более того, библиотека JQuery позволила практически не думать о разных браузерах. Одна из ее задач — обеспечить работоспособность на всех платформах:
// Работает так же, как и document.querySelectorAll // document.querySelectorAll('.section span') // Возвращает специальную JQuery-коллекцию со своим набором методов const spans = $('.section span'); // Кроме того, можно осуществлять селекцию внутри конкретного контейнера // Добавляем его вторым аргументом const container = $('.item-box'); const items = $('li', container); // находит все li внутри контейнера с классом item-box Еще одна причина успеха — библиотека JQuery популяризовала отделение верстки от поведения. Такую технику называют «Ненавязчивый JavaScript». Ее идея в том, что обработчики событий описываются не в самих тегах, а отдельно:
const buttons = $('button'); // Вешает обработчик click на все кнопки в этой коллекции buttons.click(() => alert('hey!'); >); При этом сама библиотека JQuery — это прекрасный пример предметно-ориентированного языка.
Как правило, код на JQuery выражает задачу в тех же терминах, в которых эта задача формулируется:
// Прячем все элементы по селектору container.main $('container.main').hide(); // Удаляем элемент с style="">$('#address').remove(); И это еще не все. JQuery долгое время предоставляла единственный нормальный способ делать AJAX-запросы и анимацию на страницах. Благодаря расширяемости за счет плагинов, экосистема библиотеки за десяток лет стала фантастических размеров. В какой-то период времени любая библиотека для фронтенда появлялась как плагин к JQuery. Вплоть до того, что некоторые люди вообще не догадываются о существовании JavaScript и DOM. Они сразу начали с JQuery и видят мир только сквозь него.
Манипуляции
Функция $ — это единая точка входа для всего. Если ее вызвать и передать внутрь строчку, то JQuery посчитает строку селектором и сделает выборку элементов DOM. Этот вызов аналогичен вызову querySelectorAll() , с тем лишь отличием, что возвращается специализированная коллекция.
В принципе, JQuery работает с элементами как с коллекциями, даже если это один элемент. И любые изменения применяются сразу ко всем элементам коллекции без итерирования:
// Выбираются все элементы h1 const headings = $('h1'); // Добавление класса всем заголовкам h1 headings.addClass('header'); // То же самое без jquery const headings = document.querySelectorAll('h1'); headings.forEach((el) => el.classList.add('header')); Ниже есть несколько примеров функций, изменяющих DOM-элемент и его потомков. Здесь видна одна из главных особенностей JQuery. Если мы вызовем эти функции с параметрами, то значения изменятся. Если вызовем без параметров, значения вернутся:
// Если была найдена одна ссылка const link = $('#home'); link.html('link to home'); // установка textContent link.attr('href', '/about'); // установка атрибута // Чтение атрибута console.log(link.attr('href')); // => /about События
JQuery предоставляет собственные методы для подписки на события, выступая абстракцией над addEventListener . Например, так будет обрабатываться клик по кнопке:
$('button').click(() => // Установка атрибута href на элемент с идентификатором w3c // attr может принимать вторым параметром функцию // В нее передается оригинальное значение атрибута $('#w3c').attr('href', (i, origValue) => `$origValue>/jquery`); >); AJAX
JQuery умеет выполнять и Ajax-запросы. Но научился он этому до появления стандартов, поэтому интерфейс этого механизма отличается от стандартных промисов:
// Цепочка вызовов работает по тому же принципу, что и промисы // Разница только в деталях const jqxhr = $.get('/api/v1/companies.json', (data) => console.log('success'); >) .done(() => console.log('success'); >) .fail(() => console.log('fail'); >) .always(() => console.log('finished'); >); Анимация
С одной стороны, JQuery дает набор готовых анимаций, а с другой — представляет механизм для создания более сложных эффектов, основанных на изменении CSS-свойств:
id="clickme"> Click here id="book" src="book.png" alt="" width="100" height="123"> // Элемент #book загружается как скрытый, а по клику медленно появляется $('#clickme').click(() => $('#book').show('slow', () => // Действия после завершения анимации >); >); Для библиотеки JQuery есть группа плагинов JQuery UI. Эти плагины реализуют типичную функциональность, необходимую при разработке интерактивных сайтов — например, перетаскивание, автозаполнение, изменение размеров, сортировка и многое другое:
Перспективы
Раньше JQuery была прекрасным выбором, но это время уходит. Эта библиотека появилась больше 15 лет назад, и с тех пор технологии ушли вперед.
Стандарт DOM развился настолько, что теперь многие вещи удобнее делать напрямую, чем через JQuery. При этом большинство браузеров уже поддерживают стандарт DOM. Если где-то поддержки не хватает, всегда есть полифиллы. К тому же, появились новые стандарты, в которые JQuery не вписывается. Ярким примером служат промисы и тот же AJAX.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
JavaScript DOM Objects vs. jQuery Objects
In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements. If you want to know more about these objects in detail and how to work with them, and convert into one another then continue reading this tutorial.
Table of Contents What are JavaScript DOM objects? What are jQuery objects? How to determine Whether an Object is DOM or jQuery? Convert an Object from DOM to jQuery and back
What are JavaScript DOM objects?
As mentioned earlier, DOM objects are used by browser directly to render the webpage in browser window. The browser receives an HTML document from a web server, which is just text. The browser proceeds to parse this text into an internal structure that it can actually use to render the page visually. The DOM represents that internal structure a browser has of an HTML document. A DOM object represents a visual or functional object on the page which was created from the original HTML document.
Even when browser has fully rendered the webpage, you can use JavaScript to change the DOM objects, it’s attributes and values. Any change done in such way automatically refreshes the visual representation shown in browser window.
The advantage with working with DOM objects is that you have direct access to everything you need to manipulate the HTML element. The disadvantage of DOM objects is that most of the attached functions and attributes are things that the browser needs and are not necessarily useful when you’re working with JavaScript. It makes working with them a little slower, at least for less-experienced developers.
e.g. to change content of a paragraph or label, you can use javascript like this:
document.getElementById("label_firstname").innerHTML = "First Name"; jQuery objects are wrapper objects around single or multiple DOM elements. The jQuery objects (though technically still JavaScript objects) provide access to the wrapped DOM elements — however, in a much different, much easier, and often much more effective way.
Remember that a jQuery object may represent a single DOM object, or it may represent a set of many DOM objects. So if you apply an operation on the jQuery object, it may apply to many DOM objects.
Using jquery objects has it’s own advantages. For example, jQuery provides a lot of useful library methods to search elements inside DOM element it represent, and perform bulk operation on searched elements without iterating them in code.
e.g. to change content of a paragraph or label, you can use jQuery like this:
("#label_firstname").html("First Name"); How to determine Whether an Object is DOM or jQuery?
Many times, when working on any complex application you may find jQuery objects and javascript DOM objects, both in single piece of code. Now you are not sure whether it is a jQuery object, a DOM object, or some other JavaScript object. There is a simple way to tell the difference.
To confirm whether an object is a jQuery object, see whether the object has the jquery attribute:
Similarily, to confirm whether an object is a DOM object, see whether the object has the nodeType attribute:
Convert an Object from DOM to jQuery and back
In situations like above, if you want to convert the object from DOM to jQuery or jQuery to DOM, you can do it using below techniques.
Convert DOM object to jQuery object
$() or jquery() method creates a new jQuery object from DOM object.
Convert jQuery object to DOM object
The .get() method returns DOM object wrapped inside jQuery object.
That’s all about javascript DOM objects and jQuery objects. Leave me comments if any question or suggestion.