20 полезных методов jQuery, которые следует использовать в работе


Содержание

Работа с выборкой элементов на jQuery

В предыдущей статье мы разбирали, как сделать выборку элементов в jQuery, однако, сама по себе выборка не имеет смысла, если с ней ничего не делать. И в этой статье мы разберём, как мы можем работать с выборкой элементов на jQuery.

Давайте разберём для начала следующий пример

В данном примере мы, во-первых, разобрали метод clone(). Его цель создать копию элемента для того, чтобы мы могли управлять новым элементом, не затрагивая старый. Далее мы поменяли текстовое содержимое с «Блок«, доставшееся нам от элемента, который мы склонировали, на «Новый блок«. В конце мы уже добавили с помощью метода append() наш созданный блок внутрь элемента с .

Помимо клонирования элементов и изменения текстового содержимого, также используется возможность задания CSS-свойств для элементов:

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

Разберём ещё один пример работы с выборкой элементов на jQuery:

В данном примере мы получили дочерние элементы и установили у них атрибуты. Но здесь самое главное не это. Обратите внимание, что метод attr() применяется именно к объекту jQuery. То есть написать так: «elements.get(i).attr» — нельзя, а только так «$(elements.get(i)).attr«. Запомните, что если Вы используете метод, принадлежащий jQuery, а не JavaScript, то обязательно надо обёртывать элементы в $().

И, напоследок, ещё разберём один пример:

Здесь стоит обратить внимание на «element.className«. Как видите, здесь нет $(). Так написано потому, что свойство className встроено в JavaScript. А вот метод html() принадлежит jQuery, поэтому мы и пишем «$(element).html(. )«.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

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

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Введение в jQuery

    Материал из JQuery

    jQuery — javascript библиотека, использование которой делает разработку javascript кода намного быстрее, проще и приятнее.

    Содержание

    Небольшая подсказка

    На данном сайте есть описание практически всех функций библиотеки jQuery, поэтому, если вам будет непонятна одна из функций в примерах, можно быстренько посмотреть ее описание. А чтобы не тратить время на ее поиск, воспользуйтесь поиском по ключам: начните вводить название интересующей вас функции в поле «по ключам».

    Начнем

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

    Используя обычный javascript для решения каждой из этих задач потребуется десятки строк программного кода (и много головной боли по поводу его правильной работы в разных браузерах). Автор jQuery разработал свою библиотеку таким образом, что наиболее общие задачи становятся тривиальными. Например, вот так, с помощью функции $() из библиотеки, можно находить элементы на странице по различным параметрам:

    $(«div») вернет все div-элементы на странице.
    $(«.someBlock») вернет все элементы с классом someBlock.
    $(«#content») вернет элемент с идентификатором content.
    $(«#content2 div.someBlock») вернет div-элементы с классом someBlock, которые находятся внутри элемента с идентификатором content2.
    $(«div:odd») вернет div-элементы, находящиеся на странице под нечетными номерами.
    $(«[value = 5]») вернет все элементы с атрибутом value, равным 5.

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

    $(«#bigIt»).css(«height») возвратит значение высоты у элемента с идентификатором bigIt.
    $(«div»).css(«width», «20px») установит новое значение ширины всем div-элемента на странице.
    $(«#bigIt»).attr(«class») возвратит значение класса элемента с >
    $(«#bigIt»).attr(«class», «box») установит новое значение атрибута >
    $(«#bigIt»).html(

    )

    изменит все html-содержимое элемента с >
    $(«#bigIt»).text() возвратит текст, находящийся внутри элемента с >
    $(«.someBox»).empty() очистить от содержимого элементы с классом someBox.

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

    Функция $()

    Функция с лаконичным именем $() является, пожалуй самой главной во всей библиотеке. С ее помощью можно находить элементы на странице (в чем вы уже убедились), добавлять «на лету» новый html:

    Кроме этого, $() позволяет привязать всю функциональность jQuery к уже существующим объектам DOM-элементов:

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


    Начало работы скрипта

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

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

    Цепочки методов

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

    эти цепочки могут состоять из гораздо большего числа методов. Для удобочитаемости, цепочки часто пишут «в столбик»:

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

    Работа с набором элементов

    Помимо манипуляций с выбранными элементами, jQuery позволяет работать с самим набором: изменять его, а так же работать с элементами по отдельности. Продемонстрируем часть возможностей:

    $(«div»).parent() вернет родительские элементы всех div-ов.
    $(«div»).children() вернет дочерние элементы всех div-ов.
    $(«#someId»).next() вернет элемент, лежащий сразу после someId.
    $(«div»).prev() вернет элементы, лежащие перед div’ами.
    $(«div»).eq(i) вернет div-элемент, с индексом i в наборе.
    $(«div»).get(i) вернет DOM-объект div’а, с индексом i.
    $(«div»).get() вернет массив DOM-объеков всех div-ов.
    $(«div»).size() вернет размер набора (количествово div-ов).

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

    Отметим различия методов get(i) и eq(i). Первый возвращает непосредственно DOM-объект элемента, идущего под номером i в наборе (кстати, нумерация начинается с 0). К такому элементу вы не сможете применить методы jQuery, зато сможете применить стандартные javascript методы. Метод eq(i) наоборот, возвращает i-й элемент в таком виде, что к нему можно применять методы jQuery. Вообще, для того, чтобы к элементам можно было применять методы библиотеки jQuery, они должны находиться в так называемом объекте jQuery, именно его возвращает функция $().

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

    Анимационные эффекты

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

    Ключевым методом, на которой базируются все остальные, является метод animate(), с помощью которого можно задавать плавное изменение различных CSS-свойств:

    properties — список CSS-свойств, участвующих в анимации и их конечных значений. Задаются объектом, в формате , например:.
    duration — продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд). easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). Задается строковым значением: "linear" и "swing" (для равномерной анимации и анимации с ускорением). Другие варианты можно найти в плагинах. callback — функция, которая будет вызвана после завершения анимации.

    Пример. Пусть у нас есть элемент div с каким-нибудь текстом. Мы хотим плавно скрыть этот элемент, заменить текст, и плавно сделать элемент видимым:

    значения "hide", "show" означают исчезновение и появление элемента, за счет параметра, к которому они применены.

    Существуют отдельные методы, позволяющие скрывать и показывать элементы, а так же, изменять их прозрачность. Все эти методы можно найти в разделе эффекты. Необходимо также заметить, что при одновременном вызове нескольких эффектов, применительно к одному элементу, их выполнение будет происходить не одновременно, а поочередно. Например при выполнении следующих команд:

    элемент с идентификатором my-div, в начале будет плавно исчезать с экрана, а затем начнет плавно появляться вновь. Однако, анимации, заданные на разных элементах, будут выполняться одновременно:

    В jQuery реализована возможность выполнения запросов к серверу без перезагрузки страницы, так называемая технология ajax. Базовыми функциями для ее работы являются post() и get() (есть еще более низкоуровневая, ajax(), но мы ее не будем рассматривать):

    url — url-адрес, по которому будет отправлен запрос. data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: . callback() — пользовательская функция, которая будет вызвана после ответа сервера. dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос (подробности тут).

    Рассмотрим примеры с методом get, использование второго метода аналогично. Сделаем простейший ajax-запрос: отправим пустой запрос к серверу и не будем обрабатывать ответ. Это может быть использовано, например для подсчета количества наведений курсора на баннер (при каждом наведении серверу будет отправляться сигнал).

    Теперь, отправим данные на сервер и обработаем их. Javascript будет выглядеть следующим образом:

    На сервере, обработка Ajax запроса ничем не отличается от обработки обычного запроса (как когда вызывается главная страница сайта):

    В результате этого запроса, на странице появится табличка с текстом "I get param1 = param1 and param2 = 2"

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

    Запросив эту страницу методом get или post, полученные данные можно будет легко обработать:

    Помимо рассмотренных методов, существует и методы с более узкой направленностью: load() запрашивает html-текст и автоматически вставляет его в выбранные элементы, $.getScript() делает запрос javascript-файла и автоматически его выполняет. Эти и другие функции можно найти в разде Ajax.

    Разные плюшки

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

    $.browser поможет узнать тип браузера. $.support поможет узнать конкретные особенности браузера. .offset() и .position() позволят узнать или изменить позицию выбранного элемента. .width() и .height() позволят узнать или изменить размеры выбранного элемента. .scrollTop() и .scrollLeft() позволят работать с прокруткой. Функции из раздела события позволят обрабатывать различные события, происходящие на странице.

    В разделе «Рецепты» вы сможете найти удачные решения многих задач средствами jQuery.

    Подключение jQuery к вашему сайту

    Для того, чтобы функциональность библиотеки jQuery стала доступной на страницах вашего сайта, необходимо скачать файл с библиотекой на официальном сайте jquery (ссылка с текстом "Download the compressed, production jQuery", чтобы скачать библиотеку, необходимо кликнуть по ссылке правой клавишей мыши и выбрать "Сохранить ссылку как.."). Полученный файл нужно будет загрузить на сервер, где лежит ваш сайт, и подключить этот js-файл на страницы сайта:

    Тонкости подключения jQuery к сайту можно почерпнуть здесь.

    Титры

    Часть текста в данной статье позаимствована из статьи "Query – Javascript нового поколения" журнала RSDN. Это одна из первых статей по jQuery, благодаря которой о библиотеке узнало, наверное, наибольшее число русскоязычных программистов. Однако, на данный момент, часть информации в ней уже не актуальна.

    jQuery Методы событий

    Jquery это специально сделано, чтобы реагировать на события в HTML-страницы.

    Какие события?


    Все действия различных посетителе, что веб-страница может реагировать на события называются.

    Событие представляет собой точный момент, когда что-то случится.

    • перемещение мыши над элементом
    • выбор кнопки радио
    • щелкнув на элементе

    Термин "fires/fired" часто используется с событиями. Например , « keypress событие вызывается, момент , когда вы нажимаете клавишу".

    Вот некоторые наиболее часто встречающиеся события DOM:

    События мыши События клавиатуры Форма События Документ / Окно События
    click keypress submit load
    dblclick keydown change resize
    mouseenter keyup focus scroll
    mouseleave blur unload

    JQuery Синтаксис для методов событий

    В JQuery, большинство событий DOM имеют эквивалентный метод JQuery.

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

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

    Широко используемые методы Event Jquery

    $(document).ready() метод позволяет выполнить функцию , когда документ полностью загружен. Это событие уже было объяснено в JQuery синтаксиса главы.

    click() метод придает функцию обработчика событий к HTML - элементу.

    Функция выполняется, когда пользователь нажимает на HTML элемент.

    Следующий пример говорит: Когда событие нажмите пожары на

    элемента; скрыть текущий

    пример

    dblclick() метод придает функцию обработчика событий к HTML - элементу.

    Функция выполняется, когда пользователь делает двойной клик на элементе HTML:

    пример

    mouseenter() метод придает функцию обработчика событий к HTML - элементу.

    Функция выполняется, когда указатель мыши входит в HTML-элемент:

    пример

    mouseleave() метод придает функцию обработчика событий к HTML - элементу.

    Функция выполняется, когда указатель мыши покидает элемент HTML:

    пример

    mousedown() метод придает функцию обработчика событий к HTML - элементу.

    Функция выполняется, когда левый, средний или правая кнопка мыши нажата, а мышь находится над HTML элемента:

    пример

    mouseup() метод придает функцию обработчика событий к HTML - элементу.

    Функция выполняется, когда левая, средняя или правая кнопка мыши отпускается, в то время как мышь находится над HTML элемента:

    пример

    hover() метод принимает две функции и представляет собой комбинацию из mouseenter() и mouseleave() методы.

    Первая функция выполняется, когда мышь входит в HTML-элемент, а вторая функция выполняется, когда мышь покидает элемент HTML:

    пример

    focus() метод придает функцию обработчика событий в поле HTML - формы.

    Функция выполняется, когда поле формы получает фокус:

    пример

    blur() метод придает функцию обработчика событий в поле HTML - формы.

    Функция выполняется, когда поле формы теряет фокус:

    пример


    on() Метод

    on() метод придает один или несколько обработчиков событий для выбранных элементов.

    Приложить событие щелчка к

    пример

    Прикрепите несколько обработчиков событий элемента

    пример

    Проверьте себя с упражнениями!

    Методы событий Jquery

    Для получения полной справки события JQuery, пожалуйста , перейдите на наш Jquery Events Reference .

    jQuery метод .is()

    Определение и применение

    jQuery метод .is() проверяет текущий соответствующий набор элементов относительно селектора, элемента, или объекта jQuery и возвращает логическое значение true , если хотя бы один из этих элементов соответствует приведенному значению.

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

    До версии jQuery 1.7 такие позиционные селекторы как :first(), :gt(), или :even(), используемые в методе .is() для сопоставления с элементами, приводили к некорректному результату, так как сравнение происходило по коллекции jQuery, а не всему документу.

    Не смотря на то, что начиная с версии jQuery 1.7 библиотека jQuery корректно работает с позиционными селекторами, разработчики библиотеки рекомендуют не использовать (когда это возможно) позиционные селекторы, они являются дополнением jQuery, а не стандартом W3C.

    jQuery синтаксис:

    Добавлен в версии jQuery

    Значения параметров

    Параметр Описание
    selector Строка, содержащая выражение селектор, который будет использоваться для сопоставления с элементами.
    function(index, element) Функция, используемая в качестве проверки (сопоставления) каждого элемента в наборе. Функция принимает два аргумента:
    • index - индекс элемента в коллекции jQuery.
    • element - текущий элементу DOM.
    selection Cуществующий объект jQuery, который будет использован для сопоставления с текущим набором элементов.
    elements Один, или несколько элементов DOM, которые будет использованы для сопоставления с текущим набором элементов.

    Пример использования

    В этом примере с использованием jQuery метода .is() мы при нажатии на элемент проверяем имеет ли данный элемент класс active, если да, то с помощью метода .css() устанавливаем цвет текста зеленый, если нет то красный.

    Результат нашего примера:

    Пример использования метода .is()

    В следующем примере мы рассмотрим использование метода .is() с функцией, переданной в качестве параметра:

    Результат нашего примера:

    Пример использования метода .is() (функция в качестве параметра) jQuery перемещения

    Основные функции jQuery: примеры, команды и методы

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

    Работа с функциями JQuery

    JavaScript – довольно низкоуровневый язык программирования. Он не обеспечивает расширенным управлением и анимацией. Более того, использование прямого JavaScript может вызвать проблемы, связанные с несовместимостью браузера.

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

    JQuery – это библиотека JavaScript, поэтому установка – это просто вопрос импорта скрипта внутри веб-страницы. Однако есть несколько рекомендаций, которые следует учитывать:

    • Библиотека JQuery доступна через CDN. Использование CDN вместо установки JQuery на ваших серверах должно обеспечить значительную производительность и увеличить пропускную способность.
    • Как и любой статический контент, файлы JQuery должны быть сжаты. Вот почему доступны две версии JQuery: минимальная (или минимизированная) версия, небольшая и эффективная, и версия для разработки, которую легче читать и отлаживать. Для остальной части этой статьи мы будем использовать минимальную версию, которой достаточно для наших нужд.
    • Файлы библиотеки JQuery должны быть кэшированы на стороне клиента, поэтому вы должны использовать номер версии JQuery в имени файла.

    Элементы JQuery

    Самый простой способ начать работу с JQuery – это выбрать некоторые элементы на нашей веб-странице.

    $ не является ключевым словом для JavaScript. Это однобуквенная функция определенная JQuery. Текст, переданный этой функции, анализируется JQuery, который затем генерирует правильную серию функций JavaScript для выбора элементов Document Object Model (DOM). Этот метод выбора элементов DOM является кратким и независимым от браузера, который затрагивает две наиболее важные проблемы, возникающие при программировании JavaScript. В результате JQuery обеспечивает быстрый, простой и эффективный кросс-браузерный выбор узлов DOM на веб-странице.

    Конечно, идентификатор – это не единственный способ выбора элементов. Вы можете использовать класс элементов или некоторые свойства этих элементов. Например, вы можете выбрать все элементы с классом:

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

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

    Управление элементами веб-страницы


    После того как элементы HTML были выбраны, вам, безусловно, нужно будет управлять ими, изменив их класс CSS, добавив текст или даже полностью заменив их. JQuery предоставляет функции для всех этих задач.

    Вариант использования, который можно реализовать, заключается в замене идентификатора, который выбран ранее. С этой информацией: имя автора, фамилия автора и URL. На данный момент эта информация будет храниться статически внутри JavaScript-кода. Вот информация, которую временно можно закодировать в JavaScript-коде:

    Поскольку известен идентификатор, можно выбрать элемент

    JQuery предоставляет множество других функций для изменения элемента HTML. Например, можно заставить элемент появляться или исчезать с помощью функций show() и hide().Альтернативным способом было бы изменить класс CSS, используемый элементом; для этого JQuery предоставляет функции для добавления класса, удаления класса или проверки наличия класса.

    Теперь, когда идентификатор был заменен информацией, попробуем отобразить эту информацию.

    Анимация с помощью JQuery

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

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

    Вернемся к примеру. Для примера выберем простую анимацию скольжения:

    Использование анимации с AJAX очень важно с точки зрения пользователя:

    • Анимация скрывает тот факт, что некоторые запросы требуют времени для обработки на стороне сервера.
    • Анимации привлекают внимание пользователя к тому, что меняется на веб-странице. Без анимации пользователь может не заметить, что часть страницы изменилась.

    Возможности функций JQuery

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

    Вызов функции jQuery определяется с помощью function – ключевого слова. Далее за ним обязательно следует имя функции, список разделенных запятыми аргументов, заключенных в круглые скобки, и, если необходимо, оператор JavaScript. JQuery параметры функции, заключенную в фигурные скобки <>.

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

    При необходимости написать простую функцию multiply (x, y), которая просто принимает два параметра x и y, выполняет простые x раз y равно чему-то, и возвращает значение. Вот один из способов сделать это:

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

    Ниже будет приведено еще несколько jQuery функций.

    Добавление содержимого на страницу

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

    Функция js jQuery .html () может читать текущий HTML внутри элемента и заменять текущее содержимое другим HTML-кодом. Используйте функцию .html () в сочетании с выбором jQuery. Чтобы получить HTML-код, находящийся внутри выделения, просто достаточно добавить:

    После выбора jQuery. Например, вы можете запустить следующую команду, используя фрагмент HTML вначале этого раздела:

    Этот код создает окно предупреждения с текстом «

    Ошибки: » в нем. Использование функции html () позволит вам сделать копию HTML внутри определенного элемента и вставить его в другой элемент на странице.

    .text () работает как .html (), но он не принимает HTML-теги. Это необходимо, когда требуется заменить текст в теге.

    остается на месте; изменяется только текст внутри.

    .append () добавляет HTML в качестве последнего дочернего элемента выбранного элемента. Например, скажем, вы выбираете тег

    .prepend () - это точно такая же функция, как .append () , но добавляет HTML непосредственно после открытия тега для выбора. Например, скажем, вы запустите следующий код в том же HTML, который был указан ранее:

    Замена и снятие выбора

    Иногда вы можете полностью заменить или удалить выбранный элемент. Например, предположим, что вы создали всплывающее диалоговое окно с использованием JavaScript. Когда посетитель нажимает кнопку «Закрыть» в диалоговом окне, вы, естественно, хотите удалить диалоговое окно со страницы.

    Для этого вы можете использовать функцию jQuery remove (). Скажем, во всплывающем диалоговом окне был ID всплывающего окна. Вы можете использовать следующий код для его удаления:

    Функция .remove () не ограничивается только одним элементом. Предположим, вы хотите удалить все теги , к которым применяется класс ошибок. Вы можете сделать это:

    Анонимные функции

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

    Она не содержит имен. Вот базовая структура анонимной функции:

    Поскольку нет имени, у вас нет способа вызвать функцию. Например, с помощью обычной именованной jQuery функции вы используете ее имя с помощью набора круглых скобок, например: calculateSalesTax (). Вместо этого вы используете анонимную функцию как аргумент, который вы передаете другой функции (странно и запутанно, но верно). В jQuery выполнение функции each () выглядит так:

    И в заключении

    Эта статья поможет новичкам jQuery. jQuery – это просто библиотека JavaScript, которая использует сокращенные объекты, анонимные функции и цепочки методов.

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

    Насколько актуален jQuery?

    Привет, Тостер! Объясните, пожалуйста, такой момент: почему в настоящее время всё чаще слышно, что jQuery – это устаревшая во всех смыслах библиотека, о которой следует забыть уже в 2020-2020?


    Я начинающий разработчик, изучаю Javascript. В процессе поиска информации, регулярно вижу утверждения о ненужности jQuery. И напротив, внятно сформулированных альтернатив, пока не нахожу. Хотел бы выяснить для себя, уже наверняка:

    1. Действительно ли jQuery устарел и почему?
    2. Что вы используете в работе вместо jQuery?
    3. Целесообразно ли для таких, как я, тратить сегодня время на его изучение?

    Заранее благодарю за ответы.

    • Вопрос задан более года назад
    • 2080 просмотров

    2) Когда надо склепать быстрый лендос со слайдером slick, я использую jQuery.

    какие-то штуки делаются дольше, но из-за них нет смысла тащить jQuery. Есть пример?

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

    PS: Вы меня прям обожаете вижу :-)

    я имел ввиду, что ради одного slickDown, тащить jQuery смысла нет.

    А по тексту, вы дополнили первый пункт своего ответа и в полном виде он теперь звучит так:
    Он устарел по той причине, что его возможности уже реализованы в JS, какие-то штуки делаются дольше, но из-за них нет смысла тащить jQuery.
    Или вы не имели ввиду то, что написали?

    В jQuery есть смысл в его огромной базе плагинов, если их не использовать, то и смысл юзать jQuery тоже нет.

    Снова не объективно и не аргумент отказываться от использования JQuery.

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

    Снова не объективно и не аргумент отказываться от использования.

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

    Утверждение объективней не стало. Оно ложно и способно ввести в заблуждение, хотя бы учитывая тот факт, что далеко не "все его возможности реализованы в JS". То, что эти возможности можно реализовать самому, уже другой вопрос.

    Какой смысл использовать селекторы, когда есть querySelector

    Тут уж каждый решает для себя. Объективно, вызов JQuery гораздо лаконичней querySelecrorAll с последующей итерацией и не требует сторонних функций хелперов или изворотов для итерации по коллекции. Это снижает когнитивную нагрузку с человека сопровождающего код, особенно если человек его видит впервые. Пример:
    $('.select').click(handler);
    Никто не мешает вам написать и использовать вагон хелперов. Тут уж каждый решает сам, что ему удобней.

    Какой смысл использовать всякие fadeIn, fadeOut, slideDown и прочие, когда transition тащит?

    Повторите с transition эту простую анимацию, при условии, что высоту списка вы не знаете.

    Разве не считается устаревшей штукой то, что уже делает определенные штуки хуже чем встроенная штука?

    Вы пытаетесь мне доказать то, что я написал.

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

    jQuery - есть смысл, если у стоит задача быстро (не качественно) склепать просто сайт. Что-то чуть сложнее (калькуляторы, скрипты), то jQuery уже стоит под вопросом.

    Снова ваша субъективная оценка. Тут каждый сам для себя решает. Бизнесу зачастую гораздо дешевле обходится разработка и поддержка модулей на JQuery, а студиям дешевле обходятся специалисты со знанием этой библиотеки и дефицита в них обычно нет.

    Давайте, расскажите мне, в каких проектах вы используете jQuery. Я послушаю.

    20 полезных методов jQuery, которые следует использовать в работе

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

    Задача становится еще сложнее для тех из нас, кто еще не переехал в волшебную сказочную страну чудес, где ни один из наших клиентов не использует для просмотра страниц Internet Explorer — скорость JavaScript движка IE сравнима со скоростью движения ледника, и не идет в сравнение с другими современными браузерами. Поэтому оптимизация производительности нашего кода становится делом еще более важным.

    К счастью, существует несколько очень простых вещей, которые каждый может добавить в собственный рабочий процесс jQuery и решить множество базовых проблем. Анализируя различные образцы кода, я выделил три основных области, в которых мне постоянно встречаются самые серьезные проблемы: неэффективные селекторы, слабое делегирование событий и неуклюжая DOM манипуляция. Мы разберем каждую из них, и вы, я надеюсь, тоже извлечете пользу и сможете применить эти решения в своем следующем проекте.

    Оптимизация селектора

    Скорость селектора: высокая или низкая?

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

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

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

    Это, вне всяких сомнений, быстрейший селектор jQuery, он работает напрямую с исходным document.getElementbyld() методом JavaScript. По возможности, селекторы, следующие за выбранным, должны предваряться в сочетании с методом jQuery .find(), дабы ограничить объем страницы, на которой должен вестись поиск (как и в случае $("#id").find("p") продемонстрированным выше).

    Также быстро выбирают элементы по тегу имени, так как метод ссылается на оригинальный document.getElementsByTagname().

    Выбор по имени класса немного более сложен. Хотя он до сих пор достаточно хорошо выполняется в современных браузерах, метод может вызвать значительное замедление работы IE8 и ниже. Почему? IE9 был первой версией IE поддерживавшей родной JavaScript метод document.getElementsByClassName(). Старым браузерам приходится прибегать к гораздо более медленному методу DOM-поиска, способному значительно ухудшить производительность.

    Для этого селектора не существует родного метода JavaScript, поэтому единственный способ, которым jQuery может его выполнить — проползти через весь DOM в поисках совпадений. Современные браузеры, которые поддерживают метод querySelectorAll(), в ряде случаев сделают это чуть лучше (Opera, по сравнению с другими, выполняет этот вид поиска в особенности быстро), но, говоря начистоту, этот селектор просто Медлен Медленовский.


    Как селектору атрибутов, ему не соответствует ни один из родных методов JavaScript. Псевдоселекторы могут быть мучительно медленными, так как селектор должен обследовать каждый элемент в выделенном пространстве поиска. Опять же, современные браузеры с querySelectorAll() могут делать это чуть лучше, но постарайтесь все же избегать его по возможности. Если же вам без него не обойтись, попробуйте хотя бы ограничить зону поиска до определенного участка страницы с помощью: $("#list").find(":hidden");

    Но — эй! — все доказывается тестами производительности, ведь так? И доказательство находится прямо здесь. Сравните селекторы классов в IE7 или 8 с остальными браузерами, а потом удивляйтесь, как люди из Microsoft, работающие над IE, могут спокойно спать по ночам.

    Цепочки

    Практически все методы jQuery возвращают jQuery объекты. Это означает, что во время выполнения метода его результаты возвращаются, и вы можете продолжить проводить над ними большее число операций. Вместо написания одного и того же селектора несколько раз, просто выберите несколько действий, которые необходимо произвести с ним.

    Без цепочек

    С цепочками

    Получаем двойной эффект — ваш код становится одновременно короче и быстрее. Объединенные в цепочки методы будут чуть быстрее, чем множественные, проводимые с кэшированным селектором, и оба будут много более быстрыми, нежели множественные методы, проводимые с некэшированными селекторами. Подождите. «Кэшированные селекторы»? Что это за дьявольщина?

    Кэширование

    Другой простой способ (который, по всей видимости, тоже является тайной для разработчиков) ускорить работу вашего кода — это идея кэширования селекторов. Подумайте о том, как часто вам порой приходилось писать один и тот же селектор снова и снова в своем проекте. Каждый селектор $(".element") должен обыскивать весь DOM каждый раз снова, не зависимо от того, сколько раз он был запущен до этого. Проведение выборки один раз и сохранение полученного результата в переменной означает, что поиск в DOM должен проводиться лишь один раз. Как только результат селектора будет кэширован, вы сможете делать с ним что угодно.

    Во-первых, начните свой поиск (здесь мы выбираем все элементы внутри ):

    Теперь вы можете использовать переменную blocks где угодно без необходимости обыскивать DOM каждый раз.

    Мой совет? Любой селектор, выполняемый более одного раза, должен быть кэширован. Этот jsperf тест демонстрирует, насколько быстро работает кэшированный селектор по сравнению с некэшированным (и вдобавок демонстрирует работу цепочек).

    Делегирование событий

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

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

    jQuery 1.7 предоставляет нам новый метод — обработчик событий .on(). Он действует как утилита, которая объединяет все предыдущие обработчики событий в один удобный метод, и то, как вы его вписываете, определяет, как он должен себя вести. Чтобы переписать .click() в примере выше с использованием .on(), мы просто должны сделать следующее:

    Довольно просто, правда? Конечно, но проблема здесь в том, что мы по-прежнему привязываем сто обработчиков к одной странице, по одному для каждой из ячеек таблицы. Гораздо лучшим способом было бы создание единственного обработчика событий в таблице, который следил бы за всеми событиями внутри нее. Так как большая часть событий охватывает дерево DOM, мы можем привязать один обработчик к одному элементу (в данном случае ) и ждать событий в дочерних элементах. Чтобы сделать это с помощью метода .on(), достаточно внести лишь одно изменение в пример выше:

    Все, что мы сделали, это передвинули td-селектор в аргумент внутри метода .on(). Присоединив селектор к .on() мы перевели его в режим делегирования и теперь событие действует лишь на дочерние элементы нашего (table), которые соответствуют селектору (td). Благодаря этому простому изменению мы можем использовать всего один обработчик событий вместо сотни. Вы, наверное думаете, как здорово, что теперь браузеру придется выполнять в сто раз меньшую работу — и будете абсолютно правы. Разница между двумя примерами выше ошеломляюща.

    (Заметьте, что если ваш сайт использует jQuery более ранней, нежели 1.7, версии, вы можете выполнить те же действия, используя метод .delegate(). Синтаксис вашего кода будет несколько отличаться от нашего; если вы никогда прежде не делали ничего подобного, вам стоит ознакомиться с API документацией, дабы разобраться, как это работает.)

    Манипуляции с DOM

    jQuery позволяет легко манипулировать DOM. Очень просто создавать новые узлы, вставлять одни, удалять другие, перемещать их и так далее. Хотя сам код пишется легко, во время каждой манипуляции с DOM браузер должен перерисовывать и перегруппировывать контент, что может быть весьма ресурсоемким процессом. В особенности это касается длинных циклов, будь то стандартный цикл for(), цикл while() или jQuery цикл $.each().

    Предположим, что мы только что получили массив, переполненный URL ссылками на изображения из базы данных или Ajax-вызов, или что угодно — и мы хотим поместить все эти изображения в неупорядоченный список. Обычно вы видите код вроде этого:

    Но здесь есть несколько проблем. Для начала (и вы, вероятно, уже заметили это — если внимательно читали статью) мы делаем выборку через $("#imgList") на каждом этапе нашего цикла. Другой проблемой здесь является то, что при каждом повторении цикла он добавляет новый к DOM. Каждая из этих итераций дорого нам обойдется и, если наш массив достаточно велик, это может привести к серьезному замедлению работы или даже зловещему предупреждению «A script is causing this page to run slowly» («Скрипт замедляет работу страницы»).

    Все, что мы сделали здесь — создали переменную tmp к которой добавляется каждый новый из вновь создаваемых . Когда наш цикл завершит работу, переменная tmp будет содержать в памяти весь список элементов и сможет быть приложена к нашему за один раз. С объектами в памяти браузеры работают намного быстрее, чем с теми, что на экране, поэтому данный метод построения списка много более быстрый и дружественный центральному процессору.

    Заключение

    Это далеко не все способы улучшения вашего jQuery кода, но, определенно, одни из наиболее простых в применении. Хотя выигрыш от каждого индивидуального изменения составляет всего несколько миллисекунд, вместе они очень неплохо суммируются. Исследования показали, что человеческий глаз способен различать паузы длительностью от 100 мс, а значит, всего несколько изменений в коде могут легко изменить общее впечатление от скорости работы вашего сайта или приложения. У вас есть советы по работе с jQuery, которыми вы готовы поделиться? Оставьте их в комментариях и помогите нам всем стать лучше.

    Теперь вперед, сделайте все на высшем уровне!

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

    Вполне может оказаться, что основное время уходит не на поиск элементов, а на ожидание ответа сервера, или анимацию множества объектов, или отрисовку элементов браузером.

    Скорость селектора: высокая или низкая?

    здесь Скотт не объясняет, почему $("#id p") выполняется медленнее, чем $("#id").find("p"). Большинство разработчиков знает, что поиск по id выполняется быстро, и потому и указвают его в селекторе, т.к. уверены, что обе выше приведенные записи эквивалентны, но оказывается, что jQuery выполняет разбор и поиск элементов не в прямом направлении, а в обратном т.е. в нашей записи сначала jQuery найдет все абзацы, а потом для каждого из них будет искать среди предков элемент с id равным «id».

    Манипуляции с DOM

    Здесь, по сути, все написано верно, но опущен еще один важный способ оптимизации скорости вставки множества элементов в DOM дерево — использование documentFragment.

    jQuery - Урок 4. Методы для работы с CSS-стилями

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

    Сегодня рассмотрим методы, которые используются для CSS-стилей.

    Итак, чтобы добавить какому-либо элементу стиль, необходимо воспользоваться следующим методом:

    Данная инструкция обведет div синей рамкой.

    В качестве параметров здесь используются названия и значения, применимые в CSS: background, border, font-style, color и т.д.

    Если необходимо задать для элемента несколько CSS-правил, то лучше использовать следующую конструкцию:

    Данная инструкция обведет div синей рамкой, сделает фон красным, а текст - жирным.

    Обратите внимание, что для сложносоставных свойств CSS вроде font-weight и background-color используются иэ эквиваленты из JS: fontWeight, backgroundColor и т.д.


    Перечислим другие методы для работы со стилями:

      .addClass(class)

    Данная инструкция добавит класс main к последнему элементу параграфа.

    Данная инструкция удалит класс main из всех четных параграфов.

    Данная инструкция удалит класс main из всех параграфов, если он присутствует. И добавит этот класс, если он отсутствует.

    Данная инструкция позволяет получить отступы слева и сверху для элемента. Чтобы получить значения конкретного свойства, нужно использовать следующие свойства: offset.left для отступа слева и offset.top - для отступа сверху.

    Данная инструкция позволяет получить (первая строка) и задать (вторая строка) высоту элемента.

    Данная инструкция позволяет получить (первая строка) и задать (вторая строка) ширину элемента.

    Первая строка запишет в переменную widDiv значение ширины первого div-а. Вторая инструкция задаст div-ам класса fir ширину в 300 пикселов.

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

    Давайте, используя полученные знания сделаем меню с вкладками, вот такого вида (пощелкайте по вкладкам):

    Работа с выборкой элементов на jQuery

    В предыдущей статье мы разбирали, как сделать выборку элементов в jQuery, однако, сама по себе выборка не имеет смысла, если с ней ничего не делать. И в этой статье мы разберём, как мы можем работать с выборкой элементов на jQuery.

    Давайте разберём для начала следующий пример

    В данном примере мы, во-первых, разобрали метод clone(). Его цель создать копию элемента для того, чтобы мы могли управлять новым элементом, не затрагивая старый. Далее мы поменяли текстовое содержимое с "Блок", доставшееся нам от элемента, который мы склонировали, на "Новый блок". В конце мы уже добавили с помощью метода append() наш созданный блок внутрь элемента с .

    Помимо клонирования элементов и изменения текстового содержимого, также используется возможность задания CSS-свойств для элементов:

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

    Разберём ещё один пример работы с выборкой элементов на jQuery:

    В данном примере мы получили дочерние элементы и установили у них атрибуты. Но здесь самое главное не это. Обратите внимание, что метод attr() применяется именно к объекту jQuery. То есть написать так: "elements.get(i).attr" - нельзя, а только так "$(elements.get(i)).attr". Запомните, что если Вы используете метод, принадлежащий jQuery, а не JavaScript, то обязательно надо обёртывать элементы в $().

    И, напоследок, ещё разберём один пример:

    Здесь стоит обратить внимание на "element.className". Как видите, здесь нет $(). Так написано потому, что свойство className встроено в JavaScript. А вот метод html() принадлежит jQuery, поэтому мы и пишем "$(element).html(. )".

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

    Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

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

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

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

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Expert Coders

    В этой статье рассматривается ряд практических советов по производительности jQuery и javascript. Многие советы основаны на презентации jQuery Anti-Patterns for Performance (автор Paul Irish).

    Кешируйте length при обращении в цикле

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

    Добавляйте новый контент вне цикла

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

    Будьте осторожны с анонимными функциями

    Очень частое использование анонимных функций может вызвать проблемы. Их сложно отлаживать, поддерживать, тестировать или повторно использовать. Лучше давать имена вашим объектам, обработчикам и callback функциям.

    Оптимизация селекторов

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

    Всегда хорошо начинать описание селектора с ID.

    Цукерберг рекомендует:  Вакансии Setka
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих