JavaScript

JavaScript

jQuery find и другие методы поиска по DOM относительно элемента

04

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

JavaScript

jQuery each: перебор массивов, объектов и элементов DOM в циклах

09

В этой статье мы рассмотрим, как можно перебирать массивы, объекты и элементы DOM с помощью методов jQuery each. Помимо этого, вы узнаете, как можно прервать

JavaScript

Методы jQuery для манипуляции с элементами страницы

08

В этой статье рассмотрим следующие методы jQuery для управления элементами веб-страницы: jQuery append, appendTo, prepend, prependTo, after, before, remove

JavaScript

Получение элементов страницы с помощью querySelector и других методов

021

JavaScript предоставляет возможность управлять элементами на веб-странице через объектную модель документа (DOM). Для получения доступа к таким элементам

JavaScript

Обработка событий с использованием jQuery

018

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

JavaScript

Как сделать кнопку с помощью JavaScript

025

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

JavaScript

Табы на чистом CSS и с использованием JavaScript

029

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

JavaScript

Логические операторы ИЛИ (||), И (&&), НЕ (!) в JavaScript

029

В этой статье мы рассмотрим логическое ИЛИ (||), И (&&) и НЕ (!) в JavaScript и разберем, как эти логические операторы могут быть использованы

JavaScript

Условные конструкции if else, switch и тернарный оператор в JavaScript

031

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

JavaScript

Функции alert, confirm и prompt в JavaScript

045

В JavaScript есть возможность создавать модальные всплывающие окна с помощью трех функций — alert, prompt и confirm. В этой статье мы опишем каждую из

Изучаем jQuery

Поделиться


Бенедетти Р.

, Крэнли Р. «Изучаем работу c jQuery» Питер, 2012 год, 528 стр, ил., O’Reilly, (18,6 мб. pdf)

Разрабатываете собственный веб-проект? Хотите ему добавить интерактивности? Тогда книга серии «Head First» — «Изучаем работу c jQuery», для вас. Из книги вы узнаете, как используя jQuery можно создать целый набор скриптов, используя всего небольшой фрагмент кода! Читая это руководство вы в доступной форме изучите работу c jQuery (библиотекой JavaScript), без использования которой сегодня трудно представить разработки современных веб-сайтов и RIA-приложений.

С помощью jQuery можно легко получать доступ ко всем элементам DOM (Document Object Model — объектная модель документов), обращаться к их атрибутам и содержимому. А также создавать формы и элементы с богатыми возможностями по взаимодействию с AJAX. Особенностью изданий из серии «Head First» — является своеобразный способ подачи материала. Если вы читали книги из этой серии, то вы с ним знакомы, он отличается оригинальностью и уникальностью. Книги из этой серии выпускаются издательством O’Reilly и выделяются из ряда множества скучных книг, посвященных программированию.
ISBN 978-5-459-00896-8

Оглавление книги

Содержание

1. Живые веб-страницы.
Новые возможности веб-страниц
HTML и CSS — это, конечно, хорошо, но…
…без сценариев не обойтись
Знакомьтесь: j Query (и JavaScript)!
Что происходит в браузере
Скрытая структура веб-страницы
jQuery упрощает работу с DOM
Функция jQuery (и ее сокращенная запись)
jQuery выбирает элементы по тем же правилам, что и CSS
Селекторы: стили и сценарии
Использование селекторов jQuery
jQuery в переводе
Ваш первый проект с jQuery
Подготовка файлов HTML и CSS
Поехали…
Эффекты изменения прозрачности И это все?
Пушистые Друзья спасены
Ваш инструментарий jQuery

2. Хватай и действуй.
Подруга просит тебя помочь оформить сайт
Что требуется от проекта?
Начинаем с div
Событие click под увеличительным стеклом
Включение метода click в страницу
Выражайтесь точнее
Назначение классов
Идентификаторы элементов
Три уровня веб-страницы

Возвращаемся к списку
Выделение памяти для хранения данных
Конкатенация и слияние данных
Возвращаемся к программному коду. ..
Вставка сообщения
Все отлично работает, но…
Дайте мне $ (this)
Использование $(this)
Скатертью дорога!
Метод remove
Селекторы потомков
Ваша очередь прыгать от радости
Ваш инструментарий jQuery

3. Страница в центре событий.
Ни минуты покоя
В словах бухгалтера есть резон…
Реакция на события
За кулисами слушателя событий
Связывание события
Срабатывание событий
Удаление событий
Перебор элементов

Структура проекта
Использование функций
Как устроена функция
Анонимная функция
Именованные функции как обработчики событий
Передача переменных функциям
Функция также может возвращать значения
Условные конструкции и принятие решений
Но это еще не все
Методы могут изменять CSS
Добавление события hover
Еще немного…
Ваш инструментарий j Query

4. Изменение DOM.
Интерактивное меню
Вегетарианцы, вперед!
Назначение классов элементам
Создание кнопок
Что дальше?
Перемещение по дереву DOM
Методы обхода дерева DOM
Сцепленные вызовы методов
В переменных также могут храниться элементы
И снова знак $.

..
Хранение данных в массивах
Хранение элементов в массиве
Изменение элементов методом replace With
Чем поможет replace With?
Не торопитесь с replace With
Когда replace With не подходит
Вставка HTML в DOM
Фильтры (часть 1)
Фильтры (часть 2)
Верните гамбургер на место
И где же мясо?
Массив отсоединенных элементов
Метод each и перебор массивов
Вроде… все?
Ваш инструментарий jQuery

5. Плавно и изящно.
Новый заказ
Проект «Собери монстра»
Макет и позиционирование

Еще немного структуры и стиля
Проработка интерфейса
Эффект молнии
Как jQuery выполняет анимацию элементов?
Эффекты изменения прозрачности изменяют свойство CSS opacity
Эффект скольжения
Как работают эффекты изменения прозрачности
Комбинированные эффекты
Задержка при использовании эффектов
Включение функций в сценарий
Самодельные эффекты и animate
Что можно анимировать?
Метод animate изменяет стилевое оформление
Откуда и куда?
Абсолютные и относительные перемещения элементов
Включение вызовов animate в сценарный код
Смотри, мама! Работает без Flash!
Ваш инструментарий j Query

6.

Люк jQuery, я твой отец!
Программируем блэкджек
Объекты и хранение данных
Построение собственных объектов
Создание объектов для повторного использования
Взаимодействие с объектами
Подготовка страницы
И снова массивы
Обращение к ячейкам массива
Добавление и обновление ячеек
Повторение операций
Поиск иголки в стоге сена
Пора принимать решение… снова!
Операторы сравнения и логические операторы
Стирание информации в jQuery
Чтобы было красивее
Ваш инструментарий jQuery и JavaScript

7. Что будем делать?
Надвигается буря
Мы создали монстра… функцию-монстра
Управление временными эффектами

Обработка событий браузера в onblur и onfocus
Методы работы с таймером определяют время выполнения функций
Пишем функции stopLightning и goLightning
Новая просьба
Случайные монстры
Мы уже знаем текущую позицию…
…и функция getRandom уже готова
Перемещение относительно текущей позиции
«Собери монстра-2» — настоящий хит!
Ваш инструментарий jQuery

8. Пожалуйста, передайте данные.
Бегом к современным технологиям
Прошлогодняя страница
Даешь динамику!
СТАРЫЕ и НОВЫЕ веб-технологии
Структура Ajax
Что такое Ajax?

Фактор «X»
Получение данных методом ajax
Разбор данных XML
Планирование событий
Самоактивизируемые функции
Сервер нам поможет
Который час?
Отключение планирования событий на странице
Ваш инструментарий jQuery/Ajax

9. Клиент встречается с сервером.
В отделе маркетинга MegaCorp никто не знает XML
Ошибки в XML
Ввод данных на веб-странице
Что делать с данными
Форматирование данных перед отправкой
Отправка данных серверу
Хранение информации в базе данных MySQL
Создание базы данных для информации об участниках
Строение команды insert
Использование РНР для работы с данными
Обработка данных POST на сервере

Подключение к базе данных из кода РНР
Чтение из базы данных
Доступ к данным в коде РНР
На помощь приходит JSON!
jQuery + JSON = потрясающе
Несколько правил РНР. ..
Правила РНР (еще немного)…
Форматирование вывода средствами РНР
Работа с данными в объекте JSON
Проверка и чистка данных в РНР
Ваш инструментарий jQuery/Ajax/РНР/MySQL

10. Переработка форм.
Cryptozoologists.org нуждается в переработке
Новая форма HTML
jQuery UI экономит время и силы
Содержимое naKeTajQuery UI
Построение календаря
Незаметное вмешательство jQuery UI

Изменение параметров виджета
Стильные кнопки
Ограничение ввода числовых данных
Создание цвета по трем составляющим
Функция refreshSwatch И последнее…
Ваш инструментарий jQuery

11. Объекты, сплошные объекты.
Где видели снежного человека?
Google Maps API
В API используются объекты
Включение карт Google в страницу
Чтение данных JSON средствами SQL и РНР
Точки на карте — маркеры
Список задач для отображения нескольких существ
Прослушивание событий карты
Получилось!!!
Ваш инструментарий jQuery API
Пара слов на прощание.

..

Скачать книгу бесплатно18,6 мб.

Похожая литература

689

https://www.htbook.ru/kompjutery_i_seti/setevye_tekhnologii/izuchaem-jqueryИзучаем jQueryhttps://www.htbook.ru/wp-content/uploads/2016/06/Изучаем-работу-с-jQuery-.jpg

https://www.htbook.ru/wp-content/uploads/2016/06/Изучаем-работу-с-jQuery—130×200.jpg

WEB и NET технологииjQuery,ПрограммированиеРуководство для веб-разработчика. Бенедетти Р., Крэнли Р. ‘Изучаем работу c jQuery’ Питер, 2012 год, 528 стр, ил., O’Reilly, (18,6 мб. pdf) Разрабатываете собственный веб-проект? Хотите ему добавить интерактивности? Тогда книга серии ‘Head First’ — ‘Изучаем работу c jQuery’, для вас. Из книги вы узнаете, как используя jQuery можно создать целый набор…Сергей ПупкинСергей Пупкин[email protected]Техническая литература


Поделиться

Как перебирать дочерние элементы div с помощью jQuery

У меня есть div, и в нем есть несколько элементов ввода. .. Я хочу перебрать каждый из этих элементов. Идеи?

  • HTML
  • CSS
  • JavaScript
  • ларавель
  • PHP
5 октября 2020 г. в JQuery к картик • 37 510 баллов • 4081 просмотр

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

0 голосов

Связанные вопросы в JQuery

Как я мог добиться следующего: document.all.regTitle.innerHTML = …

ПОДРОБНЕЕ

31 мая 2022 г. в JQuery к Эдурека • 13 630 баллов • 1,194 просмотра

  • javascriptjqueryinnerhtml

Используйте jQuery. siblings() для выбора соответствия … ПОДРОБНЕЕ

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

  • jquery
  • селектор

Метод братьев и сестер jQuery () Метод siblings() возвращает все … ПОДРОБНЕЕ

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

  • jquery
  • селектор

Без использования каких-либо дополнительных плагинов, var myOptions = .

.. ПОДРОБНЕЕ

ответил 21 июня 2022 г. в JQuery к раджата • 7 480 баллов • 126 просмотров

  • jquery
  • пользовательский интерфейс
  • линукс
  • выпадающее меню

Привет @картик, Сначала вы должны пойти в … ПОДРОБНЕЕ

ответил 18 марта 2020 г. в Ларавеле к Нирой • 82 860 баллов • 19,515 ​​просмотров

  • HTML
  • CSS
  • JavaScript
  • ларавель
  • угловой
  • филиппинов

Именованный маршрут используется для предоставления конкретных … ПОДРОБНЕЕ

ответил 18 марта 2020 г. в Ларавеле к Нирой • 82 860 баллов • 2333 просмотра

  • HTML
  • CSS
  • JavaScript
  • ларавель
  • филиппинов

Привет, Это просто, вам просто нужно … ПОДРОБНЕЕ

ответил 23 марта 2020 г. в Ларавеле к Нирой • 82 860 баллов • 2080 просмотров

  • HTML
  • CSS
  • JavaScript
  • ларавель
  • филиппинов

Привет @картик, Именованная маршрутизация — еще одна замечательная особенность . .. ПОДРОБНЕЕ

ответил 23 марта 2020 г. в Ларавеле к Нирой • 82 860 баллов • 33 655 просмотров

  • HTML
  • CSS
  • JavaScript
  • ларавель
  • филиппинов

Привет @картик, Вы должны СНАЧАЛА вызвать datepicker() > затем использовать … ПОДРОБНЕЕ

ответил 29 мая 2020 г. в JQuery к Нирой • 82 860 баллов • 9 563 просмотра

  • HTML
  • CSS
  • JavaScript
  • филиппинов
  • ларавель

Привет @картик, Сравните текущий ScrollTop с предыдущим ScrollTop вар lastScrollTop = 0; $(окно).scroll(функция(событие){ … ПОДРОБНЕЕ

ответил 24 нояб. 2020 г. в JQuery к Нирой • 82 860 баллов • 451 просмотр

  • HTML
  • CSS
  • JavaScript
  • ларавель
  • филиппинов
  • jquery
  • Горизонтальная и вертикальная прокрутка в JqueryMobile 21 июня 2022 г.
  • Jquery — использование . each() с переменными и оператором IF 21 июня 2022 г.
  • почему $(window).load() не работает в jQuery? 21 июня 2022 г.
  • Каковы преимущества и недостатки вызовов ajax с использованием jquery? 21 июня 2022 г.
  • jQuery.inArray(), как правильно его использовать? 21 июня 2022 г.
  • Все категории
  • ЧатGPT (11)
  • Апач Кафка (84)
  • Апач Спарк (596)
  • Лазурный (145)
  • Большие данные Hadoop (1907)
  • Блокчейн (1673)
  • С# (141)
  • С++ (271)
  • Консультирование по вопросам карьеры (1060)
  • Облачные вычисления (3469)
  • Кибербезопасность и этичный взлом (162)
  • Аналитика данных (1266)
  • База данных (855)
  • Наука о данных (76)
  • DevOps и Agile (3608)
  • Цифровой маркетинг (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)
  • Другие (2231)
  • Мобильная разработка (395)
  • Пользовательский интерфейс UX-дизайн (24)

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

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

каждый | Документация Cypress

Итерация по структуре, подобной массиву (массивы или объекты с длина свойство).

Небезопасно цепочка дальнейших команд, которые зависят от субъекта после .each() .

Синтаксис 

. через каждый 'li' 
 cy.getCookies().each(() => {...}) // Повторить каждый файл cookie

Неправильное использование 

 
 cy.each(() => {. ..}) // Ошибки, не могут быть сцеплены с 'cy' 
 cy.clock().each(() => {...}) // Ошибки, 'clock' не дает массив 002 Передайте функцию, которая вызывается со следующими аргументами: 
 
     
  •   значение  
    •  
  •   индекс  
    •  
  •   коллекция  
    •  
 
 доходность 9027 7 
 
     
  •   .each()  дает тот же предмет, который был задан. 
    •  
  •  Это небезопасно
чтобы связать дальнейшие команды, которые зависят от субъекта после  . каждый()  . 
    •  
  
 Примеры​ 
 
 Элементы DOM​ 
  
  Перебор массива элементов DOM  
 
 cy.get('ul>li').each(($el, index, $list) => { 
 / / $el — это обернутый элемент jQuery 
 if ($el.someMethod() === 'something') { 
 // обернуть этот элемент, чтобы мы могли 
 // использовать для него команды Cypress 
 cy.wrap($el) .click() 
 } else { 
 // делаем что-то еще 
 } 
 }) 
 
  Исходный массив всегда возвращается 
 Независимо от того, что возвращается в функции обратного вызова,  .each()  всегда будет возвращать
исходный массив.
 cy.get('li') 
 .should('have.length', 3) 
 .each(($li, index, $lis) => { 
 return 'что-то еще' 
 }) 
 .then (($lis) => { 
 expect($lis).to.have.length(3) // true 
 }) 
 
 Обещания 
  Обещания ожидаются 
 Если ваша функция обратного вызова возвращает  Обещание , будет ждать раньше
перебор следующего элемента в коллекции.
 cy.wrap([1, 2, 3]).each((num, i, array) => { 
 return new Cypress.Promise((resolve) => { 
 setTimeout(() => { 
 разрешить () 
 }, num * 100) 
 }) 
 }) 
 
 Примечания​ 
 Досрочный возврат​ 
  Остановить  каждый  преждевременно 
 90 002 Вы можете остановить цикл  .each()  досрочно, вернув  ложь  в обратном вызове
функция.
 Правила​ 
 Требования​ 
  •   .each()  требует привязки к предыдущей команде.
 Утверждения ​ 
  •   .each()  будет запускать утверждения, которые вы связали один раз, и не будет
повторить попытку
 Таймауты ​ 
  •   .each()  может истечь время ожидания обещания, которое вы вернули для разрешения.
 Журнал команд​ 
  •   cy.each()   не  регистрирует в журнале команд
 См.
 
No related posts.