Веб-программирование от незрячего, урок 7: Jquery и Ajax

Здравствуйте. Сразу я забыл более подробно написать про JS библиотеку Jquery и про Ajax - исправляюсь.

1. Jquery:

Я в уроке про Javascript рассказывал о Jquery. Повторюсь:
Чтобы его подключить, необходимо найти jquery.js или jquery.min.js, скачать к вам и добавить в <script src, либо вставить ссылку со внешнего ресурса. Я сделаю это так:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
(Если помните, в статье про JS я показывал другой сайт).

Основной вариант использования:

Первое, что скорее всего вам понадобится - это работа с id, классами и тегами.

• Теги указываются без # или .;
• Идентификаторы элементов - через #;
• А классы - через .

Примеры:

1. $("div").HTML(); - Выводит содержимое первого тега div;
2. $("#header").HTML() - Выводит элемент с id="header";
3. $(".heading").HTML() - Выводит html код первого тега с классом heading;
4. Можно также писать так: $("div #header").HTML() - Выведет или добавит в переменную html код содержимого 'элемента с id ="header", но только в том случае, если тег - это div.

Как видете, здесь, в отличие от простого JS кода, работает формат, схожий с css.

Если в скобках добавить какой-то текст, или текст с HTML кодом, или даже переменные, содержимое тега будет изменено. Пример изменения div с id="special_text":
$("div #special_text").HTML('<p align="center">Изменённый текст.</p>` + afterText);
А переменная afterText имеет значение "Элемент div":
var afterText = "Элемент div";
Естественно, переменная должна быть выше изменяющей HTML код div строки.

Помимо HTML есть и другие методы, которые зависят оттого, что вы хотите делать с элементом.
Но я использую только его.

Действие по клику:

Вы наверное помните про атрибут onclick для действия по клику на элемент. Вот здесь это не нужно делать, так как можно использовать соответствующую возможность Jquery:

$("#but1").click(function(){$("#par1").css("color","green").css('font-size','20');});

Здесь по клику на кнопку с id="but1" происходит изменение css свойств у абзаца с id par1. Думаю, вы поняли формат этого функционала.

Также можно не по клику делать что-то, а по наведению, по снятию наведения. Чтобы понять, что означает тот или иной метод, достаточно знать Английский:

$("#href1").mouseover(function(){ // По наведению на элемент с id href1
$("#href1").css("color","Orange")}); // Цвет его меняется на оранжевый
$("#href1").mouseout(function(){ // А при снятии наведения
$("#href1").css("color","black")}); // Цвет становится чёрным

А дальше пишем:
<button id="but1">Изменить стили</button>
И так далее...

Всё.

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

А как выполнить что-то при загрузки страницы?

Например, чтобы скрипт ждал клика сразу при загрузке документа. Пишем:

$(document).ready(function(){
/// Содержимое, например, код, что я писал выше
});

Вот и всё.

2. Ajax

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

Jquery или JS

На чистом Javascript делать Ajax непросто, поэтому тот вариант рассматривать не будем, а изучим, как это делается при помощи Jquery. Но перед этим

Важное замечание:

Ajax передаёт php скрипту get параметры, поэтому проверяйте, разрешены ли они у вас;

1. В самом скрипте нужно будет создать переменные, присвоив им тот или иной $_GET.

Вариант 1:

$("#par1").load("autumn.txt"); - Так мы получили содержимое файла текстового и вставили на страницу в тег с id par1.

Но сам по себе он не вставится - надо добавить, например, клик по кнопке:

   $("#but1").click(function(){
      $("#par1").load("autumn.txt");
   });

А теперь давайте подключим php скрипт и передадим ему параметры num1 и num2 с разными значениями. Результат будет вставлен в разные абзацы:

   $("#but2").click(function(){ // При клику на вторую кнопку происходит сразу несколько действий.
$("#par2").load("calc.php","num1=10&num2=5"); // В абзац 1 вставляется результат с числами 10 и 5
$("#par3").load("calc.php","num2=15&num1=32"); // Меняем параметры местами и числа изменяем
$("#par4").load("calc.php","num1=3&num2=0");
$("#par5").load("calc.php","num1=3"); // Вставляет в первый параметр 3, а второй пропускает. Значит, надо будет вручную прописать значение, если $_GET['num2'] не будет.
   });

Вариант 2:

$("#but3").click(function(){
   $.ajax({url:"calc.php", 
      data:"num1=10&num2=5", 
      success:function(result){
         $("#par1").html(result)}
   });
});

Тут по клику на третью кнопку с id but3 отправляем запрос к файлу calc.php с параметрами num1 и num2, как в первом примере Ajax запроса (СМ. ранее).

Вариант посложнее (Возможно вам, как и мне, понадобится) когда-нибудь:

$("#but4").click(function() {
var getParams = () => { } // Какие-то параметры
  $.get('/file.php', getParams(), function(res) {
    $("#tab_content1").html(res);
  })

});

Всё

Надеюсь, было понятно