Не нужно использовать jQuery там, где вся его мощь ни к чему, т.к. многие вещи вполне спокойно делаются и без него
Ниже вы увидите примеры для следующих ситуаций:
Без jQuery:
Но стоит заметить, что в IE8 и ниже событие это не поддерживается, и если вам не посчастливилось их поддерживать, то рекомендую к использованию jquery.documentReady.js
Вполне спокойно заменяются на простом JS:
И да, первый элемент в jQuery можно было выбрать через first, т.е. $('.monsters:first')
Если вы поддерживаете старые браузеры и хотите использовать jQuery только для выборки элементов, то стоит заюзать Sizzle, но позволит использовать CSS3-селекторы для поиска элементов DOM.
Использование довольно простое: Sizzle('div.someClassName'), т.е. как и в jQuery, только помните - если элементов нет, то Sizzle вернёт пустой массив:

Но в большинстве случаев вам нужно лишь навесить событие на элемент или контейнер элементов примерно так:
Как обойтись без jQuery:
Кода стало не на много больше, а работает и без жквери
Только стоит иметь ввиду разницу в контексте в методе onItemClick и всё, а разница получается совсем небольшая. Да - больше клавиш нажать нужно, но intellisence вам в помощь да сниппеты )
Собственно да - ничего сложного, но не менее сложно использовать нативный JS:
Vanilla JS:
И вновь - всё просто, главное помнить, что jQuery attr вернёт undefined, а getAttribute - null
Вместо этого спокойно можно использовать нативные свойства объектов:
jQuery.prev() => element.previousElementSibling
jQuery.next() => element.nextElementSibling
jQuery.children() => element.children
Здесь всё просто, но сложнее с методом closest
Предлагается реализовывать свою функцию хождения по родительским элементам, что я, бывало, и делал:
На github есть замечательный проект Animate.css, с заранее подготовленными многими css-анимациями, которые, естественно, не обязательно все включать в проект
Вставляю оригинальный исходник, см. вкладку Result:
В примере ниже используются XMLHttpRequest и библиотека reqwest, которая очень даже напоминает jQuery в использовании )
Решил сделать эту заметку по мотивам http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/
+ к тому же чтобы не забыть, что уже доавно хотел записать. Я уже несколько месяцев почти не использую JS, и в будущем пока не предполагается, потому лишним не будет, да и пригодится может кому
Ниже вы увидите примеры для следующих ситуаций:
- Подписывание на окончание загрузки документа
- Выборка элементов используя css-селекторы
- Добавление/удаление подписчиков на события
- Манипуляция с классами элемента
- Работа с аттрибутами элементов
- Управление контентом
- Добавление/удаление элементов
- Проход по DOM
- Использование анимации
- AJAX
Окончание загрузки документа
Привычное использование:Без jQuery:
Но стоит заметить, что в IE8 и ниже событие это не поддерживается, и если вам не посчастливилось их поддерживать, то рекомендую к использованию jquery.documentReady.js
Выборка элементов
Несколько примеров на jQuery:
Вполне спокойно заменяются на простом JS:
И да, первый элемент в jQuery можно было выбрать через first, т.е. $('.monsters:first')
Если вы поддерживаете старые браузеры и хотите использовать jQuery только для выборки элементов, то стоит заюзать Sizzle, но позволит использовать CSS3-селекторы для поиска элементов DOM.
Использование довольно простое: Sizzle('div.someClassName'), т.е. как и в jQuery, только помните - если элементов нет, то Sizzle вернёт пустой массив:

Добавление и удаление подписчиков на события:
jQuery предоставляет нам целый зоопарк методов, для подписки на события, некоторые из них являются упрощением вызова метода on:Но в большинстве случаев вам нужно лишь навесить событие на элемент или контейнер элементов примерно так:
Как обойтись без jQuery:
Кода стало не на много больше, а работает и без жквери
Только стоит иметь ввиду разницу в контексте в методе onItemClick и всё, а разница получается совсем небольшая. Да - больше клавиш нажать нужно, но intellisence вам в помощь да сниппеты )
Манипуляция классами
Должно быть некоторые даже понятия не имеют как проверить наличие класса у элемента, кроме как проверять значение indexOf свойства className :)
Хотя жквери почти так и делает, см. ниже:
И потому предпочитают использовать jQuery, оборачивая this в jQuery и вызывая метод hasClass (см. работу с классами в jQuery по адресу https://github.com/jquery/jquery/blob/master/src/attributes/classes.js)
Несколько примеров работы с классами на jQuery:
Несколько примеров работы с классами на jQuery:
Собственно да - ничего сложного, но не менее сложно использовать нативный JS:
Работа с атрибутами
jQuery:Vanilla JS:
И вновь - всё просто, главное помнить, что jQuery attr вернёт undefined, а getAttribute - null
Управление контентом
jQuery имеет два удобных метода для установки или получения содержимого элемента:- text() - просто текста
- html() - html-текста
- textContent - возвращает текстовое содержимое элемента (только внимание - текст тегов style/script также вернётся, но вы же, надеюсь, не вставляете их в элементы, текст коих собираетесь считывать)
- innerHTML - при чтении возвращает html-содержимое элемента, а при присвоении - устанавливает переданное значение
Добавление и удаление элементов
jQuery:
Простой JS:
Да, здесь немного неудобно, но в целом всё очень похоже и при достаточности и несложности простого js - не следует подключать jQuery только для манипуляций DOM, тем более, что для этого уже существует полно всяких шаблонизаторов
jQuery.parent() заменяется element.parentNodeПроход по дереву DOM
jQuery.prev() => element.previousElementSibling
jQuery.next() => element.nextElementSibling
jQuery.children() => element.children
Здесь всё просто, но сложнее с методом closest
Предлагается реализовывать свою функцию хождения по родительским элементам, что я, бывало, и делал:
Использование анимации
Безусловно, во времена, когда не было CSS3 анимационный функционал jQuery был очень удобен, сейчас же можно многие вещи делать на простом css, а через js просто добавлять/удалять нужные классыНа github есть замечательный проект Animate.css, с заранее подготовленными многими css-анимациями, которые, естественно, не обязательно все включать в проект
Вставляю оригинальный исходник, см. вкладку Result:
AJAX
Использование AJAX в jQuery довольно удобно, тем более, что есть множество упрощённых методов (get, post, getJSON), но опять таки - если нужен от jQuery только ajax, то не следует его подключать, а можно использовать классический XMLHttpRequest или один из множества готовых скриптов, реализующих упрощённый ajaxВ примере ниже используются XMLHttpRequest и библиотека reqwest, которая очень даже напоминает jQuery в использовании )
Решил сделать эту заметку по мотивам http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/
+ к тому же чтобы не забыть, что уже доавно хотел записать. Я уже несколько месяцев почти не использую JS, и в будущем пока не предполагается, потому лишним не будет, да и пригодится может кому
Комментариев нет:
Отправить комментарий
Можете оставить свой комментарий