10 советов, как составлять JavaScript без jQuery Javascript


Оглавление (нажмите, чтобы открыть):

С чего начать? jQuery или Javascript

У меня есть опыт программирования на Delphi (не большой). Немного разбираюсь в HTML и CSS (делал пару сайтов. На Joomla, DLE и Ucoz).
Хочу выучить Javascript. Нужна помощь по подбору оптимальной литературы для изучения.
Думал купить книгу JavaScript. Подробное руководство — Дэвид Флэнаган Дороговато конечно, но материала тоже много в книге.
А потом натолкнулся на статьи по jQuery и так понял что сейчас больше используют jQuery.
Начал искать книги. И вот такие нашел:
-Изучаем работу с jQuery (Райан Бенедетти, Ронан Крэнли (2012))
-PHP и jQuery для профессионалов Джейсон Ленгсторф (2011)
-Изучаем jQuery. Перейдите на новый уровень работы с JavaScript, используя мощь jQuery Эрл Каслдайн, Крэйг Шарки (2013)
-Изучаем jQuery Новый стиль программирования на JavaScript Эрл Каслдайн, Крэйг Шарки (2012)
-Изучаем jQuery 1.3. Эффективная веб-разработка на JavaScript Чаффер Д., Шведберг К. (2010)
-jQuery. Сборник рецептов Самков Геннадий (2011)
-jQuery. Подробное руководство по продвинутому JavaScript Бер Бибо, Иегуда Кац (2009)

Вот и вопрос какую лучше книгу купить из всех этих. По деньгам понятное дело что могу раскошелится только на одну. Либо JavaScript. Подробное руководство — Дэвид Флэнаган, либо 2-3 по jQuery так как их цена в 2-3 раза дешевле.
Нужно что бы книга была доступно написана как для полного «чайника».

09.11.2012, 13:06

С чего начать изучение JavaScript?
Всем привет! Думаю тема заезженная, но хочется свежих ответов пользователей. Просьба разобрать.

С чего начать изучение JavaScript
Как можно быстро и эффективно изучить язык java script и где найти уроки для него

Что лучше начать изучать, java или javascript?
Здравствуйте, я новичок в программирований. В школе изучали PascalABC и pascalABC.net. Создавали.

Как узнать ip адрес на javascript или jquery?
нужен пример кто может подсказать как узнать ip адрес на javascript или jquery

Изучение HTML CSS JavaScript или не поздно ли начать в 27 лет?
Доброго времени суток, уважаемые форумчане, в общем буду краток, мне 27 (почти 28 лет) и у меня.

10 методов для замены jQuery чистым JavaScript в проектах

В настоящий момент ситуация такова, что все больше и больше разработчиков приходят в мир JavaScript через ворота jQuery. И новички являются счастливчиками. Они получают доступ к изобилию новых API JavaScript, которые делают процесс работы с DOM существенно легче. Но, к сожалению, они не имеют представления об этих API! В данном уроке мы рассмотрим несколько типовых задач, которые решаются средствами 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);

В данном примере обработчик события click привязывается ко всем ссылкам на странице.

Модерн

Выше приведенный код выглядит ужасно, но он не так уж и плох. Так как querySelectorAll возвращает NodeList , а не массив, то мы не можем непосредственно использовать метод, например, forEach . Данный момент обходится вызовом forEach для объекта Array и передачей результата querySelectorAll как this .

Наследие

4 – $(‘ul’).on(‘click’, ‘a’, fn);

Данный пример немного отличается. Код jQuery используется для делегирования события. Обработчик click используется для всех неупорядоченных списков. Но возвратная функция будет запускаться только целью (где пользователь нажимает кнопку) является ссылка.

Модерн

Технически, данный метод JavaScript не является полным соответствием примеру jQuery. Он привязывает обработчик события непосредственно к document . А затем используется метод matchesSelector для определения того факта, что цель (узел, на котором произошло нажатие кнопки) соответствует указанному селектору. Таким образом, мы привязываем единственный обработчик события.

Обратите внимание, что на момент написания урока все браузеры реализовывали matchesSelector с использованием префиксов: mozMatchesSelector , webkitMatchesSelector , и так далее. Для нормализации метода, вы можете написать:

Наследие

Для обеспечения обратной совместимости мы проверяем, что свойство nodeName (имя целевого элемента) равно нашему запросу. Обратите внимание на факт, что старые версии Internet Explorer иногда играют своими собственными правилами. Вы не захотите получать доступ к цели непосредственно из объекта event . Зазочется использовать event.srcElement .

5 — $(‘#box’).addClass(‘wrap’);

jQuery обеспечивает удобный API для модификации имени класса для набора элементов.

Модерн

Новая техника использует новый API classList для добавления, удаления и переключения класса (add , remove , и toggle ).

Наследие

Обратная совместимость требует достаточно много действий.

6 — $(‘#list’).next();

Метод jQuery next возвращает элемент, который следует непосредственно за текущим элементом наборе.

Модерн

nextElementSibling ссылается на следующий узел за элементом. К сожалению, Internet Explorer 8 и старше не поддерживают его.

Наследие

Есть пара способов для реализации задачи. В данном примере мы определяем тип узла nodeType , который следует на определенным элементом. Это может быть текст, элемент или, даже, комментарий. Так как нам нужен именно следующий элемент, то мы ищем nodeType равный 1 . Если next.nodeType возвращает номер больше, чем 1 , то мы пропускаем узел, так как он, вероятно, является текстом.

В дополнение к запросам DOM jQuery также предлагаем возможность создавать и вставлять элементы.

Модерн

В данном примере нет ничего нового. Таким способом выполнялся процесс создания и вставки элемента в структуру DOM очень давно.

Вероятно, что вам понадобится добавить содержание в элемент. В данном случае вы можете использовать innerHTML или createTextNode .

8 – $(document).ready(fn)

Метод jQuery document.ready невероятно удобен. Он позволяет нам выполнять код сразу по завершению загрузки DOM.

Модерн

Стандартная часть HTML5, событие DOMContentLoaded генерируется после завершения анализа документа.

Наследие

Решение для обратной совместимости — каждые 9 миллисекунд мы проверяем значение document.readyState . Если возвращается “loading”, то документ все еще не загружен полностью ( /in/.test() ). Как только значение document.readyState будет равно “complete,” выполнится возвратная функция.

9 – $(‘.box’).css(‘color’, ‘red’);

Если возможно, всегда добавляйте класс к элементу, когда нужно задать ему определенный стиль. Однако, иногда стили задаются динамически, и приходится вставлять атрибуты.


Модерн

Снова мы используем технику [].forEach.call() для фильтрации всех элементов с классом box и придания им красного цвета с помощью объекта style .

Наследие

Мы используем трюк с циклом while . По существу, мы имитируем:

Хотя нужно выполнить одно действие, мы можем сэкономить пару строк. Обратите внимание, что легкость чтения кода важнее сохранения пары строк кода.

Определенно, цель полностью заменить jQuery API выходит за рамки данного урока. Но часто в проектах функции $ или $$ используются для короткой записи получения одного или нескольких элементов из DOM.

Модерн

Это просто односимвольный указатель на document.querySelector . Сохраняет время!

Наследие

К сожалению, метод обратной достаточно большой. В данном случае лучше использовать библиотеку. jQuery оптимизирован для работы с DOM! Пример выше будет работать, но он не поддерживает сложные селекторы CSSв старых браузерах.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/
Перевел: Сергей Фастунов
Урок создан: 21 Января 2012
Просмотров: 52706
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

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

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

10 лучших функций на JavaScript

Если бы существовал универсальный файл common.js, которым пользовались бы все разработчики, вы бы нашли там эти десять (плюс одна бонусная) функций.

UPDATE март 2010: Эта статья была обновлена и переписана, чтобы соответствовать сегодняшнему дню и общему уровню сайта.

Эти функции неоднократно были испытаны и доказали свою полезность всем тем, кто их использовал. Поэтому, без лишних вступлений, вот список из десяти, по моему мнению, величайших пользовательских функций на JavaScript, которые используются в настоящее время.

10) addEvent()

Несомненно, важнейший инструмент в управлении событиями! Вне зависимости от того, какой версией вы пользуетесь и кем она написана, она делает то, что написано у неё в названии: присоединяет к элементу обработчик события.

Простой вариант функции addEvent()

Этот код обладает двумя достоинствами — он простой и кросс-браузерный.

Основной его недостаток — в том, он не передает this в обработчик для IE. Точнее, этого не делает attachEvent .

Простой обход проблемы this

Для передачи правильного this можно заменить соответствующую строку addEvent на:

Это решит проблему с передачей this , но обработчик никак нельзя будет снять, т.к. detachEvent должен вызывать в точности ту функцию, которая была передана attachEvent .

Существует два варианта обхода проблемы:

    Возвращать функцию, использованную для назначения обработчика:

Можно не использовать this в обработчике события вообще, а передавать элемент через замыкание:

В качестве альтернативы и для примера более серьезной библиотеки обработки событий вы можете рассмотреть статью Кросс-браузерное добавление и обработка событий.

9) onReady()

