• Страница 3 из 8
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • 7
  • 8
  • »
Форум » Ленточный вариант форума
Новые сообщения
31
Форум: Начало работы с jQuery | Тема: События: что это такое
События форм

submit - запускается либо при щелчке по кнопке Submit, либо по нажатию клавиши Enter при активном текстовом поле.

reset - возвращает страницу к тому состоянию, в котором она была при загрузке.

change - данное событие может запускаться элементами веб-форм при изменении их статуса (выбран пункт меню, нажат переключатель и т.д.)

focus - запускается при переходе к элементу формы с помощью щелчка мыши или клавиши Tab

blur - запускается, когда элемент формы выводится из фокуса клавишей Tab, либо щелчком мыши за пределами элемента.

Цитата
События focus и blur также применимы к ссылкам на странице. Их можно выбирать щелчком мыши и клавишей Tab (focus), либо сойти со ссылки с помощью клавиши Tab или щелчка мышью вне ссылки (blur)

Изменить / Удалить

32
Форум: Начало работы с jQuery | Тема: События: что это такое
События документа/окна

load - запускается после окончания загрузки браузером всех файлов веб-страницы, включая сам html-файл, файлы изображений, внешние файлы стилей, скриптов.

resize - запускается при изменении размера окна браузера

scroll - запускается при использовании полосы прокрутки или клавиатуры(клавиши PageUp, PageDown, Home, End и т.д.), при прокрутке страницы колесом мыши.

unload - запускается при переходе на другую страницу по ссылке, при закрытии окна в браузере или вкладки.

Изменить / Удалить

33
Форум: Начало работы с jQuery | Тема: События: что это такое
События - это все действия посетителя, на которые реагирует страница сайта. Событие представляет собой точный момент, в который что-то происходит. Момент, в который произошло событие, называется запуском события.


События мыши

click - это событие запускается, когда вы нажимаете и отпускаете кнопку мыши (действует также, если вы выбрали ссылку с помощью клавиши Tab клавиатуры и нажали Enter)

dblclick - запускается, когда вы дважды нажимаете и отпускаете кнопку мыши

mousedown - первая часть щелчка, когда вы нажали кнопку мыши, но не отпустили её (удобно для перетаскивания элементов по странице)

mouseup - вторая часть щелчка, когда вы отпускаете кнопку мыши (удобно, когда вы "бросаете" элемент, который перетаскиваете на другое место)

mouseover - запускается, когда вы проводите указателем мыши по элементу страницы

mouseout - запускается, когда вы убираете указатель мыши с элемента страницы

mousemove - запускается, когда вы передвигаете курсор (происходит постоянно)

События наведения и смещения указателя мыши

Весьма полезная функция hover(), принимающая в качестве аргумента две функции, первая выполняется при наведении курсора на элемент, вторая - при смещении курсора с элемента.

Структура функции hover():

Код
('#селектор').hover(функция1, функция2);


Например, есть меню, нужно чтобы при наведении на ссылку меню с идентификатором menu появлялось подменю:

Код
('#menu').hover(
function() {
  $('#submenu').show();
}, /* Окончание события mouseover */
function() {
  $('#submenu').hide();
} /* Окончание события mouseout */
); /* Окончание события hover */


То есть здесь функция hover() в качестве аргумента принимает две анонимные функции.

Изменить / Удалить

34
Форум: Начало работы с jQuery | Тема: Делаем автоматические "броские цитаты" в тексте
Нам нужно добавить в CSS-стили класс .pullQuote, отвечающий за оформление "броских цитат":

Код
.pullQuote {
    float: right;
    clear: right;
    width: 200px;
    padding: 10px;
    font-size: 16px;
    background-color: rgba(255, 211, 224, 0.5);
    border-radius: 5px;
    margin: 20px 0 10px 10px;
    font-style: italic;
}


Ну а теперь, в тексте нужно с помощью тегов span с классом catchyQuotes выделить участки кода, из которых вы хотите сделать "броские цитаты".

Смотрим что у нас получилось в итоге нашей работы.

Изменить / Удалить

35
Форум: Начало работы с jQuery | Тема: Делаем автоматические "броские цитаты" в тексте
Для начала в шапке страницы, сразу после подключенной библиотеки jQuery, добавим еще одну пару тегов script:

