jQuery для чайников | Введение

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

Все вы наверняка видели на современных сайтах различные всплывающие или наоборот прячущиеся панели, сайдбары – гармошки, картинки плавно затухающие или скользящие, классные фото-галереи и т.п. Красиво, черт!

В шаблонах WordPress а ля «премиум» уже просто не обходится без слайдера с картинками. Смотрится красиво и стильно. Хочется ведь и в своем шаблоне что-то подобное прикрутить.

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

Поэтому хотя бы на уровне грамотного пользователя jQuery (не разработчика!) изучить данный предмет стоит. Вот этим и займемся.

Еще раз, для прояснения: в данном цикле статей будет в самой простой и доступной форме показан ряд примеров практического применения библиотеки jQuery, без глубокого вникания в суть происходящих процессов. Кому интересно более детальное изучение предмета — читайте профильные форумы и блоги. Вот несколько ссылок:

1. Статья из Wiki
2. Документация на jQuery-Docs.Ru
3. Сайт разработчиков jQuery

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

Любой начинающий вебмастер, который уже немного разбирается в верстке и знает про HTML и CSS, также знает или хотя бы слышал про JavaScript.

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

Читайте также: JavaScript для начинающих | Введение

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

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

<script type="text/javascript" src="clock.js"></script>

Практически точно также мы пристегиваем к странице файл стилей CSS. Это просто.

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

<script type="text/javascript">
программный код самого скрипта
</script>

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

Так появилась специальная библиотека сборник по имени jQuery. Теперь достаточно положить в корневую папку нашего сайта один единственный файл jquery.js и затем выдергивать из него необходимые эффекты в нужных местах страницы. Удобно? Безусловно!

Библиотека эта постоянно совершенствуется и пополняется. Ее свежую версию всегда можно скачать с официального сайта разработчиков jquery.com. На данный момент времени (27.01.2010) свежая версия имеет номер 1.4.1

Сразу же возникает закономерный вопрос: а каким конкретно образом можно указать этой самой библиотеке, где мы хотим прилепить то-то и то-то? Ведь сама она не станет показывать фокусы и раздавать леденцы.

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

Enjoy!

jQuery для чайников | Введение
jQuery для чайников | Начальные сведения | Простой слайдер
jQuery для чайников | Эффект линзы | плагин JQzoom
jQuery для чайников | Всплывающая подсказка | Плагин Tooltip

12 компьютерных игр для IT-специалистов

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

С этой задачей отлично справляются игры. Развивать магов и воинов, строить поселения и делать ещё много интересного можно с помощью… кода. Мы спросили специалистов МТС о том, в какие айтишные игры они играли, и собрали в этой статье 12 экземпляров, которые показались нам увлекательными и необычными.

Flexbox Froggy

Начнём с простого. Flexbox Froggy — это весёлый интерактивный способ изучения CSS Flexbox. Игрокам нужно рассадить группу лягушек различных размеров на лилиях, написав код CSS. В игре 24 уровня, каждый из которых имеет свою собственную задачу. Игра даёт мгновенную обратную связь и помогает игрокам понять концепции Flexbox, показывая эффекты их кода в реальном времени.

Фрагмент прохождения 17 уровня с канала CodeQuest.

Code Combat

Code Combat — это браузерная многопользовательская обучающая игра, в которой нужно писать код для управления персонажами и решения задач в фантастическом мире. Это не просто коллекция уроков и задач. Это настоящая RPG, где есть игровые локации, персонаж с характеристиками, умениями и инвентарём и, конечно, боссы. Только управление выполняется не с помощью геймпада или клавиатуры, а с помощью написанного вручную кода на одном из языков программирования — Python, JavaScript, jQuery, Lua, HTML, CSS.

Даже чтобы ходить, нужно вводить команды.

Ещё у Code Combat есть свои киберспортивные арены с командами, рангами, лидерами и регулярными состязаниями.

Всего в таблице лидеров почти 4 млн игроков.

Codin Game