Для инициализации страницы исторически использовалось событие window.onload, которое срабатывает после полной загрузки страницы и всех объектов на ней: счетчиков, картинок и т.п.

Событие onDOMContentLoaded — гораздо лучший выбор в 99% случаев. Это событие срабатывает, как только готов DOM документ, до загрузки картинок и других не влияющих на структуру документа объектов.

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

Для добавления обработчика можно использовать следующий кроссбраузерный код:

Подробное описание функций bindReady , onReady и принципы их работы вы можете почерпнуть в статье Кроссбраузерное событие onDOMContentLoaded.

8) getElementsByClass()

Изначально не написана никем конкретно. Многие разработчики писали свои собственные версии и ничья не показала себя лучше остальных.

Следующая функция использует встроенный метод getElementsByClass , если он есть, и ищет элементы самостоятельно в тех браузерах, где этого метода нет.

classList Список классов, разделенный пробелами, элементы с которыми нужно искать. node Контекст поиска, внутри какого узла искать

7) addClass() / removeClass()

Следующие две функции добавляют и удаляют класс DOM элемента.

6) toggle()

Если быть честным, наверное для этой функции существует больше различных вариантов, чем было бы нужно.

Этот вариант никоим образом он не претендует на звание универсальной функции-«переключателя», но он выполняет основную функциональность показывания и спрятывания.

функция toggle(), слова народные

Обратите внимание, в функции нет ни слова про display=’block’ , вместо этого используется пустое значение display=» . Пустое значение означает сброс свойства, т.е. свойство возвращается к значению, указанному в CSS.

Таким образом, если значение display для данного элемента, взятое из CSS — none (элемент спрятан по умолчанию), то эта функция toggle не будет работать.

Этот вариант функции toggle красив и прост, однако этот и некоторые другие недостатки делают его недостаточно универсальным. Более правильный вариант toggle , а также функции show и hide описаны в статье Правильные show/hide/toggle.

5) insertAfter()


Как и getElementsByClass , этой функции почему-то нет в стандарте DOM. Возможно, чтобы избежать дублирования функционала, т.к. insertAfter реализуется всего одной строчкой.

4) inArray()

Очень жаль, что это не часть встроенной функциональности DOM. Зато теперь у нас есть возможность всё время вставлять такие вот замечания!

Для поиска эта функция использует проверку === , которая осуществляет поиск по точному сравнению, без приведения типов.

Метод Array.prototype.indexOf поддерживается не во всех браузерах, поэтому используется, если существует.

3, 2 и 1) getCookie(), setCookie(), deleteCookie()

В javascript нет способа нормально работать с cookie без дополнительных функций. Не знаю, кто проектировал document.cookie , но сделано на редкость убого.

Поэтому следующие функции или их аналоги просто необходимы.

name название cookie value значение cookie (строка) props Объект с дополнительными свойствами для установки cookie:

expires Время истечения cookie. Интерпретируется по-разному, в зависимости от типа:

  • Если число — количество секунд до истечения.
  • Если объект типа Date — точная дата истечения.
  • Если expires в прошлом, то cookie будет удалено.
  • Если expires отсутствует или равно 0, то cookie будет установлено как сессионное и исчезнет при закрытии браузера.

path Путь для cookie. domain Домен для cookie. secure Пересылать cookie только по защищенному соединению.

Последняя, но зачастую полезная: функция byId

Она позволяет функции работать одинаково при передаче DOM-узла или его id.

Здесь обе функции полиморфны, допускают и узел и его id, что довольно удобно, т.к. позволяет не делать лишних преобразований node id .

Надеюсь, этот небольшой и удобный список JavaScript-функций будет столь же полезен вам, сколь он полезен мне.

Мастер Йода рекомендует:  Искусство устранения неполадок WordPress

в JS нет худших и лучших функций, все нужны и полезны в конкретных ситуациях

Я бы еще добавил динамическую подгрузку JavaScript файлов, например этот метод: http://www.artlebedev.ru/tools/technogrette/js/include/

или метод который используется в Scriptalicous

Не нашел куда написать, поэтому пишу сюда. Я написал самое компактное определение IE из всех которые я знаю. Думаю пригодится:

можно и в 5 символов, но будет возвращаться false в эксплорере

Используется баг с подсчетом элементов массива.

Статью переписал. Как следствие, многие комментарии перестали относиться к переписанному варианту и были убраны.
По виду, получилось более актуально чем было.

Функции setCookie и getCookie работают в FireFox, но не работают в Chrome:

В чём тут дело? Либо можно пример вызова, который точно работает?

Дело в том, что 3й аргумент — props — объект. Если не хотите его указывать — не надо ставить «».

Так тоже не работает. У вас установлен Хром? Ну, попробуйте создать пустую страничку с одним этим скриптом. Выдаст undefined. A FireFox — «TestText1».

Да, установлен. Попробуйте сами — вот страничка http://javascript.ru/test.html . Все работает.

Но я же не могу свои странички к вам на сервер закачивать. Я запускаю со своего винчестера. И не работает.

Закачайте их к себе на сервер и запустите. Дело, видимо, как раз в том, что вы с винчестера запускаете, а надо — с сайта.

А у меня сейчас нету сервера. Да и неудобно это. Вот на винчестере страничка, я её правлю, и сразу проверяю в браузере, никуда не закачивая.

Да и в FireFox’e то работает нормально. Может что-то не учтено, надо в скрипт ещё какую-то строчку кода для Хрома добавить?

Насколько я знаю, кука ставиться для УРЛа (Домена).
Если вы открываете страничку с винта, то где там имя домена?
Возможно Хром понимает бесполезность такого действия и ничего не предпринимает.
Насчет сервера: почему это неудобно? Неужели трудно поставить Денвер или какой-нибудь его аналог и работать в нормальных условиях, приближенных к реальным?

В хроме, начиная с 5й версии локально многие вещи не работают.
Например «ajax» и cookie.

Чтобы это работало «с винчестера» нужно запускать chrome.exe с ключами (можно дописать в свойства ярлыка):
—allow-file-access-from-files —enable-file-cookies

у хрома (по крайней мере на начальных этапах его становления и развития) наблюдается проблема с работой кук. долго бился, пока не понял это =( куки ни одним обычным методом не удалялись: и пустоту в них писал, и нулл, и время в прошлое. просто голову сломал.

Объясните пожалуйста, зачем в функции getElementsByClass():
a) нужна переменная key
b) нужны границы слова в

а) убрал, она лишняя была
б) границы нужны, чтобы корректно обрабатывать элемент со множеством классов:

Без указания границ слова всё обрабатывается корректно. По крайней мере я не смог создать такую ситуацию, когда отсутствие границ слова вызвало бы ошибку. Проверял с разными классами, с разным количеством пробелов, в разных браузерах. Не могли бы вы привести пример когда без границ слова, будет выводиться что-то неправильное?

Всё. Дошло. На самом деле «\\b» нужно не для того чтобы обрабатывать элементы с несколькими классами. А для таких случаев, если у меня есть один элемент с «class1» и другой элемент с «class11111». Без «\\b» по запросу «class1» будут найдены оба элемента.

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

Нашел красивейшую функцию по замене inArray:

Да действительно орининальное решение — но бесполезное — слишком много итераций. Это при больших массивах очень долго, особенно если искомое значение (по «закону полдлости») будет вначале масива.
Еще недостаток она не универсальна — с объектами работать не будет
(«. a.length . «).

Знаю что не открываю Америку и не изобретаю велосипед — поэтому это только для GreatRash (автора комментария):

//-Проверяет содержится ли значение в массиве/объекте
inObject=inArray=function(obj, value, flEqualityType) <
/*
Параметры:
— obj — объект или массив значений в котором ищем
— value — искомое значение
— flEqualityType — (необязательный) — флаг сравнения типов [true | false]
(по умолчанию false — сравнение без типов данных)
*/
var obj=obj, value=value, flEqualityType=flEqualityType || false;
if(!obj || typeof(obj)!=’object’) return false;
for(var i in obj) <
if(flEqualityType===true && obj[i]===value) return true;
if(flEqualityType===false && obj[i]==value) return true;
>
return false;
>;

Функция insertAfter не будет работать, если попытаться вставить ноду после последнего элемента в узле, т.к. его nextSibling == null. Вот рабочий вариант:

Можно обойтись и без дополнительной переменной next, но так наглядней.

Ваш пример нужно дорабатывать, т.к. nextsibling может указывать на текстовый элемент.

Ну и соответственно

RomanWeberov, с какой такой стати текстовые элементы не должны учитываться? Функция insertAfter() должна вставлять элемент строго после указанного и никак иначе.

Вы проверяли, что не будет работать?

Относительно текстового элемента — он тоже элемент..

Да, надо было проверить:(
Теперь буду знать:)
Но в любом случае, функцию можно упростить, убрав из списка аргументов parent’а.

Отличная подборка сценариев Обожаю ваш блог и ваш труд

Илья, мне кажется пример с getElementsByClassName() может ввести в заблуждение новичков, потому как этот метод по спецификации принимает один аргумент, а у тебя в примере использования их несколько причем еще и ID. Для этого есть querySelector(), querySelectorAll();

К тому же код можно упростить, сделать более универсальным, а также значительно увеличить производительность:

PS: добавление querySelectorAll() дает нам возможность работать с IE8+, а обратный цикл уменьшает время выполнения функции в несколько раз

Отличный вариант, спасибо.

Нельзя использовать в регулярках \bneedle\b, так как christmas-tree-needle это один класс.

В FireFox 11 подсветка не работает.

Функция getElementsByClass() работает неверно в IE при поиске узлов с несколькими классами.

В FF и Opera будет выделен второй абзац, т.к. используется встроенная функция, а IE выделит оба.

8) getElementsByClass()
Все таки не представлен настоящии универсальный метод:(
По моему самый лучшии вариант от monolithed
НО он загружает только 1 класс
Как правильно сделать полный обход?

var ).length;
for (var i=0; i

Я для себя написал вот такой inArray, он работает и для многомерных массивов

Ошибка в inArray(), строка 8. вместо a[] надо arr[]


Как по мне, так такой вариант выборки классов будет побыстрее:

мой вариант функции inArray
без цикла, и символов меньше

А не легче использовать такой код:

Или я чего-то не понимаю?

Например, того, что некоторые недобраузеры функции querySelectorAll не понимают.

8) getElementsByClass()

Подскажите, пожалуйста setCookie(name, value, props)
как у эту функцию установить время или дату.
я так понимаю что она сидит в props
как задать в него параметры

подскожите пож. как из .csv где есть много строк, наити самыю длиныю строку и выведить её ,при етом показати сколько букв содержит строка и какой ряд?

Предлагаю свой вариант работы с классами:

Немного сжато, рабочий вариант.
Применен шаблон самоопределяемых функций.
Функции обертки нужны, чтобы иметь возможность правильно импортировать функции из области видимости.

Преимущества: определение пути выполнения осуществляется только один раз, при первом вызове функции, при этом используются возможности HTML5. Нормальные браузеры будут работать еще быстрее (чем в JQuery, но не проверял), не нормальные — на том же уровне.

Немного переживаю за излишнее замыкание, но пошел на наго из-за компактности.

Еще пара функций:

Не могу разобраться с клонированием картинок при перетаскивании. Можете направить где копать?

addClass
Какая-то стрёмная замена classList.add()

function insertAfter(parent, node, referenceNode) <
parent.insertBefore(node, referenceNode.nextSibling);
>

И где тут проверка, что это не младший сын?

Эти приемы слишком не соответствуют сути прототипно-ориентированного языка.

Почему бы не myObject.addEvent?

как де queryString?

Где демонстрация работы с динамическими элементами?

Да, порой фреймворк использовать не получается (покажите мне такой, в ЛС), но это плохой подход.

ПС: Кину свою мини-библиотеку нужнрых мне порой функций.

ПС2: Пользуйтесь jQ, Angular, polymer и все будет в порядке.

onReady() дала течь. Вернулся к windows.onload

А jQuery использовать мешает высокомерие — мы же крутые JS-разработчики а не х.пойми что )))

Функции полезные, но можно использовать jQuery и разрабатывать на Javascript еще быстрее и эффективнее.

