Как вставить jQuery скрипт в HTML

Снова привет! Сегодня я напишу общую статью в раздел jQuery.
как вставить jquery в html код
В связи с тем, что я решил ввести новую рубрику о которой упоминалось выше, эта статья станет мануалом по вставке скриптов в HTML. Когда я буду писать статьи “как сделать … на jQuery”, я не буду писать там как вставлять скрипт, а просто покажу сам скрипт и ссылку на страницу с инструкцией по “внедрению”.

Как вставить jQuery код в HTML

Шаг 1.
Если этот скрипт написан с использованием jQuery, то его нужно обязательно подключить (имеется ввиду сам jQuery, а не ваш скрипт). Сделать это очень просто, нужно всего лишь вставить строчку с ссылкой на файл. Гугл хранит подобные библиотеки, так что можно использовать с его серверов.


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Пример вставки скрипта</title>
	<!-- скрипт для подключения jQuery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<!-- здесь он заканчивается -->
</head>
<body>
	<h1>Заголовок страницы</h1>
	<p>Содержимое страницы ........</p>
</body>
</html>

Всё готово! Теперь jQuery скрипты будут работать на вашей страничке!

Шаг 2.
Конечно же имеет значение куда вписывать и сам скрипт!
Если говорить по простому, то браузер читает код по строчках. И важно что прогрузится первым.

Вариант первый

Давайте рассмотрим вот такой вариант:


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Пример вставки скрипта</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
	<h1>Заголовок страницы</h1>
	<p>Содержимое страницы ........</p>


	<script type="text/javascript">
		//начало скрипта

		$('h1').css('color','red');

		//конец скрипта
	</script>
</body>
</html>

Данный скрипт, все заголовки h1 КОТОРЫЕ ОН НАЙДЕТ – делает красными. И так, смотрим как грузится страница…

  1. Первым загрузился head (потому что он в самом начале). Значит скрипт нужный для работы самого jQuery успешно подключен.
  2. Далее загрузился заголовок h1, который мы собираемся красить в красный.
  3. Следующим загрузился абзац “содержимое страницы”.
  4. После всего этого, грузится скрипт и выполняет своё задание (ищет все h1 и делает их красными).

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

С этого выходит что скрипт всегда должен быть в конце страницы, перед закрывающим тегом body. Но на самом деле это не так. Это один из вариантов.

Вариант второй

Может быть, вам нужно чтобы скрипт был в head документа. Тогда нужно его немного видоизменить. Вот так:


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Пример вставки скрипта</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function(){

			$('h1').css('color','red');

		});
	</script>
	
</head>
<body>
	<h1>Заголовок страницы</h1>
	<p>Содержимое страницы ........</p>
</body>
</html>

Как видим изменилось только то, что появились строчки с documment ready. А значит это что даже если скрипт загрузится первым, то он выполнится только после того как будет загружен КАЖДЫЙ элемент страницы!
Это конечно же также решает проблему с очередностью загрузки!

Вариант третий

Можно еще подключить файл с расширением *.js и поместить скрипт туда.
Подключается файл следующим образом:


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Пример вставки скрипта</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	
	<!-- Подключение файла со скриптом -->
	<script src="script.js" type="text/javascript"></script>

</head>
<body>
	<h1>Заголовок страницы</h1>
	<p>Содержимое страницы ........</p>
</body>
</html>

В примере написано просто script.js, но если файл со скриптом размещен в папке то нужно указать путь к папке (напр. js/script.js ). Название файла не имеет значения.
Ну и здесь конечно такое же правило! Если файл подключен в конце документа, перед закрывающим тегом body, то внутри него можно просто писать jQuery скрипты. Если же он подключен в шапке, то в файле следует брать скрипты в document ready!

Надеюсь данная статья помогла вам :) Если что нибудь не понятно или не получилось, можете задавать вопросы в комментарии!

Pin It

4 thoughts on “Как вставить jQuery скрипт в HTML

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>