Вставка html в jquery

Сценарии во внешних файлах

Тег <script> поддерживает атрибут src, который определяет URL-адрес файла, содержащего JavaScript-код. Используется он следующим образом:

Файл JavaScript-кода обычно имеет расширение .js и содержит JavaScript-код в «чистом виде» без тегов <script> или любого другого HTML-кода.

Тег

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

При использовании атрибута src любое содержимое между открывающим и закрывающим тегами <script> игнорируется. При желании в качестве содержимого в тег <script> можно вставлять описание включаемого программного кода или информацию об авторском праве. Однако следует заметить, что инструменты проверки соответствия разметки требованиям стандарта HTML5 будут выдавать предупреждения, если между тегами <script src=»»> и </script> будет находиться какой-либо текст, не являющийся пробельными символами или комментариями на языке JavaScript.

Использование тега с атрибутом src дает ряд преимуществ:

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

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

• Если сценарий на языке JavaScript используется сразу несколькими страницами, он будет загружаться браузером только один раз, при первом его использовании — последующие страницы будут извлекать его из кэша браузера.

• Атрибут src принимает в качестве значения произвольный URL-адрес, поэтому JavaScript-программа или веб-страница с одного веб-сервера может воспользоваться кодом (например, из библиотеки подпрограмм), предоставляемым другими веб-серверами. Многие рекламодатели в Интернете используют этот факт.

• Возможность загружать сценарии с других сайтов еще больше увеличивает выгоды, получаемые от кэширования: компания Google продвигает использование стандартных, хорошо известных URL-адресов для часто используемых клиентских библиотек, что позволяет браузерам хранить в кэше единственную копию, совместно используемую многими сайтами в Веб. Привязка сценариев JavaScript к серверам компании Google может существенно уменьшить время запуска веб-страниц, поскольку библиотека наверняка уже будет храниться в кэше браузера пользователя, но при этом вы должны доверять стороннему программному коду, который может оказаться критически важным для вашего сайта. За дополнительной информацией обращайтесь по адресу: code.google.com/apis/ajaxlibs/.

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

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

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

Как подключить плагин к коду HTML

Для того, чтобы подключить плагин jQuery к коду страницы, в теге link нужно прописать пути ко всем файлам из архива на вашем компьютере. Сначала добавляем в HTML файл с расширением CSS и подключаем точно также, как файл стилей: . Эта ссылка располагается в теге head сразу же после скрипта со ссылкой на библиотеку. Следующим подключаем файл с расширением js. Это скрипт, и добавить его можно тем же способом, что и файл с библиотекой. Всего подключаем три файла: саму библиотеку jQuery, стили и скрипт.

Следующий шаг – запуск или инициализация плагина. На странице с документацией будет несколько вариантов кода для различных целей. Выбираем нужный, копируем его и вставляем в HTML, как скрипт в тег head. Для этого просто копируем написанный код в тег script. Теперь разберемся с синтаксисом плагина jQuery. На первой строчке скопированного кода будет название класса родительского блока, который необходимо добавить в HTML проекта. Подсказка о том, куда его вставить, будет на странице с документацией. В случае со слайдером, нужный класс добавляется к блоку со ссылками на изображения.

Загрузка jQuery

Но тут у вас может возникнуть вопрос, что будет лучше:

1. Скачивать библиотеку на сайт и подключать ее локально
2. Не скачивать, а подключить просто ссылку на CDN-сервер

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

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

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

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

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

Подключение jQuery с CDN

Если вы не исправляете саму библиотеку jquery, а используете только версию Compressed (файлик  min.js), то есть смысл не загружать библиотеку на локальный сервер, а подключать его напрямую с CDN (Content Delivery Networks) — в данном случае библиотека jQuery находится физически в ctnb CDN — а мы просто ссылаемся на неё.

Что такое CDN

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

Строка подключения библиотеки jQuery с CDN сервера

Строка подключения к CDN серверу также находится на странице  http://jquery.com/download и выглядит следующим образом (в зависимости от версии):

Динамическое подключение

Динамическое подключение jQuery осуществить проще всего. Для этого достаточно в коде вашего сайта, перед закрытием тега </head> просто добавить вот такой код:

XHTML

<script type=»text/javascript» src=»https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js»></script>

Данный код будет осуществлять подгрузку последней библиотеки jQuery из хранилища Google.

Если же вам нужно загрузить не последнюю версию библиотеки jQuery, а библиотеку какой-то определенной версии, то вам нужно вставить вот такой код:

XHTML

<script type=»text/javascript» src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»>
</script>

Где вместо 2.2.0 вы ставите ту версию, которая нужна вам для загрузки.

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

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

Достоинствами динамического подключения:

• Простота подключения. То есть вы, просто вставляете код на ваш сайт, и получаете уже подключенную библиотеку jQuery.
• Из хранилища Google подключение скрипта происходит быстрее, чем, если скрипт находится на вашем сайте.

Недостатки подключения:

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

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

Как использовать библиотеку jQuery?

После подключения библиотеки jQuery к HTML документу её можно использовать с помощью функции jQuery (). Данную функцию можно использовать не только по имени , но и по более короткому и красивому псевдониму — знаку . Не забываем, что в JavaScript функции являются тоже объектами, следовательно, — является объектом.

window.jQuery = window.$ = jQuery = $;

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

Рассмотрим работу с jQuery на следующем примере:

<div>I <strong>LOVE</strong> JQUERY!</div>

//Получить DOM-элемент body
//В результате получим объект jQuery, содержащий элемент body
$("body");
//1. Выбрать элементы div ($("div")) - получим объект jQuery, содержащий элементы div
//2. Изменим цвет текста для выбранных элементов (.css("color","red")) – используем метод jQuery .css()
$("div").css("color","red");
//вызовем цепочку методов: 
//1. Выбрать элементы div ($("div")) - получим объект jQuery, содержащий элементы div
//2. Вызовем для элементов, содержащихся в объекте jQuery, метод .css("color","red")
//3. Вызовем для элементов, содержащихся в объекте jQuery, метод .css("color","green")
$("div").css("color","red").css("color","green");
//1. Выбрать элементы strong ($("strong")) - получим объект jQuery, содержащий элементы strong
//2. Изменим контент для выбранных элементов (.text("VERY MUCH LOVE")) – используем метод jQuery .text()
$("strong").text("VERY MUCH LOVE");

Что это такое

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

Уметь работать с ним должен любой вебмастер, который хочет создать профессиональный интернет-проект. Перед началом изучения ознакомьтесь с моей статьей «JavaScript для чайников».  Она поможет вам в дальнейшем изучении jquery. Используя эту библиотеку, вы получите такие преимущества по сравнению с использованием javascript:

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

jQuery HTML / CSS Methods

The following table lists all the methods used to manipulate the HTML and CSS.

The methods below work for both HTML and XML documents. Exception: the html() method.

❮ Previous
Next ❯

Подключение jQuery со страницы своего сайта

Самый распространенный способ подключения библиотеки. Для начала необходимо скачать свежую версию с сайта разработчика. На странице загрузки представлено несколько вариантов библиотеки, например сейчас предлагается скачать «Compressed, production jQuery 3.1.1» и «Uncompressed, development jQuery 3.1.1». Первый вариант — это сжатый вариант библиотеки, оттуда удалены все комментарии, в этом случае библиотека занимает намного меньше места, следовательно страница, на которую она будет подключена будет загружаться быстрее. Второй вариант — это, грубо говоря, исходный код библиотеки, он структурирован в удобном для чтения виде с комментариями, и предназначен в первую очередь для разработчиков. Поэтому рекомендую использоваться сжатую версию библиотеки.

После того, как библиотека загружена, необходимо разместить её на сервере, где находятся файлы сайта. Я обычно в корне сайта создаю папку «js» в которую копирую нужные библиотеки и там же размещаю файл со своими функциями.

Теперь можно переходить непосредственно к подключению jQuery. Структура веб-страницы, на которую Вы подключаете jQuery, может быть разной. Но в ней обязательно присутствуют теги HTML, HEAD и BODY. Так вот для подключения jQuery необходимо добавить тег SCRIPT со ссылкой на библиотеку внутрь тега HEAD.

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>Заголовок сайта</title>
     <script src="js/jquery-3.1.1.min.js"></script>
   </head>
   <body> </body>
</html>

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

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>Заголовок сайта</title>
   </head>
   <body>
   
   <script src="js/jquery-3.1.1.min.js"></script>
   </body>
</html>

Внимание! Желательно не менять название файла библиотеки jQuery (зачастую меняют на jquery.js), так как в дальнейшем сохранение официального названия файла поможет увидеть, какую версию библиотеки Вы используете (в моем примере используется версия 3.1.1)

Подключение jQuery на WordPress

Подключение jQuery в WordPress производится автоматически, поэтому нет никакой необходимости подключать библиотеки других версий вручную. Это происходит в шаблоне с помощью php кода:

В итоге внутри тега HEAD появится строка подключения jQuery.

На момент написания статьи с WordPress поставляется jQuery v1.12.4 Но, как видите, версия библиотеки очень сильно отличается от той, которую подключали в примерах выше. Подключить свежую версию библиотеки возможно, но есть шанс возникновения конфликта.

Чтобы избежать конфликта, но при этом использовать ту версию библиотеки, которая необходима, нужно воспользоваться правильным способом подключения jQuery в файле functions.php:

Тут сначала отключается стандартная библиотека, а потом через Google API подключаем версию 3.1.1

Внимание! Учтите, этот код будет работать только в том случае, если в вашей теме присутствуют wp_head() и wp_footer()

jQuery в действии

<html>
<head>
<title>Прячем элемент после нажатия на него</title>
<script src=»https://code.jquery.com/jquery-3.1.1.min.js»></script>
</head>
<body>
<div class=»hide-me»>
Нажмите,чтобы спрятать этот блок.
</div>
<script>
jQuery(document).ready(function($){
$(document).on(‘click’,’.hide-me’, function(){
$(this).slideUp();
});
});
</script>
</body>
</html>

Варианты библиотеки JQuery

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

Чем они отличаются?

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

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

Подключаем jQuery правильно!

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

//Тут скрипты
//$asset->addJs(SITE_TEMPLATE_PATH . '/js/jquery-3.2.1_min.js');

1) Либо вот на эту, также как в старой статье я делал, тоже рабочий вариант с кэшированием

?><script type="text/javascript" src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH.'/js/jquery-3.2.1_min.js');?>"></script><?

2) Либо вот на эту, это из ядра Битрикса подключит jQuery

CJSCore::Init(array('jquery2'));

— подключит jQuery 1.8.3- подключит jQuery 2.1.3

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

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

Частые проблемы с jQuery на сайтах

1) jQuery не подключена вообще;2) jQuery подключена раз 5-10, а должна быть подключена только 1 раз;3) jQuery подключена после вызова jQuery-плагинов, а должна подключаться самой первой;4) JS-ошибки на странице, после которых весь остальной JS-код и плагины не работают;5) Версия jQuery не соответствует минимальной по требованию;6) Подключена переписанная разработчиком jQuery, которая ведет себя не предсказуемо;7) Подключена кастомная сборка jQuery, часть функций вырезано;

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

Подключение jQuery на страницы своего сайта с внешних источников

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

Этот способ подключения называется «Подключение с CDN». Сеть доставки контента или как ее чаще называют CDN (Content Delivery Network) является сетью серверов по всему миру. Они помогают улучшить производительность вашего веб-сервера и уменьшают нагрузку на ваш трафик.

Наиболее популярные CDN для подключения jQuery:

• jQuery CDN
• Google CDN
• Microsoft CDN
• CDNJS CDN
• jsDelivr CDN

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

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

Советы по эфективному изучению JavaScript

Изучение JavaScript, как и других языков программирования – непростое дело, но оно безусловно стоит потраченных сил и времени. Обучение эффективно, когда дается не просто так, а с усилием. Вы должны прилагать сознательные усилия для того, чтобы усваивать новые навыки и умения. Знания, полученные без усилий, подобны кругам на воде – очень скоро от них не останется и следа.

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

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

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

Наихудшее время для обучения – когда вы чувствуете усталость. В такие моменты, главное не заставлять себя – вы не получите ожидаемого результата. Человеческий мозг не может учить что-то бесконечно долго – ему нужно давать перерывы. Занимайтесь по принципу 25\5. Попробуйте на себе практику учить 25 минут и отдыхать 5 минут. Ваш мозг привыкнет к таким равномерным нагрузкам и будет работать максимально продуктивно.

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

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

Параллельно с теоретическими занятиями постоянно практикуйтесь. Для приобретения практического опыта достаточно просто много писать и разбирать примеры хорошего кода. Работая с примерами внимательно пройдите по всем строчкам кода – вы должны убедиться, что понимаете, как работает каждая строчка. Не бойтесь экспериментировать. Учитесь выводить в окне браузера какие-то данные и анализировать их. Например, что и после чего выводится на экран, получили ли вы то, что хотели, и если нет – то почему.

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

← предыдущая
следующая →