Это платформа для развития навыков программирования, соревнований и решения алгоритмических головоломок. Сложность задач варьируется от «Новичка» до «Эксперта», поэтому Codin Game подойдёт и для тех, кто только учит свой первый язык программирования, и для специалистов с опытом. Платформа имеет социальный аспект, позволяя пользователям соревноваться друг с другом и отслеживать свой прогресс.

Пока не исправишь код, будешь проигрывать.

Codin Game поддерживает несколько языков, включая Java, Python, C++ и многие другие. Все они не умещаются в один блок слайдера на сайте:

Screeps

Это MMO в жанре стратегии в реальном времени. В Screeps игроки пишут код для управления своими юнитами, ресурсами и структурами в виртуальном мире. Цель игры — собирать ресурсы, строить сооружения и расширять своё влияние.

Графика простая, но уже после пары запусков начинаешь хорошо отличать башню от хранилища, а терминал от фабрики.

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

Algotica Iterations

У игры необычный формат — 3D-пазл с приключениями. Игрок должен провести персонажа по имени Лони из одной точки каждого уровня в другую, используя команды, написанные кодом.

3D-локации хорошо просматриваются со всех сторон.

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

Дизайн локаций добавляет игре уюта.

CodeWars

CodeWars — это тренажёр для совершенствования навыков программирования на нескольких языках, включая JavaScript, Python, Ruby и др. Здесь можно отрабатывать синтаксис, решать алгоритмические задачи и работать с шаблонами проектирования. Задачи проверяет встроенный автоматический алгоритм. Одна из главных фишек CodeWars — сообщество и конкуренция. Пользователи могут соревноваться друг с другом и подниматься в таблице лидеров.

while True: learn()

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

Одну и ту же задачу можно решить с использованием разного количества элементов, а перед релизом её можно многократно тестировать. Фрагмент разбора игры с канала StopGame.

Название игры — это отсылка к конструкции под названием «бесконечный цикл», в котором программа повторяет набор инструкций до тех пор, пока не будет выполнено определённое условие. Это довольно точно отражает игровой процесс.

Hacknet

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

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

Prime Mover

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

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

Shenzhen I/O

Это головоломка и симулятор инженера, в которой нужно собирать схемы из электронных компонентов и писать код на языке ассемблера. Среди доступных элементов — память, микроконтроллеры и даже ЖК-экраны. Игра не слишком проста для новичков. Как минимум, нужно знать основы ассемблера и прочитать техническое руководство к Shenzhen I/O.

В игре реалистичные электронные схемы.

Else Heart.Break()

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

В Else Heart.Break() живой трёхмерный мир, что большая редкость для IT-игр.

Robocode

Это игра для продвинутых специалистов по Java. Главная цель Robocode — прокачать свой танк с помощью кода и победить противников, став лучшим из лучших. Игрок задаёт самостоятельно все параметры танка, начиная от импорта нового робота и заканчивая настройкой его поведения на поле. Играть в «Робокод» непросто, потому что среди соперников много профессионалов в программировании.

Бонус — Dungeons and Developers

Это не игра как таковая, а дерево навыков. Dungeons and Developers — это дань уважения культовой настолке D&D, только в числе умений здесь не ловкость или скрытность, а знание HTML, CSS, JS, баз данных, сервисов аналитики и другие. Игрок создаёт персонажа и постепенно открывает новые параметры в дереве навыков. Цель — приобрести все навыки и превратиться в Мастера.

Описание каждого навыка содержит ссылки на полезные материалы.

Конечно, это лишь малая часть IT-игр. Поделитесь в комментариях, играли ли вы в какие-то из них и какая ваша любимая «профессиональная» игра. Нам будет очень интересно об этом узнать.

Как перебрать массив в jQuery

1 ответ на этот вопрос.

0 голосов

Связанные вопросы в веб-разработке

Я использую Jquery PrettyPhoto, чтобы иметь … ПОДРОБНЕЕ