Поэтому, без лишних вступлений, вот список из десяти, по моему мнению, величайших пользовательских функций на JavaScript, которые используются в настоящее время.
bullet force game online.

it’s been so long since I last read such a favorable article. clash royale

Отправить комментарий

Текущий раздел
  • Асинхронное программирование
  • Google Gears в деталях
  • Javascript Flash мост
  • Букмарклеты и правила их написания
  • О подборке книг на сайте
  • Почему — плохо
  • Способы идентификации в интернете
  • Уровни DOM
  • Что почитать?
  • Шаблонизация с javascript
  • Юнит-тесты уровня браузера на связке Selenium + PHP.
  • Справочники: Javascript/HTML/CSS
  • Система сборки и зависимостей Google Closure Library
  • Хранение данных на клиенте. DOM Storage и его аналоги.
  • 10 лучших функций на JavaScript
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Последние комментарии
  • Комментарий
    17 часов 21 минута назад
  • A very nice blog, I like the way you.
    2 дня 3 часа назад
  • This is a great thing, I think everyone.
    2 дня 3 часа назад
  • It is wonderful to be here with.
    2 дня 3 часа назад
  • Download and play DOM Level 0 — это.
    2 дня 8 часов назад
  • We are the children
    3 дня 8 часов назад
  • function firstUniqLiter(str) <
    3 дня 16 часов назад
  • Великие посты! Я на самом деле.
    4 дня 10 часов назад
  • artical is really informative and.
    5 дней 47 минут назад
  • Вы не можете найти себя, уходя в.
    6 дней 5 часов назад
Последние темы на форуме

Заголовок первого блока

  • Пункт #1 Пункт #1 Пункт #1 Пункт #1 Пункт #1 Пункт #1
  • Пункт #2
  • Пункт #3
  • Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4
  • Пункт #5
  • Пункт #6
  • Пункт #7
    • Пункт #7.1
    • Пункт #7.2
    • Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3
    • Пункт #7.4
    • Пункт #7.5

  • Пункт #8
    • Пункт #8.1 Пункт #8.1 Пункт #8.1 Пункт #8.1 Пункт #8.1
    • Пункт #8.2
    • Пункт #8.3
  • Пункт #9
  • Пункт #10
  • Пункт #11 Пункт #11 Пункт #11 Пункт #11 Пункт #11
    • Пункт #11.1
    • Пункт #11.2
    • Пункт #11.3
    • Пункт #11.4
    • Пункт #11.5
    • Пункт #11.6
  • Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12
  • Пункт #13
  • Пункт #14
  • Пункт #15
  • Пункт #16
  • Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14
  • Пункт #15
  • Пункт #16

Заголовок второго блока

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Что изучать jQuery или чистый JavaScript?

Первоначальной функцией jQuery была нормализация DOM. То есть например если в IE был метод attachEvent, а в остальных браузерах — addEventListener, то задачей jQuery было выбрать нужный метод и предоставить пользователю доступ к нему через свой интерфейс — функцию $.fn.on. В своё время jQuery был почти обязательным для веба, он обеспечивал совместимость.

Сейчас основные функции DOM достаточно унифицированы (например у querySelectorAll поддержка 97.97%), поэтому на данный момент jQuery является не более чем одним из самых простых и элегантных инструментов для манипуляции DOM. JQuery конечно сам по себе крутой — он предоставляет очень удобные и лаконичные способы для реализации анимации, AJAX, обработки наоборов элементов — но всё же в наше время jQuery не является чем-то обязательным, его по вкусу используют в проектах менее сложных, чем веб-приложения.

Если предполагаемый фронт сайта достаточно прост, то вы вряд ли найдёте что-то проще и удобнее чем jQuery, но в то же время можно спокойно обойтись без него и реализовать нужные функции собственными силами. То есть по сути сегодня jQuery это инструмент который сильно упростит и ускорит разработку небольшого проекта, не более.

Кроме того jQuery логичен и понятен — как уже ниже заметил Дмитрий «Demian Smith», начать использовать jQuery вы можете в любую минуту, все недопонимания решаются подглядыванием в документацию.

Лично мне кажется, что вообще тратить время на целенаправленное изучение jQuery стоит только в образовательных целях, например чтобы перенять некоторые приёмы программирования которые используют разработчики jQuery. А если вы и так уже используете jQuery для разработки, то вполне можно переключиться на более интересные вещи. В частности, имеет смысл глянуть на то что делает Юрий kangax Зайцев, в том числе Perfection Kills и всевозможные его около/образовательные статьи.

Is, чистый js, es6, webpack, прочие системы сборки, транспайлеринг, попробуйте работать с анимациями , DOM, без jquery и прочей лабуды.

Я видел сеньеров vue и реакта, которые нихрена не знают о Promices. Хотя юзают их. И в результате тащит в свои spa кучу кода для решения простой задачи. Вы не представляете, что такое видеть в vue компонентах jquery. Это ппц

То что вы называете «чистый JS», как противопоставление jQuery- это, просто API к браузеру. Вот он весь https://developer.mozilla.org/en-US/docs/Web/API . Как видите, там много всего. И запоминать наизусть это не нужно, потому что есть эта ссылка.

То что вы называете jQuery — это обёртка над функциями из предыдущей ссылки вот она: api.jquery.com . Тоже довольно много функций, которые тоже не обязательно зазубривать. Потому что есть вторая ссылка.

Без понимания принципов работы JS — две ссылки выше — это просто непонятный набор цветных букв. Так что учите JS. В этом случае сможете использовать и «чистый JS» и jQuery и любую другую библиотеку. Чтоб оседлать этот язык и чувствовать себя как рыба в воде, рекомендую обратить внимание на такие пункты как:

  • синтаксис языка
  • область видимости
  • функции высшего порядка
  • замыкания
  • event loop
  • работа c DOM

40+ полезных скриптов всплывающих подсказок для CSS, JavaScript и jQuery

Существует интересный элемент пользовательского интерфейса, такой как всплывающие подсказки (также называемые инфо-записями), которые создают небольшое окно с информацией об элементе, когда курсор мыши наводится на определенный текст или изображение. С точки зрения пользовательского интерфейса, всплывающие подсказки предоставляют пользователям самый быстрый и простой источник информации, без необходимости кликать на что-либо.

Balloon.css — Balloon — это библиотека CSS, состоящая из SasS и LESS и позволяющая отобразить интерактивную подсказку. Содержимое и положение всплывающей подсказки настраиваются через атрибут data. Вы можете показать всплывающую подсказку слева, справа или слева направо. Вы даже можете добавить эмоджи к контенту. Balloon.css можно установить через NPM и загрузить с CDNJS.

Simptip — сделано с помощью SasS, позволяющим перенастроить и перекомпилировать код в соответствии с вашими требованиями. Позиция и содержимое подсказки настраиваются с помощью имени класса и атрибута tooltip. Simptip доступен в виде пакета NPM, Yarn и Bower.

Hint.css — одна из популярных библиотек CSS для отображения всплывающей подсказки, Hint.css используется многими популярными веб-сайтами, такими как Fiverr, Webflow и Tridiv. В отличие от двух других библиотек CSS, Hint.css использует атрибут aria-label. Вы можете настроить размер и цвет с помощью имен классов с использованием методологии BEM. Hint.css доступен на NPM, Bower и CDNJS.

Microtip — еще одна потрясающая библиотека CSS для создания всплывающей подсказки. Microtip использует aria-label для хранения содержимого всплывающей подсказки и атрибут data для настройки размера и положения всплывающей подсказки.

Скрипт использует переменную CSS, которая позволяет настраивать всплывающую подсказку с помощью простого файла CSS. Переменные CSS уже поддерживаются во многих веб-и мобильных браузерах. Microtip доступен на NPM, Yarn и CDN UNPkg.

Wenk– весит всего 733 байт. Суперлегкая библиотека, написанная в суперсовременном CSS с использованием CSSNext, LESS и SCSS, позволяет настраивать и перекомпилировать стили так, как вам нравится. Wenk можно загрузить с NPM, Yarn и таких бесплатных CDN-сервисов, как rawgit.com и unpkg.com.

Tooltippy — другая легкая библиотека CSS размером около 1 КБ. Tooltippy включает в себя несколько готовых тем для стилизации всплывающей подсказки. Она написана с помощью препроцессора CSS под названием Stylus.

ElegantTips — эта библиотека поставляется с несколькими предварительно созданными темами, которые можно изменить с предоставленными именами классов. В отличие от других библиотек, которые полагаются на данные HTML5 или атрибут aria-label, ElegantTips требует добавления дополнительного элемента для создания всплывающей подсказки. Это позволяет вам добавить буквально любой контент в подсказку кроме простого текста.

Tootik — эта библиотека CSS предоставляет не только стили в формате CSS, LESS и SasS, а также простой в использовании графический интерфейс для настройки всплывающей подсказки. Вы можете просто скопировать и вставить HTML-код, сгенерированный этим инструментом. Это так просто.

VanillaJS

TippyJS – работающая на Popper.js, TippyJS поставляется с множеством опций для настройки всплывающей подсказки. Вы можете настроить анимацию, стрелку всплывающей подсказки, ширину, размер, тему и многое другое. Скрипт также предоставляет функции обратного вызова, с помощью которых можно выполнить функцию, когда всплывающая подсказка показана и скрыта. Эти функции делают TippyJS одной из самых мощных библиотек JavaScript в нашем списке скриптов для создания всплывающей подсказки.

Darsain Tooltip — эта библиотека обеспечивает базовую реализацию всплывающей подсказки. Тем не менее, она предоставляет обширные возможности для настройки поведения подсказки и набора имен классов для изменения внешнего вида всплывающей подсказки. Всплывающая подсказка хорошо работает в старых браузерах, таких как IE9 и, если это необходимо, и даже в IE8 с несколькими настройками.

Bubb — скрипт хорошо подходит для продвинутых пользователей JavaScript. Используя обширные API-интерфейсы, помимо отображения простого текста, вы можете программно добавить более сложный HTML-контент во всплывающую подсказку. Это довольно круто; вы можете обратиться к Документам к примерам.

Popper — содержит техническую абстракцию для создания чего-то, что появляется, как всплывающая подсказка, всплывающее окно и выпадающие списки. TippyJS использует его в качестве основы библиотеки, кроме того скрипт используется известными именами в Интернете, такими как Bootstrap, Microsoft и Atlassian.

YY Tooltip — в отличие от других библиотек, YY Tooltip не требует добавления элементов или атрибутов HTML. Она полностью работает с JavaScript, а контент, положение и цвета определены в объекте, а не в элементе HTML. Идеально подходит для использования с полным веб-приложением JavaScript.

Position.js — еще одна отличная библиотека JavaScript для создания всплывающих подсказок, Position.js предоставляет графический интерфейс для настройки функции и просто копирует, а затем вставляет созданный там код. Position.js можно использовать в сочетании с React.js или Vue.js.

Bezet Tooltip — эта библиотека предоставляет 14 вариантов отображения всплывающей подсказки; например, справа, слева, снизу, слева в центр, снизу в центр и т. д. Кроме того, она также достаточно умна, чтобы могла отрегулировать положение всплывающей подсказки на основе доступного пространства вокруг самой подсказки.

MouseTip — эта библиотека JavaScrtipt создаст всплывающую подсказку, которая будет двигаться вместе с курсором. Всплывающая подсказка настраивается с нестандартным атрибутом mousetip вместо использования атрибута data в HTML5. Mousetip доступен как модуль NPM.

Internetips — подобно MousetTip, всплывающая подсказка, генерируемая этой библиотекой, следует за положением курсора. Все настроено через объект JavaScript вместо HTML, а атрибуты также созданы для современных браузеров. Скрипт легкий и быстрый.

MTip — библиотека JavaScript для всплывающих подсказок с отличной совместимостью с браузером. Она совместима с IE8, полностью настраиваемая с помощью параметров, и вы можете добавить подсказку к любому элементу даже на img (элемент изображения).

Bubblesee — легкая библиотека JavaScript, которая обеспечивает прямую функциональность «подсказки». Легко использует библиотеку JavaScript без сложных опций для настройки вывода. Файл Sass предоставляется, если вы хотите изменить внешний вид всплывающей подсказки.

Tipfy — построенный с использованием современного синтаксиса JavaScript, ES6, Tipfy имеет размер всего 2 КБ. Библиотека предоставляет две версии файлов: tipfy.min.js, обеспечивающий сценарий с современным синтаксисом ES6 и tipfy.es5.min.js, если вам нужна совместимость со старыми браузерами. Скрипт использует атрибут data для настройки всплывающей подсказки; Например, data-tipfy-side используется для установки направления всплывающей подсказки, а использования атрибута data-tipfy-text для добавления содержимого всплывающей подсказки.

JQuery

Tooltipster — эта библиотека предоставляет обширные возможности для настройки практически любых элементов, таких как тема, анимация, сенсорная поддержка, контент, триггер открыть/закрыть и т. д. Она также предоставляет пользовательский прослушиватель событий и обратные вызовы, позволяя разработчикам расширять всплывающую подсказку с помощью пользовательских функций. Кроме того, будучи плагином jQuery, всплывающая подсказка будет работать в более раннем браузере, таком как IE6, в зависимости от используемой версии jQuery.

Protip — еще один расширенный плагин jQuery, Protip поддерживает 49 позиций, HTML для содержимого всплывающей подсказки, поддержка иконок, пользовательские обратные вызовы и многое другое. Protip предоставляет графический интерфейс, позволяющий легко настраивать всплывающую подсказку.


PowerTip — этот плагин jQuery также предлагает опции и API-интерфейсы, предоставляя разработчикам ряд различных способов реализации всплывающих подсказок. Он поддерживает клавиатурную навигацию, чтобы всплывающее окно отображалось при навигации элементов с помощью клавиатуры Tab. PowereTip доступен как модуль NPM. Он может использоваться с RequireJS и Browserify.

Accessible Aria Tooltip — плагин jQuery со встроенной функцией специальных возможностей, всплывающая подсказка предназначена для отображения диалогового окна с заголовком, многострочным текстом и кнопкой закрытия.

