JavaScript, jQuery
Насколько раздражают стандартные окна оповещений JS? Они представляют из себя пережиток примитивной эпохи веб-разработки.
Подробнее …
Каждый современный сайт должен быстро загружаться. Существует множество методов и плагинов для ускорения загрузки страниц, поэтому вы можете не знать, что использовать сначала.
Скрипт Progressively является отличным инструментом для увеличения скорости страницы. Он является скриптом для отложенной загрузки изображений (lazy load), который загружает изображения постепенно в процессе прокручивания страницы пользователем.
Подробнее …
jQuery до сих пор была полезной и прагматичной библиотекой, но все чаще снижается вероятность того, что вы будете использовать ее в своих проектах для выполнения таких задач, как выбор элементов, их стилизация, анимация и выборка данных. С увеличением поддержки браузерами ES6 (около 96% на момент написания статьи), сейчас, возможно, самое время отказаться от использования jQuery.
Подробнее …
Для некоторых пользователей панель процесса загрузки (progress bar) является очень полезной вещью. Он информирует их о том, насколько они ближе к цели. Обычно используется для более удобного взаимодействия в пользователем. Когда вы открываете веб-страницу в своем любимом браузере, на вкладке браузера уже есть индикатор выполнения по умолчанию, который позволяет увидеть, полностью ли загружена страница.
Подробнее …
В интернете вы можете найти десятки библиотек прокрутки страниц. Большинство из них написаны на JavaScript и имеют свои собственные эффекты анимации при прокрутке, которые вы можете настроить для одностраничных макетов и многого другого.
Подробнее …
Категории блога
- Битрикс (40)
- HTML-верстка (54)
- Joomla (18)
- JavaScript, jQuery (26)
- PHP (10)
- Базы данных (5)
- Разное (23)
Мои услуги
Предлагаю следующие услуги:
- Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
- Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
- Настройка и кастомизация компонентов и модулей для указанных CMS
- Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
- Разработка лендингов (landing-pages)
По все вопросам обращайтесь через форму обратной связи
Скачать
Предлагаю вашему вниманию:
-
Шаблон документа HTML5 (zip, 35.
41 Кб)
- Шаблон jQuery-плагина (zip, 426 байт)
41 Кб)
Полезное
- Шпаргалки (Cheat Sheets)
- Генератор паролей
- Метка времени для заданной даты
10 советов для написания JavaScript без JQuery
JQuery — огромная библиотека. Она пришла приблизительно в то время, когда IE6 был браузером номер один. Тогда было много специфических моментов и разногласий, что делало процесс разработки утомительным и JQuery был идеальным инструментом для написания кроссбраузерного кода.
С тех пор, однако, веб-браузеры намного усовершенствовались. Вы можете с удобством использовать все возможности, предоставляемые ES5, и имеете в полном распоряжении огромную API-библиотеку HTML5, которая делает работу с DOM-элементами намного приятнее.
Разработчики теперь могут выбирать, что же можно оставлять из JQuery для некоторых проектов, продолжая сохранять свою производительность.
Не поймите неправильно – JQuery по-прежнему отличная библиотека и чем чаще вы будете использовать ее, тем лучше. Тем не менее, для небольших проектов, например, для простых страниц с ограниченным JS взаимодействием, расширениями браузеров и мобильных сайтов, вы можете использовать vanlla JS.
Вот 10 советов, которые помогут в вашей деятельности.
1. Прослушивание на готовность документа (Document Ready)
Первое, что вы делаете, когда пишете JQuery, это упаковывание своего кода в вызов $(document).ready() для того, чтобы определить готовность DOM к манипуляциям. Без JQuery у вас есть событие DOMContentLoaded. Вот как оно используется.
2. Выбор элементов
Давным-давно Вы могли только выбирать элементы по ID, классу и имени тега, а JQuery с ее умными CSS-селекторами выступала своеобразным спасателем. Браузеры исправили это и представили две важные API — querySelector и querySelectorAll.
3. Установка и удаление слушателей событий
Прослушивание событий — фундаментальная часть построения веб-приложения. Принято было использовать две основные стороны, которые отличались тем, каким способом все было сделано — IE и остальное. Но сегодня мы просто используем addEventListener.
4. Манипулирование классами и свойствами
Манипулирование именами классов элементов без JQuery было очень неудобно использовать. Но проблема была решена благодаря свойству ClassList. И если нужно управление атрибутами, Вам нужен SetAttribute.
5. Получение и установка содержимого элементов
JQuery имеет удобный текст и html ( )методы. Вместо их можно использовать свойства textContent и innerHTML, которые были у нас в течение очень долгого времени.
6. Установка и удаление элементов
Хотя JQuery и делает все намного проще, добавление и удаление DOM-элементов невозможно без простого JavaScript. Здесь показано, как добавлять, удалять и заменять любые элементы, какие Вы только захотите.
7. Прохождение по DOM дереву
Любой настоящий JS-ниндзя знает, что есть много возможностей, скрытых в DOM. По сравнению с JQuery простые интерфейсы DOM предлагают ограниченную функциональность для выбора нескольких уровней. И, тем не менее, есть множество вещей, которые Вы можете делать, путешествуя по DOM — дереву.
Видео курсы по схожей тематике:
Разработка Web Services на платформе Java
Юрий Мищеряков
Angular Углубленный
Дмитрий Охрименко
Верстка сайта на CSS Grid
Сластен Максим
8. Обработка массивов
Некоторые из утилитных методов, которые предоставляет JQuery, доступны со стандартом ES5. При переборе массивов можно использовать forEach и map вместо их JQuery аналогов — each() и map(). Просто будьте осторожны при различиях в аргументах и значениях по умолчанию в обратных вызовах.
9. Animations
Методы анимации JQuery самым лучшим образом подходят ко всему, что Вы бы хотели «оживить» и, если нужны сложные анимации из скриптов в приложении, Вы должны по-прежнему иметь дело с ней.
Но благодаря всем чудесам CSS3, некоторые простые случаи можно обработать с помощью легкой библиотеки Animate.css, которая позволяет запускать анимацию, добавляя или удаляя имена классов элементов.
10. AJAX
Ajax – это еще одна технология, которая используется при кросс-браузерном беспорядке. Хорошая новость — теперь можно использовать один и тот же код везде. Плохая новость — по-прежнему громоздко создавать экземпляры и отправлять AJAX-запросы с XMLHttpRequest, так что лучше предоставить это библиотеке. Но Вы не должны подключать всю JQuery только для этого. Вы можете использовать одну из самых многочисленных и легких библиотек, которые доступны. Вот пример построения запроса AJAX напрямую, и с помощью небольшой библиотеки запросов.
Выводы
Стремление к минимальному, нулевому количеству наворотов на веб-странице — достойная цель, что окупит себя быстрой загрузкой и лучшим пользовательским опытом. Но будьте осторожны — никто не выиграет, если Вы будете изобретать велосипед, который уже используется в JQuery.
Не жертвуйте хорошей практикой разработки только для того, чтобы сократить количество кода. Но есть множество мест, где на сегодня советы вполне применимы. Попробуйте следовать ванили в следующий раз, это может быть все, что вам нужно!
Бесплатные вебинары по схожей тематике:
Создание первого проекта на Angular.
Генрих Коваленко
Создание анимации с помощью CSS
Константин Абрамов
Создание дизайна лендинга с Figma.
Алла Штогрина
Источник: http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/
Примеры jQuery
❮ Предыдущий Далее ❯
Хотите проверить свои навыки селектора jQuery?
Попробуйте наш jQuery Selector Tester
jQuery Selectors
$(«p»).hide() — Скрыть все элементы
$(«#test»).hide() — Скрыть элемент с помощью
$(«.test»).hide() — Скрыть все элементы с помощью
$(this).
Описание селекторов
События jQuery
jQuery click() jQuery дблклик() jQuery мышь введите () jQuery mouseleave () jQuery наведение мыши() jQuery мышь () jQuery при наведении () jQuery фокус() и размытие()
Объяснение событий
jQuery Hide/Show
jQuery hide() jQuery скрыть() и показать() Переключение jQuery() jQuery hide()
Скрыть и показать объяснение
jQuery Fade
jQuery fadeIn() jQuery затухание() JQuery затухание () jQuery fadeTo()
Fade объяснение
jQuery Slide
jQuery slideDown() JQuery SlideUp () jQuery slideToggle()
Описание слайда
jQuery Animate
jQuery анимировать() jQuery animate() — управление несколькими свойствами CSS jQuery animate() — использование относительных значений jQuery animate() — использование предопределенных значений jQuery animate() — несколько вызовов друг за другом
Объяснение Animate
jQuery Stop Animations
jQuery stop() slide jQuery stop() анимация (с параметрами)
Объяснение остановки анимации
jQuery HTML Get Content and Attributes
jQuery text() and html() — Get content jQuery val() — Получить содержимое jQuery attr () — получить значение атрибута
Объяснение получения содержимого и атрибутов
jQuery HTML Установить содержимое и атрибуты
jQuery text(), html() и val() — Установить содержимое jQuery text() и html() — установить содержимое с помощью функции обратного вызова jQuery attr() — установить значение атрибута jQuery attr() — установка нескольких значений атрибутов jQuery attr() — Установить значение атрибута с помощью функции обратного вызова
Объяснение установки содержимого и атрибутов
jQuery HTML Добавить элементы/содержимое
jQuery append() jQuery в начале() jQuery append() — вставить несколько новых элементов jQuery после() и до() jQuery after() — вставить несколько новых элементов
Добавить элементы/содержимое объяснил
jQuery HTML Удалить элементы/содержимое
jQuery remove() jQuery remove() — с параметром jQuery empty()
Объяснение удаления элементов/содержимого
jQuery Получение и установка классов CSS
jQuery addClass() jQuery addClass() — Несколько классов jQuery удалить класс () jQuery toggleClass()
Получить и установить CSS объяснение
Метод jQuery css()
jQuery css() — вернуть свойство CSS jQuery css() — установить свойство CSS jQuery css() — установка свойств CSS
Объяснение метода css()
Размеры jQuery
jQuery — возврат ширины() и высоты() jQuery — вернуть innerWidth() и innerHeight() jQuery — вернуть externalWidth() и externalHeight() jQuery — вернуть externalWidth (true) и externalHeight (true) jQuery — вернуть ширину () и высоту () документа и окна jQuery — установить ширину () и высоту ()
Объяснение размеров
jQuery Обход предков
jQuery parent() родители jQuery() jQuery parentUntil()
Объяснение обхода предков
jQuery Обход потомков
jQuery children() jQuery find()
Объяснение обхода потомков
jQuery Обход братьев и сестер
jQuery siblings() jQuery следующий() jQuery рядом со всеми() jQuery nextUntil()
Объяснение обхода братьев и сестер
jQuery Пересечение фильтрации
jQuery first() jQuery последний() jQuery-эквалайзер() jQuery-фильтр() jQuery not()
Объяснение обхода фильтрации
Фильтры jQuery
Таблица фильтров Список фильтров Фильтровать что угодно
Описание фильтров
Метод jQuery AJAX load()
jQuery load() jQuery загрузка() jQuery load() — с обратным вызовом
AJAX load() объяснение
jQuery AJAX методы get() и post()
jQuery get() jQuery post()
Объяснение AJAX get() и post()
❮ Предыдущий Следующий ❯
ВЫБОР ЦВЕТА
jQuery Введение
❮ Предыдущий Далее ❯
Цель jQuery — упростить использование JavaScript на вашем веб-сайте.
Что вы уже должны знать
Прежде чем приступить к изучению jQuery, вы должны иметь базовые знания:
- HTML
- УСБ
- JavaScript
Если вы хотите сначала изучить эти предметы, найдите учебные пособия на нашей домашней странице.
Что такое jQuery?
Цель jQuery — упростить использование JavaScript на вашем веб-сайте.
jQuery выполняет множество общих задач, для выполнения которых требуется много строк кода JavaScript, и оборачивает их в методы, которые можно вызвать с помощью одной строки кода.
jQuery также упрощает многие сложные вещи из JavaScript, такие как вызовы AJAX и манипулирование DOM.
Библиотека jQuery содержит следующие функции:
- Работа с HTML/DOM
- CSS манипуляции
- Методы событий HTML
- Эффекты и анимация
- АЯКС
- Коммунальные услуги
Совет:
Почему jQuery?
Существует множество других библиотек JavaScript, но jQuery вероятно, самый популярный, а также самый расширяемый.
Многие крупнейшие компании в Интернете используют jQuery, например:
- Майкрософт
- IBM
- Нетфликс
Будет ли jQuery работать во всех браузерах?
Команда jQuery знает все о кросс-браузерных проблемах, и у них есть
записал эти знания в библиотеку jQuery. jQuery будет работать точно так же
во всех основных браузерах.
❮ Предыдущий Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