Код
<script>
$(document).ready(function() {

}); // конец ready
</script>


Это всего лишь подготовительные действия к написанию программы. Как вы видите, здесь мы передаём функции document.ready() в качестве аргумента анонимную функцию.

делаем выборку, чтобы найти все элементы span с классом catchyQuotes:

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes')
}); // конец ready
</script>


Выборку получили, теперь, чтобы обработать каждый элемент выборки в отдельности, берём функцию each() и передаём ей в качестве аргумента также анонимную функцию:

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes').each(function() {

}); // конец each
}); // конец ready
</script>


Создаём копию элемента span с помощью функции clone(), результат сохраняем в переменную quote:

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes').each(function() {
  var quote = $(this).clone();
}); // конец each
}); // конец ready
</script>


jQuery функция clone() дублирует элемент, включая весь html-код внутри него и присвоенные атрибуты.
Получается, что у нашего клона элемента span также присутствует класс catchyQuotes, он нам теперь не нужен, поэтому мы его удаляем, а добавляем класс pullQuote, отвечающий за оформление "броских цитат"

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes').each(function() {
  var quote = $(this).clone();
  quote.removeClass('catchyQuotes');
  quote.addClass('pullQuote');
}); // конец each
}); // конец ready
</script>


И теперь добавляем элемент span на страницу:

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes').each(function() {
  var quote = $(this).clone();
  quote.removeClass('catchyQuotes');
  quote.addClass('pullQuote');
  $(this).before(quote);
}); // конец each
}); // конец ready
</script>


Код программы готов. Остались некоторые штрихи.

Изменить / Удалить

36
Форум: Начало работы с jQuery | Тема: Делаем автоматические "броские цитаты" в тексте
Наверняка вы не раз видели в периодических журналах такой приём, когда среди общего основного потока текста выделяется наиболее интересный фрагмент.
Обычно, его шрифт отличается от основного, либо сам текст помещается в красивую рамку, чтобы привлечь внимание.

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

Во-первых, для автоматической обработки предварительно договоримся, что "броские цитаты" будут формироваться из фрагментов текста, которые будут заключены в теги span с классом catchyQuotes.

В тексте статьи это будет выглядеть так:

Код
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <span class="catchyQuotes">Lorem Ipsum has been the industry's standard dummy text</span> ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


Соответственно, наша программа должна будет найти все элементы span с классом catchyQuotes

Далее, все найденные элементы span необходимо будет продублировать.

Затем программа должна для каждого элемента span удалить класс catchyQuotes и добавить новый, pullQuotes.

И, наконец, нужно добавить на страницу все продублированные элементы span ("броские цитаты")

Изменить / Удалить

37
Форум: Начало работы с jQuery | Тема: Работа с каждым из элементов выборки
Ключевые слова this и $(this)

Слово this относится к элементу DOM, и позволяет получить доступ к элементу, прорабатываемому в настоящий момент в цикле.
This относится к элементу, вызывающему анонимную функцию. При первом проходе цикла слово this относится к первому элементу выборки, при втором - ко второму и так далее.

Эквивалентом его в jQuery является ключевое слово $(this).

Чтобы разобраться, как использовать ключевое слово $(this), рассмотрим задачу:

1. найти на странице сайта все внешние ссылки

2. получить атрибут href каждой ссылки

3. добавить эти ссылки в список ссылок, используемых на странице

Первым делом определим на странице элемент, в котором мы будем размещать все найденные нами внешние ссылки. Пусть это будет блок div с идентификатором listLinks:

Код
<div id = "listLinks"></div>


Внутри добавим какой-нибудь заголовок для ясности:

Код
<div id = "listLinks">

<h2>Ссылки, используемые на странице:</h2>

</div>


Ну и, конечно же, ссылки лучше хранить списком:

Код
<div id = "listLinks">

<h2>Ссылки, используемые на странице:</h2>

<ul id = "bibliografia"></ul>

</div>


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

Код
$('a[href^="http://"]')


теперь используем функцию each(), запускающую автоматический цикл для каждой ссылки:

Код
$('a[href^="http://"]').each()


добавляем в качестве аргумента для функции each() анонимную функцию:

Код
$('a[href^="http://"]').each(function() {

});


Теперь нам нужно понять, какие действия будет выполнять анонимная функция?