TipsJS — простой плагин jQuery, но он имеет довольно отличительные особенности. Содержимое всплывающей подсказки задается атрибутом data-tooltip. Более того, вы можете также обернуть контент специальными символами для форматирования содержимого, подобного форматированию Markdown. Вы можете использовать *, чтобы сделать содержание полужирным,

для курсивом и ^ для заголовка.

Dark Tooltip — эта библиотека предоставляет некоторые действительно полезные функции для включения всплывающей подсказки. Например, вы можете добавить кнопку подтверждения — «Да» и «Нет», уменьшить фон во время отображения всплывающей подсказки и добавить элементы HTML в контент.

Aria Tooltip — еще одна подсказка со встроенной функцией доступности, этот плагин jQuery совместим с WAI-ARIA 1.1. Он реагирует таким образом, что вы можете предоставить различные конфигурации для разных размеров видового экрана. Aria Tooltip доступен как модуль NPM с именем t-aria-tooltip.

Toolbar.js. — в то время как другой плагин jQuery может отображать только простой текст или HTML-контент во всплывающей подсказке, этот плагин jQuery создает панель инструментов. Всплывающая подсказка будет содержать две или более ссылки с иконкой, которая обычно выполняет действие при нажатии, как и любая панель инструментов.

VueJS

V-Tooltip — это компонент Vue.js, работающий от Popper.js. Он предоставляет новую директиву с именем v-tooltip, которая может быть добавлена к любому элементу для создания всплывающей подсказки. V-tooltip может содержать контент всплывающей подсказки или параметры. Помимо пользовательской директивы v-tooltip вы также можете добавить всплывающую подсказку с помощью компонента v-popover. С помощью этого компонента вы можете добавить более сложный контент во всплывающую подсказку с компонентом Vue.js или HTML.

Vue-Bulma Tooltip — компонент Vue.js для создания всплывающей подсказки, основанной на платформе UML Bulma. Эта библиотека является частью Vue Bulma. Но компонент tooltip доступен как модуль NPM с именем vue-bulma-tooltip, который вы можете использовать как автономный компонент.

Vue-Directive-Tooltip — в целом он похож на компонент V-Tooltip на основе Popper.js и предоставляет ту же директиву, что и v-tooltip. Однако он не обеспечивает компонент v-popover.

Vue-Tippy — эта библиотека оборачивает Tippy.js в компонент Vue.js. Она имеет настраиваемую директиву Vue.js, называемую v-tippy, которая работает как атрибут HTML; вы можете добавить контент для всплывающей подсказки или параметры для ее настройки. Скрипт также отображает пользовательский компонент Vue.js в содержимом всплывающей подсказки с помощью параметра html.

VueJS-Popover — пользовательский Vue.js с настраиваемой директивой, называемой v-popover, и двумя настраиваемыми компонентами, а именно

и , предоставляющими разработчикам возможность добавлять всплывающие подсказки в приложении Vue.js.

Vue-Hint — плагин Vue.js, который распаковыввет Hint.css. В плагине имеется директива v-hint-css для добавления всплывающей подсказки. Он предоставляет тот же набор параметров, что и Hint.css, поэтому вы можете добавить их как объект JavaScript или модификатор Vue.js.

ReactJS

React Joyride — компонент React, чтобы отобразить набор подсказок, которые помогут новым пользователям ознакомиться с вашим новым приложением.

React Floater — эта библиотека оборачивает Popper.js в компонент React с именем Floater, поэтому он обладает такими же замечательными функциями, как и у Floater. Вы можете добавить всплывающие подсказки и всплывающие окна, и вы также можете играть с этим компонентом через эту песочницу.

React Autotip — простой компонент React с функцией автоматического позиционирования, React Autotip автоматически отрегулирует положение всплывающей подсказки при изменении доступного пространства вокруг него.

React Tippy — построен на базе Tippy.js и Popover.js. В этой библиотеке представлен компонент Tooltip, который можно включить в приложение React.

React Hint — компонент React, расширяющий Hint.css. Компоненты добавляют несколько функций, недоступных в Hint.css, таких как автоматическое позиционирование, задержка и функция обратного вызова.

Больше

Ember Tooltips — компонент Ember.js для создания всплывающих подсказок, он построен на базе Popper.js. Компонент также разработан с учетом доступности и продолжает улучшаться, чтобы соответствовать требованиям 508 по данному вопросу.

D3 Tip — плагин D3.js. D3.js — это библиотека JavaScript для визуализации данных, такая как схемы, карты, диаграммы и т. д. Этот плагин позволяет вам показывать всплывающую подсказку поверх этих данных.

Всем успешной работы!

Год без JQuery

Дата публикации: 2020-04-06

От автора: отказ от «рабочей лошадки» во front-end разработке еще в 2014 году привел к появлению более быстрой и компактной платформы.

Я присоединился к сайту We Are Colony летом 2014 года. Спустя полгода работы мы подошли к той точке в разработке, когда нам потребовалось добавить несколько больших функций и переосмыслить основные части дизайна нашей платформы.
У меня было два варианта: или переписать весь мой свежий код, или начать все заново. Я выбрал последнее, что позволило внести несколько крупных изменений в front-end стек и его зависимости – одной из зависимостей, от которой я отказался, был JQuery. Я выбросил его в 2014 году.

На тот момент у меня уже было несколько маленьких завершенных проектов на чистом JS, но этот стал первым крупномасштабным приложением с мощным UI и без JQuery. Как новичок с JQuery и автор большого количества плагинов для этой вездесущей библиотеки, сейчас я подошел к определенной точке и чувствую себя виновным, вспоминая все случаи, когда я вызывал легендарную функцию $() (как и множество других разработчиков, с кем я разговаривал). Я и раньше постоянно старался использовать чистый JS везде, где это будет безопасно для всех браузеров. И сейчас я чувствую, что пора лично от себя и от всего сообщества front-end разработчиков сказать прощай нашему старому другу.

За 18 месяцев полученные мной уроки в процессе создания UI без JQuery оказались крайне ценны, и я хочу поделиться с вами некоторыми из них в этой статье. Но на самом деле написать эту статью меня побудил доклад «Как не использовать JQuery» с недавней встречи front-end London, где был и я. Встреча была довольно информативной, и особое внимание на ней уделили одной неправильной концепции, о которой я услышал от нескольких людей незадолго до встречи – что ES6 спасет нас от JQuery (сразу после излечения рака и победы над мировой бедностью). Я сразу же вспомнил, как недавно я разговаривал с другом разработчиком, который говорил мне, что его команда ждет не дождется избавиться от JQuery «как только ES6 станет более распространенным».

«особое внимание на ней уделили одной неправильной концепции… что ES6 спасет нас от JQuery»

