Html css — Помощь с JavaScript (jQuery)

Содержание

Примеры jQuery для начинающих

Главная → JavaScript → Примеры jQuery для начинающих

jQuery — javascript библиотека, состоящая из кроссбраузерных функций — оплеток для манипулирования элементами DOM (Document Object Model — Объектная модель документа). Главный ее принцип это автоматическое применение нужного механизма, в зависимости от браузера. К примеру, получение элемента html документа по ID, в разных браузерах происходит по разному. До появления jquery, я использовал такую функцию:

Чтобы это же действие совершить в jquery, достаточно сделать так:

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

Начало работы с jQuery

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

После этого пространство имен javascript, определено таким образом, что обращение к функции $() занято jquery и получить любой элемент документа html в виде объекта, можно выражением $(‘#objID’). Где objID — ID объекта.

jQuery и CSS

В качестве первого примера рассмотрим работу jquery и CSS. Существует два основных способа манипулирования CSS с помощью jquery: изменение одного атрибута или сразу нескольких. Выполняются они через функцию css(). Выглядит в теории это примерно так:

Пример изменения одного атрибута CSS

Пример изменения одного атрибута удался!

Пример изменения нескольких атрибутов CSS

Пример изменения нескольких атрибутов!

Изменение текста и html

Для изменения текста или html кода существуют функции text() и html().

Причем, если попытаетесь с помощью функции text() вставить html код, то получите его в исходном виде. Функция text() все экранирует.

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

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

Управление атрибутами с помощью jQuery

Функция attr() манипулирует любыми атрибутами элемента. С ее помощью можно добавить или изменить title, href, value, src и так далее.

Основы jQuery

HTML, CSS и JavaScript – три основных языка в Интернете. Сайты структурируются в HTML, в CSS разрабатываются стили, а JavaScript позволяет добавить интерактивные функции. Большая часть анимации и любые действия, которые происходят в результате кликов или прокрутки, также созданы в JavaScript.

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

Сравните код простого приложения «Hello, World» в JavaScript и jQuery:

#JavaScript
document.getElementBy ;
#jQuery
$(«#demo»).html(«Hello, World!»);

Как видите, jQuery позволяет достичь того же результата гораздо быстрее.

Данное руководство охватывает основы работы с jQuery, а именно такие темы:

  • Установка jQuery в веб-проект;
  • Определения важных понятий веб-разработки (API, DOM и CDN).
  • Общие селекторы, события и эффекты jQuery.
  • Примеры использования jQuery.

Требования

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

Установка и настройка jQuery

jQuery – это файл JavaScript, на который можно сослаться в HTML-файле. Добавить jQuery в проект можно двумя способами:

  • загрузить локальную копию;
  • сослаться на файл через сеть доставки контента.

Примечание: Сеть доставки контента (Content Delivery Network, CDN) – это система серверов, которая обслуживает веб-контент на основе географического положения пользователя. Файл jQuery по CDN будет обслуживаться быстрее и эффективнее, чем файл, размещённый на сервере вместе с остальными компонентами приложения.

Ниже показано, как сослаться на jQuery в CDN. Найти последнюю версию jQuery можно здесь. Если же вы все же хотите загрузить jQuery на сервер, скопируйте пакет с официального сайта.

jQuery метод .css()

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

jQuery метод .css() задает или возвращает одно или несколько свойств стиля для выбранных элементов.

Обращаю Ваше внимание, что, когда вы используете метод с целью вернуть заданное в CSS значение свойства, то возвращается значение первого совпадающего элемента. Некоторые универсальные свойства, такие как margin, padding, background, border могут возвращать разные результаты в зависимости от браузера пользователя. Рекомендуется получать такие значения отдельно для каждого свойства, например для ширины границы (доступно с версии jQuery 1.9):

Кроме того, вычисляемый размер элемента всегда возвращается в пикселях, но он может быть указан как в em, ex, px, % и т.п. в таблице стилей. В зависимости от браузера значения цвета, может быть возвращено как в системе RGB, так и в шестнадцатиричной (HEX), независимо в какой системе указания цвета это задано в таблице стилей.

jQuery одинаково интерпретирует как CSS, так и DOM свойства. Например, следуюшая запись равнозначна и jQuery установит правильное значение в обоих случаях:

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

Если вы используете метод .css() для того, чтобы установить значение, то jQuery модифицирует значение глобального атрибута style элемента (ниже приведенные методы равноценны):

Цукерберг рекомендует:  Используем DROPBOX в качестве репозитория SVN

Установка значения атрибута style в пустую строку удаляет свойство из элемента, если оно до этого уже было применено:

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

Обращаю Ваше внимание, что при использовании метода .css(), jQuery игнорирует директиву !important , которая отменяет значимость последнего определенного стиля. Если Вам необходимо сделать какой-то стиль приоритетным, то Вы можете определить это в таблице стилей, и, например, добавить этот класс элементу с помощью метода .add >

С версии jQuery 1.4 метод .css() позволяет задать функцию, которая возвращает новое значение для свойства CSS. Если функция ничего не возвращает, или undefined, то в этом случае текущее значение не изменяется. Это может быть полезным для выборочной установки значений только при соблюдении определенных критериев.

С версии jQuery 1.6 метод .css() принимает относительные значения, начинающиеся с += или -= , чтобы увеличить или уменьшить текущее значение.

С версии jQuery 1.8 метод .css() автоматически проставляет префиксы производителей (-webkit, -moz, -ms и тому подобное).

jQuery синтаксис:

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

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

Параметр Описание
propertyName Задает имя CSS свойства.
value Задает значение CSS свойства.
function ( index, value ) Задает функцию, которая возвращает новое значение для свойства CSS.
  • index — возвращает индекс позиции элемента в наборе (среди выбранных элементов).
  • value — возвращает текущее значение свойства CSS.

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

В этом примере с использованием jQuery метода .css() мы в первом случае возвращаем значение одного свойства и выводим информацию в консоль браузера (обратите внимание, что информация у браузера Chrome выводится в системе RGB), а во втором случае возвращаем значения в виде объекта сразу четырех свойств. Обратите внимание, что в jQuery можно использовать как значения CSS свойств, например, border-top, так и DOM свойств borderTop.

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

Пример возвращения значений свойств с помощью метода .css()

Рассмотрим пример в котором с помощью метода .css() установим для элементов различные CSS свойства:

В этом примере с использованием jQuery метода .css() мы в первом случае с использованием селектора :first устанавливаем значение одного свойства первому элементу

. Обратите внимание, что синтаксис при установки нескольких свойств отличается.

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

Пример установки значений свойств методом .css()

Рассмотрим пример в котором в качестве значения параметра метода .css() передадим функцию:

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

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

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

Изменить >

Современный HTML5 сильно улучшается и тем самым дает больше возможностей для JavaScript. В этой записи я покажу как можно изменять, добавить или удалить класс ( >

HTML для демо

Допустим у нас есть такой элемент, у которого есть три класса «test1», «test2» и «hello-world» и id «myel».

Это пример будет использоваться для JavaScript и jQuery решений ниже.

JavaScript решение

Современные браузеры добавили новые способы управления классами для элементов, например classList.

Ниже предоставлен пример его работы с официального сайта MDN:

Современное HTML решение используя classList

Для начала нам нужно найти сам элемент с помощью document.getElementById() и далее использовать метод classList . Выглядит это все следующим образом:

В целом весь код выше в комментариях и вам должно понять. Но вот еще небольшое разъяснение:

  • add() — добавляет новый класс
  • remove() — удаляет указанный класс
  • contains() — проверяет существование класса
  • toggle() — ставит и удаляет класс, этот метод можно использовать для например нажатия на кнопку, чтобы у элемента ставился и убирался класс

Если лишь одно НО: Internet Explorer до 10 версии не поддерживают метод classList. Если для вас это важно, то лучше воспользоваться другими способами, которые я буду описывать ниже в этом посте. Но не забывайте, что веб очень быстро улучшается и уже есть первые попытки IE к поддержке этого метода, но лучше пока что не рисковать.

100% рабочий способ, поддерживаемый всеми браузерами (кроссбраузерный)

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

Мы используем className для манипуляции классами элемента «myel». Есть лишь один минус этого способа — он заменит все текущие классы элемента на «wow».

Самое важное в этом способе — это его кроссбраузерность.

Если ваша задача состоит в том, чтобы изменить класс(-ы) для одного-двух элементов на странице, то лучше использоваться JavaScript, и забыть про jQuery, потому что вы лишь добавите весь странице и она станет медленнее грузиться.

jQuery

В jQuery все упрощенно до невозможности и работает кроссбраузерно.

Например, чтобы добавить класс «test7», нужно воспользоваться методом addClass():

Чтобы удалить его, нужно использовать removeClass():

Если вы хотите заменить все классы на один единственный, то нужно использовать метод attr():

И теперь у «myel» будет только два класса, «test3» и «test4».

Вывод

А что вы используете чаще? JavaScript или jQuery?

Какой способом вам нравится больше всего и почему?

jQuery — Работа со стилем элемента

Статья, в которой разберем, как в jQuery осуществляется работа со стилями (style) элемента.

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

Как получить стиль элемента в jQuery

Первый вариант метода css — это получение окончательного значения CSS-свойства непосредственно применяемого к элементу.

Синтаксис метода css :

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

Пример, в котором получим цвет фона непосредственно применённого к элементу #header :

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

Если необходимо получить значения указанного CSS свойства или набора этих свойств у всех элементов текущего набора, то в этом случае необходимо использовать, например, метод each.

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

Кроме этого, метод css позволяет также получить сразу несколько CSS свойств у элемента.

Например, при нажатии на HTML элемент div выведим его ширину и высоту:

Как изменить или добавить стиль к элементу в jQuery?

Установить стиль элементу осуществляется тоже с помощью метода css, но в этом случае используется следующий синтаксис:

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

Например, добавим ко всем элементам .info серый цвет фона (background):

Если необходимо применить к каждому элементу текущего набора сразу несколько CSS свойств, то в качестве параметра этого метода необходимо использовать объект JavaScript, содержащий пары ‘имяСвойства’ : значение.

Цукерберг рекомендует:  Cms - Фреймворк VS СMS

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

В качестве значения строки также можно использовать относительные значения, которые начинаются с += или -= . Первое выражение используется для увеличения текущего значения CSS свойства, а второе — для уменьшения.

Например, увеличим отступ слева и справа у элементов .container на 10px :

Ещё один способ использования метода css — это применение в качестве 2 параметра функции.

Вариант использования метода css, у которого в качестве второго параметра используется функция обычно находить применение, когда значение необходимо как-то вычислить или определить по какому-то алгоритму.

Например, установим всем элементам .text , у которых цвет шрифта не равен чёрному, CSS свойство color , равное red .

Например, поменяем значение CSS свойства width у всех элементов img на странице, находящихся #content :

Как удалить определённый стиль у элемента?

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

Например, уберём у всех изображений на странице CSS свойство height :

jQuery

Чтобы стать веб-дизайнером или фронтенд-разработчиком вам придётся нередко работать с JavaScript, часто упоминаемый как JS, и jQuery. Среди топовых 10000 сайтов JavaScript применяется более, чем на 92% из них, а jQuery используется свыше, чем на 63% из них. Надо ли говорить, что они довольно популярны. Вы также должны стремиться писать JavaScript или jQuery, чтобы создать собственные модели поведения в том или ином деле.

Если вы спрашиваете, что именно такое JavaScript и jQuery, этот урок даёт краткий обзор JavaScript, а затем рассматривает jQuery.

Введение в JavaScript

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

Как и CSS, JavaScript должен сохраняться во внешнем файле с расширением .js, а затем ссылаться внутри HTML-документа с помощью элемента

Значения и переменные

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

Значения могут включать в себя строки текста, логическую истину или ложь, числа, undefined , null или другие значения, такие как функции или объекты.

Одним из популярных способов определения переменных — это начать с ключевого слова var, за которым идёт имя переменной, затем знак равенства (=) и значение, и всё заканчивается точкой с запятой (;). Имя переменной должно начинаться с буквы, подчёркивания (_) или знака доллара ($). Переменные не могут начинаться с цифры, хотя они могут быть использованы в дальнейшем, и не могут включать дефис где бы то ни было. Кроме того, JavaScript чувствителен к регистру букв, так что буквы включают от a до z, как в нижнем, так и в верхнем регистре.

Общепринятым соглашением об именовании переменных является применение CamelCase, без использования каких-либо тире или подчёркиваний. CamelCase состоит из комбинации слов без пробелов, каждое новое слово начинается с большой буквы, за исключением первого слова. Например, shay_is_awesome типично будет именоваться как shayIsAwesome .

Выражения

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

Функции

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

Функция определяется с помощью ключевого слова function , за которым следует имя функции и списка аргументов, при необходимости, разделённых запятыми внутри скобок. Затем идёт выражение JavaScript или выражения, которые определяют функцию внутри фигурных скобок.

Массивы

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

Вообще говоря, массивы определяются внутри квадратных скобок ([]), с элементами разделёнными запятыми. Элементы начинаются с нуля и повышаются от него. При определении третьего элемента в списке он фактически идентифицируется как [2].

Объекты

JavaScript также построен на фундаменте объектов, которые представляют собой набор пар ключей и значений. К примеру, у нас может быть объект с именем school , который включает в себя ключи, также известные как свойств — name , location , students и teachers , а также их значения.

В приведённом ниже примере переменная school задаётся как объект для хранения множества свойств. У каждого свойства есть ключ и значение. Весь объект располагается внутри фигурных скобок <>, свойства разделяются запятыми, каждое из которых содержит ключ, после которого идёт двоеточие и значение.

Рис. 6.01. С помощью инструментов разработчика, встроенных в браузер Chrome, JavaScript может быть запущен из консоли

Введение в jQuery

С базовым пониманием JavaScript и некоторых его основ, настало время взглянуть на jQuery. jQuery является библиотекой JavaScript с открытым исходным кодом, написанной Джоном Ресигом, которая упрощает взаимодействие между HTML, CSS и JavaScript. С 2006 года, когда был выпущен jQuery, он приобрёл внушительное число пользователей, будучи используемый сайтами и компаниями, большими и малыми.

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

Начало работы с jQuery

Первый шаг к использованию jQuery — это установить на него ссылку в HTML-документе. Как упоминалось ранее про JavaScript, это делается с помощью элемента

В примере кода выше, обратите внимание на второй элемент

Пишу html/css/js песочницу для будущих курсов по веб- разработки. Как с помощью JQuery связать div и iframe?

Пишу html/css/js песочницу для будущих курсов по веб- разработке.

Как с помощью JQuery связать контент div’a и iframe? Почему после события click содержимое div испаряется? Использую событие click, но хочу отказаться от него.

  • Вопрос задан более трёх лет назад
  • 2538 просмотров

Содержимое не испаряется, а переносится. DOM-элемент не может быть одновременно в нескольких местах. Потому, когда ты делаешь append, происходит перемещение элемента из старого места в новое. Это не имеет никакого отношения к событию click.

Сначала элемент необходимо клонировать (для чего в jQuery есть метод clone), а уже созданный клонированием новый элемент вставлять.

Цукерберг рекомендует:  Слайдшоу с эффектом вертикального жалюзи

И возьми за правило явно объявлять все локальные переменные посредством слова var — чтобы не выискивать потом по несколько часов причины непонятных глюков.

@Petroveg А может быть это задание на курсовую в универе? Какая нибудь типа обучающая система с авто-контролем результатов. Там всё пытаются найти золотые самородки путём процеживания дождя через сито. Я имею в виду — ждут, когда зелёных абсолютно неопытных программистов настигнет озарение и они создадут НЕЧТО, превосходящее по возможностям существующие аналоги, но очень простое и при этом бесплатное решение. Я сомневаюсь в подобном подходе.

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

Это исключительно моё ни на чём не основанное умозаключение. Просто хотелось высказаться.

@krll-k Вы не меня внимания не обращайте. Решайте свою задачу.

Создание красивого и доступного слайдшоу с помощью jQuery

Дата публикации: 2011-11-23

От автора: из этого исчерпывающего учебника по веб-разработке вы узнаете, как создать удобный и доступный виджет слайдшоу для своего сайта с помощью HTML, CSS и JavaScript (jQuery). В процессе создания вы увидите в действии концепцию Progressive Enhancement (прогрессивное улучшение).

Конечный результат

Для живой демонстрации виджета слайдшоу щелкните по изображению внизу.

Скачиваем исходные файлы

Вы можете скачать исходные файлы этого учебника для изучения. Наряду с использованным в нем целым скриптом jQuery комплект исходных файлов содержит файл PSD для веб-разметки демонстрационной страницы под названием mockup-slideshow.psd, а также фоновые изображения CSS и вспомогательные файлы, используемые для создания слайдшоу.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Устанавливаем основы

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

Наша структура содержимого содержит div под названием #slideshow, который служит слайдшоу контейнером. Внутри него располагается другой div под названием #slideContainer, который содержит слайды, являющиеся div’ами с классом, установленным на .slide.

Блок 1: Разметка HTML

Ниже в примере 1 вы увидите, как браузеры с текстовым интерфейсом и браузеры, неспособные визуализировать CSS и JavaScript, увидят наше слайдшоу. Важно заметить, что весь контент легкодоступен; мы ничего не скрыли от пользователя, гарантируя, что каждый сможет увидеть содержимое нашего сайта.

Для левого и правого элементов управления (стрелок) здесь нет разметки, мы вставим ее в DOM позже при помощи JavaScript. Внесение их на уровне структуры содержимого сбивало бы с толку тех, у кого нет возможности поддерживать CSS или JavaScript.

Пример 1: HTML-структура контента слайдшоу

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

Назначаем слайдшоу стили

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

В #slidesContainer мы устанавливаем свойство overflow (переполнение) на auto, так что когда наш контент выйдет за границы установленной высоты в 263px (высота наших слайдов), появятся полосы прокрутки.

Блок 2: #slidesContainer CSS

Html css — Помощь с JavaScript (jQuery)

В этой статье рассказано об интересной особенности работы jQuery в браузере IE. Дело в том, что в Internet Explorer вы не сможете получить содержимое тега script, если его тип не javaScript, с помощью функции .text().

После этого открытия я написал тестовую страничку, для доступа к содержимому тега script, которую запустил в браузерах Internet Explorer и FireFox.

Как видите, в примере содержится тег script. Затем используются методы .text(), .html() и .contents() для доступа к содержимому и выводу результата на страницу. Я проверил этот код в IE6, IE7, IE8, FireFox, Safari и Chrome. Во всех браузерах, кроме IE, результат был одинаков. В различных версиях IE также получился одинаковый результат, с небольшим исключением: IE6 и IE7 добавляют дополнительных пробелов, которых нет в IE8.

IE6, IE7, IE8

FireFox, Safari, Chrome

Как видите, IE смог получить доступ к содержимому тега script только с помощью метода .html(). С другой стороны, в остальных браузерах можно использовать методы .text(), .html() и .contents(). Однако, никакой из браузеров не смог получить содержимое используя .contents().html(). Это не ограничение браузеров или jQuery, скорее всего это происходит потому что в теге script нет нетекстовых элементов DOM.

Я не могу объяснить откуда появились лишние пробелы в IE6 и IE7. Очень похоже на то, что в этом случае содержимое тега обрабатывается так, как если бы оно было заключено в тег PRE. Очень похоже на ошибку, которая, однако, была исправлена в IE8.

В общем, выглядит так, что метод .html() является единственным кроссбраузерным способом доступа к содержимому тега script. Это необходимо учитывать, особенно в тех случаях, когда тег script используется как контейнер для html-шаблонов.

Пишу html/css/js песочницу для будущих курсов по веб- разработки. Как с помощью JQuery связать div и iframe?

Пишу html/css/js песочницу для будущих курсов по веб- разработке.

Как с помощью JQuery связать контент div’a и iframe? Почему после события click содержимое div испаряется? Использую событие click, но хочу отказаться от него.

  • Вопрос задан более трёх лет назад
  • 2538 просмотров

Содержимое не испаряется, а переносится. DOM-элемент не может быть одновременно в нескольких местах. Потому, когда ты делаешь append, происходит перемещение элемента из старого места в новое. Это не имеет никакого отношения к событию click.

Сначала элемент необходимо клонировать (для чего в jQuery есть метод clone), а уже созданный клонированием новый элемент вставлять.

И возьми за правило явно объявлять все локальные переменные посредством слова var — чтобы не выискивать потом по несколько часов причины непонятных глюков.

@Petroveg А может быть это задание на курсовую в универе? Какая нибудь типа обучающая система с авто-контролем результатов. Там всё пытаются найти золотые самородки путём процеживания дождя через сито. Я имею в виду — ждут, когда зелёных абсолютно неопытных программистов настигнет озарение и они создадут НЕЧТО, превосходящее по возможностям существующие аналоги, но очень простое и при этом бесплатное решение. Я сомневаюсь в подобном подходе.

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

Это исключительно моё ни на чём не основанное умозаключение. Просто хотелось высказаться.

@krll-k Вы не меня внимания не обращайте. Решайте свою задачу.

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