10 Методів для заміни jquery чистим javascript в проектах
В уроці будуть приводитися два варіанти рішення - модерн і спадщина. Рішення типу "модерн" представляють собою новітні методи, а "спадщина" демонструє те, що буде подобатися старим браузерам. Вибір варіанту залежить від розробника веб проекту і цільової аудиторії.
вступ
Зверніть увагу, що деякі варіанти з набору "спадщина" в даній статті використовують просту, кросбраузерну функцію addEvent. Ця функція нормалізує два варіанти - рекомендовану W3C модель подій addEventListener і варіант для Internet Explorer attachEvent.
Коли використовується функція addEvent (els, event, handler) в коді, вона являє собою наступний код:
1 - $ ( '# container');
Ця функція звертається до DOM для отримання елемента з ідентифікатором container і створює новий об'єкт jQuery.
querySelector є частиною API Selectors. яка забезпечує можливість звернення до DOM за допомогою селекторів CSS.
Даний метод повертає перший елемент, який відповідає переданому селектору.
Зверніть увагу на посилання на елемент. Коли використовується getElementById потрібно передати тільки одне значення, а для querySelector доведеться передавати селектор CSS.
2 - $ ( '# container'). Find ( 'li');
В даному випадку ми отримуємо будь-яку кількість пунктів списку, які є нащадками елемента #container.
querySelectorAll повертає всі елементи, які відповідають певному CSS селектору.
Обмеження. Хоча всі браузери підтримують API Selectors, передача певних селекторів CSS обмежується можливістю браузера. Наприклад: Internet Explorer 8 підтримує тільки селектори CSS 2.1.
3 - $ ( 'a'). On ( 'click', fn);
Вище наведений код виглядає жахливо, але він не такий вже й поганий. Так як querySelectorAll повертає NodeList. а не масив, то ми не можемо безпосередньо використовувати метод, наприклад, forEach. Даний момент обходиться викликом forEach для об'єкта Array і передачею результату querySelectorAll як this.
4 - $ ( 'ul'). On ( 'click', 'a', fn);
Зверніть увагу, що на момент написання уроку всі браузери реалізовували matchesSelector з використанням префіксів: mozMatchesSelector. webkitMatchesSelector. і так далі. Для нормалізації методу, ви можете написати:
Для забезпечення зворотної сумісності ми перевіряємо, що властивість nodeName (ім'я цільового елемента) одно наш запит. Зверніть увагу на факт, що старі версії Internet Explorer іноді грають своїми власними правилами. Ви не захочете отримувати доступ до мети безпосередньо з об'єкта event. Зазочется використовувати event.srcElement.
5 - $ ( '# box'). AddClass ( 'wrap');
jQuery забезпечує зручний API для модифікації імені класу для набору елементів.
Нова техніка використовує новий API classList для додавання, видалення і перемикання класу (add. Remove. І toggle).
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!