Я до конца не понимаю, откуда вообще появилась эта идея, и хорошо, что она не особо популярно, но данную проблему стоит разобрать в любом случае. По моему мнению, ES6, по большей части столь необходимое синтаксическое улучшение языка JavaScript и JQuery, это библиотека манипуляции DOM с красивым API. У ES6 и JQuery, на самом деле, общего совсем немного, и в первую очередь я хотел написать эту статью, чтобы доказать, что вы можете спокойно отказаться от JQuery, и для этого вам не понадобиться переходить на ES6 или Babel.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Вы можете спросить, а зачем вообще отказываться от JQuery? Во-первых, это перегрузка приложения и время загрузки (особенно на слабых устройствах и медленных соединениях); во-вторых, производительность UI и адаптивность (опять же на слабых устройствах); и последнее, избавление от ненужной абстракции, что позволит вам лучше понять принцип DOM, браузер и его API.

Если и была хоть одна причина оставить JQuery, то, возможно, это поддержка IE8, однако я надеюсь все согласятся, что эти времена благополучно прошли (а если это для вас не такая и причина, то вы мне уже нравитесь). В IE8 не было браузерного DOM API, которое теперь и помогло нам избавиться от JQuery; вещи типа Element.querySelectorAll(), Element.matches(), Element.nextElementSibling и Element.addEventListener() теперь есть во всех браузерах.

В IE9 и выше все еще остаются проблемы, однако данные браузеры более-менее предсказуемы в вопросе «основного» DOM API, как я его называю, которое нужно для написания приложений с тяжелым UI без использования JQuery и без подключения несчетного количества полифилов и библиотек (к сожалению с одним исключением — Element.classList в IE9).

Тем не менее, никто не будет отрицать, что вместе с JQuery идет целый набор полезных функций, а также инструментов для таких вещей, как Ajax и анимация. И в этот момент становится интересно, что включить в свой front-end набор, а что нет.

Хелпер функции

Я понял, что, отказавшись от JQuery, мне выпала прекрасная возможность самому написать парочку хелпер функций и немного больше изучить браузеры и DOM. Это был самый ценный урок для меня. Статический класс хелпер методов (я называю его «h») охватывает такие базовые вещи, как запрос дочерних или родительских элементов, расширение объектов и даже Ajax, а также множество других вещей, не относящихся к DOM.

Может показаться, что это попытка переписать JQuery, однако цель была совершенно другая. Эта небольшая коллекция удобных хелпер методов является лишь крошечной частью всего функционала JQuery без возможности оборачивать элементы в контейнеры или лишней абстрактности. На самом деле нативные браузерные API позволяют нам взаимодействовать с DOM без подключения JQuery, а эти функции заполняют те небольшие пропуски, которые были, когда я только приступил к проекту.
Ниже представлены несколько из тех хелпер функций. Те, которые я посчитал нужными и интересными для обучения. Я не стал их записывать в таком формате, чтобы любой читающий смог их скопировать к себе в проект – они вам, скорее всего даже не нужны. Я показал данные функции, чтобы проиллюстрировать, насколько легко можно решить проблему обхода DOM с помощью вышеупомянутых API.

Как добавлять и удалять классы в Javascript без jQuery

Я ищу быстрый и безопасный способ добавления и удаления классов из элемента html без jQuery.
Он также должен работать в раннем IE (IE8 и выше).

В браузерах, которые не поддерживают classList , работают 3 функции:

Другой подход для добавления класса к элементу с использованием чистого JavaScript

Для добавления класса:

Для удаления класса:

Примечание:, но не поддерживается в IE

Чтобы добавить класс без JQuery, просто добавьте yourClassName к элементу className

Чтобы удалить класс, вы можете использовать replace() функцию

Также как @DavidThomas упомянул, что вам нужно использовать конструктор new RegExp() , если вы хотите динамически передавать имена классов в функцию replace.

Добавить и удалить классы (проверены на IE8 +)

Добавление и удаление классов:

classList доступен из IE10 и далее, используйте это, если можете.

Я использую этот простой код для этой задачи:

CSS код

Javascript код

Когда вы удаляете RegExp из уравнения, вы оставляете менее «дружественный» код, но его все же можно выполнить с помощью (намного) менее элегантного способа split().

Этот метод намного больше, чем простой replace(), но по крайней мере его можно использовать в старых браузерах. И в случае, если браузер не поддерживает команду split(), относительно легко добавить ее с помощью прототипа.

Удалить класс с помощью JavaScript

Посмотрите другие вопросы по меткам javascript html или Задайте вопрос

Введение в jQuery


Начало работы с jQuery

Что такое jQuery

Современное веб-программирование и создание веб-сайтов уже невозможно представить без использования языка JavaScript. Однако в настоящее время, все чаще используется не «голый» код javascript, а javascript-фреймворки и библиотеки. Одной из таких библиотек, причем наверное самой популярной на сегодняшний день, является jQuery. По некоторым оценкам не менее половины крупнейших сайтов в интернете используют эту библиотеку.

Хотя мы и можем назвать jQuery библиотекой, он на самом деле понятие «jQuery» объединяет целую экосистему библиотек, построенный вокруг базовой библиотеки: это и библиотека jquery.ui, предназначенная для создания визуальных интерфейсов, это и jqyery.mobile, используемая при разработке мобильных сайтов и др.

Какие преимущества несет нам использование jQuery?

Упрощение работы с кодом . jQuery предлагает простой элегантный синтаксис для манипулирования элементами на веб-странице.

Расширяемость . Весь код jQuery открыт для просмотра и изменения, и в случае, если что-то в библиотеке не устраивает, ее можно модифицировать. А также можно создавать плагины jQuery.

Кроссбраузерность . jQuery имеет поддержку большинства известных браузеров, в том числе таких. как IE 7,8. (Хотя в силу того, что браузеры IE 6-8 постепенно становятся достоянием истории, а также чтобы уменьшить размер библиотеки в последней версии была прекращена поддержка IE 6-8).

Подключение библиотеки jQuery

Чтобы начать работать с данной библиотекой, нам первым делом надо ее загрузить. Ее найти можно на официальном сайте разработчика https://jquery.com/download/. На странице загрузок в самом можно найти несколько версий jQuery. На момент написания данной главы последней доступной версией является 2.0.3. Хотя версии немного отличаются друг от друга, но эти отличия, как правило, не столь существенны, и базовый стержень и общие принципы у большинства версий по сути одни и те же.

Библиотека представлена в двух вариантах — Compressed или Monified (минимизированная) и Uncompressed (обычный). Минимизированные версии предоставляют ту же функциональность, что и обычные, но отличаются тем, что не содержат всяких необязательных символов, наподобие пробелов, комментариев и т.д., и поэтому в своем названии имею суффикс min , например, jquery-1.10.1.min.js. Поскольку они производительнее за счет меньшего объема, их рекомендуется использовать в реальном производстве. В то же время, если вам захочется понять логику кода jQuery, то в этом случае можно обращаться к обычной версии библиотеки.

Библиотека jquery подключается также, как и другие файлы javascript. Например:

В данном случае я использовал минимизированную версию библиотеки jquery — jquery-1.10.1.min.js. Теперь создадим какую-нибудь простенькую веб-страничку с использованием jquery:

Данная веб-страница, с одной стороны, применяет код jquery, с другой стороны, также демонстрирует отличие от использования стандартного кода javascript.

У нас определены на странице две кнопки. У одной кнопки определен обработчик onclick в самой разметке кнопки: onclick=»alert(‘Мир JavaScript’); » .

Другая же кнопка делает практически тоже самое, но только с jquery. Для этой кнопки определен ), через который в функции jquery мы будет ею управлять.

В самом низу страницы мы определим функцию jquery:

Выражение $(function()<>); — это и есть краткое определение функции jquery. Эту функцию принято помещать в конце документа, как в данном случае, перед закрывающем тегом body. Данная функция включает весь код на языке javascript, который будет выполняться при загрузке страницы.

Смысл использованного кода состоит в том, что мы получаем элемент кнопки в выражении $(«#btn1») и затем вешаем на него обработчик нажатия. Фактически выражение $(«#btn1»).click будет аналогично использованию обработчика onclick в теле разметки кнопки. При этом нам не надо никак изменять разметку самой кнопки, что-то туда дописывать. Все делается в функции jquery.

Что в нашем случае она включает? Во-первых, мы устанавливаем цвет кнопки: $(this).css(‘background-color’, ‘red’); . А дальше просто выводим сообщение на экран.

Использование сетей CDN

В предыдущем примере я подключил библиотеку jquery непосредственно с локального диска, однако нам необязательно загружать библиотеку и размещать на локальном диске рядом с прочими файлами. Вместо этого мы можем использовать сети CDN (Content Delivery Networks). В данном случае сама библиотека будет находится физически в какой-либо сети CDN, а мы можем указать на нее ссылку.

Например, подключим библиотеку jquery, находящуюся в jQuery CDN:

Необязательно подключать именно эту версию библиотеки, весь набор доступных версий библиотеки можно найти по адресу https://code.jquery.com/

Также мы можем использовать и другие сети CDN. Например:

Как создать и настроить цель типа «JavaScript-событие» в «Яндекс.Метрике»?

Яндекс.Метрика не нуждается в представлении. Ведь это один из мощнейших инструментов для веб-аналитики. Сам по себе сервис включает в себя множество инструментов для сбора данных, одним из которых являются «Цели».

Цель – это некий сценарий, при успешном прохождении которого поставленная цель считается достигнутой.

Всего на момент написания статьи Яндекс.Метрика содержит в себе 4 типа целей. Это:

  1. Количество просмотров страниц.
  2. Посещение определенных страниц.
  3. JavaScript-событие.
  4. Составная цель.

Сегодня мы поговорим о JavaScript-событии, в следующих же статьях, по отдельности, рассмотрим остальные типы целей.

Этот тип цели считается достигнутым, когда при определенных условиях (их мы рассмотрим ниже) вызывает специальный код.

Для начала – давайте получим этот код.

1. Зайдите в Яндекс.Метрику.

2. Далее, напротив нужного вам счетчика, нажмите на шестеренку (она вызывает страницу настроек).

3. На открывшейся странице настроек переключитесь на вкладку «Цели» и нажмите на кнопку «Добавить цель».

4. В открывшейся форме выбираете «JavaScript-событие», где вводите название цели и ее идентификатор.

И нажимаете «Добавить цель».

После чего, при успешном создании цели, она появиться в общем списке целей:

Где вы нажимаете «Сохранить». Если этого не произошло – пишите об этом в комментариях.

Теперь нам нужно сохранить номер счетчика (не путайте с номером цели) и идентификатор цели:

Они нам потребуются для уже финальной установки цели на наш сайт.

Во всех случаях мы будем вызывать следующую функцию:

Где «XXXXXX» – как раз номер вашего счетчика, а «TARGET_NAME» – идентификатор цели. А теперь примеры.

Установка цели на форму

Если вы на своем сайте имеете форму без технологии AJAX, то есть в ней присутствует часть похожая на эту:

Месяц в подарок. Помощь с переездом. Быстрая тех. поддержка. Цена от 165р в месяц. Скидки, спеши!

Javascript и jQuery

Что такое Javascript и jQuery? Начнём узнавать с самого начала, так сказать с нуля и по порядку.

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

Основными языками используемыми в веб, являются HTML, CSS, Javascript и PHP.

HTML используется для разметки документа (страницы). Разметка — это написание по порядку всех элементов (текст, картинки, блоки), которые на этой странице находятся.

На CSS делается этим элементам оформление: цвет, фон, размеры, отступы, рамки, тени, прозрачность и т.п.

Так же на css пишется позиционирование, т.е. определяется место на странице, и анимация, т.е. некоторая подвижность, которая с развитием приобретает всё больше и больше возможностей.

Javascript обладает ещё более широким диапазоном средств для оживления страниц. На нём пишутся такие прибамбасы как слайдеры, виджеты, всплывающие окна и меню, а анимации выполняются более плавно и разнообразно.

Javascript добавляет очень интересные возможности формам (комментарии, ввод пароля и т.п.), и ещё много чего интересного связанного с внешним видом и функциональностью сайта, о чём мы узнаем в течении этого курса.

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

Все эти языки не просто совместимы, а не разделимы, в том что касается сайтостроения. То есть, если например тема оформления пишется на PHP, то в коде обязательно будут присутствовать блоки, строки и вставки написанные на html, css и на javascript.

Более подробно о каждом из них можно узнать из курсов представленных на этом сайте (см. Содержание).

В этой же рубрике мы разберём «по косточкам» javascript и jQuery.

Забегая немного вперёд, скажу: jQuery — это самая популярная библиотека готовых решений для javascript.

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

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

Очень удобно и значительно расширяет возможности я зыка.

Но об этом впереди, а пока займёмся javascript, чтоб узнать как он выглядит, пишется и работает, чтоб суметь сделать такой запрос, и ещё много чего другого.

Javascript формально является клиентским языком (клиент — это браузер), то есть его код не требует интерпретации на сервере, как например код php.

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

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

То есть, не всё что написано на javascript , будет безоговорочно выполнено браузером без обработки на сервере, как например в случаях с html и css.

Поэтому для этого языка предусмотрено выполнение не только на стороне клиента, но и на стороне сервера.

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

То есть по факту javascript является клиент-серверным языком.

Однако, слишком большие возможности могут породить и некоторые, порой существенные проблемы. Так что не будем выходить за заявленную и обозначенную браузером область применения. Во всяком случае в этом курсе.

Поэтому Вам не придётся озадачиваться установкой локального сервера, так как для тестирования примеров будет достаточно редактора кода, такого как Notepad++.

Из редактора можно будет открыть любой документ с javascript в вашем браузере.

Ещё не лишним будет создать на компьютере папку для хранения файлов написанных по мере прохождения курса.

Возможно ведь какой-то урок не будет понят с ходу, и придётся над ним поработать ещё и ещё раз, а для этого надо будет сохранить сей документ.

Так что сразу подготовьте для него место.

Ну вот, в общих чертах, без учёта тонкостей и особенностей использования javascript, пожалуй, достаточно для начала.

Дальше пойдут уроки, в которых будет много незнакомых слов, аббревиатуры, названий и определений.

Заучивать их наизусть (зубрить) не надо. Постарайтесь внимательно ознакомится, чтоб инфа отложилась в мозгу, и потом, при разборе скриптов, проще было уяснить что откуда и куда.

Добавить комментарий