29 июня 2022 г. в веб-разработке к гаурав • 22,960 баллов • 276 просмотров

  • jquery
  • уии
  • красивое фото

Метод jQuery fadeIn() используется для… ПОДРОБНЕЕ

ответил 29 июня 2022 г. в веб-разработке к раджата • 7 480 баллов • 431 просмотр

  • CSS
  • анимация
  • фотошоп
  • переход
  • гиф

Используйте метод jQuery attr() Вы можете просто . .. ПОДРОБНЕЕ

ответил 30 июня 2022 г. в веб-разработке к раджата • 7 480 баллов • 233 просмотра

  • jquery

здесь я пытаюсь получить значения … ПОДРОБНЕЕ

1 июля 2022 г. в веб-разработке к гаурав • 22 960 баллов • 2875 просмотров

  • jquery

Как я могу перебрать все … ПОДРОБНЕЕ

8 февраля 2022 г. на Яве к Рахул • 9 670 баллов • 86 просмотров

  • JavaScript
  • массивов
  • петель
  • для каждого
  • итерация

Как я могу использовать JavaScript для создания цикла… ПОДРОБНЕЕ

21 сент. 2022 г. на Яве к Николай • 7760 баллов • 129 просмотров

  • JavaScript
  • массивов
  • петель
  • для каждого
  • итерация

Как я могу использовать JavaScript для создания цикла. .. ПОДРОБНЕЕ

9 декабря 2022 г. на Яве к Николай • 7760 баллов • 179 просмотров

  • JavaScript
  • массивов
  • петель
  • для каждого
  • итерация

$(документ).готовый(функция() { $ («а»). Нажмите (функция () { … ПОДРОБНЕЕ

6 июня 2022 г. в JQuery к Эдурека • 13 630 баллов • 150 просмотров

  • JavaScript
  • jquery
  • массивов

Чтобы получить подстроку строки в …

ПОДРОБНЕЕ

ответил 27 июня 2022 г. в веб-разработке к раджата • 7 480 баллов • 382 просмотра

  • jquery

<голова> <скрипт> $(документ). готов(функция(){ $(«кнопка»). нажмите (функция () { $(«р»). text(«Добро пожаловать в … ПОДРОБНЕЕ

ответил 27 июня 2022 г. в веб-разработке к раджата • 7 480 баллов • 437 просмотров

  • jquery
  • HTML
  • CSS
  • Я хочу напечатать от 1 до 100 чисел, используя массивы только в Javascript 16 ноября 2022 г.
  • Не удается прочитать свойство ‘push’ неопределенного при объединении массивов 16 ноября 2022 г.
  • функция отображения для объектов (вместо массивов) 16 ноября 2022 г.
  • Когда дженерики Java требуют вместо и есть ли недостатки переключения? 29 сентября 2022 г.
  • Для чего полезно ключевое слово volatile? 29 сентября 2022 г.
  • Все категории
  • ЧатGPT (6)
  • Апач Кафка (84)
  • Апач Спарк (596)
  • Лазурный (145)
  • Большие данные Hadoop (1907)
  • Блокчейн (1673)
  • С# (141)
  • С++ (271)
  • Консультирование по вопросам карьеры (1060)
  • Облачные вычисления (3469)
  • Кибербезопасность и этичный взлом (147)
  • Аналитика данных (1266)
  • База данных (855)
  • Наука о данных (76)
  • DevOps и Agile (3590)
  • Цифровой маркетинг (111)
  • События и актуальные темы (28)
  • IoT (Интернет вещей) (387)
  • Джава (1247)
  • Котлин (8)
  • Администрирование Linux (389)
  • Машинное обучение (337)
  • Микростратегия (6)
  • PMP (423)
  • Power BI (516)
  • питон (3193)
  • РПА (650)
  • SalesForce (92)
  • Селен (1569)
  • Тестирование программного обеспечения (56)
  • Таблица (608)
  • Таленд (73)
  • ТипСкрипт (124)
  • Веб-разработка (3002)
  • Спросите нас о чем угодно! (66)
  • Другие (2032)
  • Мобильная разработка (275)

Подпишитесь на нашу рассылку новостей и получайте персональные рекомендации.

Уже есть учетная запись? .

Перебор коллекции с помощью метода jQuery each | Кевин Чизхолм


jQuery упрощает получение ссылки на набор элементов DOM. Метод jquery.each позволяет выполнять функцию для каждого из элементов коллекции.

Решение проблем — одно из лучших качеств jQuery, и прелесть метода jQuery.each в том, что он решает очень распространенную проблему: как выполнить итерацию набора элементов DOM . Теперь, чтобы выполнить эту задачу, можно настроить цикл for. Этот подход вовсе не является неправильным; на самом деле, на некоторых уровнях это имеет смысл. Дело в том, что при таком подходе вы столкнетесь с несколькими проблемами, которых можно избежать. Во-первых, много шаблонного кода. Другими словами, для настройки цикла for вам понадобится переменная-счетчик, которую мы назовем « i ». А так как мы можем захотеть повторить набор элементов DOM более одного раза, нам нужно будет сделать « i «частная переменная», что означает использование функции для создания частной или « локальной » области видимости. Кроме того, 80% нашего цикла for будет повторяющимся кодом. Итак, вы поняли… наши проблемы нарастают, и их, безусловно, можно избежать. Итак, вот где в игру вступает красота метода jQuery.each: он обеспечивает абстракцию для создания цикла for. Это означает, что нам нужно только предоставить коллекцию и метод обратного вызова, которые мы хотели выполнять для каждой итерации цикла.

Метод jQuery.each является незаменимым инструментом, когда вам нужно перебрать набор элементов DOM. Допустим, у вас есть куча элементов на странице. Может быть, это « каждый тег » или « каждый

  • внутри
      с классом sales », или каждый элемент
      , который является дочерним элементом
      .

      Вот как можно создать ссылку на каждую из этих коллекций.

      jQuery вернет коллекцию с одним или несколькими элементами. Но как перебрать эту коллекцию и «сделать что-то» с каждой? Вы можете добиться этого, привязав метод . each() к возвращаемому значению и, конечно же, передав обратный вызов этому методу.

      Метод jQuery.each — базовый синтаксис

      В приведенном выше примере вы видите «селектор», представляющий CSS-подобный запрос, такой как « p » или « #some-id p img » и т. д. ., что бы вы перешли на jQuery. Теперь вы можете видеть, что мы передали функцию обратного вызова методу each() . И внутри этого обратного вызова мы позаботимся о любых задачах, которые относятся к элементам, над которыми мы сейчас работаем.

      Итак, например, мы создадим обработчик события клика для каждого

    • внутри
        . Вот разметка, с которой мы будем работать:

        Имея в виду эту разметку, рассмотрим следующий код:

        Пример № 1

        Обратите внимание, что в примере № 1 мы используем $(this) . Теперь, на случай, если вы не знакомы с этим шаблоном, $(this) равно « текущий элемент », и это встречается в нашем коде дважды. Первый экземпляр $(this) в строке № 2 относится к элементу, по которому в данный момент выполняется итерация (т. е. к текущему « UL LI »). Второй $(это) в строке № 3 представляет элемент, по которому только что щелкнули. Это потому, что мы хотим изменить цвет элемента, который только что был нажат, на красный.

        С точки зрения псевдокода, вот что мы сделали: 1- Для каждого

      • , который находится внутри
          , добавьте обработчик события щелчка
          2. В обработчике события щелчка мы скажите «Если вы нажмете на меня, сделайте мой текст красным»

          Пример № 2

          В примере № 2 мы немного изменим логику, чтобы только

        • с классом «рабочий день» возвращается в коллекцию, что означает, что элементам «суббота» и «воскресенье»
        • назначен обработчик события клика.

          Вот ссылка JsFiddle для этого примера:

          http://jsfiddle.net/WHkkA/.

          No related posts.