Jquery вставить внутрь элемента: Вставка дочерних, сестринских и родительских элементов

НОУ ИНТУИТ | Лекция | Улучшение пользовательского интерфейса с помощью Ajax

Ключевые слова: AJAX, css, HTML, запрос, поиск, атрибут, приложение, группа, Web, обмен данными, интерфейс, asynchronous, AND, XML, JSON, пользователь, интерактивность, удобство использования, опыт, веб-сайт, RAW, bootstrap, Дополнение, library, поле, сценарий, представление, файл, класс, GET, Search, block, content, base, поддержка, pipeline, tweet, POST, form, критерии поиска, field, operator, список, DOM, templates, объект, очередь, контекст, путь, функция, входные данные, переменная, расходы, производительность, запись

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

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

Появление AJAX стало важной вехой в истории Веб 2.0. AJAX — это группа технологий, что позволяет разработчикам создавать интерактивные, с большими возможностями веб-приложения. Большинство из этих технологий были доступны за многие годы до появления самого AJAX. Однако появление AJAX представляет переход Web от статических страниц, которые необходимо обновлять всякий раз, когда происходил обмен данными к динамическим, гибким и интерактивным пользовательским интерфейсам.

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

AJAX и его преимущества

AJAX, которая расшифовывается как Asynchronous JavaScript and XML (Асинхронный JavaScript и XML), состоит из следующих технологий:

• HTML и CSS для структурирования информации и придания стилей
• JavaScript для динамического доступа и манипулирования информацией
• Объект XMLHttpRequest, который представляет собой объект, предоставляемый современнми браузерами для обмена данными с сервером без перезагрузки текущей веб-страницы
• Формат для передачи данных между клиентом и сервером

Иногда используется XML, но это может быть в HTML, обычном тексте или формате на основе JavaScript, называемом JSON.

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

С помощью AJAX, веб-разработчик может увеличить интерактивность и удобство использования ‘ веб-страниц.

AJAX обеспечивает следующие преимущества при имплементации в правильных местах:

• Улучшение опыта пользователя: пользователь с AJAX может сделать много без обновления страницы, которая делает веб-приложения ближе к обычным настольным приложениям
• Лучшая производительность: путем обмена только требуемых данных внутри сервера, AJAX сохраняет пропускную способность и увеличивает скорость приложений

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

В этой лекции объясняется, как использовать AJAX с Django, с тем чтобы сделать приложения более гибким и удобным для пользователей. Мы имплементируем три наиболее распространенных функции AJAX, которые могут быть сегодня найдены в веб-приложениях. Однако, прежде, мы узнаем о преимуществах использования инфраструктуры AJAX, в отличие от работы с raw JavaScript функциями.

Использование AJAX фреймворка в Django

Так как мы уже использовали bootstrap в нашем проекте, нам не нужно настраивать его отдельно для AJAX и jQuery.

Есть много преимуществ использования AJAX фреймворка:

• Имплементация JavaScript различается от браузера к браузеру. Некоторые браузеры обеспечивают более полную и богатую на функции имплементацию, тогда как другие содержат имплементации, которые являются неполными или не придерживающиеся стандартов.

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

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

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

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

  Однако, зачем изобретать велосипед, когда много отличных библиотек open source уже доступно?

AJAX фреймворки, имеющихся на рынке сегодня варьируются от всеобъемлющих решений, которые предоставляют серверные и клиентские компоненты до легких клиентских библиотек, которые упрощают работу с JavaScript. Учитывая, что мы уже используем Django на серверной стороне, мы хотим фреймворк только с клиентской стороны. В дополнение к этому фреймворк должны быть легко интегрируем с Django без требования любых дополнительных зависимостей. Наконец, желательно, выбрать легкий и быстрый фреймворк. Есть множество отличных фреймворков, которые отвечают нашим требованиям, таких как Prototype, Yahoo! UI Library, и jQuery.

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

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

Вам нужно также импортировать bootstrap и jQuery.Таким образом, не нужно никакой особой установки или импорта для использования функций AJAX в нашем проекте Django.

Использование open source фреймворка jQuery

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

JavaScript фреймворк JQuery

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

Рабочий процесс с помощью jQuery в общем состоит из следующих двух этапов:

1. Выбор HTML-элемента или группу элементов для работы.
2. Применение метода jQuery к выбранной группе.

Селекторы элемента

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

• Если вы хотите выбрать все привязки (<a>) элементов на странице, можно использовать вызов функции $ («a»).
• Если вы хотите, выбрать элементы привязки, которые имеют CSS класс .title, используйте $(«a.title»)
• Чтобы выбрать элемент, идентификатор которого является #nav, можно использовать $ («#nav»)
• intuit.ru/2010/edi»>Для выбора всех элементов списка (<li>) внутри #nav, используйте $ («#nav li»)

Функция $ () создает и возвращает объект jQuery.После этого можно вызывать методы этого объекта для взаимодействия с выбранным HTML-элементом.

Методы jQuery

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

Для отладки, мы выберем браузер Internet Explorer как браузер нашего выбора. Internet Explorer является одним из самых передовых JavaScript отладчиком в виде его инструментов разработчика Django. Чтобы запустить его, нажмите на клавиатуре Ctrl + Shift + J.

Поэкспериментируем с методами, изложенными в этом разделе, запустим сервер разработки и перейдем на страницу профиля пользователя (http: //127. 0.0.1:8000/user/test/). Откройте консоль инструментов(нажав на клавиатуре Ctrl + Shift + J) разработчика и нажмите F12, попробуйте выбрать элементов и манипулировать ими.

Скрытие и отображение элементов

Давайте начнем с чего-то простого. Чтобы скрыть элемент на странице, вызовите метод — hide() на нем.Чтобы показать его снова, вызовите метод show(). Например попробуйте это с меню навигации, называемом navbar в загрузчик приложения:

>>> $(".navbar").hide()
>>> $(".navbar").show()

Также можно анимировать элемент во время скрытия и показа его. Попробуйте fadeOut(), fadeln(), slideUp() или slideDown () — методы, чтобы увидеть два из этих анимационных эффекта.

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

>>> $(".well").slideUp()

Доступ к свойствам CSS и HTML атрибутам

Далее мы узнаем, как изменить свойства CSS элементов. jQuery предлагает метод, называемый css() для выполнения CSS операций. Если вызвать этот метод с именем свойства CSS, переданным в виде строки, она возвращает значение этого свойства:

>>> $(".navbar").css("display")

Результатом этого является следующее:

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

>>> $(".navbar").css("font-size", "0.8pt")

Результатом этого является следующее сообщение:

<div></div>

intuit.ru/2010/edi»>В самом деле вы можете манипулировать любой атрибут м HTML и не только свойствами CSS. Чтобы сделать это, используйте метод attr(), который работает аналогично методу css(). Вызвав его по имени атрибута, он возвращает значение атрибута, в то время как его вызов с именем атрибута или пары значений задает атрибуту переданное значение:

>>> $("input").attr ("size", "48")

Это приводит к следующему:

<input name="country" type="hidden" value="Global" size="48">
<input type="submit" value="post" size="48">

Это одновременно изменит размер всех входных элементов на 48.

В дополнение к этому, есть методы ярлыка, чтобы получать и устанавливать часто используемые атрибуты, такие как val(), который возвращает значение поля ввода, когда вызывается без аргументов и задает значение для аргумента, если вы передадите аргумент. Существует также метод html() для контроля HTML кода внутри элемента.

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

Как динамически создавать элементы JavaScript с обработчиками событий

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

В этой статье мы рассмотрим, как динамически создавать элементы JavaScript и как прикреплять обработчики событий к динамически создаваемым элементам JavaScript.

Мы рассмотрим следующее:

• Что такое события в JavaScript?
  • Что такое обработчики событий в JavaScript?
  • Обработчики событий и прослушиватели событий
• Различные типы обработчиков событий, предоставляемые JavaScript
  • Встроенные обработчики событий
  • Традиционные обработчики событий
  • Обработчики событий DOM уровня 0
• Жизненный цикл события JavaScript
• Динамическое создание обработчиков JavaScript и присоединение обработчиков событий
• Метод document.createElement()
• Создание элемента со строками обратной кавычки JavaScript
• Литералы шаблонов

Что такое события в JavaScript?

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

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

Что такое обработчики событий в JavaScript?

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

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

Аналогичным образом обработчик событий «прослушивает» определенные события, происходящие в элементе HTML. Когда действие происходит, обработчик событий запускается и выполняет действие, выполняя связанный с ним код JavaScript.

. Обработчики событий и прослушиватели событий

.

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

Различные типы обработчиков событий, предоставляемые JavaScript

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

• Встроенные обработчики событий
• Традиционные обработчики событий
• Обработчики событий DOM уровня 0

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

Встроенные обработчики событий

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

• onclick : Это событие запускается, когда пользователь щелкает HTML-код, к которому оно прикреплено. Этот обработчик событий выполняет код, указанный в его атрибуте
.
• onsubmit : Этот обработчик событий срабатывает при отправке формы. Он также выполняет код, указанный в его атрибутах
.
• onmouseover : это событие запускается, когда пользователь наводит указатель мыши на элемент, к которому она прикреплена

Традиционные обработчики событий

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

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

---

Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия

Подробнее →

---

Некоторые из традиционных обработчиков событий:

• onkeydown : это событие запускается, и код выполняется, когда пользователь нажимает клавишу «вниз» на клавиатуре
• onscroll : Когда пользователь прокручивает HTML-документ, этот обработчик событий запускает функцию
.
• onload : Когда все ресурсы HTML-страницы загружены, это событие запускается

Обработчики событий DOM уровня 0

Обработчики событий DOM уровня 0 относятся к традиционному подходу, который использовался на заре Интернета. При таком подходе мы просто устанавливали свойство HTML-элемента, которое обычно соответствует имени события, которое мы хотим прослушивать, а затем мы назначаем ему функцию, которая вызывается после возникновения события.

Некоторые обработчики событий DOM уровня 0 совпадают с теми, что мы уже обсуждали. Единственная разница заключается в том, что они по-разному прикрепляются к HTML-коду. Обработчики событий DOM уровня 0 включают:

• onload : Это событие запускается, когда веб-страница завершает загрузку
• onmouseout : это событие запускается, когда пользователь перемещает мышь за пределы элемента
• onsubmit : Это событие запускается при отправке формы

Жизненный цикл события JavaScript

Когда событие инициировано, существует три фазы, в течение которых событие проходит через DOM (объектную модель документа). Этими фазами являются фаза захвата, фаза цели и фаза всплытия.

Фаза захвата

На этапе захвата событие сначала перемещается с вершины иерархии DOM к целевому элементу.

Целевая фаза

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

Фаза барботажа

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

Динамическое создание обработчиков JavaScript и присоединение обработчиков событий

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

Например:

Посмотреть код на Gist.

 

В приведенном выше примере класс btn не существует на нашей странице index. html . Следовательно, это выдаст ошибку addEventListener из нуля.

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

Метод

document.createElement()

Метод document.createElement() позволяет нам создавать элементы HTML по именам их тегов, например