Сперва вспомним те прекрасные дни и ночи, когда мы учили JavaScript со всеми его достоинствами и недостатками. Одним из минусов его было то, что всё было как-бы с верху в низ. Если припомним один из уроков, когда подсчитывали все картинки, то нам пришлось ставить скрипт в самом конце, дабы сначала их выявил браузер. JQuery решил эту маленькую неприятность, и теперь с помощью следующего кода мы можем не беспокоится, поставив наш скрипт в HTML коде к примеру после тега title:

$(document).ready(function(){ })

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

<h2 id="citata">Человек расширяет Путь, а не Путь расширяет человека.</h2>

дабы схватить этот текст используем метод ".text". Попробуем его немного усложнить и выведем этот текст в модальное окно. Смотрим:

$(document).ready(function(){ var perem = $('#citata').text(); alert(perem);});

Открываем свою страничку и смотрим на всплывающее окно. Создав переменную " perem" мы запросили id заголовка и с помощью метода text взяли его для обработки. Изменить этот текст очень просто, достаточно в пустых скобках texta ввести желаемое предложение. К примеру:

$(document).ready(function(){ var perem = $('#citata').text('Не делай другому того, чего себе не пожелаешь.'); alert(perem);});

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



Рассмотрим методы hide и show, которые позволяют скрывать или открывать объекты. Допустим у нас есть некая картинка. Мы страстно желаем, чтоб после загрузки сайта она через 5 сек исчезла. Сделать это очень просто, достаточно выбрать картинку любым понравившимся способом и методом hide убрать её. Пример:

$(document).ready(function(){ $('img[src*=mafunka.jpg]').hide(5000); });

Теперь картинка под названием mafunka.jpg через 5 секунд исчезнет. 5000 - это время в миллисекундах. Потешив наше самолюбие и вседозволенность мы также повелеваем ей вернуться, задав значение show. Смотрим:

$(document).ready(function(){ $('img[src*=mafunka.jpg]').hide(5000); $('img[src*=mafunka.jpg]').show(5000); });

И теперь у нас картинка медленно исчезает и появляется снова. Зрелище завораживающее, поэтому лучше долго на это не смотреть. Можно немного сократить написание этого кода, поместив картинку в переменную и уже играться ею как захотим:

$(document).ready(function(){ var karta = $('img[src*=mafunka.jpg]'); karta.hide(5000).show(5000); });

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

Предыдущий урок.

Следующий урок.

Урок подготовил: Egro_proxi

---