Первым делом, нам нужно вернуть url-адрес каждой ссылки, но так как он у каждой ссылки свой, тут нам и пригодится ключевое слово $(this).
Возвращённый url-адрес будем сохранять в переменную webAdress:

Код
$('a[href^="http://"]').each(function() {

  var webAdress = $(this).attr('href');

});


при каждом проходе цикла в переменной webAdress будет сохраняться новое значение, а $(this) будет относиться к иной ссылке на странице.

Теперь нам остаётся лишь присоединить новый элемент к списку ul в его конец с помощью функции append():

Код
$('a[href^="http://"]').each(function() {

  var webAdress = $(this).attr('href');

  $('bibliografia').append('<li>' + webAdress + '</li>');

});


Что у нас получилось в итоге, можете посмотреть сами.

Изменить / Удалить

38
Форум: Начало работы с jQuery | Тема: Работа с каждым из элементов выборки
Как мы уже знаем, большинство функций jQuery автоматически прорабатывают в цикле каждый элемент выборки.

К примеру, одной строкой кода можно скрыть все элементы img на странице:

Код
$('img').fadeOut();


А что если нужно для каждого в отдельности элемента выборки выполнить определённое действие?

Для этой цели библиотека jQuery предлагает воспользоваться функцией each().
Размещается она после выборки элементов:

Код
$('селектор').each();


Чтобы использовать функцию each(), нужно передать ей в качестве аргумента анонимную функцию, то есть функцию, которой не присваивается имя и её невозможно вызвать.

Анонимная функция будет содержать набор действий, который вы хотите произвести над каждым из элементов выборки.

Базовая структура анонимной функции такова:

Код
function() {
  /* здесь размещается код */
}


далее просто помещаем её в функцию each():

Код
$('селектор').each(function() {
  /* здесь размещается код */
});


Функция each() действует как цикл, поэтому всё что содержится в анонимной функции будет применяться к каждому элементу выборки.

Допустим, на странице сайта размещены 10 изображений. Сделаем выборку и для каждого изображения определим действие - всплывающее окно с текстом: "Найдено изображение!"

Код
$('img').each(function() {
  alert('Найдено изображение!');
});


в результате на странице сайта появится 10 диалоговых окон с сообщением о найденном изображении.

Функция document.ready() также может принимать в качестве аргумента анонимную функцию:

Код
$(document).ready(function() {
  /* здесь код анонимной функции */
});

Изменить / Удалить

39
Форум: Базовое знакомство с jQuery | Тема: Установка и чтение атрибутов элементов
Чтение, установка и удаление атрибутов

В jQuery есть две функции общего применения для работы с атрибутами html:

функция attr() - c её помощью можно считывать указанный атрибут html-элемента. Эта функция возвращает значение атрибута, установленное в html.

Например, можно узнать адрес ссылки на файл изображения, находящийся в каком-то блоке с идентификатором gallery и сохранить его в переменной imageLink:

Код
var imageLink = $('#gallery img').attr('src');


А передав в качестве второго аргумента функции attr() путь к иному изображению, вы замените им изображение существующее, то есть измените свойство src элемента img:

Код
$('#gallery img').attr('src','здесь адрес нового изображения');


Хотите удалить атрибут элемента?

Функция removeAttr() позволяет удалить атрибут элемента. Например, удаляем свойство bgColor элемента body:

Код
$('body').removeAttr('bgColor');

Изменить / Удалить

40
Форум: Базовое знакомство с jQuery | Тема: Установка и чтение атрибутов элементов
Изменение нескольких css-свойств одновременно

Как можно изменить несколько свойств одного элемента? Допустим, так:

Код
$('#main').css('background-color','#FCFCFC');

$('#main').css('border','2px solid #999999');


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

Гораздо более правильный вариант, использовать связывание функций:

Код
$('#main').css('background-color','#FCFCFC').css('border','2px solid #999999');


как видим, в данном случае браузеру нужно будет всего один раз выбрать элемент, после чего дважды выполнить функцию css().

Но, совершенно не обязательно многократно использовать функцию css(), чтобы изменить несколько свойств элемента. Для этого существует другой способ - передать функции css() объектную константу.

Объектная константа (или литерал объекта) - это список пар свойство : значение.
Например:

Код
{
'background-color' : '#FCFCFC',
'border' : '2px solid #999999'
}


для использования объектной константы просто передаём её функции css(). Допустим, нам нужно изменить цвет фона и установить рамку для элемента с идентификатором main:

Код
$('#main').css({
'background-color' : '#FCFCFC',
'border' : '2px solid #999999'
});

Изменить / Удалить

41
Форум: Базовое знакомство с jQuery | Тема: Установка и чтение атрибутов элементов
Изменение css-свойств исходя из текущего значения

В качестве примера: допустим, что на странице сайта есть кнопка, при нажатии на которую размер шрифта увеличивается в два раза.
Как это реализовать?

1. сначала нужно считать текущее значение шрифта на странице

2. полученное значение вернётся в виде строки, поэтому его нужно преобразовать в число

3. умножить полученное значение на 2

А теперь всё это в виде кода:

Код
var baseFont = $('body').css('font-size');

baseFont = parseInt(baseFont);

$('body').css('font-size', baseFont * 2);

Изменить / Удалить

42
Форум: Базовое знакомство с jQuery | Тема: Установка и чтение атрибутов элементов
Чтобы присвоить элементу свойство css, нужно передать функции css() два аргумента: имя css-свойства и его значение.
Например, чтобы увеличить размер шрифта для элемента body до 200% :

Код
$('body').css('font-size','200%');


или, к примеру, чтобы изменить отступ в элементе с классом quoteMessage на 100 пикселов:

Код
$('.quoteMessage').css('padding',100);


При использовании функции css(), вы можете применять сокращённую запись css-свойств, например, чтобы установить чёрную рамку в 1px для всех абзацев с классом news, пишем так:

Код
$('p.news').css('border','1px solid black');

Изменить / Удалить

43
Форум: Базовое знакомство с jQuery | Тема: Установка и чтение атрибутов элементов
Функция css()

С помощью данной функции можно изменять css-свойства элемента: добавить границу, цвет фона, установить ширину, задать расположение и т.д.

Использовать функцию css() можно разными путями:

- для нахождения текущего значения свойства css нужного элемента

- для установления свойства css нужного элемента

- для настройки нескольких свойств css одновременно

Чтобы определить текущее значение какого-либо свойства css, имя этого свойства нужно передать функции css().
Например, чтобы узнать цвет фона блока с идентификатором active:

Код
$('#active').css('background-color');


результат можно сохранить в переменную:

Код
var colorActive = $('#active').css('background-color');

Изменить / Удалить

44
Форум: Базовое знакомство с jQuery | Тема: Установка и чтение атрибутов элементов
Функция-переключатель .toggleClass()

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

Зададим для переключателя идентификатор changeStyle, а переключаемому классу имя altStyle и напишем следующий код:

Код
$('#changeStyle').click(function() {
  $('body').toggleClass('altStyle');
});


Функция .toggleClass() при каждом щелчке либо удаляет, либо добавляет класс altStyle.

На демо-страничке вы можете посмотреть такой переключатель в действии.

Изменить / Удалить

45
Форум: Базовое знакомство с jQuery | Тема: Установка и чтение атрибутов элементов
Функции jQuery для манипулирования с атрибутом класса элемента

Функция .addClass() добавляет элементу конкретный класс. Подключается после выборки jQuery, затем функции передаётся строка, в которой записано имя класса, который нужно добавить элементу.

Например, чтобы всем ссылкам, ведущим за пределы вашего сайта, добавить класс outLink:

Код
$('a[href^ = "http://"]').addClass('outLink');


и тогда, к примеру, ссылка:

Код
<a href="http://site.ru">Перейти на сайт</a>


станет выглядеть так:

Код
<a href="http://site.ru" class="outLink">Перейти на сайт</a>


Функция addClass() не исключает уже имеющегося у элемента класса, а добавляет к нему еще один.


Функция .removeClass() противоположна предыдущей и удаляет указанный ею класс у элемента.

Например, имеем блок div с классом news и идентификатором hotNews:

Код
<div class='news' id='hotNews'>
  /* здесь содержимое блока */
</div>


удалим у этого блока имеющийся класс:

Код
$('#hotNews').removeClass('news');

Изменить / Удалить

  • Страница 3 из 8
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • 7
  • 8
  • »
Поиск: