Что такое jQuery? Как подключить jQuery?
Что такое jQuery? Это невероятно мощный, удобный инструмент ускоряющий вашу работу на javascript. То есть это просто средство которое помогает писать код на javascript легче.
Вот логотип jQuery с его знаменитым слоганом:
Что значит — Пиши меньше, делай больше! Не правда очень полезная мысль.
Как подключить jQuery?
Как подключить jQuery? Все очень просто! Чтобы добавить jQuery на сайт пропишите в секции head вот такой код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
С помощью такого кода вы сможете использовать jQuery не загружая на свой сайт, она будет грузится с сайта Гугла. Преимущество такого метода в том что вы не грузите ваш хостинг, ведь скрипт будет грузится из другого сайта. Если вы хотите добавить jQuery самим, то сперва скачайте jQuery с официального сайта — jquery.com. Потом разместите его у себя в какой-нибудь папке и пропишите путь.
jQuery примеры
jQuery примеры есть на этом сайте. Вот самый простой пример:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$('#text').html('Вы кликнули кнопку!');
});
});
</script>
</head>
<body>
<div id="text"></div>
<button>Нажми меня</button>
</body>
</html>
Если вы запустите этот код в браузере, то выйдет просто кнопка:
А вот если ее нажать, то выйдет вот такая надпись:
То есть можно сделать на сайте разные интерактивные вещь с помощью jQuery! Есть куча разных библиотек работающих с этим замечательным инструментом. А именно есть много — слайдеров, форм комментирования, рейтингов, меню, считалок и так далее на jQuery.
Вот еще один пример jQuery:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$('#text').css("color", "red");
});
});
</script>
</head>
<body>
<div >Это черный текст?</div>
<button >Нажми меня</button>
</body>
</html>
В результате появится страница с кнопкой:
При нажатии на кнопку текст станет красным.
Селекторы jQuery
Вы наверняка хотите покрасить или сделать любое другое действие именно с тем или иным элементом на сайте. Например хотите чтобы подкрасилась именно тот id или class. Для этого существуют селекторы jQuery и них мы расскажем.
Посмотрите кусок кода из примера сверху:
$('#text').html('Вы кликнули кнопку!');
Нетрудно понять что здесь синтаксис довольно простой, внутри $('') ставим наш id или class. Это и есть селектор. Если class то пишем вот так $('.text') и операция которая будет применятся к тому или иному классу, точнее всем элементам этого класса.
Потренируйтесь на примерах сверху, создайте несколько видов разных классов или id и дайте им разные значения текстов. А также заведите себе блокнот или просто собирайте разные примеры кодов на jQuery. Они вам потом пригодятся.
Как подключить jQuery правильно?
Мы сверху писали что jQuery нужно добавлять в head сайта, это мы сказали для удобства читателей. Однако в реальных проектах подключайте код jQuery в самом низу сайта, после подвала. Так ваш сайт будет грузится быстрее. Как подключить jQuery правильно? Чтобы сайт грузился быстрее.
Тем кто не знает скажем что сайты грузятся сверху вниз. То есть сперва грузится код верхней части сайта, а потом остальные части, сверху вниз. И так как jQuery не влияет на дизайн сайта, по крайней мере в большинстве случаев, то пусть он будет грузится последним. После стилей, картинок, видео и так далее.
Также можно большие куски кода на jQuery можно объединить в один файл, и его грузить как файл стилей, то есть не меняя его на каждой странице отдельно, а меняя в одном файле.
Вэб блог бетінде ақпараттық салаға байланысты көптеген мақалалар бар.